diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 7effb0af815e..0deef4e4339c 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -78,6 +78,7 @@ "@storybook/preview-api": "7.1.0-alpha.25", "@storybook/theming": "7.1.0-alpha.25", "react-resize-detector": "^7.1.2", + "tiny-invariant": "^1.3.1", "upath": "^1.2.0" }, "devDependencies": { diff --git a/code/addons/jest/src/components/Message.tsx b/code/addons/jest/src/components/Message.tsx index 507e1c7c3c21..96aa5ed30262 100644 --- a/code/addons/jest/src/components/Message.tsx +++ b/code/addons/jest/src/components/Message.tsx @@ -15,11 +15,11 @@ const titleEndToken = ':'; type MsgElement = string | JSX.Element; class TestDetail { - description: MsgElement[]; + description!: MsgElement[]; - result: MsgElement[]; + result!: MsgElement[]; - stackTrace: string; + stackTrace!: string; } const StackTrace = styled.pre(({ theme }) => ({ background: theme.color.lighter, diff --git a/code/addons/jest/src/components/Panel.tsx b/code/addons/jest/src/components/Panel.tsx index ce7ee16c70f8..ad7046f1a02f 100644 --- a/code/addons/jest/src/components/Panel.tsx +++ b/code/addons/jest/src/components/Panel.tsx @@ -75,7 +75,7 @@ const SuiteTotals = styled(UnstyledSuiteTotals)(({ theme }) => ({ }, })); -const SuiteProgressPortion = styled.div<{ color: any; progressPercent: number }>( +const SuiteProgressPortion = styled.div<{ color?: string; progressPercent: number }>( ({ color, progressPercent }) => ({ height: 6, top: 3, @@ -114,7 +114,7 @@ const getColorByType = (type: string) => { case StatusTypes.TODO_TYPE: return convert(themes.light).color.purple; default: - return null; + return undefined; } }; @@ -132,8 +132,8 @@ const TestPanel: FC<{ test: Test }> = ({ test }) => { return (
- - {width > 240 ? ( + + {width != null && width > 240 ? ( {sortedTestsByCount.map((entry: any) => { return ( @@ -261,7 +261,7 @@ const Content = styled(({ tests, className }: ContentProps) => ( }); interface PanelProps { - tests: null | Test[]; + tests?: Test[]; } const Panel = ({ tests }: PanelProps) => ( @@ -287,7 +287,7 @@ const Panel = ({ tests }: PanelProps) => ( ); Panel.defaultProps = { - tests: null, + tests: undefined, }; export default provideJestResult(Panel); diff --git a/code/addons/jest/src/components/Result.tsx b/code/addons/jest/src/components/Result.tsx index c40d15b522d7..3c545cb4bd3f 100644 --- a/code/addons/jest/src/components/Result.tsx +++ b/code/addons/jest/src/components/Result.tsx @@ -1,6 +1,7 @@ import React, { Fragment, useState } from 'react'; import { styled, themes, convert } from '@storybook/theming'; import { Icons } from '@storybook/components'; +// eslint-disable-next-line import/no-named-as-default import Message from './Message'; const Wrapper = styled.div<{ status: string }>(({ theme, status }) => ({ @@ -8,7 +9,7 @@ const Wrapper = styled.div<{ status: string }>(({ theme, status }) => ({ width: '100%', borderTop: `1px solid ${theme.appBorderColor}`, '&:hover': { - background: status === `failed` ? theme.background.hoverable : null, + background: status === `failed` ? theme.background.hoverable : undefined, }, })); @@ -18,7 +19,7 @@ const HeaderBar = styled.div<{ status: string }>(({ theme, status }) => ({ background: 'none', color: 'inherit', textAlign: 'left', - cursor: status === `failed` ? 'pointer' : null, + cursor: status === `failed` ? 'pointer' : undefined, borderLeft: '3px solid transparent', width: '100%', display: 'flex', @@ -72,7 +73,7 @@ export function Result(props: ResultProps) { }} /> ) : null} -
{capitalizeFirstLetter(fullName) || capitalizeFirstLetter(title)}
+
{capitalizeFirstLetter(fullName ?? '') || capitalizeFirstLetter(title ?? '')}
{isOpen ? ( diff --git a/code/addons/jest/src/hoc/provideJestResult.tsx b/code/addons/jest/src/hoc/provideJestResult.tsx index d1cad23b25fc..6bd4194a1839 100644 --- a/code/addons/jest/src/hoc/provideJestResult.tsx +++ b/code/addons/jest/src/hoc/provideJestResult.tsx @@ -71,9 +71,9 @@ export const provideTests = (Component: ComponentType) => this.setState({ kind, storyName, tests }); }; - mounted: boolean; + mounted!: boolean; - stopListeningOnStory: () => void; + stopListeningOnStory!: () => void; render() { const { active } = this.props; diff --git a/code/addons/jest/src/shared.ts b/code/addons/jest/src/shared.ts index ef078b7af8a8..a8714dc2d3d0 100644 --- a/code/addons/jest/src/shared.ts +++ b/code/addons/jest/src/shared.ts @@ -1,3 +1,4 @@ +import invariant from 'tiny-invariant'; import type { StorybookInternalParameters } from '@storybook/types'; // addons, panels and events get unique names using a prefix @@ -23,7 +24,9 @@ export function defineJestParameter(parameters: AddonParameters): string[] | nul } if (jest === undefined && typeof filePath === 'string') { - const fileName = filePath.split('/').pop().split('.')[0]; + const lastPath = filePath.split('/').pop(); + invariant(lastPath != null, 'split should always return at least one value'); + const fileName = lastPath.split('.')[0]; return [fileName]; } diff --git a/code/addons/jest/tsconfig.json b/code/addons/jest/tsconfig.json index a7d41e8a79b5..a4429176e35f 100644 --- a/code/addons/jest/tsconfig.json +++ b/code/addons/jest/tsconfig.json @@ -1,7 +1,7 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "strict": false + "strict": true }, "include": ["src/**/*"] } diff --git a/code/yarn.lock b/code/yarn.lock index fb2c85cc500b..38ecb9d750d0 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5492,6 +5492,7 @@ __metadata: "@storybook/preview-api": 7.1.0-alpha.25 "@storybook/theming": 7.1.0-alpha.25 react-resize-detector: ^7.1.2 + tiny-invariant: ^1.3.1 typescript: ~4.9.3 upath: ^1.2.0 peerDependencies: