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,117 @@
+import {
+  composeStory as originalComposeStory,
+  composeStories as originalComposeStories,
+  setGlobalConfig as originalSetGlobalConfig,
+  CSFExports,
+  ComposedStory,
+  StoriesWithPartialProps,
+} from '@storybook/store';
+import { ProjectAnnotations, Args } from '@storybook/csf';
+
+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 { setGlobalConfig } from '@storybook/react';
+ * import * as projectAnnotations from './.storybook/preview';
+ *
+ * setGlobalConfig(projectAnnotations);
+ *```
+ *
+ * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
+ */
+export function setGlobalConfig(
+  projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]
+) {
+  originalSetGlobalConfig(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 `setGlobalConfig` 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 `setGlobalConfig` 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/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": [
@@ -26,7 +26,8 @@
     "@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",
@@ -38,8 +39,11 @@
     "@storybook/addon-ie11": "0.0.7--canary.5e87b64.0",
     "@storybook/addons": "6.5.0-alpha.51",
     "@storybook/builder-webpack4": "6.5.0-alpha.51",
+    "@storybook/components": "6.5.0-alpha.51",
     "@storybook/preset-create-react-app": "^3.1.6",
     "@storybook/react": "6.5.0-alpha.51",
+    "@storybook/testing-library": "^0.0.9",
+    "@storybook/theming": "6.5.0-alpha.51",
     "webpack": "4"
   },
   "storybook": {

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

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

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

@@ -0,0 +1,109 @@
+/* eslint-disable storybook/await-interactions */
+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>;
+
+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'));
+  },
+};
+
+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'));
+  },
+};
+
+const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+
+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'));
+  },
+};
+
+export const StandardWithRenderFunction: Story = {
+  ...Standard,
+  render: (args: AccountFormProps) => (
+    <div>
+      <p>This uses a custom render</p>
+      <AccountForm {...args} />
+    </div>
+  ),
+};

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { composeStories, composeStory } from '@storybook/react';
+
+import * as stories from './AccountForm.stories';
+
+const { Standard } = composeStories(stories);
+
+test('renders form', async () => {
+  await render(<Standard />);
+  expect(screen.getByTestId('email')).not.toBe(null);
+});
+
+test('fills input from play function', async () => {
+  const StandardEmailFilled = composeStory(stories.StandardEmailFilled, stories.default);
+  const { container } = await render(<StandardEmailFilled />);
+
+  await StandardEmailFilled.play({ canvasElement: container });
+
+  const emailInput = screen.getByTestId('email') as HTMLInputElement;
+  expect(emailInput.value).toBe('michael@chromatic.com');
+});