@khanacademy/wonder-blocks-testing 7.0.0 → 7.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-testing
 
+## 7.0.1
+
+### Patch Changes
+
+-   79a3bc8e: Export more types for the fixtures framework
+
 ## 7.0.0
 
 ### Major Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@khanacademy/wonder-blocks-testing",
-    "version": "7.0.0",
+    "version": "7.0.1",
     "design": "v1",
     "publishConfig": {
         "access": "public"

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/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.

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";