@khanacademy/wonder-blocks-testing 3.0.0 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-testing
 
+## 3.0.1
+
+### Patch Changes
+
+-   6e4fbeed: Make sure simplified fixtures call copes with return values from React.forwardRef
+
 ## 3.0.0
 
 ### Major Changes

package/dist/es/index.js

@@ -267,10 +267,8 @@ const combineOptions = (...toBeCombined) => {
 
 const normalizeOptions = componentOrOptions => {
   // To differentiate between a React component and a FixturesOptions object,
-  // we have to do some type checking. Since all React components, whether
-  // functional or class-based, are inherently functions in JavaScript
-  // this should do the trick without relying on internal React details like
-  // protoype.isReactComponent. This should be sufficient for our purposes.
+  // we have to do some type checking.
+  //
   // Alternatives I considered were:
   // - Use an additional parameter for the options and then do an arg number
   //   check, but that always makes typing a function harder and often breaks
@@ -279,8 +277,17 @@ const normalizeOptions = componentOrOptions => {
   //   being the component and the second being the options. However that
   //   feels like an obscure API even though it's really easy to do the
   //   typing.
-  if (typeof componentOrOptions === "function") {
+  if ( // Most React components, whether functional or class-based, are
+  // inherently functions in JavaScript, so a check for functions is
+  // usually sufficient.
+  typeof componentOrOptions === "function" || // However, the return of React.forwardRef is not a function,
+  // so we also have to cope with that.
+  // A forwardRef has $$typeof = Symbol(react.forward_ref) and a
+  // render function.
+  // $FlowIgnore[prop-missing]
+  typeof componentOrOptions.render === "function") {
     return {
+      // $FlowIgnore[incompatible-return]
       component: componentOrOptions
     };
   } // We can't test for React.ComponentType at runtime.

package/dist/index.js

@@ -328,10 +328,8 @@ const getAdapter = (MountingComponent = null) => new _adapter_js__WEBPACK_IMPORT
 
 const normalizeOptions = componentOrOptions => {
   // To differentiate between a React component and a FixturesOptions object,
-  // we have to do some type checking. Since all React components, whether
-  // functional or class-based, are inherently functions in JavaScript
-  // this should do the trick without relying on internal React details like
-  // protoype.isReactComponent. This should be sufficient for our purposes.
+  // we have to do some type checking.
+  //
   // Alternatives I considered were:
   // - Use an additional parameter for the options and then do an arg number
   //   check, but that always makes typing a function harder and often breaks
@@ -340,8 +338,17 @@ const normalizeOptions = componentOrOptions => {
   //   being the component and the second being the options. However that
   //   feels like an obscure API even though it's really easy to do the
   //   typing.
-  if (typeof componentOrOptions === "function") {
+  if ( // Most React components, whether functional or class-based, are
+  // inherently functions in JavaScript, so a check for functions is
+  // usually sufficient.
+  typeof componentOrOptions === "function" || // However, the return of React.forwardRef is not a function,
+  // so we also have to cope with that.
+  // A forwardRef has $$typeof = Symbol(react.forward_ref) and a
+  // render function.
+  // $FlowIgnore[prop-missing]
+  typeof componentOrOptions.render === "function") {
     return {
+      // $FlowIgnore[incompatible-return]
       component: componentOrOptions
     };
   } // We can't test for React.ComponentType at runtime.

package/package.json

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

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

@@ -1,4 +1,5 @@
 // @flow
+import * as React from "react";
 import * as SetupModule from "../setup.js";
 import * as CombineOptionsModule from "../combine-options.js";
 import {fixtures} from "../fixtures.js";
@@ -284,7 +285,7 @@ describe("#fixtures", () => {
     });
 
     describe("injected fixture fn", () => {
-        it("should call group.declareFixture with description and props getter", () => {
+        it("should call group.declareFixture with description, props getter, and component", () => {
             // Arrange
             const fakeGroup = {
                 declareFixture: jest.fn(),
@@ -319,6 +320,36 @@ describe("#fixtures", () => {
             });
         });
 
+        it("should call group.declareFixture with component if component is forward ref", () => {
+            // Arrange
+            const fakeGroup = {
+                declareFixture: jest.fn(),
+                closeGroup: jest.fn(),
+            };
+            const adapter = {
+                declareGroup: jest.fn().mockReturnValue(fakeGroup),
+                name: "testadapter",
+            };
+            jest.spyOn(SetupModule, "getConfiguration").mockReturnValue({
+                adapter,
+            });
+            const component = React.forwardRef((props, ref) => (
+                <div {...props} ref={ref} />
+            ));
+
+            // Act
+            fixtures(component, (fixture) => {
+                fixture("FIXTURE_DESCRIPTION", {these: "areProps"});
+            });
+
+            // Assert
+            expect(fakeGroup.declareFixture).toHaveBeenCalledWith({
+                description: "FIXTURE_DESCRIPTION",
+                getProps: expect.any(Function),
+                component,
+            });
+        });
+
         it("should pass wrapper component to group.declareFixture", () => {
             // Arrange
             const fakeGroup = {

package/src/fixtures/fixtures.js

@@ -15,10 +15,8 @@ const normalizeOptions = <TProps: {...}>(
         | $ReadOnly<FixturesOptions<TProps>>,
 ): $ReadOnly<FixturesOptions<TProps>> => {
     // To differentiate between a React component and a FixturesOptions object,
-    // we have to do some type checking. Since all React components, whether
-    // functional or class-based, are inherently functions in JavaScript
-    // this should do the trick without relying on internal React details like
-    // protoype.isReactComponent. This should be sufficient for our purposes.
+    // we have to do some type checking.
+    //
     // Alternatives I considered were:
     // - Use an additional parameter for the options and then do an arg number
     //   check, but that always makes typing a function harder and often breaks
@@ -27,8 +25,20 @@ const normalizeOptions = <TProps: {...}>(
     //   being the component and the second being the options. However that
     //   feels like an obscure API even though it's really easy to do the
     //   typing.
-    if (typeof componentOrOptions === "function") {
+    if (
+        // Most React components, whether functional or class-based, are
+        // inherently functions in JavaScript, so a check for functions is
+        // usually sufficient.
+        typeof componentOrOptions === "function" ||
+        // However, the return of React.forwardRef is not a function,
+        // so we also have to cope with that.
+        // A forwardRef has $$typeof = Symbol(react.forward_ref) and a
+        // render function.
+        // $FlowIgnore[prop-missing]
+        typeof componentOrOptions.render === "function"
+    ) {
         return {
+            // $FlowIgnore[incompatible-return]
             component: componentOrOptions,
         };
     }