@khanacademy/wonder-blocks-testing 7.0.1 → 7.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-testing
 
+## 7.0.2
+
+### Patch Changes
+
+-   aa7993a8: Make sure wrapper component is used when provided
+
 ## 7.0.1
 
 ### Patch 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.1",
+    "version": "7.0.2",
     "design": "v1",
     "publishConfig": {
         "access": "public"

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

@@ -44,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