Merge pull request #30 from gemini-testing/TESTPLANE-357.autoscreenshotSelector

feat: add ability to specify autoscreenshotSelector globally

Author: KuznetsovRoman

src/config.test.ts

@@ -19,6 +19,8 @@ describe("config", () => {
             enabled: false,
             storybookConfigDir: "custom-dir",
             autoScreenshots: false,
+            autoscreenshotSelector: "foobar",
+            autoScreenshotStorybookGlobals: { default: { theme: "dark" } },
             localport: 1234,
             remoteStorybookUrl: "http://localhost:3000",
             browserIds: ["chrome", "firefox"],

src/config.ts

@@ -77,6 +77,7 @@ export interface PluginConfig {
     enabled: boolean;
     storybookConfigDir: string;
     autoScreenshots: boolean;
+    autoscreenshotSelector: string;
     autoScreenshotStorybookGlobals: Record<string, Record<string, unknown>>;
     localport: number;
     remoteStorybookUrl: string;
@@ -94,6 +95,7 @@ export function parseConfig(options: PluginPartialConfig): PluginConfig {
             enabled: booleanOption("enabled", true),
             storybookConfigDir: stringOption("storybookConfigDir", ".storybook"),
             autoScreenshots: booleanOption("autoScreenshots", true),
+            autoscreenshotSelector: stringOption("autoscreenshotSelector", ""),
             autoScreenshotStorybookGlobals: optionalRecordOfRecordsOption("autoScreenshotStorybookGlobals", {}),
             localport: numberOption("localport", 6006),
             remoteStorybookUrl: stringOption("remoteStorybookUrl", ""),

src/index.ts

@@ -80,6 +80,7 @@ function onTestplaneMaster(testplane: Testplane, config: PluginConfig): void {
 
         const storyTestFiles = await buildStoryTestFiles(stories, {
             autoScreenshots: config.autoScreenshots,
+            autoscreenshotSelector: config.autoscreenshotSelector,
             autoScreenshotStorybookGlobals: config.autoScreenshotStorybookGlobals,
         });
 

src/storybook/story-test-runner/index.ts

@@ -18,7 +18,7 @@ export function run(stories: StorybookStory[], opts: TestplaneOpts): void {
 
 function createTestplaneTests(
     story: StorybookStoryExtended,
-    { autoScreenshots, autoScreenshotStorybookGlobals }: TestplaneOpts,
+    { autoScreenshots, autoscreenshotSelector, autoScreenshotStorybookGlobals }: TestplaneOpts,
 ): void {
     nestedDescribe(story, () => {
         const rawAutoScreenshotGlobalSets = {
@@ -41,8 +41,9 @@ function createTestplaneTests(
                         ctx.expect = globalThis.expect;
 
                         const result = await openStoryStep(ctx.browser, story, globals);
+                        const selector = story.autoscreenshotSelector || autoscreenshotSelector || result.rootSelector;
 
-                        await autoScreenshotStep(ctx.browser, story.autoscreenshotSelector || result.rootSelector);
+                        await autoScreenshotStep(ctx.browser, selector);
                     },
                 );
             }

src/storybook/story-to-test/index.test.ts

@@ -14,14 +14,19 @@ describe("storybook/story-to-test", () => {
 
         const storyTestFiles = await buildStoryTestFiles([story], {
             autoScreenshots: true,
+            autoscreenshotSelector: "foobar",
             autoScreenshotStorybookGlobals: {},
         });
 
         expect(storyTestFiles).toEqual(["/tmpdir/testplane-storybook-autogenerated/story/path/story.js.testplane.js"]);
     });
 
     it("should empty tests dir before writing tests", async () => {
-        await buildStoryTestFiles([], { autoScreenshots: true, autoScreenshotStorybookGlobals: {} });
+        await buildStoryTestFiles([], {
+            autoScreenshots: true,
+            autoscreenshotSelector: "foobar",
+            autoScreenshotStorybookGlobals: {},
+        });
 
         expect(fs.emptyDir).toBeCalled();
     });
@@ -30,22 +35,24 @@ describe("storybook/story-to-test", () => {
         jest.spyOn(path, "resolve").mockImplementation((_, storyPath) => storyPath);
         const storyFirst = { importPath: "./story/path/story-first.js" } as StorybookStoryExtended;
         const storySecond = { importPath: "./story/path/story-second.js" } as StorybookStoryExtended;
-
-        const storyTestFiles = await buildStoryTestFiles([storyFirst, storySecond], {
+        const opts = {
             autoScreenshots: true,
+            autoscreenshotSelector: "foobar",
             autoScreenshotStorybookGlobals: { foo: { bar: "baz" } },
-        });
+        };
+
+        const storyTestFiles = await buildStoryTestFiles([storyFirst, storySecond], opts);
 
         expect(writeStoryTestsFile).toBeCalledWith({
             testFile: "./story/path/story-first.js.testplane.js",
-            opts: { autoScreenshots: true, autoScreenshotStorybookGlobals: { foo: { bar: "baz" } } },
             stories: [storyFirst],
+            opts,
         });
 
         expect(writeStoryTestsFile).toBeCalledWith({
             testFile: "./story/path/story-second.js.testplane.js",
-            opts: { autoScreenshots: true, autoScreenshotStorybookGlobals: { foo: { bar: "baz" } } },
             stories: [storySecond],
+            opts,
         });
 
         expect(storyTestFiles).toEqual([

src/storybook/story-to-test/index.ts

@@ -3,14 +3,11 @@ import os from "os";
 import fs from "fs-extra";
 import _ from "lodash";
 import type { Test } from "testplane";
-import { writeStoryTestsFile } from "./write-tests-file";
+import { writeStoryTestsFile, TestplaneOpts } from "./write-tests-file";
 import { STORYBOOK_TEST_DIRNAME } from "../../constants";
 import type { StorybookStoryExtended } from "../get-stories";
 
-export interface TestplaneOpts {
-    autoScreenshots: boolean;
-    autoScreenshotStorybookGlobals: Record<string, Record<string, unknown>>;
-}
+export type { TestplaneOpts };
 
 const testplaneTestNameSuffix = ".testplane.js";
 

src/storybook/story-to-test/write-tests-file.test.ts

@@ -13,22 +13,29 @@ jest.mock("fs-extra", () => ({
 
 describe("storybook/story-to-test/write-tests-file", () => {
     it("should write test file with correct content", async () => {
-        const opts = { autoScreenshots: true, autoScreenshotStorybookGlobals: { foo: { bar: "baz" } } };
         const stories = [{ id: "foo" }, { id: "bar" }] as StorybookStoryExtended[];
+        const storyTestRunnerPath = "/absolute/story/runner/path";
+        const testplaneOpts = {
+            autoScreenshots: true,
+            autoscreenshotSelector: ".foobar",
+            autoScreenshotStorybookGlobals: { foo: { bar: "baz" } },
+        };
+
         const testFile = "/absolute/test/path/file.testplane.js";
+
         const expectedContents = `
-const stories = [{"id":"foo"},{"id":"bar"}];
-const storyTestRunnerPath = "/absolute/story/runner/path";
-const testplaneOpts = {"autoScreenshots":true,"autoScreenshotStorybookGlobals":{"foo":{"bar":"baz"}}};
+const stories = ${JSON.stringify(stories)};
+const storyTestRunnerPath = ${JSON.stringify(storyTestRunnerPath)};
+const testplaneOpts = ${JSON.stringify(testplaneOpts)};
 
 require(storyTestRunnerPath).run(stories, testplaneOpts);
 `;
-        jest.mocked(getStoryRunnerAbsoluteFilePath).mockReturnValue("/absolute/story/runner/path");
+        jest.mocked(getStoryRunnerAbsoluteFilePath).mockReturnValue(storyTestRunnerPath);
 
         await writeStoryTestsFile({
             testFile,
             stories,
-            opts,
+            opts: testplaneOpts,
         });
 
         expect(getStoryRunnerAbsoluteFilePath).toHaveBeenCalled();

src/storybook/story-to-test/write-tests-file.ts

@@ -5,6 +5,7 @@ import { StorybookStoryExtended } from "../get-stories";
 
 export interface TestplaneOpts {
     autoScreenshots: boolean;
+    autoscreenshotSelector: string;
     autoScreenshotStorybookGlobals: Record<string, Record<string, unknown>>;
 }