Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion jest.config.js
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
4,298 changes: 1,616 additions & 2,682 deletions package-lock.json

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Old jest didn't knew about "structuredClone" or "satisfies"

"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": {
Expand Down
97 changes: 92 additions & 5 deletions src/storybook/story-test-runner/extend-stories.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 }]);
});
});
70 changes: 43 additions & 27 deletions src/storybook/story-test-runner/extend-stories.ts
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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,
) || {};
Comment on lines +64 to +69
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now, when we have multiple layers of overriding, its important that these values can't be mutated.

With "autoScreenshotStorybookGlobals can be a function" (which is required to be able to overwrite without overriding), it can no longer be done with just "Object.assign", so i made "./inheritable-values.ts" module, which resolves the problem

}

return withStoryFileExtendedStories;
Expand All @@ -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;
Expand Down
18 changes: 11 additions & 7 deletions src/storybook/story-test-runner/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -21,26 +23,28 @@ function createTestplaneTests(
{ autoScreenshots, autoscreenshotSelector, autoScreenshotStorybookGlobals }: TestplaneOpts,
): void {
nestedDescribe(story, () => {
const rawAutoScreenshotGlobalSets = {
...autoScreenshotStorybookGlobals,
...story.autoScreenshotStorybookGlobals,
};
const rawAutoScreenshotGlobalSets = extractInheritedValue(
story.autoScreenshotStorybookGlobals,
Comment on lines +26 to +27
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here story.autoScreenshotStorybookGlobals is Inheritable<AutoScreenshotStorybookGlobals>

More about Inheritable at inheritable-values.ts

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);
Expand Down
Loading