creevey 0.10.0-beta.2 → 0.10.0-beta.20

package/dist/types.d.ts

@@ -4,7 +4,7 @@ import type Pixelmatch from 'pixelmatch';
 import type { ODiffOptions } from 'odiff-bin';
 import type { expect } from 'chai';
 import type EventEmitter from 'events';
-import type Logger from 'loglevel';
+import { LaunchOptions } from 'playwright-core';
 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;
@@ -28,6 +28,17 @@ export interface StoryMeta {
         [name: string]: unknown;
     };
 }
+export declare enum StorybookEvents {
+    SET_STORIES = "setStories",
+    SET_CURRENT_STORY = "setCurrentStory",
+    FORCE_REMOUNT = "forceRemount",
+    STORY_RENDERED = "storyRendered",
+    STORY_ERRORED = "storyErrored",
+    STORY_THREW_EXCEPTION = "storyThrewException",
+    UPDATE_STORY_ARGS = "updateStoryArgs",
+    SET_GLOBALS = "setGlobals",
+    UPDATE_GLOBALS = "updateGlobals"
+}
 export interface CreeveyMeta {
     parameters?: {
         creevey?: CreeveyStoryParams;
@@ -66,14 +77,6 @@ export interface CreeveyStory {
 }
 export interface BrowserConfigObject {
     browserName: string;
-    /**
-     * Browser version. Ignored with Playwright webdriver
-     */
-    browserVersion?: string;
-    /**
-     * Operation system name. Ignored with Playwright webdriver
-     */
-    platformName?: string;
     limit?: number;
     /**
      * Selenium grid url
@@ -100,7 +103,18 @@ export interface BrowserConfigObject {
         width: number;
         height: number;
     };
-    [name: string]: unknown;
+    seleniumCapabilities?: {
+        /**
+         * Browser version. Ignored with Playwright webdriver
+         */
+        browserVersion?: string;
+        /**
+         * Operation system name. Ignored with Playwright webdriver
+         */
+        platformName?: string;
+        [name: string]: unknown;
+    };
+    playwrightOptions?: Omit<LaunchOptions, 'logger'>;
 }
 export type StorybookGlobals = Record<string, unknown>;
 export type BrowserConfig = boolean | string | BrowserConfigObject;
@@ -110,7 +124,7 @@ export interface CreeveyWebdriver {
     openBrowser(fresh?: boolean): Promise<CreeveyWebdriver | null>;
     closeBrowser(): Promise<void>;
     loadStoriesFromBrowser(): Promise<StoriesRaw>;
-    switchStory(story: StoryInput, context: BaseCreeveyTestContext, logger: Logger.Logger): Promise<CreeveyTestContext>;
+    switchStory(story: StoryInput, context: BaseCreeveyTestContext): Promise<CreeveyTestContext>;
     afterTest(test: ServerTest): Promise<void>;
 }
 export interface HookConfig {
@@ -249,6 +263,11 @@ export interface Config {
      * The `--ui` CLI option ignores this option
      */
     failFast: boolean;
+    /**
+     * Start workers in sequential queue
+     * @default false
+     */
+    useWorkerQueue: boolean;
     /**
      * Specify platform for docker images
      */
@@ -391,8 +410,8 @@ export interface BaseCreeveyTestContext {
         imageName?: string;
         screenshot: Buffer;
     }[];
-    matchImage: (image: Buffer, imageName?: string) => Promise<void>;
-    matchImages: (images: Record<string, Buffer>) => Promise<void>;
+    matchImage: (image: Buffer | string, imageName?: string) => Promise<void>;
+    matchImages: (images: Record<string, Buffer | string>) => Promise<void>;
 }
 export interface CreeveyTestContext extends BaseCreeveyTestContext {
     takeScreenshot: () => Promise<Buffer>;

package/dist/types.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TEST_EVENTS = exports.ImagesError = void 0;
+exports.TEST_EVENTS = exports.ImagesError = exports.StorybookEvents = void 0;
 exports.noop = noop;
 exports.isDefined = isDefined;
 exports.isTest = isTest;
@@ -12,6 +12,18 @@ exports.isProcessMessage = isProcessMessage;
 exports.isWorkerMessage = isWorkerMessage;
 exports.isStoriesMessage = isStoriesMessage;
 exports.isTestMessage = isTestMessage;
+var StorybookEvents;
+(function (StorybookEvents) {
+    StorybookEvents["SET_STORIES"] = "setStories";
+    StorybookEvents["SET_CURRENT_STORY"] = "setCurrentStory";
+    StorybookEvents["FORCE_REMOUNT"] = "forceRemount";
+    StorybookEvents["STORY_RENDERED"] = "storyRendered";
+    StorybookEvents["STORY_ERRORED"] = "storyErrored";
+    StorybookEvents["STORY_THREW_EXCEPTION"] = "storyThrewException";
+    StorybookEvents["UPDATE_STORY_ARGS"] = "updateStoryArgs";
+    StorybookEvents["SET_GLOBALS"] = "setGlobals";
+    StorybookEvents["UPDATE_GLOBALS"] = "updateGlobals";
+})(StorybookEvents || (exports.StorybookEvents = StorybookEvents = {}));
 class ImagesError extends Error {
     images;
 }

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";;;AAiiBA,oBAEC;AAED,8BAEC;AAED,wBASC;AAED,4BAEC;AAED,4BAEC;AAGD,gCAEC;AAED,oCAEC;AAED,4CAEC;AAED,0CAEC;AAED,4CAEC;AAED,sCAEC;AA3MD,MAAa,WAAY,SAAQ,KAAK;IACpC,MAAM,CAA4C;CACnD;AAFD,kCAEC;AAwCD,IAAY,WAOX;AAPD,WAAY,WAAW;IACrB,kCAAmB,CAAA;IACnB,8BAAe,CAAA;IACf,kCAAmB,CAAA;IACnB,oCAAqB,CAAA;IACrB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;AACpB,CAAC,EAPW,WAAW,2BAAX,WAAW,QAOtB;AAwGD,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,WAAW,IAAI,QAAQ,IAAI,KAAK,CAAC;AAC3D,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"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";;;AAqjBA,oBAEC;AAED,8BAEC;AAED,wBASC;AAED,4BAEC;AAED,4BAEC;AAGD,gCAEC;AAED,oCAEC;AAED,4CAEC;AAED,0CAEC;AAED,4CAEC;AAED,sCAEC;AA5jBD,IAAY,eAUX;AAVD,WAAY,eAAe;IACzB,6CAA0B,CAAA;IAC1B,wDAAqC,CAAA;IACrC,iDAA8B,CAAA;IAC9B,mDAAgC,CAAA;IAChC,iDAA8B,CAAA;IAC9B,gEAA6C,CAAA;IAC7C,wDAAqC,CAAA;IACrC,6CAA0B,CAAA;IAC1B,mDAAgC,CAAA;AAClC,CAAC,EAVW,eAAe,+BAAf,eAAe,QAU1B;AAuWD,MAAa,WAAY,SAAQ,KAAK;IACpC,MAAM,CAA4C;CACnD;AAFD,kCAEC;AAwCD,IAAY,WAOX;AAPD,WAAY,WAAW;IACrB,kCAAmB,CAAA;IACnB,8BAAe,CAAA;IACf,kCAAmB,CAAA;IACnB,oCAAqB,CAAA;IACrB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;AACpB,CAAC,EAPW,WAAW,2BAAX,WAAW,QAOtB;AAwGD,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,WAAW,IAAI,QAAQ,IAAI,KAAK,CAAC;AAC3D,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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "creevey",
   "description": "Cross-browser screenshot testing tool for Storybook with fancy UI Runner",
-  "version": "0.10.0-beta.2",
+  "version": "0.10.0-beta.20",
   "type": "commonjs",
   "bin": "dist/cli.js",
   "main": "./dist/index.js",
@@ -9,12 +9,12 @@
   "exports": {
     ".": "./dist/index.js",
     "./playwright": {
-      "default": "./dist/playwright.js",
-      "types": "./dist/playwright.d.ts"
+      "types": "./dist/playwright.d.ts",
+      "default": "./dist/playwright.js"
     },
     "./selenium": {
-      "default": "./dist/selenium.js",
-      "types": "./dist/selenium.d.ts"
+      "types": "./dist/selenium.d.ts",
+      "default": "./dist/selenium.js"
     },
     "./manager": "./dist/client/addon/manager.js",
     "./preview": "./dist/client/addon/preview.js",
@@ -87,29 +87,30 @@
   },
   "dependencies": {
     "@koa/cors": "^5.0.0",
-    "@octokit/core": "^6.1.2",
+    "@octokit/core": "^6.1.3",
+    "@storybook/icons": "^1.3.0",
     "@types/chai": "^4.3.20",
-    "@types/dockerode": "^3.3.31",
+    "@types/dockerode": "^3.3.34",
     "@types/koa": "^2.15.0",
     "@types/koa-bodyparser": "^4.3.12",
     "@types/koa-mount": "^4.0.5",
     "@types/koa-static": "^4.0.4",
     "@types/koa__cors": "^5.0.0",
-    "@types/lodash": "^4.17.13",
+    "@types/lodash": "^4.17.14",
     "@types/micromatch": "^4.0.9",
     "@types/minimist": "^1.2.5",
     "@types/pixelmatch": "^5.2.6",
     "@types/pngjs": "^6.0.5",
-    "@types/qs": "^6.9.16",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/selenium-webdriver": "^4.1.27",
+    "@types/qs": "^6.9.17",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@types/selenium-webdriver": "^4.1.28",
     "@types/shelljs": "^0.8.15",
     "@types/ws": "^8.5.13",
     "chai": "^4.5.0",
     "chalk": "^4.1.2",
-    "chokidar": "^4.0.1",
-    "dockerode": "^4.0.2",
+    "chokidar": "^4.0.3",
+    "dockerode": "^4.0.3",
     "find-cache-dir": "^5.0.0",
     "get-port": "^7.1.0",
     "koa": "^2.15.3",
@@ -121,77 +122,72 @@
     "loglevel-plugin-prefix": "^0.8.4",
     "micromatch": "^4.0.8",
     "minimist": "^1.2.8",
-    "odiff-bin": "^3.1.2",
+    "odiff-bin": "^3.2.0",
     "pixelmatch": "^6.0.0",
     "pngjs": "^7.0.0",
     "polished": "^4.3.1",
-    "qs": "^6.13.0",
+    "qs": "^6.13.1",
     "semver": "^7.6.3",
     "shelljs": "^0.8.5",
     "tar-stream": "^3.1.7",
     "tsx": "^4.19.2",
-    "uuid": "^11.0.2",
+    "uuid": "^11.0.5",
     "ws": "^8.18.0",
-    "yocto-spinner": "^0.1.1"
+    "yocto-spinner": "^0.1.2"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@eslint/js": "^9.14.0",
-    "@storybook/addon-essentials": "^8.4.1",
-    "@storybook/addon-interactions": "^8.4.1",
-    "@storybook/blocks": "^8.4.1",
-    "@storybook/channels": "^8.4.1",
-    "@storybook/client-logger": "^8.4.1",
-    "@storybook/components": "^8.4.1",
-    "@storybook/core-common": "^8.4.1",
-    "@storybook/core-events": "^8.4.1",
-    "@storybook/core-server": "^8.4.1",
-    "@storybook/csf": "^0.1.11",
-    "@storybook/icons": "^1.2.12",
-    "@storybook/manager-api": "^8.4.1",
-    "@storybook/preview-api": "^8.4.1",
-    "@storybook/react": "^8.4.1",
-    "@storybook/react-vite": "^8.4.1",
-    "@storybook/test": "^8.4.1",
-    "@storybook/theming": "^8.4.1",
-    "@storybook/types": "^8.4.1",
+    "@chromatic-com/storybook": "^3.2.3",
+    "@eslint/js": "^9.18.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/channels": "^8.4.7",
+    "@storybook/components": "^8.4.7",
+    "@storybook/csf": "^0.1.13",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/preview-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
+    "@storybook/types": "^8.4.7",
     "@types/eslint": "^9.6.1",
     "@types/eslint__js": "^8.42.3",
     "@types/node": "^18.19.64",
     "@types/resize-observer-browser": "^0.1.11",
-    "@types/semver": "^7",
+    "@types/semver": "^7.5.8",
     "@types/tar-stream": "^3.1.3",
     "@types/tmp": "^0.2.6",
-    "@vitejs/plugin-react-swc": "^3.7.1",
-    "browserstack-local": "^1.5.5",
-    "chromatic": "^11.16.3",
-    "concurrently": "^9.0.1",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "browserstack-local": "^1.5.6",
+    "chromatic": "^11.22.2",
+    "concurrently": "^9.1.2",
     "conventional-changelog-cli": "^5.0.0",
-    "dotenv": "^16.4.5",
-    "eslint": "^9.14.0",
+    "dotenv": "^16.4.7",
+    "eslint": "^9.18.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "git-cz": "^4.9.0",
-    "globals": "^15.11.0",
-    "husky": "^9.1.6",
+    "globals": "^15.14.0",
+    "husky": "^9.1.7",
     "immer": "^10.1.1",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.3.0",
     "pinst": "^3.0.0",
-    "playwright-core": "^1.48.0",
-    "prettier": "^3.3.3",
+    "playwright-core": "^1.49.1",
+    "prettier": "^3.4.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "selenium-webdriver": "^4.26.0",
-    "storybook": "^8.4.1",
+    "selenium-webdriver": "^4.27.0",
+    "storybook": "^8.4.7",
     "tmp": "^0.2.3",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.12.2",
-    "use-immer": "^0.10.0",
-    "vite": "^5.4.10",
-    "vitest": "^2.1.4"
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.19.1",
+    "use-immer": "^0.11.0",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.8"
   },
   "config": {
     "commitizen": {

package/src/client/addon/components/Panel.tsx

@@ -1,11 +1,11 @@
 import React, { JSX } from 'react';
 import { Loader } from '@storybook/components';
 import { styled } from '@storybook/theming';
-import { TestData } from '../../../types.js';
+import { noop, TestData } from '../../../types.js';
 import { ResultsPage } from '../../shared/components/ResultsPage.js';
 import { getTestPath } from '../../shared/helpers.js';
 import TestSelect from './TestSelect.js';
-import { noop } from 'lodash';
+
 interface PanelProps {
   tests: TestData[];
   selectedTestId: string;

package/src/client/addon/controller.ts

@@ -1,7 +1,14 @@
 import { Addon_TypesEnum } from '@storybook/types';
-import { SET_STORIES, STORY_RENDERED } from '@storybook/core-events';
 import { denormalizeStoryParameters } from '../../shared/index.js';
-import { CreeveyStatus, CreeveyUpdate, isDefined, TestData, TestStatus, StoriesRaw } from '../../types.js';
+import {
+  CreeveyStatus,
+  CreeveyUpdate,
+  isDefined,
+  TestData,
+  TestStatus,
+  StoriesRaw,
+  StorybookEvents,
+} from '../../types.js';
 import { initCreeveyClientApi, CreeveyClientApi } from '../shared/creeveyClientApi.js';
 import { calcStatus } from '../shared/helpers.js';
 import { getEmojiByTestStatus } from './utils.js';
@@ -25,8 +32,8 @@ export class CreeveyController {
     this.storybookApi = storybookApi;
   }
   initAll = async (): Promise<void> => {
-    this.storybookApi.on(STORY_RENDERED, this.onStoryRendered);
-    this.storybookApi.on(SET_STORIES, this.onSetStories);
+    this.storybookApi.on(StorybookEvents.STORY_RENDERED, this.onStoryRendered);
+    this.storybookApi.on(StorybookEvents.SET_STORIES, this.onSetStories);
     this.creeveyApi = await initCreeveyClientApi();
     this.creeveyApi.onUpdate(this.handleCreeveyUpdate);
     this.status = await this.creeveyApi.status;
@@ -93,7 +100,7 @@ export class CreeveyController {
       this.stories = prevStories;
       this.setPanelsTitle();
       // TODO Check setStories method in 6.x and migrate properly
-      this.storybookApi.emit(SET_STORIES, this.stories);
+      this.storybookApi.emit(StorybookEvents.SET_STORIES, this.stories);
     }
     this.updateStatusListeners.forEach((x) => {
       x(update);
@@ -213,7 +220,7 @@ export class CreeveyController {
     });
 
     // TODO Check setStories method in 6.x and migrate properly
-    this.storybookApi.emit(SET_STORIES, this.stories);
+    this.storybookApi.emit(StorybookEvents.SET_STORIES, this.stories);
   }
 
   addStatusToStoryName(name: string, status: TestStatus | undefined, skip: string | boolean): string {

package/src/client/addon/withCreevey.ts

@@ -1,13 +1,22 @@
-import * as Events from '@storybook/core-events';
 import type { Renderer, StoryContextForEnhancers } from '@storybook/csf';
 import { makeDecorator, PreviewWeb, StoryStore } from '@storybook/preview-api';
 import { Channel } from '@storybook/channels';
-import { CaptureOptions, CreeveyStoryParams, isObject, noop, StoriesRaw, StorybookGlobals } from '../../types.js';
+import {
+  CaptureOptions,
+  CreeveyStoryParams,
+  isObject,
+  noop,
+  StoriesRaw,
+  StorybookEvents,
+  StorybookGlobals,
+} from '../../types.js';
 import { serializeRawStories } from '../../shared/index.js';
 import { getConnectionUrl } from '../shared/helpers.js';
+import isEqual from 'lodash/isEqual.js';
 
 declare global {
   interface Window {
+    __CREEVEY_ENV__: boolean;
     __CREEVEY_SERVER_HOST__: string;
     __CREEVEY_SERVER_PORT__: number;
     __CREEVEY_WORKER_ID__: number;
@@ -62,12 +71,12 @@ function catchRenderError(channel: Channel): Promise<void> & { cancel: () => voi
     rejectCallback(exception);
   }
   function removeHandlers(): void {
-    channel.off(Events.STORY_ERRORED, errorHandler);
-    channel.off(Events.STORY_THREW_EXCEPTION, errorHandler);
+    channel.off(StorybookEvents.STORY_ERRORED, errorHandler);
+    channel.off(StorybookEvents.STORY_THREW_EXCEPTION, errorHandler);
   }
 
-  channel.once(Events.STORY_ERRORED, errorHandler);
-  channel.once(Events.STORY_THREW_EXCEPTION, exceptionHandler);
+  channel.once(StorybookEvents.STORY_ERRORED, errorHandler);
+  channel.once(StorybookEvents.STORY_THREW_EXCEPTION, exceptionHandler);
 
   return Object.assign(promise, { cancel: removeHandlers });
 }
@@ -79,10 +88,10 @@ function waitForStoryRendered(channel: Channel): Promise<void> & { cancel: () =>
     resolveCallback();
   }
   function removeHandlers(): void {
-    channel.off(Events.STORY_RENDERED, renderHandler);
+    channel.off(StorybookEvents.STORY_RENDERED, renderHandler);
   }
 
-  channel.once(Events.STORY_RENDERED, renderHandler);
+  channel.once(StorybookEvents.STORY_RENDERED, renderHandler);
 
   return Object.assign(promise, { cancel: removeHandlers });
 }
@@ -132,6 +141,7 @@ let captureResolver: () => void;
 let waitForCreevey: Promise<void>;
 let creeveyReady: () => void;
 let setStoriesCounter = 0;
+let globals = {};
 
 export function withCreevey(): ReturnType<typeof makeDecorator> {
   const addonsChannel = (): Channel => window.__STORYBOOK_ADDONS_CHANNEL__;
@@ -166,7 +176,7 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     return stories;
   }
 
-  // TODO Use Events.STORY_RENDER_PHASE_CHANGED: `loading/rendering/completed` with storyId
+  // TODO Use StorybookEvents.STORY_RENDER_PHASE_CHANGED: `loading/rendering/completed` with storyId
   // TODO Check other statuses and statuses with play function
   async function selectStory(
     storyId: string,
@@ -188,8 +198,8 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     const capturePromise = waitForCaptureCall().then(() => (isCaptureCalled = true));
 
     setTimeout(() => {
-      if (storyId == currentStory) channel.emit(Events.FORCE_REMOUNT, { storyId });
-      else channel.emit(Events.SET_CURRENT_STORY, { storyId });
+      if (storyId == currentStory) channel.emit(StorybookEvents.FORCE_REMOUNT, { storyId });
+      else channel.emit(StorybookEvents.SET_CURRENT_STORY, { storyId });
     }, 0);
 
     try {
@@ -218,8 +228,11 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     }
   }
 
-  function updateGlobals(globals: StorybookGlobals): void {
-    addonsChannel().emit(Events.UPDATE_GLOBALS, { globals });
+  function updateGlobals(newGlobals: StorybookGlobals): void {
+    if (isEqual(globals, newGlobals)) return;
+
+    globals = newGlobals;
+    addonsChannel().emit(StorybookEvents.UPDATE_GLOBALS, { globals });
   }
 
   function insertIgnoreStyles(ignoreSelectors: string[]): HTMLStyleElement {
@@ -267,6 +280,7 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     });
   }
 
+  window.__CREEVEY_ENV__ = false;
   window.__CREEVEY_GET_STORIES__ = getStories;
   window.__CREEVEY_SELECT_STORY__ = selectStory;
   window.__CREEVEY_UPDATE_GLOBALS__ = updateGlobals;

package/src/client/shared/components/ImagesView/SwapView.tsx

@@ -46,6 +46,24 @@ export const SwapView = withTheme(({ theme, expect, actual, diff }: ViewPropsWit
     setImage((prevImage) => (prevImage == 'actual' ? 'expect' : 'actual'));
   }, []);
 
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.code === 'Space' && e.altKey) {
+        e.preventDefault();
+        handleChangeView();
+      }
+    },
+    [handleChangeView],
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
+
   useEffect(() => {
     if (loaded) readyForCapture();
   }, [loaded]);

package/src/client/shared/components/PageHeader/ImagePreview.tsx

@@ -70,6 +70,7 @@ export const ImagePreview = withTheme(
       onClick(imageName);
     };
 
+    // TODO Add image name as a title
     return (
       <Button
         onClick={handleClick}

package/src/client/shared/components/ResultsPage.tsx

@@ -1,11 +1,11 @@
-import React, { JSX, useState } from 'react';
+import React, { JSX, useCallback, useEffect, useState } from 'react';
 import { Placeholder, ScrollArea } from '@storybook/components';
 import { styled, withTheme, Theme } from '@storybook/theming';
 import { ImagesView } from './ImagesView/ImagesView.js';
 import { PageHeader } from './PageHeader/PageHeader.js';
 import { PageFooter } from './PageFooter/PageFooter.js';
 import { getImageUrl } from '../helpers.js';
-import { getViewMode, VIEW_MODE_KEY } from '../viewMode.js';
+import { getViewMode, VIEW_MODE_KEY, viewModes } from '../viewMode.js';
 import { ImagesViewMode, TestResult } from '../../../types.js';
 
 interface ResultsPageProps {
@@ -77,10 +77,31 @@ export function ResultsPageInternal({
       )
     : [];
 
-  const handleChangeViewMode = (mode: ImagesViewMode): void => {
-    localStorage.setItem(VIEW_MODE_KEY, mode);
-    setViewMode(mode);
-  };
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (!canApprove) return;
+      if (e.code === 'Tab') {
+        e.preventDefault();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        if (e.shiftKey) setViewMode((mode) => viewModes.at((viewModes.indexOf(mode) - 1) % viewModes.length)!);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        else setViewMode((mode) => viewModes.at((viewModes.indexOf(mode) + 1) % viewModes.length)!);
+      }
+    },
+    [canApprove],
+  );
+
+  useEffect(() => {
+    localStorage.setItem(VIEW_MODE_KEY, viewMode);
+  }, [viewMode]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, false);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, false);
+    };
+  }, [handleKeyDown]);
 
   return (
     <Container height={height}>
@@ -92,7 +113,7 @@ export function ResultsPageInternal({
           errorMessage={result.error}
           showViewModes={hasDiffAndExpect}
           viewMode={viewMode}
-          onViewModeChange={handleChangeViewMode}
+          onViewModeChange={setViewMode}
           onImageChange={onImageChange}
           imagesWithError={imagesWithError}
         />

package/src/client/shared/helpers.ts

@@ -1,4 +1,3 @@
-import { themes, ThemeVars } from '@storybook/theming';
 import { parse, stringify } from 'qs';
 import { RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { TestData, isTest, isDefined, TestStatus, CreeveySuite, CreeveyTest, CreeveyStatus } from '../../types.js';
@@ -393,27 +392,6 @@ export function useCalcScale(diffImageRef: RefObject<HTMLImageElement>, loaded:
   return scale;
 }
 
-const CREEVEY_THEME = 'Creevey_theme';
-
-function isTheme(theme?: string | null): theme is ThemeVars['base'] {
-  return isDefined(theme) && Object.prototype.hasOwnProperty.call(themes, theme);
-}
-
-function initialTheme(): ThemeVars['base'] {
-  const theme = localStorage.getItem(CREEVEY_THEME);
-  return isTheme(theme) ? theme : 'light';
-}
-
-export function useTheme(): [ThemeVars['base'], (theme: ThemeVars['base']) => void] {
-  const [theme, setTheme] = useState<ThemeVars['base']>(initialTheme());
-
-  useEffect(() => {
-    localStorage.setItem(CREEVEY_THEME, theme);
-  }, [theme]);
-
-  return [theme, setTheme];
-}
-
 export function setSearchParams(testPath: string[]): void {
   const pageUrl = `?${stringify({ testPath })}`;
   window.history.pushState({ testPath }, '', pageUrl);