Merge pull request #18582 from storybookjs/chore/upgrade-testing-lib-…

…examples

chore: upgrade @storybook/jest in examples

addons/interactions/package.json

@@ -58,7 +58,7 @@
     "ts-dedent": "^2.2.0"
   },
   "devDependencies": {
-    "@storybook/jest": "^0.0.5",
+    "@storybook/jest": "^0.0.10",
     "@storybook/testing-library": "0.0.14-next.0",
     "formik": "^2.2.9"
   },

addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx

@@ -80,7 +80,7 @@ WaitForElementToBeRemoved.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await waitForElementToBeRemoved(await canvas.findByText('Loading...'), { timeout: 2000 });
   const button = await canvas.findByText('Loaded!');
-  await expect(button).not.toBeNull();
+  await expect(button).toBeInTheDocument();
 };
 
 export const WithLoaders: CSF2Story = (args, { loaded: { todo } }) => {

addons/interactions/src/components/Interaction/Interaction.stories.tsx

@@ -62,6 +62,6 @@ export const Hovered: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await userEvent.hover(canvas.getByRole('button'));
-    await expect(canvas.getByTestId('icon-active')).not.toBeNull();
+    await expect(canvas.getByTestId('icon-active')).toBeInTheDocument();
   },
 };

examples/angular-cli/.storybook/tsconfig.json

@@ -6,5 +6,10 @@
   ],
   "include": [
     "../src/**/*"
-  ]
-}
+  ],
+  "compilerOptions": {
+    "types": [
+      "@testing-library/jest-dom"
+    ]
+  }
+}

examples/angular-cli/package.json

@@ -52,7 +52,7 @@
     "@storybook/addons": "6.5.0-rc.1",
     "@storybook/angular": "6.5.0-rc.1",
     "@storybook/babel-plugin-require-context-hook": "1.0.1",
-    "@storybook/jest": "^0.0.5",
+    "@storybook/jest": "^0.0.10",
     "@storybook/source-loader": "6.5.0-rc.1",
     "@storybook/testing-library": "0.0.14-next.0",
     "@types/core-js": "^2.5.4",

examples/angular-cli/src/stories/__snapshots__/welcome-storybook.stories.storyshot

@@ -3,98 +3,98 @@
 exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
 <storybook-wrapper>
   <storybook-welcome-component
-    _nghost-a-c45=""
+    _nghost-a-c44=""
   >
     <main
-      _ngcontent-a-c45=""
+      _ngcontent-a-c44=""
     >
       <h1
-        _ngcontent-a-c45=""
+        _ngcontent-a-c44=""
       >
         Welcome to storybook
       </h1>
       <p
-        _ngcontent-a-c45=""
+        _ngcontent-a-c44=""
       >
         This is a UI component dev environment for your app.
       </p>
       <p
-        _ngcontent-a-c45=""
+        _ngcontent-a-c44=""
       >
          We've added some basic stories inside the 
         <span
-          _ngcontent-a-c45=""
+          _ngcontent-a-c44=""
           class="inline-code"
         >
           src/stories
         </span>
          directory. 
         <br
-          _ngcontent-a-c45=""
+          _ngcontent-a-c44=""
         />
          A story is a single state of one or more UI components. You can have as many stories as you want. 
         <br
-          _ngcontent-a-c45=""
+          _ngcontent-a-c44=""
         />
          (Basically a story is like a visual test case.) 
       </p>
       <p
-        _ngcontent-a-c45=""
+        _ngcontent-a-c44=""
       >
          See these sample 
         <a
-          _ngcontent-a-c45=""
+          _ngcontent-a-c44=""
           role="button"
           tabindex="0"
         >
           stories
         </a>
          for a component called 
         <span
-          _ngcontent-a-c45=""
+          _ngcontent-a-c44=""
           class="inline-code"
         >
           Button
         </span>
          . 
       </p>
       <p
-        _ngcontent-a-c45=""
+        _ngcontent-a-c44=""
       >
          Just like that, you can add your own components as stories. 
         <br
-          _ngcontent-a-c45=""
+          _ngcontent-a-c44=""
         />
          You can also edit those components and see changes right away. 
         <br
-          _ngcontent-a-c45=""
+          _ngcontent-a-c44=""
         />
          (Try editing the 
         <span
-          _ngcontent-a-c45=""
+          _ngcontent-a-c44=""
           class="inline-code"
         >
           Button
         </span>
          stories located at 
         <span
-          _ngcontent-a-c45=""
+          _ngcontent-a-c44=""
           class="inline-code"
         >
           src/stories/index.js
         </span>
         .) 
       </p>
       <p
-        _ngcontent-a-c45=""
+        _ngcontent-a-c44=""
       >
          Usually we create stories with smaller UI components in the app.
         <br
-          _ngcontent-a-c45=""
+          _ngcontent-a-c44=""
         />
          Have a look at the 
         <a
-          _ngcontent-a-c45=""
+          _ngcontent-a-c44=""
           href="https://storybook.js.org/basics/writing-stories"
           rel="noopener noreferrer"
           target="_blank"
@@ -104,20 +104,20 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
          section in our documentation. 
       </p>
       <p
-        _ngcontent-a-c45=""
+        _ngcontent-a-c44=""
         class="note"
       >
         <b
-          _ngcontent-a-c45=""
+          _ngcontent-a-c44=""
         >
           NOTE:
         </b>
         <br
-          _ngcontent-a-c45=""
+          _ngcontent-a-c44=""
         />
          Have a look at the 
         <span
-          _ngcontent-a-c45=""
+          _ngcontent-a-c44=""
           class="inline-code"
         >
           .storybook/webpack.config.js

examples/angular-cli/src/stories/addons/actions/__snapshots__/addon-actions.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Actions Component Output with ArgsTypes 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c47=""
+    _nghost-a-c46=""
     ng-reflect-text="Button 🥁"
   >
     <button
-      _ngcontent-a-c47=""
+      _ngcontent-a-c46=""
     >
       Button 🥁
     </button>
@@ -18,11 +18,11 @@ exports[`Storyshots Addons/Actions Component Output with ArgsTypes 1`] = `
 exports[`Storyshots Addons/Actions Component Output with EventEmitter 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c47=""
+    _nghost-a-c46=""
     ng-reflect-text="Button 🥁"
   >
     <button
-      _ngcontent-a-c47=""
+      _ngcontent-a-c46=""
     >
       Button 🥁
     </button>
@@ -41,11 +41,11 @@ exports[`Storyshots Addons/Actions Story with template 1`] = `
 exports[`Storyshots Addons/Actions Use action in method 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c47=""
+    _nghost-a-c46=""
     ng-reflect-text="Button 🥁"
   >
     <button
-      _ngcontent-a-c47=""
+      _ngcontent-a-c46=""
     >
       Button 🥁
     </button>

examples/angular-cli/src/stories/addons/backgrounds/__snapshots__/addon-background.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons / Backgrounds Overridden 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c47=""
+    _nghost-a-c46=""
     ng-reflect-text="This one should have different"
   >
     <button
-      _ngcontent-a-c47=""
+      _ngcontent-a-c46=""
     >
       This one should have different backgrounds
     </button>
@@ -18,11 +18,11 @@ exports[`Storyshots Addons / Backgrounds Overridden 1`] = `
 exports[`Storyshots Addons / Backgrounds With Component 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c47=""
+    _nghost-a-c46=""
     ng-reflect-text="Button"
   >
     <button
-      _ngcontent-a-c47=""
+      _ngcontent-a-c46=""
     >
       Button
     </button>
@@ -33,11 +33,11 @@ exports[`Storyshots Addons / Backgrounds With Component 1`] = `
 exports[`Storyshots Addons / Backgrounds With Template 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c47=""
+    _nghost-a-c46=""
     ng-reflect-text="Button"
   >
     <button
-      _ngcontent-a-c47=""
+      _ngcontent-a-c46=""
     >
       Button
     </button>

examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs with some emoji 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c47=""
+    _nghost-a-c46=""
     ng-reflect-text="😀 😎 👍 💯"
   >
     <button
-      _ngcontent-a-c47=""
+      _ngcontent-a-c46=""
     >
       😀 😎 👍 💯
     </button>
@@ -18,11 +18,11 @@ exports[`Storyshots Addons/Docs with some emoji 1`] = `
 exports[`Storyshots Addons/Docs with text 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c47=""
+    _nghost-a-c46=""
     ng-reflect-text="hello button"
   >
     <button
-      _ngcontent-a-c47=""
+      _ngcontent-a-c46=""
     >
       hello button
     </button>

examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs/SimpleButton with text 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c47=""
+    _nghost-a-c46=""
     ng-reflect-text="Hello 👋"
   >
     <button
-      _ngcontent-a-c47=""
+      _ngcontent-a-c46=""
     >
       Hello 👋
     </button>

examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs/Iframe Basic 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c47=""
+    _nghost-a-c46=""
     ng-reflect-text="Add 👾"
   >
     <button
-      _ngcontent-a-c47=""
+      _ngcontent-a-c46=""
     >
       Add 👾
     </button>

examples/angular-cli/src/stories/addons/interactions/addon-interactions.stories.ts

@@ -71,7 +71,7 @@ Submitted.play = async (context) => {
       canvas.getByRole('heading', {
         name: /you submitted the following:/i,
       })
-    ).not.toBeNull();
+    ).toBeInTheDocument();
     await expect(canvas.getByTestId('hero-name').textContent).toEqual('Storm');
     await expect(canvas.getByTestId('hero-alterego').textContent).toEqual('Ororo Munroe');
     await expect(canvas.getByTestId('hero-power').textContent).toEqual('Weather Changer');
@@ -98,7 +98,7 @@ SubmittedAndEditedAfter.play = async (context) => {
       canvas.getByRole('heading', {
         name: /you submitted the following:/i,
       })
-    ).not.toBeNull();
+    ).toBeInTheDocument();
     // new value
     await expect(canvas.getByTestId('hero-name').textContent).toEqual('Wakanda Queen');
 

examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Links button with link to another story 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c47=""
+    _nghost-a-c46=""
     ng-reflect-text="Go to Welcome Story"
   >
     <button
-      _ngcontent-a-c47=""
+      _ngcontent-a-c46=""
     >
       Go to Welcome Story
     </button>

examples/angular-cli/src/stories/core/parameters/__snapshots__/all-parameters.stories.storyshot

@@ -3,13 +3,13 @@
 exports[`Storyshots Core / Parameters / All parameters All parameters passed to story 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c47=""
+    _nghost-a-c46=""
     ng-reflect-text="Parameters are {
     \\"docs\\": {
    "
   >
     <button
-      _ngcontent-a-c47=""
+      _ngcontent-a-c46=""
     >
       Parameters are {
     "docs": {