@khanacademy/wonder-blocks-testing 5.0.0 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @khanacademy/wonder-blocks-testing
 
+## 6.0.0
+
+### Major Changes
+
+-   af459222: Improve typing for fixtures call
+
+## 5.0.2
+
+### Patch Changes
+
+-   Updated dependencies [5f4a4297]
+-   Updated dependencies [2b96fd59]
+    -   @khanacademy/wonder-blocks-data@8.0.3
+
+## 5.0.1
+
+### Patch Changes
+
+-   5b1c80d2: Fix test harness types
+
 ## 5.0.0
 
 ### Major Changes

package/package.json

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

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.

package/src/harness/__tests__/types.flowtest.js

@@ -0,0 +1,115 @@
+// @flow
+import * as React from "react";
+
+import type {
+    TestHarnessAdapter,
+    TestHarnessAdapters,
+    TestHarnessConfig,
+    TestHarnessConfigs,
+} from "../types.js";
+
+/**
+ * TestHarnessAdapter<TConfig>
+ */
+
+//>  should assert type of config.
+((
+    children: React.Node,
+    // TConfig is string, but we typed this arg as a number
+    // $FlowExpectedError[incompatible-cast]
+    config: number,
+): React.Element<any> => <div />: TestHarnessAdapter<string>);
+//<
+
+//>  should work for correct definition
+((children: React.Node, config: string): React.Element<any> => (
+    <div />
+): TestHarnessAdapter<string>);
+//<
+
+/**
+ * TestHarnessAdapters
+ */
+
+//>  should work for empty case
+({}: TestHarnessAdapters);
+//<
+
+//>  should assert if adapter is not Adapter<TConfig>
+({
+    // String is not a adapter function
+    // $FlowExpectedError[incompatible-cast]
+    adapterString: "string",
+}: TestHarnessAdapters);
+//<
+
+//>  should work for a function matching Adapter<TConfig>
+({
+    adapterA: (children, config) => <div>test</div>,
+}: TestHarnessAdapters);
+//<
+
+/**
+ * TestHarnessConfig<TAdapter>
+ */
+//> should give the config type of an adapter
+("string": TestHarnessConfig<TestHarnessAdapter<string>>);
+//<
+
+//> should error if the config type is wrong
+// 45 is not a string
+// $FlowExpectedError[incompatible-cast]
+(45: TestHarnessConfig<TestHarnessAdapter<string>>);
+//<
+
+/**
+ * TestHarnessConfigs<TAdapters>
+ *
+ * NOTE: This only works if the properties of the passed THarnasses type
+ * are explicitly typed as `TestHarnessAdapter<TConfig>` so if passing in a
+ * non-Adapters type (which we should be, to get strong TConfig types instead
+ * of `any`), then that object should make sure that each adapter is strongly
+ * marked as `TestHarnessAdapter<TConfig>` - flow does not appear to pattern
+ * match against the type definition when invoking the ExtractConfig type and I
+ * haven't worked out how to get it to multi-dispatch so that it matches
+ * functions too. Even worse, if the type doesn't match, it just allows `any`
+ * in the configs object, rather than indicating any kind of problem.
+ */
+const notadapters = "this is wrong";
+const adapterA: TestHarnessAdapter<string> = (
+    children: React.Node,
+    config: ?string,
+): React.Element<any> => <div />;
+const adapterB: TestHarnessAdapter<number> = (
+    children: React.Node,
+    config: ?number,
+): React.Element<any> => <div />;
+const adapters = {
+    adapterA,
+    adapterB,
+};
+
+//>  should assert if parameterized type is not valid Adapters
+// string is not a valid Adapter
+// $FlowExpectedError[incompatible-use]
+// $FlowExpectedError[incompatible-type-arg]
+({}: TestHarnessConfigs<typeof notadapters>);
+//<
+
+//>  should expect one config per adapter
+// both adapter configs missing
+// $FlowExpectedError[incompatible-exact]
+({}: TestHarnessConfigs<typeof adapters>);
+// adapterB config missing
+// $FlowExpectedError[prop-missing]
+({adapterA: "test"}: TestHarnessConfigs<typeof adapters>);
+//<
+
+//>  should assert if config does not match adapter config
+({
+    adapterA: "a string, this is correct",
+    // the config type here is a number, not a string
+    // $FlowExpectedError[incompatible-cast]
+    adapterB: "a string, but it should be a number",
+}: TestHarnessConfigs<typeof adapters>);
+//<

package/src/harness/types.js

@@ -4,7 +4,7 @@ import * as React from "react";
 /**
  * A adapter to be composed with our test harnass infrastructure.
  */
-export type TestHarnessAdapter<-TConfig> = (
+export type TestHarnessAdapter<TConfig> = (
     children: React.Node,
     config: TConfig,
 ) => React.Element<any>;
@@ -36,7 +36,7 @@ type ExtractMaybeConfig = <TConfig>(TestHarnessAdapter<TConfig>) => ?TConfig;
  *
  * This is the `TestHarnessAdapter` equivalent of `React.ElementConfig`.
  */
-export type TestHarnessConfig<-TAdapter> = $Call<ExtractConfig, TAdapter>;
+export type TestHarnessConfig<TAdapter> = $Call<ExtractConfig, TAdapter>;
 
 /**
  * The `TestHarnessConfigs` type as defined by parsing a given set of adapters.
@@ -51,7 +51,7 @@ export type TestHarnessConfig<-TAdapter> = $Call<ExtractConfig, TAdapter>;
  * functions too. Even worse, if the type doesn't match, it just allows `any`
  * in the `Configs` object, rather than indicating any kind of problem.
  */
-export type TestHarnessConfigs<-TAdapters: TestHarnessAdapters> = $ObjMap<
+export type TestHarnessConfigs<TAdapters: TestHarnessAdapters> = $ObjMap<
     TAdapters,
     ExtractMaybeConfig,
 >;