creevey 0.9.0-beta.20 → 0.9.0-beta.21

package/{lib/types → dist}/types.d.ts

@@ -1,30 +1,24 @@
-/// <reference types="node" />
-/// <reference types="chai" />
-import type { DecoratorFunction } from '@storybook/csf';
-import type { IKey } from 'selenium-webdriver/lib/input';
+import type { StoryContextForEnhancers, DecoratorFunction } from '@storybook/csf';
+import type { IKey } from 'selenium-webdriver/lib/input.js';
 import type { Worker as ClusterWorker } from 'cluster';
 import type { until, WebDriver, WebElementPromise } from 'selenium-webdriver';
 import type Pixelmatch from 'pixelmatch';
 import type { Context } from 'mocha';
-import { StoryContextForEnhancers } from '@storybook/csf';
-export declare type DiffOptions = typeof Pixelmatch extends (x1: any, x2: any, x3: any, x4: any, x5: any, options?: infer T) => void ? T : never;
-export declare type SetStoriesData = {
+import type { expect } from 'chai';
+export type DiffOptions = typeof Pixelmatch extends (x1: any, x2: any, x3: any, x4: any, x5: any, options?: infer T) => void ? T : never;
+export interface SetStoriesData {
     v?: number;
     globalParameters: {
         creevey?: CreeveyStoryParams;
     };
-    kindParameters: Partial<{
-        [kind: string]: {
-            fileName: string;
-            creevey?: CreeveyStoryParams;
-        };
-    }>;
+    kindParameters: Partial<Record<string, {
+        fileName: string;
+        creevey?: CreeveyStoryParams;
+    }>>;
     stories: StoriesRaw;
-};
-export declare type StoriesRaw = Record<string, StoryContextForEnhancers>;
-export declare type StoryInput = StoriesRaw extends {
-    [id: string]: infer S;
-} ? S : never;
+}
+export type StoriesRaw = Record<string, StoryContextForEnhancers>;
+export type StoryInput = StoriesRaw extends Record<string, infer S> ? S : never;
 export interface StoryMeta {
     title: string;
     component?: unknown;
@@ -80,7 +74,7 @@ export interface Capabilities {
     version?: string;
     [prop: string]: unknown;
 }
-export declare type BrowserConfig = Capabilities & {
+export type BrowserConfig = Capabilities & {
     limit?: number;
     gridUrl?: string;
     storybookUrl?: string;
@@ -104,10 +98,8 @@ export declare type BrowserConfig = Capabilities & {
         height: number;
     };
 };
-export interface StorybookGlobals {
-    [key: string]: unknown;
-}
-export declare type Browser = boolean | string | BrowserConfig;
+export type StorybookGlobals = Record<string, unknown>;
+export type Browser = boolean | string | BrowserConfig;
 export interface HookConfig {
     before?: () => unknown;
     after?: () => unknown;
@@ -159,9 +151,7 @@ export interface Config {
      * Browser capabilities
      * @default { chrome: true }
      */
-    browsers: {
-        [key: string]: Browser;
-    };
+    browsers: Record<string, Browser>;
     /**
      * Hooks that allow run custom script before and after creevey start
      */
@@ -243,7 +233,7 @@ export interface StoriesProvider<T = any> {
     (config: Config, options: T, storiesListener: (stories: Map<string, StoryInput[]>) => void): Promise<StoriesRaw>;
     providerName?: string;
 }
-export declare type CreeveyConfig = Partial<Config>;
+export type CreeveyConfig = Partial<Config>;
 export interface Options {
     _: string[];
     config?: string;
@@ -261,7 +251,7 @@ export interface Options {
     saveReport: boolean;
     failFast?: boolean;
 }
-export declare type WorkerMessage = {
+export type WorkerMessage = {
     type: 'ready';
     payload?: never;
 } | {
@@ -270,7 +260,7 @@ export declare type WorkerMessage = {
         error: string;
     };
 };
-export declare type StoriesMessage = {
+export type StoriesMessage = {
     type: 'get';
     payload?: never;
 } | {
@@ -286,7 +276,7 @@ export declare type StoriesMessage = {
     type: 'capture';
     payload?: CaptureOptions;
 };
-export declare type TestMessage = {
+export type TestMessage = {
     type: 'start';
     payload: {
         id: string;
@@ -297,7 +287,7 @@ export declare type TestMessage = {
     type: 'end';
     payload: TestResult;
 };
-export declare type WebpackMessage = {
+export type WebpackMessage = {
     type: 'success';
     payload?: never;
 } | {
@@ -310,7 +300,7 @@ export declare type WebpackMessage = {
     type: 'rebuild failed';
     payload?: never;
 };
-export declare type DockerMessage = {
+export type DockerMessage = {
     type: 'start';
     payload?: never;
 } | {
@@ -319,8 +309,8 @@ export declare type DockerMessage = {
         gridUrl: string;
     };
 };
-export declare type ShutdownMessage = unknown;
-export declare type ProcessMessage = (WorkerMessage & {
+export type ShutdownMessage = object;
+export type ProcessMessage = (WorkerMessage & {
     scope: 'worker';
 }) | (StoriesMessage & {
     scope: 'stories';
@@ -333,12 +323,12 @@ export declare type ProcessMessage = (WorkerMessage & {
 }) | (ShutdownMessage & {
     scope: 'shutdown';
 });
-export declare type WorkerHandler = (message: WorkerMessage) => void;
-export declare type StoriesHandler = (message: StoriesMessage) => void;
-export declare type TestHandler = (message: TestMessage) => void;
-export declare type WebpackHandler = (message: WebpackMessage) => void;
-export declare type DockerHandler = (message: DockerMessage) => void;
-export declare type ShutdownHandler = (message: ShutdownMessage) => void;
+export type WorkerHandler = (message: WorkerMessage) => void;
+export type StoriesHandler = (message: StoriesMessage) => void;
+export type TestHandler = (message: TestMessage) => void;
+export type WebpackHandler = (message: WebpackMessage) => void;
+export type DockerHandler = (message: DockerMessage) => void;
+export type ShutdownHandler = (message: ShutdownMessage) => void;
 export interface Worker extends ClusterWorker {
     isRunning?: boolean;
 }
@@ -348,18 +338,14 @@ export interface Images {
     diff?: string;
     error?: string;
 }
-export declare type TestStatus = 'unknown' | 'pending' | 'running' | 'failed' | 'success' | 'retrying';
+export type TestStatus = 'unknown' | 'pending' | 'running' | 'failed' | 'success' | 'retrying';
 export interface TestResult {
     status: 'failed' | 'success';
-    images?: Partial<{
-        [name: string]: Images;
-    }>;
+    images?: Partial<Record<string, Images>>;
     error?: string;
 }
 export interface ImagesError extends Error {
-    images: string | Partial<{
-        [name: string]: string;
-    }>;
+    images: string | Partial<Record<string, string>>;
 }
 export interface TestMeta {
     id: string;
@@ -373,9 +359,7 @@ export interface TestData extends TestMeta {
     retries?: number;
     status?: TestStatus;
     results?: TestResult[];
-    approved?: Partial<{
-        [image: string]: number;
-    }>;
+    approved?: Partial<Record<string, number>>;
 }
 export interface ServerTest extends TestData {
     story: StoryInput;
@@ -383,16 +367,12 @@ export interface ServerTest extends TestData {
 }
 export interface CreeveyStatus {
     isRunning: boolean;
-    tests: Partial<{
-        [id: string]: TestData;
-    }>;
+    tests: Partial<Record<string, TestData>>;
     browsers: string[];
 }
 export interface CreeveyUpdate {
     isRunning?: boolean;
-    tests?: Partial<{
-        [id: string]: TestData;
-    }>;
+    tests?: Partial<Record<string, TestData>>;
     removedTests?: TestMeta[];
 }
 export interface SkipOption {
@@ -401,16 +381,17 @@ export interface SkipOption {
     stories?: string | string[] | RegExp;
     tests?: string | string[] | RegExp;
 }
-export declare type SkipOptions = boolean | string | Record<string, SkipOption | SkipOption[]>;
-export declare type CreeveyTestFunction = (this: {
+export type SkipOptions = boolean | string | Record<string, SkipOption | SkipOption[]>;
+export interface CreeveyTestController {
     browser: WebDriver;
     until: typeof until;
     keys: IKey;
-    expect: Chai.ExpectStatic;
+    expect: typeof expect;
     takeScreenshot: () => Promise<string>;
-    updateStoryArgs: <Args extends Record<string, unknown>>(updatedArgs: Args) => Promise<void>;
+    updateStoryArgs: (updatedArgs: Record<string, unknown>) => Promise<void>;
     readonly captureElement?: WebElementPromise;
-}) => Promise<void>;
+}
+export type CreeveyTestFunction = (this: CreeveyTestController) => Promise<void>;
 export interface CaptureOptions {
     imageName?: string;
     captureElement?: string | null;
@@ -423,16 +404,14 @@ export interface CreeveyStoryParams extends CaptureOptions {
         ms: number;
     };
     skip?: SkipOptions;
-    tests?: {
-        [name: string]: CreeveyTestFunction;
-    };
+    tests?: Record<string, CreeveyTestFunction>;
 }
 export interface ApprovePayload {
     id: string;
     retry: number;
     image: string;
 }
-export declare type Request = {
+export type Request = {
     type: 'status';
 } | {
     type: 'start';
@@ -443,7 +422,7 @@ export declare type Request = {
     type: 'approve';
     payload: ApprovePayload;
 };
-export declare type Response = {
+export type Response = {
     type: 'status';
     payload: CreeveyStatus;
 } | {
@@ -462,14 +441,12 @@ export interface CreeveySuite {
     opened: boolean;
     checked: boolean;
     indeterminate: boolean;
-    children: Partial<{
-        [title: string]: CreeveySuite | CreeveyTest;
-    }>;
+    children: Partial<Record<string, CreeveySuite | CreeveyTest>>;
 }
-export declare type ImagesViewMode = 'side-by-side' | 'swap' | 'slide' | 'blend';
+export type ImagesViewMode = 'side-by-side' | 'swap' | 'slide' | 'blend';
 export declare function noop(): void;
 export declare function isDefined<T>(value: T | null | undefined): value is T;
-export declare function isTest<T1, T2 extends TestData>(x?: T1 | T2): x is T2;
+export declare function isTest(x?: CreeveySuite | CreeveyTest): x is CreeveyTest;
 export declare function isObject(x: unknown): x is Record<string, unknown>;
 export declare function isString(x: unknown): x is string;
 export declare function isFunction(x: unknown): x is (...args: any[]) => any;

package/dist/types.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.noop = noop;
+exports.isDefined = isDefined;
+exports.isTest = isTest;
+exports.isObject = isObject;
+exports.isString = isString;
+exports.isFunction = isFunction;
+exports.isImageError = isImageError;
+exports.isProcessMessage = isProcessMessage;
+exports.isWorkerMessage = isWorkerMessage;
+exports.isStoriesMessage = isStoriesMessage;
+exports.isTestMessage = isTestMessage;
+exports.isWebpackMessage = isWebpackMessage;
+exports.isDockerMessage = isDockerMessage;
+function noop() {
+    /* noop */
+}
+function isDefined(value) {
+    return value !== null && value !== undefined;
+}
+function isTest(x) {
+    return (isDefined(x) &&
+        isObject(x) &&
+        'id' in x &&
+        'storyId' in x &&
+        typeof x.id == 'string' &&
+        typeof x.storyId == 'string');
+}
+function isObject(x) {
+    return typeof x == 'object' && x != null;
+}
+function isString(x) {
+    return typeof x == 'string';
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isFunction(x) {
+    return typeof x == 'function';
+}
+function isImageError(error) {
+    return error instanceof Error && 'images' in error;
+}
+function isProcessMessage(message) {
+    return isObject(message) && 'scope' in message;
+}
+function isWorkerMessage(message) {
+    return isProcessMessage(message) && message.scope == 'worker';
+}
+function isStoriesMessage(message) {
+    return isProcessMessage(message) && message.scope == 'stories';
+}
+function isTestMessage(message) {
+    return isProcessMessage(message) && message.scope == 'test';
+}
+function isWebpackMessage(message) {
+    return isProcessMessage(message) && message.scope == 'webpack';
+}
+function isDockerMessage(message) {
+    return isProcessMessage(message) && message.scope == 'docker';
+}
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";;AAybA,oBAEC;AAED,8BAEC;AAED,wBASC;AAED,4BAEC;AAED,4BAEC;AAGD,gCAEC;AAED,oCAEC;AAED,4CAEC;AAED,0CAEC;AAED,4CAEC;AAED,sCAEC;AAED,4CAEC;AAED,0CAEC;AA1DD,SAAgB,IAAI;IAClB,UAAU;AACZ,CAAC;AAED,SAAgB,SAAS,CAAI,KAA2B;IACtD,OAAO,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC;AAC/C,CAAC;AAED,SAAgB,MAAM,CAAC,CAA8B;IACnD,OAAO,CACL,SAAS,CAAC,CAAC,CAAC;QACZ,QAAQ,CAAC,CAAC,CAAC;QACX,IAAI,IAAI,CAAC;QACT,SAAS,IAAI,CAAC;QACd,OAAO,CAAC,CAAC,EAAE,IAAI,QAAQ;QACvB,OAAO,CAAC,CAAC,OAAO,IAAI,QAAQ,CAC7B,CAAC;AACJ,CAAC;AAED,SAAgB,QAAQ,CAAC,CAAU;IACjC,OAAO,OAAO,CAAC,IAAI,QAAQ,IAAI,CAAC,IAAI,IAAI,CAAC;AAC3C,CAAC;AAED,SAAgB,QAAQ,CAAC,CAAU;IACjC,OAAO,OAAO,CAAC,IAAI,QAAQ,CAAC;AAC9B,CAAC;AAED,8DAA8D;AAC9D,SAAgB,UAAU,CAAC,CAAU;IACnC,OAAO,OAAO,CAAC,IAAI,UAAU,CAAC;AAChC,CAAC;AAED,SAAgB,YAAY,CAAC,KAAc;IACzC,OAAO,KAAK,YAAY,KAAK,IAAI,QAAQ,IAAI,KAAK,CAAC;AACrD,CAAC;AAED,SAAgB,gBAAgB,CAAC,OAAgB;IAC/C,OAAO,QAAQ,CAAC,OAAO,CAAC,IAAI,OAAO,IAAI,OAAO,CAAC;AACjD,CAAC;AAED,SAAgB,eAAe,CAAC,OAAgB;IAC9C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC;AAChE,CAAC;AAED,SAAgB,gBAAgB,CAAC,OAAgB;IAC/C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,SAAS,CAAC;AACjE,CAAC;AAED,SAAgB,aAAa,CAAC,OAAgB;IAC5C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,MAAM,CAAC;AAC9D,CAAC;AAED,SAAgB,gBAAgB,CAAC,OAAgB;IAC/C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,SAAS,CAAC;AACjE,CAAC;AAED,SAAgB,eAAe,CAAC,OAAgB;IAC9C,OAAO,gBAAgB,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,IAAI,QAAQ,CAAC;AAChE,CAAC"}

package/docs/config.md

@@ -12,7 +12,7 @@
 
 ### Creevey config
 
-In default configuration Creevey take screenshots of `#root` element only for chrome browser in one concurrent instance, to run tests in different browsers or speedup tests and run in parallel, you need to define config file `.creevey/config.js`
+In default configuration Creevey take screenshots of `#storybook-root` element only for chrome browser in one concurrent instance, to run tests in different browsers or speedup tests and run in parallel, you need to define config file `.creevey/config.js`
 
 ```ts
 module.exports = {
@@ -47,9 +47,6 @@ module.exports = {
   // Default Storybook url
   storybookUrl: 'http://localhost:6006',
 
-  // Storybook config directory
-  storybookDir: path.join(__dirname, '.storybook'),
-
   // Where original images are stored
   screenDir: path.join(__dirname, '../images'),
 

package/docs/tests.md

@@ -13,7 +13,7 @@ export default { title: 'MyComponent' };
 export const Basic: Story & CreeveyStory = () => <MyComponent />;
 Basic.parameters = {
   creevey: {
-    captureElement: '#root',
+    captureElement: '#storybook-root',
     tests: {
       async click() {
         await this.browser.actions().click(this.captureElement).perform();
@@ -25,7 +25,7 @@ Basic.parameters = {
 };
 ```
 
-NOTE: Here you define story parameters with simple test `click`. Where you setup capturing element `#root` then click on that element and taking screenshot to assert it. `this.browser` allow you to access to native selenium webdriver instance you could check [API here](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html).
+NOTE: Here you define story parameters with simple test `click`. Where you setup capturing element `#storybook-root` then click on that element and taking screenshot to assert it. `this.browser` allow you to access to native selenium webdriver instance you could check [API here](https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html).
 
 You also could write more powerful tests with asserting multiple screenshots
 
@@ -40,7 +40,7 @@ export const Basic: CSFStory<JSX.Element> = () => <MyForm />;
 Basic.story = {
   parameters: {
     creevey: {
-      captureElement: '#root',
+      captureElement: '#storybook-root',
       delay: 1000,
       tests: {
         async submit() {

package/eslint.config.mjs

@@ -0,0 +1,62 @@
+import globals from 'globals';
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+// @ts-expect-error There is no types in this package
+import react from 'eslint-plugin-react';
+import prettierRecommended from 'eslint-plugin-prettier/recommended';
+
+// TODO Add import plugin after it migrated to eslint 9.x
+const config = tseslint.config(
+  { ignores: ['dist/*', 'report/*', 'scripts/*'] },
+  js.configs.recommended,
+  prettierRecommended,
+  /* eslint-disable-next-line */
+  react.configs.flat.recommended,
+  ...tseslint.configs.strictTypeChecked,
+  ...tseslint.configs.stylisticTypeChecked,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+
+      ecmaVersion: 2021,
+      sourceType: 'module',
+
+      parserOptions: {
+        projectService: {
+          allowDefaultProject: ['*.{m,}js'],
+          defaultProject: 'tsconfig.json',
+        },
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      'react/prop-types': 'off',
+      '@typescript-eslint/restrict-template-expressions': [
+        'error',
+        {
+          allowNumber: true,
+        },
+      ],
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+);
+
+export default config;

package/manager/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "../dist/client/addon/manager.js"
+}