diff --git a/src/index.test.ts b/src/index.test.ts index fd31f1e..4109c97 100644 --- a/src/index.test.ts +++ b/src/index.test.ts @@ -1,7 +1,7 @@ import { imageSnapshot, waitMillis } from "./index"; import { Browser, createBrowser } from "./internal/browser"; import { createSnapshotter, SnapshotterOptions } from "./internal/snapshotter"; -import { ImageSnapshotOptions, StorybookContext } from "./types"; +import { ImageSnapshotOptions, TestMethodContext } from "./types"; import { createBrowserMockImplementation } from "./internal/__mocks__/browser"; import "./internal/test-utils/to-take-millis-to-resolve"; @@ -30,7 +30,14 @@ const CHROME = { }, }; -const CONTEXT = { kind: "a-kind", story: { id: "a-story" } }; +const CONTEXT: TestMethodContext = { + fileName: "./index.stories.ts", + framework: "react", + name: "Story", + story: "story", + kind: "a-kind", + id: "a-story", +}; describe("index", () => { let consoleErrorSpy: jest.SpyInstance; @@ -83,15 +90,15 @@ describe("index", () => { ]); }); - it("waits until the test method is finished before resolving the returned promise", async () => { + it("waits until the test method is finished, then resolves the returned promise", async () => { const timeline = []; createSnapshotterMock.mockImplementation((options: SnapshotterOptions) => { return { async createSnapshots() { - timeline.push("Starting " + options.context.story.id); + timeline.push("Starting " + options.context.id); await waitMillis(200)(); - timeline.push("Done " + options.context.story.id); + timeline.push("Done " + options.context.id); }, errors: [], }; @@ -102,7 +109,7 @@ describe("index", () => { await testMethod.beforeAll(); try { for (let i = 0; i < 3; i++) { - await testMethod({ kind: "kind", story: { id: "story " + i } }); + await testMethod({ context: { ...CONTEXT, kind: "kind", id: "story " + i } }); } } finally { await testMethod.afterAll(); @@ -129,12 +136,10 @@ describe("index", () => { { browsers: [FIREFOX, CHROME] }, { ...CONTEXT, - story: { - ...CONTEXT.story, - parameters: { - storyshotSelenium: { - ignore: true, - }, + + parameters: { + storyshotSelenium: { + ignore: true, }, }, } @@ -311,13 +316,13 @@ describe("index", () => { async function runTestMethodWithLifeCycle( options: ImageSnapshotOptions, - context: StorybookContext + context: TestMethodContext ) { const testMethod = imageSnapshot(options); await testMethod.beforeAll(); try { - await testMethod(context); + await testMethod({ context }); } finally { await testMethod.afterAll(); } @@ -325,7 +330,7 @@ async function runTestMethodWithLifeCycle( async function getActualSnapshotterOptions( nonRequiredOptions: Partial, - context: StorybookContext + context: TestMethodContext ): Promise { await runTestMethodWithLifeCycle({ browsers: [CHROME], ...nonRequiredOptions }, context); return createSnapshotterMock.mock.calls[0][0]; diff --git a/src/index.ts b/src/index.ts index 9f07366..caed350 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,8 +1,8 @@ import { ImageSnapshotOptions, InternalImageSnapshotOptions, - StorybookContext, TestMethod, + TestMethodArgs, } from "./types"; import createDebug from "debug"; @@ -51,11 +51,12 @@ export function imageSnapshot(options: ImageSnapshotOptions): TestMethod { } } - async function runTest(context: StorybookContext): Promise { - if (context.story.parameters?.storyshotSelenium?.ignore) { + async function runTest({ context }: TestMethodArgs): Promise { + if (context.parameters?.storyshotSelenium?.ignore) { return; } - const storySpecificSizes = context.story.parameters?.storyshotSelenium?.sizes; + + const storySpecificSizes = context.parameters?.storyshotSelenium?.sizes; const snapshotter = createSnapshotter({ beforeFirstScreenshot: optionsWithDefaults.beforeFirstScreenshot, beforeEachScreenshot: optionsWithDefaults.beforeEachScreenshot, diff --git a/src/internal/defaultOptions.ts b/src/internal/defaultOptions.ts index 395e72a..010526c 100644 --- a/src/internal/defaultOptions.ts +++ b/src/internal/defaultOptions.ts @@ -22,8 +22,8 @@ export function getDefaultMatchOptions( { context, size, browserId }: GetMatchOptionsOptions ): MatchImageSnapshotOptions { return { - customSnapshotsDir: path.join(snapshotBaseDirectory, context.story.id), - customSnapshotIdentifier: `${context.story.id}-${size}-${browserId}`, + customSnapshotsDir: path.join(snapshotBaseDirectory, context.id), + customSnapshotIdentifier: `${context.id}-${size}-${browserId}`, customDiffConfig: { threshold: 0.02, includeAA: true, diff --git a/src/internal/snappshotter.test.ts b/src/internal/snappshotter.test.ts index a319e84..6539150 100644 --- a/src/internal/snappshotter.test.ts +++ b/src/internal/snappshotter.test.ts @@ -16,8 +16,17 @@ const toMatchImageSnapshotMock = toMatchImageSnapshot as jest.MockedFunction< typeof toMatchImageSnapshot >; -const snapshotterOptions = { - context: { story: { id: "test-story" }, kind: "kind" }, +const context = { + id: "test-story", + kind: "kind", + story: "A story", + name: "Story name", + framework: "html", + fileName: "test.js", +}; + +const snapshotterOptions: SnapshotterOptions = { + context, sizes: ["1280x1024", "1024x768"], afterEachScreenshot: jest.fn().mockReturnValue(Promise.resolve()), beforeFirstScreenshot: jest.fn().mockReturnValue(Promise.resolve()), @@ -74,12 +83,7 @@ function testSnapshotter() { const BASIC_HOOK_OPTIONS: BasicHookOptions = { browserId: "chrome", - context: { - kind: "kind", - story: { - id: "test-story", - }, - }, + context: context, url: "http://storybook:9009/iframe.html?id=test-story", }; diff --git a/src/internal/snapshotter.ts b/src/internal/snapshotter.ts index c62327e..2d0e30c 100644 --- a/src/internal/snapshotter.ts +++ b/src/internal/snapshotter.ts @@ -4,7 +4,7 @@ import { BeforeEachScreenshotFunction, BeforeFirstScreenshotFunction, GetMatchOptionsFunction, - StorybookContext, + TestMethodContext, WidthXHeightString, WithSize, } from "../types"; @@ -25,7 +25,7 @@ export interface SnapshotterOptions { beforeEachScreenshot: BeforeEachScreenshotFunction; afterEachScreenshot: AfterEachScreenshotFunction; getMatchOptions: GetMatchOptionsFunction; - context: StorybookContext; + context: TestMethodContext; } export interface Snapshotter { @@ -49,7 +49,7 @@ export function createSnapshotter(options: SnapshotterOptions): Snapshotter { } class SnapshotterImpl implements Snapshotter { - private readonly context: StorybookContext; + private readonly context: TestMethodContext; private readonly sizes: WidthXHeightString[]; private readonly beforeFirstScreenshot: BeforeFirstScreenshotFunction; private readonly beforeEachScreenshot: BeforeEachScreenshotFunction; @@ -68,9 +68,7 @@ class SnapshotterImpl implements Snapshotter { } async createSnapshots(browser: Browser, storybookUrl: string): Promise { - const screenshotUrl = `${storybookUrl}/iframe.html?id=${encodeURIComponent( - this.context.story.id - )}`; + const screenshotUrl = `${storybookUrl}/iframe.html?id=${encodeURIComponent(this.context.id)}`; await browser.prepareBrowser(screenshotUrl); const contextWithUrl = { context: this.context, url: screenshotUrl, browserId: browser.id }; diff --git a/src/types.ts b/src/types.ts index 2f5bb99..f0cdd66 100644 --- a/src/types.ts +++ b/src/types.ts @@ -5,7 +5,7 @@ import { WebDriver } from "selenium-webdriver"; * The result-type of the "imageSnapshot" method. */ export interface TestMethod { - (context: StorybookContext): any; + (args: TestMethodArgs): any; beforeAll: LifeCycleMethod; afterAll: LifeCycleMethod; timeout: number; @@ -25,7 +25,7 @@ export interface LifeCycleMethod { export type WidthXHeightString = string; export interface BasicHookOptions { - context: StorybookContext | any; + context: TestMethodContext; url: string; browserId: string; } @@ -105,16 +105,20 @@ export type InternalImageSnapshotOptions = OptionalImageSnapshotOptions & export type ImageSnapshotOptions = Partial & RequiredImageSnapshotOptions; -export interface StorybookContext { - kind: string; - story: StorybookStory; +export interface TestMethodArgs { + context: TestMethodContext; } -export interface StorybookStory { +export interface TestMethodContext { id: string; + kind: string; + name: string; + story: string; + fileName: string; parameters?: { storyshotSelenium?: StoryParameters; }; + framework: string; } export interface StoryParameters {