fix: adjust typigns of test-methods args to the ones actually use

- typings in storybook are wrong - storybookjs/storybook#12361
nknapp · Sep 4, 2020 · 29600d7 · 29600d7
1 parent 19a5c75
commit 29600d7
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 41 deletions.
diff --git 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,21 +316,21 @@ 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();
 	}
 }
 
 async function getActualSnapshotterOptions(
 	nonRequiredOptions: Partial<ImageSnapshotOptions>,
-	context: StorybookContext
+	context: TestMethodContext
 ): Promise<SnapshotterOptions> {
 	await runTestMethodWithLifeCycle({ browsers: [CHROME], ...nonRequiredOptions }, context);
 	return createSnapshotterMock.mock.calls[0][0];

diff --git 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<void> {
-		if (context.story.parameters?.storyshotSelenium?.ignore) {
+	async function runTest({ context }: TestMethodArgs): Promise<void> {
+		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
@@ -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
@@ -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
@@ -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<void> {
-		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
@@ -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<OptionalImageSnapshotOptions> &
 	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 {