@khanacademy/wonder-blocks-testing 5.0.2 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-testing
 
+## 6.0.0
+
+### Major Changes
+
+-   af459222: Improve typing for fixtures call
+
 ## 5.0.2
 
 ### Patch Changes

package/package.json

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

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

@@ -48,7 +48,7 @@ describe("#fixtures", () => {
         });
 
         // Act
-        fixtures(
+        fixtures<any, _>(
             {
                 title: "TITLE",
                 description: "DESCRIPTION",
@@ -81,7 +81,7 @@ describe("#fixtures", () => {
         component.displayName = "DISPLAYNAME";
 
         // Act
-        fixtures(
+        fixtures<any, _>(
             {
                 component,
             },
@@ -157,7 +157,7 @@ describe("#fixtures", () => {
         const fn = jest.fn();
 
         // Act
-        fixtures(
+        fixtures<any, _>(
             {
                 title: "GROUP_TITLE",
                 description: "GROUP_DESCRIPTION",
@@ -196,7 +196,7 @@ describe("#fixtures", () => {
         };
 
         // Act
-        fixtures(
+        fixtures<any, _>(
             {
                 component: () => "COMPONENT",
                 additionalAdapterOptions: {
@@ -241,7 +241,7 @@ describe("#fixtures", () => {
         };
 
         // Act
-        fixtures(
+        fixtures<any, _>(
             {
                 component: () => "COMPONENT",
                 additionalAdapterOptions: {
@@ -273,7 +273,7 @@ describe("#fixtures", () => {
         });
 
         // Act
-        const result = fixtures(
+        const result = fixtures<any, _>(
             {
                 component: () => "COMPONENT",
             },
@@ -301,7 +301,7 @@ describe("#fixtures", () => {
             const component = () => "COMPONENT";
 
             // Act
-            fixtures(
+            fixtures<any, _>(
                 {
                     title: "GROUP_TITLE",
                     description: "GROUP_DESCRIPTION",
@@ -367,7 +367,7 @@ describe("#fixtures", () => {
             const wrapper = () => "WRAPPER";
 
             // Act
-            fixtures(
+            fixtures<any, _>(
                 {
                     title: "GROUP_TITLE",
                     description: "GROUP_DESCRIPTION",
@@ -407,7 +407,7 @@ describe("#fixtures", () => {
             const defaultWrapper = () => "DEFAULT_WRAPPER";
 
             // Act
-            fixtures(
+            fixtures<any, _>(
                 {
                     title: "GROUP_TITLE",
                     description: "GROUP_DESCRIPTION",
@@ -443,7 +443,7 @@ describe("#fixtures", () => {
                 });
 
                 // Act
-                fixtures(
+                fixtures<any, _>(
                     {
                         component: () => "COMPONENT",
                     },
@@ -475,7 +475,7 @@ describe("#fixtures", () => {
                 const props = jest.fn().mockReturnValue({these: "areProps"});
 
                 // Act
-                fixtures(
+                fixtures<any, _>(
                     {
                         component: () => "COMPONENT",
                     },
@@ -507,7 +507,7 @@ describe("#fixtures", () => {
                 const props = jest.fn().mockReturnValue({these: "areProps"});
 
                 // Act
-                fixtures(
+                fixtures<any, _>(
                     {
                         component: () => "COMPONENT",
                     },

package/src/fixtures/fixtures.basic.stories.js

@@ -12,7 +12,12 @@ setupFixtures({
     adapter: adapters.storybook(),
 });
 
-const MyComponent = (props) =>
+type Props = {|
+    propA: string,
+    propB?: string,
+|};
+
+const MyComponent = (props: Props) =>
     `I am a component. Here are my props: ${JSON.stringify(props, null, 2)}`;
 
 const Wrapper = (props) => (
@@ -24,15 +29,15 @@ const Wrapper = (props) => (
 );
 
 const stories: Array<mixed> = Object.values(
-    fixtures(
+    fixtures<typeof MyComponent, _>(
         {
             component: MyComponent,
             title: "Testing / Fixtures / Basic",
         },
         (fixture) => {
             fixture("This is a fixture with some regular props", {
-                see: "this is a prop",
-                and: "this is another",
+                propA: "this is a prop",
+                propB: "this is another",
             });
 
             fixture(
@@ -45,7 +50,7 @@ const stories: Array<mixed> = Object.values(
                         },
                     );
                     return {
-                        this: "prop was made from a function",
+                        propA: "prop was made from a function",
                     };
                 },
             );
@@ -53,8 +58,8 @@ const stories: Array<mixed> = Object.values(
             fixture(
                 "This fixture uses a custom wrapper",
                 {
-                    just: "some props again",
-                    like: "this one",
+                    propA: "some props again",
+                    propB: "this one",
                 },
                 Wrapper,
             );

package/src/fixtures/fixtures.defaultwrapper.stories.js

@@ -31,7 +31,7 @@ const DefaultWrapper = (props) => (
 );
 
 const stories: Array<mixed> = Object.values(
-    fixtures(
+    fixtures<typeof MyComponent, _>(
         {
             component: MyComponent,
             title: "Testing / Fixtures / DefaultWrapper",

package/src/fixtures/fixtures.js

@@ -9,11 +9,14 @@ type FixtureProps<TProps: {...}> =
     | $ReadOnly<TProps>
     | ((options: $ReadOnly<GetPropsOptions>) => $ReadOnly<TProps>);
 
-const normalizeOptions = <TProps: {...}>(
+const normalizeOptions = <
+    TComponent: React.ComponentType<any>,
+    TProps: React.ElementConfig<TComponent>,
+>(
     componentOrOptions:
-        | React.ComponentType<TProps>
-        | $ReadOnly<FixturesOptions<TProps>>,
-): $ReadOnly<FixturesOptions<TProps>> => {
+        | TComponent
+        | $ReadOnly<FixturesOptions<TComponent, TProps>>,
+): $ReadOnly<FixturesOptions<TComponent, TProps>> => {
     // To differentiate between a React component and a FixturesOptions object,
     // we have to do some type checking.
     //
@@ -66,10 +69,13 @@ const normalizeOptions = <TProps: {...}>(
  * storybook, the popular framework, uses both default and named exports for
  * its interface.
  */
-export const fixtures = <TProps: {...}>(
+export const fixtures = <
+    TComponent: React.ComponentType<any>,
+    TProps: React.ElementConfig<TComponent>,
+>(
     componentOrOptions:
-        | React.ComponentType<TProps>
-        | $ReadOnly<FixturesOptions<TProps>>,
+        | TComponent
+        | $ReadOnly<FixturesOptions<TComponent, TProps>>,
     fn: (
         fixture: (
             description: string,
@@ -86,7 +92,7 @@ export const fixtures = <TProps: {...}>(
         description: groupDescription,
         defaultWrapper,
         additionalAdapterOptions,
-    } = normalizeOptions(componentOrOptions);
+    } = normalizeOptions<TComponent, TProps>(componentOrOptions);
 
     // 1. Create a new adapter group.
     const group = adapter.declareGroup<TProps>({

package/src/fixtures/types.js

@@ -23,11 +23,14 @@ export type FixturesAdapterOptions = {|
 /**
  * Options to describe a collection of fixtures.
  */
-export type FixturesOptions<TProps: {...}> = {|
+export type FixturesOptions<
+    TComponent: React.ComponentType<any>,
+    TProps: React.ElementConfig<TComponent>,
+> = {|
     /**
      * The component being tested by the fixtures.
      */
-    component: React.ComponentType<TProps>,
+    component: TComponent,
 
     /**
      * Optional title of the fixture collection.