@khanacademy/wonder-blocks-testing 7.0.0 → 7.0.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/wonder-blocks-testing
 
+## 7.0.3
+
+### Patch Changes
+
+-   Updated dependencies [dc2e00f4]
+    -   @khanacademy/wonder-blocks-data@8.0.4
+
+## 7.0.2
+
+### Patch Changes
+
+-   aa7993a8: Make sure wrapper component is used when provided
+
+## 7.0.1
+
+### Patch Changes
+
+-   79a3bc8e: Export more types for the fixtures framework
+
 ## 7.0.0
 
 ### Major Changes

package/dist/es/index.js

@@ -17,12 +17,13 @@ const fixtures = Component => {
 
     const getProps = options => typeof props === "function" ? props(options) : props;
 
-    let Template = templateMap.get(Component);
+    const RealComponent = wrapper || Component;
+    let Template = templateMap.get(RealComponent);
 
     if (Template == null) {
-      Template = args => React.createElement(Component, args);
+      Template = args => React.createElement(RealComponent, args);
 
-      templateMap.set(Component, Template);
+      templateMap.set(RealComponent, Template);
     }
 
     const story = Template.bind({});

package/dist/index.js

@@ -719,20 +719,21 @@ const fixtures = Component => {
   const makeStory = (description, props, wrapper = null) => {
     const storyName = `${storyNumber++} ${description}`;
 
-    const getProps = options => typeof props === "function" ? props(options) : props; // We create a “template” of how args map to rendering
+    const getProps = options => typeof props === "function" ? props(options) : props;
+
+    const RealComponent = wrapper || Component; // We create a “template” of how args map to rendering
     // for each type of component as the component here could
     // be the component under test, or wrapped in a wrapper
     // component. We don't use decorators for the wrapper
     // because we may not be in a storybook context and it
     // keeps the framework API simpler this way.
 
-
-    let Template = templateMap.get(Component);
+    let Template = templateMap.get(RealComponent);
 
     if (Template == null) {
-      Template = args => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](Component, args);
+      Template = args => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](RealComponent, args);
 
-      templateMap.set(Component, Template);
+      templateMap.set(RealComponent, Template);
     } // Each story that shares that component then reuses that
     // template.
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@khanacademy/wonder-blocks-testing",
-    "version": "7.0.0",
+    "version": "7.0.3",
     "design": "v1",
     "publishConfig": {
         "access": "public"
@@ -14,7 +14,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.18.6",
-        "@khanacademy/wonder-blocks-data": "^8.0.3"
+        "@khanacademy/wonder-blocks-data": "^8.0.4"
     },
     "peerDependencies": {
         "@khanacademy/wonder-stuff-core": "^0.1.2",

package/src/__docs__/exports.fixtures.stories.mdx

@@ -21,19 +21,11 @@ fixtures<
     TProps: React.ElementConfig<TComponent>,
 >(
     Component: TComponent,
-): (
-    description: string,
-    props: FixtureProps<TProps>,
-    wrapper?: React.ComponentType<TProps>,
-) => void;
+): FixtureFn<TProps>;
 ```
 
 The `fixtures()` method is used to define a set of fixtures for a component. Each fixture is a story compatible with the CSF format used by Storybook.
 
 The method returned by `fixtures(Component)` is a strongly-typed call for generating a named story with the given args, and using the given wrapper component, if provided. See [our Fixtures Framework example stories](/docs/testing-fixtures-basic--f-1) for examples.
 
-The `fixture` function takes two or three arguments:
-
-- `description: string`: A string describing the fixture. This should be used to explain what the fixture is expected to show.
-- `props: FixtureProps<TProps>`: The props that the fixture should be rendered with. This can be either a plain object, or a function that returns a plain object. The function will be called with an API to assist in generating the props (see [`GetPropsOptions`](/docs/testing-fixtures-types-getpropsoptions--page)).
-- `wrapper?: React.ComponentType<TProps>`: An optional component that will be rendered around the fixture. This can be used to wrap the fixture in a component that adds additional functionality, such as a test harness (see [`makeTestHarness`](/docs/testing-test-harness-exports-maketestharness--page)).
+The returned `fixture` function is of type [`FixtureFn<TProps>`](/docs/testing-fixtures-types-fixturefn--page).

package/src/__docs__/types.fixture-fn.stories.mdx

@@ -0,0 +1,46 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Testing / Fixtures / Types / FixtureFn"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# FixtureFn
+
+```ts
+/**
+ * A function for defining a fixture.
+ */
+type FixtureFn<TProps: {...}> = (
+    /**
+     * The name of the fixture.
+     */
+    description: string,
+
+    /**
+     * The props for the fixture or a function that returns the props.
+     * The function is injected with an API to facilitate logging.
+     */
+    props: FixtureProps<TProps>,
+
+    /**
+     * An alternative component to render for the fixture.
+     * Useful if the fixture requires some additional setup for testing the
+     * component.
+     */
+    wrapper?: React.ComponentType<TProps>,
+) => mixed;
+
+```
+
+The [`fixtures`](/docs/testing-fixtures-exports-fixtures--page) method returns a method of this type, specific to the component that was passed into `fixtures`.
+
+This function takes two or three arguments:
+
+- `description: string`: A string describing the fixture. This should be used to explain what the fixture is expected to show.
+- `props: FixtureProps<TProps>`: The props that the fixture should be rendered with. See [`FixtureProps`](/docs/testing-fixtures-types-fixtureprops--page).
+- `wrapper?: React.ComponentType<TProps>`: An optional component that will be rendered for the fixture. This can be used to wrap the fixture in a component that adds additional functionality, such as a test harness (see [`makeTestHarness`](/docs/testing-test-harness-exports-maketestharness--page)).

package/src/__docs__/types.fixture-props.stories.mdx

@@ -0,0 +1,20 @@
+import {Meta} from "@storybook/addon-docs";
+
+<Meta
+    title="Testing / Fixtures / Types / FixtureProps"
+    parameters={{
+        chromatic: {
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+# FixtureProps
+
+```ts
+type FixtureProps<TProps: {...}> =
+    | $ReadOnly<TProps>
+    | ((options: $ReadOnly<GetPropsOptions>) => $ReadOnly<TProps>);
+```
+
+This type describes how props can be provided to a fixture as either a plain object, or a function that returns a plain object. The function will be called with an API to assist in generating the props (see [`GetPropsOptions`](/docs/testing-fixtures-types-getpropsoptions--page)).

package/src/fixtures/__tests__/fixtures.test.js

@@ -128,5 +128,23 @@ describe("fixtures", () => {
                 screen.getByText('I rendered {"aProp":"aValue"}'),
             ).toBeInTheDocument();
         });
+
+        it("should render the wrapper", () => {
+            // Arrange
+            const fixture = fixtures(
+                (props) => `I rendered ${JSON.stringify(props)}`,
+            );
+            const Fixture: any = fixture(
+                "A simple story",
+                {},
+                () => "I am a wrapper",
+            );
+
+            // Act
+            render(<Fixture aProp="aValue" />);
+
+            // Assert
+            expect(screen.getByText("I am a wrapper")).toBeInTheDocument();
+        });
     });
 });

package/src/fixtures/fixtures.js

@@ -2,13 +2,7 @@
 import * as React from "react";
 import {action} from "@storybook/addon-actions";
 
-import type {FixtureProps} from "./types.js";
-
-type FixtureFn<TProps: {...}> = (
-    description: string,
-    props: FixtureProps<TProps>,
-    wrapper?: React.ComponentType<TProps>,
-) => mixed;
+import type {FixtureFn, FixtureProps} from "./types.js";
 
 /**
  * Describe a group of fixtures for a given component.
@@ -50,16 +44,18 @@ export const fixtures = <
         const getProps = (options) =>
             typeof props === "function" ? props(options) : props;
 
+        const RealComponent = wrapper || Component;
+
         // We create a “template” of how args map to rendering
         // for each type of component as the component here could
         // be the component under test, or wrapped in a wrapper
         // component. We don't use decorators for the wrapper
         // because we may not be in a storybook context and it
         // keeps the framework API simpler this way.
-        let Template = templateMap.get((Component: any));
+        let Template = templateMap.get((RealComponent: any));
         if (Template == null) {
-            Template = (args) => <Component {...args} />;
-            templateMap.set((Component: any), Template);
+            Template = (args) => <RealComponent {...args} />;
+            templateMap.set((RealComponent: any), Template);
         }
 
         // Each story that shares that component then reuses that

package/src/fixtures/types.js

@@ -1,4 +1,6 @@
 // @flow
+import * as React from "react";
+
 /**
  * Options injected to the function that returns the fixture props.
  */
@@ -19,3 +21,26 @@ export type GetPropsOptions = {|
 export type FixtureProps<TProps: {...}> =
     | $ReadOnly<TProps>
     | ((options: $ReadOnly<GetPropsOptions>) => $ReadOnly<TProps>);
+
+/**
+ * A function for defining a fixture.
+ */
+export type FixtureFn<TProps: {...}> = (
+    /**
+     * The name of the fixture.
+     */
+    description: string,
+
+    /**
+     * The props for the fixture or a function that returns the props.
+     * The function is injected with an API to facilitate logging.
+     */
+    props: FixtureProps<TProps>,
+
+    /**
+     * An alternative component to render for the fixture.
+     * Useful if the fixture requires some additional setup for testing the
+     * component.
+     */
+    wrapper?: React.ComponentType<TProps>,
+) => mixed;

package/src/index.js

@@ -2,7 +2,11 @@
 
 // Fixtures framework
 export {fixtures} from "./fixtures/fixtures.js";
-export type {GetPropsOptions} from "./fixtures/types.js";
+export type {
+    FixtureFn,
+    FixtureProps,
+    GetPropsOptions,
+} from "./fixtures/types.js";
 
 // Fetch mocking framework
 export {mockFetch} from "./fetch/mock-fetch.js";