Merge pull request #22389 from Gufah/next

Build: Migrate @storybook/addon-jest to strict TS
storybookjs · May 31, 2023 · 792466d · 792466d
2 parents 934a868 + 273ec78
commit 792466d
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 16 deletions.
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
@@ -78,6 +78,7 @@
     "@storybook/preview-api": "7.1.0-alpha.26",
     "@storybook/theming": "7.1.0-alpha.26",
     "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
@@ -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
@@ -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 (
     <section ref={ref}>
       <SuiteHead>
-        <SuiteTotals {...{ result, width }} />
-        {width > 240 ? (
+        <SuiteTotals {...{ result, width: width ?? 0 }} />
+        {width != null && width > 240 ? (
           <ProgressWrapper>
             {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
@@ -1,14 +1,15 @@
 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 }) => ({
   display: 'flex',
   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}
-          <div>{capitalizeFirstLetter(fullName) || capitalizeFirstLetter(title)}</div>
+          <div>{capitalizeFirstLetter(fullName ?? '') || capitalizeFirstLetter(title ?? '')}</div>
         </HeaderBar>
       </Wrapper>
       {isOpen ? (

diff --git 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<InjectedProps>) =>
       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
@@ -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
@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "strict": false
+    "strict": true
   },
   "include": ["src/**/*"]
 }
diff --git a/code/yarn.lock b/code/yarn.lock
@@ -5492,6 +5492,7 @@ __metadata:
     "@storybook/preview-api": 7.1.0-alpha.26
     "@storybook/theming": 7.1.0-alpha.26
     react-resize-detector: ^7.1.2
+    tiny-invariant: ^1.3.1
     typescript: ~4.9.3
     upath: ^1.2.0
   peerDependencies: