Core/React: Add testing utilities

app/react/src/client/index.ts

@@ -9,6 +9,7 @@ export {
   raw,
   forceReRender,
 } from './preview';
+export * from './testing';
 
 export * from './preview/types-6-3';
 

app/react/src/client/testing/index.ts

@@ -0,0 +1,129 @@
+import {
+  composeStory as originalComposeStory,
+  composeStories as originalComposeStories,
+  setProjectAnnotations as originalSetProjectAnnotations,
+  CSFExports,
+  ComposedStory,
+  StoriesWithPartialProps,
+} from '@storybook/store';
+import { ProjectAnnotations, Args } from '@storybook/csf';
+import { once } from '@storybook/client-logger';
+
+import { render } from '../preview/render';
+import type { Meta, ReactFramework } from '../preview/types-6-0';
+
+/** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *```jsx
+ * // setup.js (for jest)
+ * import { setProjectAnnotations } from '@storybook/react';
+ * import * as projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ *```
+ *
+ * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
+ */
+export function setProjectAnnotations(
+  projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]
+) {
+  originalSetProjectAnnotations(projectAnnotations);
+}
+
+/** Preserved for users migrating from `@storybook/testing-react`.
+ *
+ * @deprecated Use setProjectAnnotations instead
+ */
+export function setGlobalConfig(
+  projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]
+) {
+  once.warn(`setGlobalConfig is deprecated. Use setProjectAnnotations instead.`);
+  setProjectAnnotations(projectAnnotations);
+}
+
+// This will not be necessary once we have auto preset loading
+const defaultProjectAnnotations: ProjectAnnotations<ReactFramework> = {
+  render,
+};
+
+/**
+ * Function that will receive a story along with meta (e.g. a default export from a .stories file)
+ * and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
+ * and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing a story in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStory } from '@storybook/react';
+ * import Meta, { Primary as PrimaryStory } from './Button.stories';
+ *
+ * const Primary = composeStory(PrimaryStory, Meta);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param story
+ * @param componentAnnotations - e.g. (import Meta from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
+ */
+export function composeStory<TArgs = Args>(
+  story: ComposedStory<ReactFramework, TArgs>,
+  componentAnnotations: Meta<TArgs | any>,
+  projectAnnotations?: ProjectAnnotations<ReactFramework>,
+  exportsName?: string
+) {
+  return originalComposeStory<ReactFramework, TArgs>(
+    story,
+    componentAnnotations,
+    projectAnnotations,
+    defaultProjectAnnotations,
+    exportsName
+  );
+}
+
+/**
+ * Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
+ * and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
+ * and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
+ *
+ *
+ * It's very useful for reusing stories in scenarios outside of Storybook like unit testing.
+ *
+ * Example:
+ *```jsx
+ * import { render } from '@testing-library/react';
+ * import { composeStories } from '@storybook/react';
+ * import * as stories from './Button.stories';
+ *
+ * const { Primary, Secondary } = composeStories(stories);
+ *
+ * test('renders primary button with Hello World', () => {
+ *   const { getByText } = render(<Primary>Hello world</Primary>);
+ *   expect(getByText(/Hello world/i)).not.toBeNull();
+ * });
+ *```
+ *
+ * @param csfExports - e.g. (import * as stories from './Button.stories')
+ * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
+ */
+export function composeStories<TModule extends CSFExports<ReactFramework>>(
+  csfExports: TModule,
+  projectAnnotations?: ProjectAnnotations<ReactFramework>
+) {
+  const composedStories = originalComposeStories(csfExports, projectAnnotations, composeStory);
+
+  return composedStories as unknown as Omit<
+    StoriesWithPartialProps<ReactFramework, TModule>,
+    keyof CSFExports
+  >;
+}

examples/cra-ts-essentials/.storybook/main.js → examples/cra-ts-essentials/.storybook/main.ts

@@ -1,6 +1,8 @@
+import type { StorybookConfig } from '@storybook/react/types';
+
 const path = require('path');
 
-module.exports = {
+const mainConfig: StorybookConfig = {
   stories: ['../src/**/*.stories.@(tsx|mdx)'],
   addons: [
     '@storybook/preset-create-react-app',
@@ -13,9 +15,9 @@ module.exports = {
     },
   ],
   logLevel: 'debug',
-  webpackFinal: (config) => {
+  webpackFinal: async (config) => {
     // add monorepo root as a valid directory to import modules from
-    config.resolve.plugins.forEach((p) => {
+    config.resolve?.plugins?.forEach((p: any) => {
       if (Array.isArray(p.appSrcs)) {
         p.appSrcs.push(path.join(__dirname, '..', '..', '..'));
       }
@@ -30,3 +32,5 @@ module.exports = {
     buildStoriesJson: true,
   },
 };
+
+module.exports = mainConfig;

examples/cra-ts-essentials/.storybook/preview.js → examples/cra-ts-essentials/.storybook/preview.tsx

@@ -1,14 +1,25 @@
 import React from 'react';
+import type { DecoratorFn } from '@storybook/react';
+import { ThemeProvider, convert, themes } from '@storybook/theming';
 
-export const decorators = [
-  (StoryFn, { globals: { locale = 'en' } }) => (
+export const decorators: DecoratorFn[] = [
+  (StoryFn, { globals: { locale } }) => (
     <>
-      <div>{locale}</div>
+      <div>Locale: {locale}</div>
       <StoryFn />
     </>
   ),
+  (StoryFn) => (
+    <ThemeProvider theme={convert(themes.light)}>
+      <StoryFn />
+    </ThemeProvider>
+  ),
 ];
 
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+};
+
 export const globalTypes = {
   locale: {
     name: 'Locale',

examples/cra-ts-essentials/package.json

@@ -8,7 +8,7 @@
     "eject": "react-scripts eject",
     "start": "react-scripts start",
     "storybook": "start-storybook -p 9009 --no-manager-cache",
-    "test": "react-scripts test"
+    "test": "SKIP_PREFLIGHT_CHECK=true react-scripts test"
   },
   "browserslist": {
     "production": [
@@ -23,10 +23,13 @@
     ]
   },
   "dependencies": {
+    "@storybook/components": "6.5.0-alpha.51",
+    "@storybook/theming": "6.5.0-alpha.51",
     "@types/jest": "^26.0.16",
     "@types/node": "^14.14.20 || ^16.0.0",
     "@types/react": "^16.14.23",
-    "@types/react-dom": "^16.9.14",
+    "@types/react-dom": "16.9.14",
+    "formik": "2.2.9",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
@@ -40,6 +43,7 @@
     "@storybook/builder-webpack4": "6.5.0-alpha.52",
     "@storybook/preset-create-react-app": "^3.1.6",
     "@storybook/react": "6.5.0-alpha.52",
+    "@storybook/testing-library": "^0.0.9",
     "webpack": "4"
   },
   "storybook": {

examples/cra-ts-essentials/src/setupTests.ts

@@ -0,0 +1,4 @@
+import { setProjectAnnotations } from '@storybook/react';
+import * as projectAnnotations from '../.storybook/preview';
+
+setProjectAnnotations(projectAnnotations);

examples/cra-ts-essentials/src/stories/0-Welcome.stories.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '@storybook/react/demo';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
 export default {
   title: 'Welcome',
   component: Welcome,
-};
+} as ComponentMeta<typeof Welcome>;
 
-export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook: ComponentStory<typeof Welcome> = () => (
+  <Welcome showApp={linkTo('Button')} />
+);
 
 ToStorybook.storyName = 'to Storybook';

examples/cra-ts-essentials/src/stories/1-Button.stories.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Button } from '@storybook/react/demo';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
 
 export default {
   title: 'Button',
   component: Button,
   argTypes: { onClick: { action: 'clicked' } },
-};
+} as ComponentMeta<typeof Button>;
 
-const Template = (args: any) => <Button {...args} />;
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 
 export const Text = Template.bind({});
 Text.args = {

examples/cra-ts-essentials/src/stories/testing-react/components/AccountForm.stories.tsx

@@ -0,0 +1,119 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import React from 'react';
+import type { ComponentMeta, ComponentStoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { AccountForm, AccountFormProps } from './AccountForm';
+
+export default {
+  title: 'CSF3/AccountForm',
+  component: AccountForm,
+  parameters: {
+    layout: 'centered',
+  },
+} as ComponentMeta<typeof AccountForm>;
+
+type Story = ComponentStoryObj<typeof AccountForm>;
+
+const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+
+export const Standard: Story = {
+  args: { passwordVerification: false },
+};
+
+export const StandardEmailFilled: Story = {
+  ...Standard,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com');
+  },
+};
+
+export const StandardEmailFailed: Story = {
+  ...Standard,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('email'), 'michael@chromatic.com.com@com');
+    await userEvent.type(canvas.getByTestId('password1'), 'testpasswordthatwontfail');
+    await userEvent.click(canvas.getByTestId('submit'));
+  },
+};
+
+export const StandardPasswordFailed: Story = {
+  ...Standard,
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    await StandardEmailFilled.play!(context);
+    await userEvent.type(canvas.getByTestId('password1'), 'asdf');
+    await userEvent.click(canvas.getByTestId('submit'));
+  },
+};
+
+export const StandardFailHover: Story = {
+  ...StandardPasswordFailed,
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    await StandardPasswordFailed.play!(context);
+    await sleep(100);
+    await userEvent.hover(canvas.getByTestId('password-error-info'));
+  },
+};
+StandardFailHover.parameters = {
+  // IE fails with userEvent.hover
+  chromatic: { disableSnapshot: true },
+};
+
+export const Verification: Story = {
+  args: { passwordVerification: true },
+};
+
+export const VerificationPasssword1: Story = {
+  ...Verification,
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    await StandardEmailFilled.play!(context);
+    await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
+    await userEvent.click(canvas.getByTestId('submit'));
+  },
+};
+
+export const VerificationPasswordMismatch: Story = {
+  ...Verification,
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    await StandardEmailFilled.play!(context);
+    await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf');
+    await userEvent.type(canvas.getByTestId('password2'), 'asdf1234');
+    await userEvent.click(canvas.getByTestId('submit'));
+  },
+};
+
+export const VerificationSuccess: Story = {
+  ...Verification,
+  play: async (context) => {
+    const canvas = within(context.canvasElement);
+    await StandardEmailFilled.play!(context);
+    await sleep(1000);
+    await userEvent.type(canvas.getByTestId('password1'), 'asdfasdf', { delay: 50 });
+    await sleep(1000);
+    await userEvent.type(canvas.getByTestId('password2'), 'asdfasdf', { delay: 50 });
+    await sleep(1000);
+    await userEvent.click(canvas.getByTestId('submit'));
+  },
+};
+// IE fails with this interaction
+VerificationSuccess.parameters = {
+  chromatic: {
+    disableSnapshot: true,
+  },
+};
+
+export const StandardWithRenderFunction: Story = {
+  ...Standard,
+  render: (args: AccountFormProps) => (
+    <div>
+      <p>This uses a custom render</p>
+      <AccountForm {...args} />
+    </div>
+  ),
+};