Merge pull request #33 from gemini-testing/TESTPLANE-439.story_override_story_configs

feat: add ability to override testplane storyfile configs

Author: KuznetsovRoman

jest.config.js

@@ -1,8 +1,10 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
     clearMocks: true,
     globals: {
         "ts-jest": {
-            "tsconfig": "tsconfig.spec.json",
+            tsconfig: "tsconfig.spec.json",
+            isolatedModules: true,
         },
     },
     preset: "ts-jest",

package-lock.json

@@ -44,20 +44,20 @@
     "devDependencies": {
         "@gemini-testing/commander": "^2.15.3",
         "@types/fs-extra": "^11.0.4",
-        "@types/jest": "^27.5.2",
+        "@types/jest": "^29.5.14",
         "@types/lodash": "^4.14.172",
         "@types/node": "^12.20.19",
         "@types/npm-which": "^3.0.3",
         "@typescript-eslint/eslint-plugin": "^4.29.3",
         "@typescript-eslint/parser": "^4.29.3",
         "eslint": "^7.32.0",
         "eslint-config-gemini-testing": "^3.0.0",
-        "jest": "^27.5.1",
+        "jest": "^29.7.0",
         "jest-extended": "^0.11.5",
-        "prettier": "^2.3.2",
+        "prettier": "^3.4.2",
         "rimraf": "^3.0.2",
         "testplane": "^0.1.0-rc.0",
-        "ts-jest": "^27.1.5",
+        "ts-jest": "^29.2.5",
         "typescript": "^4.3.5"
     },
     "dependencies": {

package.json

@@ -2,28 +2,115 @@ import { extendStoriesFromStoryFile } from "./extend-stories";
 import { StorybookStory } from "./types";
 
 describe("storybook/story-test-runner/extend-stories", () => {
-    it("should log warning failed storyfile import", async () => {
+    const mkRequireStub_ = (
+        impl?: Parameters<(typeof jest)["fn"]>[0],
+    ): jest.MockedFunction<(typeof globalThis)["require"]> => {
+        return jest.fn(impl) as unknown as jest.MockedFunction<(typeof globalThis)["require"]>;
+    };
+
+    it("should log warning failed storyfile import", () => {
         jest.spyOn(console, "warn").mockImplementation(jest.fn);
+        const requireFn = mkRequireStub_(() => {
+            throw new Error("some error message");
+        });
         const stories = [{ name: "foo", absolutePath: "not/existing.ts" }] as StorybookStory[];
 
-        extendStoriesFromStoryFile(stories);
+        extendStoriesFromStoryFile(stories, { requireFn });
 
         const expectedMsg = [
             '"testplane" section is ignored in storyfile "not/existing.ts", because the file could not be read:',
-            "Error: Cannot find module 'not/existing.ts' from 'src/storybook/story-test-runner/extend-stories.ts' ",
+            "Error: some error message ",
             "There could be other story files. ",
             "Set 'TESTPLANE_STORYBOOK_DISABLE_STORY_REQUIRE_WARNING' environment variable to hide this warning",
         ].join("\n");
         expect(console.warn).toBeCalledWith(expectedMsg);
     });
 
-    it("should fallback, when could not read story file", async () => {
+    it("should fallback, when could not read story file", () => {
+        const requireFn = mkRequireStub_(() => {
+            throw new Error("file does not exist");
+        });
         const stories = [{ name: "foo", absolutePath: "not/existing.js" }] as StorybookStory[];
 
-        const extendedStories = extendStoriesFromStoryFile(stories);
+        const extendedStories = extendStoriesFromStoryFile(stories, { requireFn });
 
         expect(extendedStories[0].skip).toBe(false);
         expect(extendedStories[0].assertViewOpts).toEqual({});
         expect(extendedStories[0].browserIds).toBe(null);
     });
+
+    it("should overlay story configs over file configs", () => {
+        const customTests = {};
+        const defaultExport = {
+            testplane: { browserIds: ["firefox"] },
+            testplaneConfig: {
+                skip: true,
+                browserIds: ["chrome"],
+                assertViewOpts: { tolerance: 10, ignoreDiffPixelCount: 10 },
+                autoScreenshotStorybookGlobals: { dark: { theme: "dark" } },
+            },
+        };
+        const fooExport = {
+            testplane: customTests,
+            testplaneConfig: { skip: false, autoScreenshots: false, assertViewOpts: { ignoreElements: ["foobar"] } },
+        };
+        const requireFn = mkRequireStub_().mockReturnValue({ default: defaultExport, foo: fooExport });
+        const stories = [{ name: "foo", absolutePath: "not/existing.js" }] as StorybookStory[];
+
+        const extendedStories = extendStoriesFromStoryFile(stories, { requireFn });
+
+        expect(extendedStories).toMatchObject([
+            {
+                name: "foo",
+                absolutePath: "not/existing.js",
+                extraTests: {},
+                skip: false,
+                browserIds: ["chrome"],
+                assertViewOpts: {
+                    ignoreElements: ["foobar"],
+                    tolerance: 10,
+                    ignoreDiffPixelCount: 10,
+                },
+                autoScreenshots: false,
+                autoScreenshotStorybookGlobals: { dark: { theme: "dark" } },
+            },
+        ]);
+    });
+
+    it("should overlay story configs over default configs", () => {
+        const customTests = {};
+        const fooExport = {
+            testplane: customTests,
+            testplaneConfig: { skip: false, autoScreenshots: false, assertViewOpts: { ignoreElements: ["foobar"] } },
+        };
+        const requireFn = mkRequireStub_().mockReturnValue({ default: {}, foo: fooExport });
+        const stories = [{ name: "foo", absolutePath: "not/existing.js" }] as StorybookStory[];
+
+        const extendedStories = extendStoriesFromStoryFile(stories, { requireFn });
+
+        expect(extendedStories).toMatchObject([
+            {
+                name: "foo",
+                absolutePath: "not/existing.js",
+                extraTests: {},
+                skip: false,
+                browserIds: null,
+                assertViewOpts: {
+                    ignoreElements: ["foobar"],
+                },
+                autoScreenshots: false,
+                autoscreenshotSelector: null,
+                autoScreenshotStorybookGlobals: {},
+            },
+        ]);
+    });
+
+    it("should fallback reading story configs from deprecated testplane property", () => {
+        const stories = [{ name: "foo", absolutePath: "not/existing.js" }] as StorybookStory[];
+        const requireFn = mkRequireStub_().mockReturnValue({ default: { testplane: { skip: true } }, foo: {} });
+
+        const extendedStories = extendStoriesFromStoryFile(stories, { requireFn });
+
+        expect(extendedStories).toMatchObject([{ name: "foo", skip: true }]);
+    });
 });

src/storybook/story-test-runner/extend-stories.test.ts

@@ -1,6 +1,7 @@
 import TypedModule from "module";
+import { extractInheritedValue, inheritValue } from "./inheritable-values";
 import type { TestplaneMetaConfig, TestplaneStoryConfig } from "../../types";
-import type { StorybookStory, StorybookStoryExtended } from "./types";
+import type { StorybookStory, StorybookStoryExtraProperties, StorybookStoryExtended } from "./types";
 
 const Module = TypedModule as any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -12,45 +13,60 @@ type StoryFile = { default: TestplaneMetaConfig } & Record<string, TestplaneStor
 
 let loggedStoryFileRequireError = Boolean(process.env.TESTPLANE_STORYBOOK_DISABLE_STORY_REQUIRE_WARNING);
 
-export function extendStoriesFromStoryFile(stories: StorybookStory[]): StorybookStoryExtended[] {
+export function extendStoriesFromStoryFile(
+    stories: StorybookStory[],
+    { requireFn = require } = {},
+): StorybookStoryExtended[] {
     const storiesMap = getStoriesMap(stories);
     const storyPath = stories[0].absolutePath;
-    const storyFile = getStoryFile(storyPath);
+    const storyFile = getStoryFile(storyPath, { requireFn });
     const withStoryFileExtendedStories = stories as StorybookStoryExtended[];
 
-    if (!storyFile) {
-        return withStoryFileExtendedStories.map(story => {
-            story.skip = false;
-            story.assertViewOpts = {};
-            story.browserIds = null;
-            story.autoScreenshotStorybookGlobals = {};
+    const storyExtendedBaseConfig = {
+        skip: false,
+        browserIds: null,
+        assertViewOpts: {},
+        autoScreenshots: null,
+        autoscreenshotSelector: null,
+        autoScreenshotStorybookGlobals: {},
+        extraTests: null,
+    } satisfies StorybookStoryExtraProperties;
 
-            return story;
-        });
+    if (!storyFile) {
+        return withStoryFileExtendedStories.map(story => Object.assign(story, storyExtendedBaseConfig));
     }
 
-    for (const storyName in storyFile) {
+    const storyTestplaneDefaultConfigs = storyFile.default?.testplaneConfig || storyFile.default?.testplane || {};
+
+    for (const storyName of Object.keys(storyFile)) {
         if (storyName === "default") {
-            withStoryFileExtendedStories.forEach(story => {
-                const testplaneStoryOpts = storyFile[storyName].testplane || {};
+            continue;
+        }
 
-                story.skip = testplaneStoryOpts.skip || false;
-                story.assertViewOpts = testplaneStoryOpts.assertViewOpts || {};
-                story.browserIds = testplaneStoryOpts.browserIds || null;
-                story.autoscreenshotSelector = testplaneStoryOpts.autoscreenshotSelector || null;
-                story.autoScreenshotStorybookGlobals = testplaneStoryOpts.autoScreenshotStorybookGlobals || {};
-            });
+        const storyMapKey = getStoryNameId(storyName);
 
+        if (!storiesMap.has(storyMapKey)) {
             continue;
         }
 
-        const storyMapKey = getStoryNameId(storyName);
+        const storyTestlaneConfigs = storyFile[storyName].testplaneConfig || {};
+        const story = storiesMap.get(storyMapKey) as StorybookStoryExtended;
 
-        if (storiesMap.has(storyMapKey) && storyFile[storyName].testplane) {
-            const story = storiesMap.get(storyMapKey) as StorybookStoryExtended;
+        Object.assign(story, storyExtendedBaseConfig, storyTestplaneDefaultConfigs, storyTestlaneConfigs, {
+            extraTests: storyFile[storyName].testplane || null,
+        });
 
-            story.extraTests = storyFile[storyName].testplane;
-        }
+        story.assertViewOpts = extractInheritedValue(
+            inheritValue(storyTestplaneDefaultConfigs.assertViewOpts, storyTestlaneConfigs.assertViewOpts),
+            storyExtendedBaseConfig.assertViewOpts,
+        );
+
+        story.autoScreenshotStorybookGlobals =
+            inheritValue(
+                storyExtendedBaseConfig.autoScreenshotStorybookGlobals,
+                storyTestplaneDefaultConfigs.autoScreenshotStorybookGlobals,
+                storyTestlaneConfigs.autoScreenshotStorybookGlobals,
+            ) || {};
     }
 
     return withStoryFileExtendedStories;
@@ -74,13 +90,13 @@ function getStoryNameId(storyName: string): string {
     return storyName.replace(nonAsciiWordRegExp, "").toLowerCase();
 }
 
-function getStoryFile(storyPath: string): StoryFile | null {
+function getStoryFile(storyPath: string, { requireFn = require } = {}): StoryFile | null {
     const unmockFn = mockLoaders({ except: storyPath });
 
     let storyFile;
 
     try {
-        storyFile = require(storyPath); // eslint-disable-line @typescript-eslint/no-var-requires
+        storyFile = requireFn(storyPath);
     } catch (error) {
         if (!loggedStoryFileRequireError) {
             loggedStoryFileRequireError = true;

src/storybook/story-test-runner/extend-stories.ts

@@ -5,11 +5,13 @@ import type { StoryLoadResult } from "./open-story/testplane-open-story";
 import type { TestplaneOpts } from "../story-to-test";
 import type { TestFunctionExtendedCtx } from "../../types";
 import type { StorybookStoryExtended, StorybookStory } from "./types";
+import { extractInheritedValue } from "./inheritable-values";
 
 export function getAbsoluteFilePath(): string {
     return __filename;
 }
 
+// Those stories must be from a single story file
 export function run(stories: StorybookStory[], opts: TestplaneOpts): void {
     const withStoryFileDataStories = extendStoriesFromStoryFile(stories);
 
@@ -21,26 +23,28 @@ function createTestplaneTests(
     { autoScreenshots, autoscreenshotSelector, autoScreenshotStorybookGlobals }: TestplaneOpts,
 ): void {
     nestedDescribe(story, () => {
-        const rawAutoScreenshotGlobalSets = {
-            ...autoScreenshotStorybookGlobals,
-            ...story.autoScreenshotStorybookGlobals,
-        };
+        const rawAutoScreenshotGlobalSets = extractInheritedValue(
+            story.autoScreenshotStorybookGlobals,
+            autoScreenshotStorybookGlobals,
+        );
 
-        const screenshotGlobalSetNames = Object.keys(rawAutoScreenshotGlobalSets);
+        const screenshotGlobalSetNames = Object.keys(rawAutoScreenshotGlobalSets).filter(name =>
+            Boolean(rawAutoScreenshotGlobalSets[name]),
+        );
 
         const autoScreenshotGlobalSets = screenshotGlobalSetNames.length
             ? screenshotGlobalSetNames.map(name => ({ name, globals: rawAutoScreenshotGlobalSets[name] }))
             : [{ name: "", globals: {} }];
 
-        if (autoScreenshots) {
+        if (story.autoScreenshots ?? autoScreenshots) {
             for (const { name, globals } of autoScreenshotGlobalSets) {
                 extendedIt(
                     story,
                     `Autoscreenshot${name ? ` ${name}` : ""}`,
                     async function (ctx: TestFunctionExtendedCtx) {
                         ctx.expect = globalThis.expect;
 
-                        const result = await openStoryStep(ctx.browser, story, globals);
+                        const result = await openStoryStep(ctx.browser, story, globals as Record<string, unknown>);
                         const selector = story.autoscreenshotSelector || autoscreenshotSelector || result.rootSelector;
 
                         await autoScreenshotStep(ctx.browser, selector);