From 3c14fe96f745d6eae225f2a79e6cf76ac159b031 Mon Sep 17 00:00:00 2001 From: Roman Kuznetsov Date: Mon, 2 Dec 2024 04:57:50 +0300 Subject: [PATCH] feat: add ability to specify autoscreenshotSelector globally --- src/config.test.ts | 2 ++ src/config.ts | 2 ++ src/index.ts | 1 + src/storybook/story-test-runner/index.ts | 5 +++-- src/storybook/story-to-test/index.test.ts | 19 +++++++++++++------ src/storybook/story-to-test/index.ts | 7 ++----- .../story-to-test/write-tests-file.test.ts | 19 +++++++++++++------ .../story-to-test/write-tests-file.ts | 1 + 8 files changed, 37 insertions(+), 19 deletions(-) diff --git a/src/config.test.ts b/src/config.test.ts index a59a2fb..c73a517 100644 --- a/src/config.test.ts +++ b/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"], diff --git a/src/config.ts b/src/config.ts index 9e7021b..0bc1af3 100644 --- a/src/config.ts +++ b/src/config.ts @@ -77,6 +77,7 @@ export interface PluginConfig { enabled: boolean; storybookConfigDir: string; autoScreenshots: boolean; + autoscreenshotSelector: string; autoScreenshotStorybookGlobals: Record>; 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", ""), diff --git a/src/index.ts b/src/index.ts index 3c4fa7c..744c943 100644 --- a/src/index.ts +++ b/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, }); diff --git a/src/storybook/story-test-runner/index.ts b/src/storybook/story-test-runner/index.ts index dfbbd5b..e43dc0b 100644 --- a/src/storybook/story-test-runner/index.ts +++ b/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); }, ); } diff --git a/src/storybook/story-to-test/index.test.ts b/src/storybook/story-to-test/index.test.ts index eeb02cb..dff39ad 100644 --- a/src/storybook/story-to-test/index.test.ts +++ b/src/storybook/story-to-test/index.test.ts @@ -14,6 +14,7 @@ describe("storybook/story-to-test", () => { const storyTestFiles = await buildStoryTestFiles([story], { autoScreenshots: true, + autoscreenshotSelector: "foobar", autoScreenshotStorybookGlobals: {}, }); @@ -21,7 +22,11 @@ describe("storybook/story-to-test", () => { }); 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([ diff --git a/src/storybook/story-to-test/index.ts b/src/storybook/story-to-test/index.ts index 6a228ee..e348d10 100644 --- a/src/storybook/story-to-test/index.ts +++ b/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>; -} +export type { TestplaneOpts }; const testplaneTestNameSuffix = ".testplane.js"; diff --git a/src/storybook/story-to-test/write-tests-file.test.ts b/src/storybook/story-to-test/write-tests-file.test.ts index 3d9a2de..37caf4f 100644 --- a/src/storybook/story-to-test/write-tests-file.test.ts +++ b/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(); diff --git a/src/storybook/story-to-test/write-tests-file.ts b/src/storybook/story-to-test/write-tests-file.ts index 0945f64..2dd74cd 100644 --- a/src/storybook/story-to-test/write-tests-file.ts +++ b/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>; }