@khanacademy/wonder-blocks-testing 6.1.0 → 7.0.2

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

@@ -1,527 +1,150 @@
 // @flow
 import * as React from "react";
-import * as SetupModule from "../setup.js";
-import * as CombineOptionsModule from "../combine-options.js";
+import {render, screen} from "@testing-library/react";
+import * as AddonActionsModule from "@storybook/addon-actions";
 import {fixtures} from "../fixtures.js";
 
-jest.mock("../setup.js");
-jest.mock("../combine-options.js");
+jest.mock("@storybook/addon-actions");
 
-describe("#fixtures", () => {
+describe("fixtures", () => {
     beforeEach(() => {
-        jest.clearAllMocks();
+        jest.resetAllMocks();
     });
 
-    it("should declare a group on the configured adapter based off the given component", () => {
+    it("should create return a function", () => {
         // Arrange
-        const fakeGroup = {
-            closeGroup: jest.fn(),
-        };
-        const adapter = {
-            declareGroup: jest.fn().mockReturnValue(fakeGroup),
-            name: "testadapter",
-        };
-        jest.spyOn(SetupModule, "getConfiguration").mockReturnValue({
-            adapter,
-        });
-
-        // Act
-        fixtures(() => "COMPONENT", jest.fn());
-
-        // Assert
-        expect(adapter.declareGroup).toHaveBeenCalledWith({
-            getDefaultTitle: expect.any(Function),
-        });
-    });
-
-    it("should declare a group on the configured adapter with the given title and description", () => {
-        // Arrange
-        const fakeGroup = {
-            closeGroup: jest.fn(),
-        };
-        const adapter = {
-            declareGroup: jest.fn().mockReturnValue(fakeGroup),
-            name: "testadapter",
-        };
-        jest.spyOn(SetupModule, "getConfiguration").mockReturnValue({
-            adapter,
-        });
-
-        // Act
-        fixtures<any, _>(
-            {
-                title: "TITLE",
-                description: "DESCRIPTION",
-                component: () => "COMPONENT",
-            },
-            jest.fn(),
-        );
-
-        // Assert
-        expect(adapter.declareGroup).toHaveBeenCalledWith({
-            title: "TITLE",
-            description: "DESCRIPTION",
-            getDefaultTitle: expect.any(Function),
-        });
-    });
-
-    it("should default the title to the component.displayName in the absence of title", () => {
-        // Arrange
-        const fakeGroup = {
-            closeGroup: jest.fn(),
-        };
-        const adapter = {
-            declareGroup: jest.fn().mockReturnValue(fakeGroup),
-            name: "testadapter",
-        };
-        jest.spyOn(SetupModule, "getConfiguration").mockReturnValue({
-            adapter,
-        });
-        const component = () => "COMPONENT";
-        component.displayName = "DISPLAYNAME";
-
-        // Act
-        fixtures<any, _>(
-            {
-                component,
-            },
-            jest.fn(),
-        );
-        const {getDefaultTitle} = adapter.declareGroup.mock.calls[0][0];
-        const result = getDefaultTitle();
-
-        // Assert
-        expect(result).toBe("DISPLAYNAME");
-    });
-
-    it("should default the title to the component.name in the absence of component.displayName", () => {
-        // Arrange
-        const fakeGroup = {
-            closeGroup: jest.fn(),
-        };
-        const adapter = {
-            declareGroup: jest.fn().mockReturnValue(fakeGroup),
-            name: "testadapter",
-        };
-        jest.spyOn(SetupModule, "getConfiguration").mockReturnValue({
-            adapter,
-        });
-        const component = function FUNCTIONNAME() {
-            return "COMPONENT";
-        };
 
         // Act
-        fixtures(component, jest.fn());
-        const {getDefaultTitle} = adapter.declareGroup.mock.calls[0][0];
-        const result = getDefaultTitle();
+        const result = fixtures(() => <div />);
 
         // Assert
-        expect(result).toBe("FUNCTIONNAME");
+        expect(result).toBeFunction();
     });
 
-    it("should default the title to 'Component' in the absence of component.name", () => {
-        // Arrange
-        const fakeGroup = {
-            closeGroup: jest.fn(),
-        };
-        const adapter = {
-            declareGroup: jest.fn().mockReturnValue(fakeGroup),
-            name: "testadapter",
-        };
-        jest.spyOn(SetupModule, "getConfiguration").mockReturnValue({
-            adapter,
-        });
-
-        // Act
-        fixtures(() => "test", jest.fn());
-        const {getDefaultTitle} = adapter.declareGroup.mock.calls[0][0];
-        const result = getDefaultTitle();
-
-        // Assert
-        expect(result).toBe("Component");
-    });
-
-    it("should invoke the passed fn with function argument", () => {
-        // 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 fn = jest.fn();
-
-        // Act
-        fixtures<any, _>(
-            {
-                title: "GROUP_TITLE",
-                description: "GROUP_DESCRIPTION",
-                component: () => "COMPONENT",
-            },
-            fn,
-        );
+    describe("returned function", () => {
+        it("should return a story component function", () => {
+            // Arrange
+            const fixture = fixtures(() => <div />);
 
-        // Assert
-        expect(fn).toHaveBeenCalledWith(expect.any(Function));
-    });
+            // Act
+            const result = fixture("My fixture", {});
 
-    it("should combine additionalAdapterOptions for the appropriate adapter with defaultAdapterOptions", () => {
-        // Arrange
-        const combineOptionsSpy = jest.spyOn(
-            CombineOptionsModule,
-            "combineOptions",
-        );
-        const fakeGroup = {
-            declareFixture: jest.fn(),
-            closeGroup: jest.fn(),
-        };
-        const adapter = {
-            declareGroup: jest.fn().mockReturnValue(fakeGroup),
-            name: "testadapter",
-        };
-        const defaultAdapterOptions = {
-            foo: "bar",
-        };
-        jest.spyOn(SetupModule, "getConfiguration").mockReturnValue({
-            adapter,
-            defaultAdapterOptions,
+            // Assert
+            expect(result).toBeFunction();
         });
-        const additionalTestAdapterOptions = {
-            bim: "bop",
-        };
 
-        // Act
-        fixtures<any, _>(
-            {
-                component: () => "COMPONENT",
-                additionalAdapterOptions: {
-                    testadapter: additionalTestAdapterOptions,
-                    otheradapterwedontcareabout: {
-                        fig: "fug",
-                    },
-                },
-            },
-            jest.fn(),
-        );
+        it("should inject API into getProps generator", () => {
+            // Arrange
+            const fixture = fixtures(() => <div />);
+            const getPropsFn = jest.fn();
 
-        // Assert
-        expect(combineOptionsSpy).toHaveBeenCalledWith(
-            defaultAdapterOptions,
-            additionalTestAdapterOptions,
-        );
-    });
+            // Act
+            fixture("My fixture", getPropsFn);
 
-    it("should call group.closeGroup with the combined adapter options", () => {
-        // Arrange
-        jest.spyOn(CombineOptionsModule, "combineOptions").mockReturnValue(
-            "COMBINED_OPTIONS",
-        );
-        const fakeGroup = {
-            declareFixture: jest.fn(),
-            closeGroup: jest.fn(),
-        };
-        const adapter = {
-            declareGroup: jest.fn().mockReturnValue(fakeGroup),
-            name: "testadapter",
-        };
-        const defaultAdapterOptions = {
-            foo: "bar",
-        };
-        jest.spyOn(SetupModule, "getConfiguration").mockReturnValue({
-            adapter,
-            defaultAdapterOptions,
+            // Assert
+            expect(getPropsFn).toHaveBeenCalledWith({
+                log: expect.any(Function),
+                logHandler: expect.any(Function),
+            });
         });
-        const additionalTestAdapterOptions = {
-            bim: "bop",
-        };
 
-        // Act
-        fixtures<any, _>(
-            {
-                component: () => "COMPONENT",
-                additionalAdapterOptions: {
-                    testadapter: additionalTestAdapterOptions,
-                    otheradapterwedontcareabout: {
-                        fig: "fug",
-                    },
-                },
-            },
-            jest.fn(),
-        );
+        it("should inject log function that logs to storybook actions", () => {
+            // Arrange
+            const fixture = fixtures(() => <div />);
+            const getPropsFn = jest.fn();
+            const actionReturnFn = jest.fn();
+            const actionSpy = jest
+                .spyOn(AddonActionsModule, "action")
+                .mockReturnValue(actionReturnFn);
+            fixture("My fixture", getPropsFn);
+            const {log: logFn} = getPropsFn.mock.calls[0][0];
 
-        // Assert
-        expect(fakeGroup.closeGroup).toHaveBeenCalledWith("COMBINED_OPTIONS");
-    });
+            // Act
+            logFn("MESSAGE", "ARG1", "ARG2");
 
-    it("should return the result of group.closeGroup", () => {
-        // Arrange
-        const fakeGroup = {
-            declareFixture: jest.fn(),
-            closeGroup: jest.fn().mockReturnValue("RESULT"),
-        };
-        const adapter = {
-            declareGroup: jest.fn().mockReturnValue(fakeGroup),
-            name: "testadapter",
-        };
-        jest.spyOn(SetupModule, "getConfiguration").mockReturnValue({
-            adapter,
+            // Assert
+            expect(actionSpy).toHaveBeenCalledWith("MESSAGE");
+            expect(actionReturnFn).toHaveBeenCalledWith("ARG1", "ARG2");
         });
 
-        // Act
-        const result = fixtures<any, _>(
-            {
-                component: () => "COMPONENT",
-            },
-            jest.fn(),
-        );
-
-        // Assert
-        expect(result).toEqual("RESULT");
-    });
-
-    describe("injected fixture fn", () => {
-        it("should call group.declareFixture with description, props getter, and component", () => {
+        it("should inject logHandler function that logs to storybook actions", () => {
             // 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 = () => "COMPONENT";
+            const fixture = fixtures(() => <div />);
+            const getPropsFn = jest.fn();
+            const actionReturnFn = jest.fn();
+            const actionSpy = jest
+                .spyOn(AddonActionsModule, "action")
+                .mockReturnValue(actionReturnFn);
+            fixture("My fixture", getPropsFn);
+            const {logHandler: logHandlerFn} = getPropsFn.mock.calls[0][0];
 
             // Act
-            fixtures<any, _>(
-                {
-                    title: "GROUP_TITLE",
-                    description: "GROUP_DESCRIPTION",
-                    component,
-                },
-                (fixture) => {
-                    fixture("FIXTURE_DESCRIPTION", {these: "areProps"});
-                },
-            );
+            const logFn = logHandlerFn("MESSAGE");
+            logFn("ARG1", "ARG2");
 
             // Assert
-            expect(fakeGroup.declareFixture).toHaveBeenCalledWith({
-                description: "FIXTURE_DESCRIPTION",
-                getProps: expect.any(Function),
-                component,
-            });
+            expect(actionSpy).toHaveBeenCalledWith("MESSAGE");
+            expect(actionReturnFn).toHaveBeenCalledWith("ARG1", "ARG2");
         });
 
-        it("should call group.declareFixture with component if component is forward ref", () => {
+        it("should have args attached", () => {
             // Arrange
-            const fakeGroup = {
-                declareFixture: jest.fn(),
-                closeGroup: jest.fn(),
-            };
-            const adapter = {
-                declareGroup: jest.fn().mockReturnValue(fakeGroup),
-                name: "testadapter",
+            const fixture = fixtures(() => <div />);
+            const props = {
+                this: "isAProp",
+                andSo: "isThis",
             };
-            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"});
-            });
+            const result = fixture("A simple story", props);
 
             // Assert
-            expect(fakeGroup.declareFixture).toHaveBeenCalledWith({
-                description: "FIXTURE_DESCRIPTION",
-                getProps: expect.any(Function),
-                component,
-            });
+            expect(result).toHaveProperty("args", props);
         });
 
-        it("should pass wrapper component to group.declareFixture", () => {
+        it("should have story name attached", () => {
             // 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 defaultWrapper = () => "DEFAULT_WRAPPER";
-            const wrapper = () => "WRAPPER";
+            const fixture = fixtures(() => <div />);
 
             // Act
-            fixtures<any, _>(
-                {
-                    title: "GROUP_TITLE",
-                    description: "GROUP_DESCRIPTION",
-                    component: () => "COMPONENT",
-                    defaultWrapper,
-                },
-                (fixture) => {
-                    fixture(
-                        "FIXTURE_DESCRIPTION",
-                        {these: "areProps"},
-                        wrapper,
-                    );
-                },
-            );
+            const result = fixture("A simple story", {});
 
             // Assert
-            expect(fakeGroup.declareFixture).toHaveBeenCalledWith({
-                description: "FIXTURE_DESCRIPTION",
-                getProps: expect.any(Function),
-                component: wrapper,
-            });
+            expect(result).toHaveProperty("storyName", "1 A simple story");
         });
 
-        it("should pass defaultWrapper component to group.declareFixture if no wrapper", () => {
+        it("should render the component", () => {
             // 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 defaultWrapper = () => "DEFAULT_WRAPPER";
+            const fixture = fixtures(
+                (props) => `I rendered ${JSON.stringify(props)}`,
+            );
+            const Fixture: any = fixture("A simple story", {});
 
             // Act
-            fixtures<any, _>(
-                {
-                    title: "GROUP_TITLE",
-                    description: "GROUP_DESCRIPTION",
-                    component: () => "COMPONENT",
-                    defaultWrapper,
-                },
-                (fixture) => {
-                    fixture("FIXTURE_DESCRIPTION", {these: "areProps"});
-                },
-            );
+            render(<Fixture aProp="aValue" />);
 
             // Assert
-            expect(fakeGroup.declareFixture).toHaveBeenCalledWith({
-                description: "FIXTURE_DESCRIPTION",
-                getProps: expect.any(Function),
-                component: defaultWrapper,
-            });
+            expect(
+                screen.getByText('I rendered {"aProp":"aValue"}'),
+            ).toBeInTheDocument();
         });
 
-        describe("getProps fn passed to group.declareFixture", () => {
-            it("should return the props when props is an object", () => {
-                // Arrange
-                const fakeGroup = {
-                    declareFixture: jest.fn(),
-                    closeGroup: jest.fn(),
-                };
-                const adapter = {
-                    declareGroup: jest.fn().mockReturnValue(fakeGroup),
-                    name: "testadapter",
-                };
-                jest.spyOn(SetupModule, "getConfiguration").mockReturnValue({
-                    adapter,
-                });
-
-                // Act
-                fixtures<any, _>(
-                    {
-                        component: () => "COMPONENT",
-                    },
-                    (fixture) => {
-                        fixture("FIXTURE_DESCRIPTION", {these: "areProps"});
-                    },
-                );
-                const getPropsFn =
-                    fakeGroup.declareFixture.mock.calls[0][0].getProps;
-                const result = getPropsFn("OPTIONS");
-
-                // Assert
-                expect(result).toEqual({these: "areProps"});
-            });
-
-            it("should invoke the props function with given options when props is a function", () => {
-                // 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 props = jest.fn().mockReturnValue({these: "areProps"});
-
-                // Act
-                fixtures<any, _>(
-                    {
-                        component: () => "COMPONENT",
-                    },
-                    (fixture) => {
-                        fixture("FIXTURE_DESCRIPTION", props);
-                    },
-                );
-                const getPropsFn =
-                    fakeGroup.declareFixture.mock.calls[0][0].getProps;
-                getPropsFn("OPTIONS");
-
-                // Assert
-                expect(props).toHaveBeenCalledWith("OPTIONS");
-            });
-
-            it("should return the result of the props function when props is a function", () => {
-                // 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 props = jest.fn().mockReturnValue({these: "areProps"});
+        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
-                fixtures<any, _>(
-                    {
-                        component: () => "COMPONENT",
-                    },
-                    (fixture) => {
-                        fixture("FIXTURE_DESCRIPTION", props);
-                    },
-                );
-                const getPropsFn =
-                    fakeGroup.declareFixture.mock.calls[0][0].getProps;
-                const result = getPropsFn("OPTIONS");
+            // Act
+            render(<Fixture aProp="aValue" />);
 
-                // Assert
-                expect(result).toEqual({these: "areProps"});
-            });
+            // Assert
+            expect(screen.getByText("I am a wrapper")).toBeInTheDocument();
         });
     });
 });