creevey 0.10.0-beta.4 → 0.10.0-beta.40

package/docs/tests.md

@@ -1,63 +1,68 @@
-## Write tests
+## Write interactive screenshot tests
 
-By default Creevey generate for each story very simple screenshot test. In most cases it would be enough to test your UI. But you may want to do some interactions and capture one or multiple screenshots with different states of your story. For this case you could write custom tests, like this
+In most cases following Storybook's ideology of [writing stories](https://storybook.js.org/docs/get-started/whats-a-story) is enough to test your UI components. Where each component has a separate stories file with its different states. But sometimes you might have pretty complicated components with a lot of interactions and internal states. In this case, you can write tests for your stories.
 
-```tsx
-import React from 'react';
-import { Story } from '@storybook/react';
-import { CreeveyStory } from 'creevey';
-import MyComponent from './src/components/MyComponent';
+There are two different ways how to write interactive tests with Creevey:
 
-export default { title: 'MyComponent' };
+### Write tests in `*.creevey.ts` files
 
-export const Basic: Story & CreeveyStory = () => <MyComponent />;
-Basic.parameters = {
-  creevey: {
-    captureElement: '#storybook-root',
-    tests: {
-      async click() {
-        await this.browser.actions().click(this.captureElement).perform();
+It's the recommended way to write tests. It allows you to run these tests by Creevey itself and utilize webdriver benefits. The crucial part of it is webdriver action calls are more close to real user interactions and mitigate flakiness and false-negative results. Here is a simple example of how to write tests in `*.creevey.ts` files
 
-        await this.expect(await this.takeScreenshot()).to.matchImage('clicked component');
-      },
-    },
-  },
-};
+```ts
+// stories/MyComponent.creevey.ts
+import { kind, story, test } from 'creevey';
+
+kind('MyComponent', () => {
+  story('Story', ({ setStoryParameters }) => {
+    // It's possible to pass Creevey parameters to story
+    setStoryParameters({
+      captureElement: 'span[data-test-id~="x"]',
+      ignoreElements: [],
+    });
+
+    test('idle', async (context) => {
+      await context.matchImage(await context.takeScreenshot());
+    });
+
+    test('input', async (context) => {
+      await context.webdriver.keyboard.press('Tab');
+      const focus = await context.takeScreenshot();
+      await context.webdriver.keyboard.type('Hello Creevey');
+      const input = await context.takeScreenshot();
+      await context.matchImages({ focus, input });
+    });
+  });
+});
 ```
 
-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).
+In the example above, we used Playwright API to interact with the story. But Creevey also supports Selenium webdriver. And in that case `context.webdriver` will be an instance of Selenium webdriver. Obviously Selenium API is different from Playwright.
 
-You also could write more powerful tests with asserting multiple screenshots
+### Using Storybook's `play` function
 
-```tsx
-import React from 'react';
-import { CSFStory } from 'creevey';
-import MyForm from './src/components/MyForm';
+Storybook allows you to write tests in the story file itself by using [`play` function](https://storybook.js.org/docs/writing-tests/component-testing). It's a good way to write simple tests. But there are couple drawbacks of this approach:
 
-export default { title: 'MyForm' };
+- You can have only one test per story. Which is not a big deal, but sometimes you might not want to have multiple stories with the same markup.
+- Tests are running in browser environment and use https://testing-library.com API under the hood. It's good for unit tests, but might not be suitable for visual regression tests, because testing-library relies on DOM API and not even close to real user interactions. For example, you might have a button that could be visible for user, but it's covered by some other transparent element. With testing-library the button easily accessible and clickable, but the user can't interact with it.
 
-export const Basic: CSFStory<JSX.Element> = () => <MyForm />;
-Basic.story = {
-  parameters: {
-    creevey: {
-      captureElement: '#storybook-root',
-      delay: 1000,
-      tests: {
-        async submit() {
-          const input = await this.browser.findElement({ css: '.my-input' });
+Here is an example of how to write tests using Storybook's `play` function:
 
-          const empty = await this.takeScreenshot();
+```tsx
+// stories/MyComponent.stories.tsx
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { fireEvent, within } from '@storybook/test';
+import MyComponent from './src/components/MyComponent';
 
-          await this.browser.actions().click(input).sendKeys('Hello Creevey').sendKeys(this.keys.ENTER).perform();
+export default {
+  title: 'MyComponent',
+  component: MyComponent,
+};
 
-          const submitted = await this.takeScreenshot();
+export const Basic: StoryObj<typeof MyComponent> = {
+  play: async ({ canvasElement }) => {
+    const slider = await within(canvasElement).findByTestId('slider');
 
-          await this.expect({ empty, submitted }).to.matchImages();
-        },
-      },
-    },
+    await fireEvent.change(slider, { target: { value: 50 } });
   },
 };
 ```
-
-NOTE: In this example I fill some simple form and submit it. Also as you could see, I taking two different screenshots `empty` and `submitted` and assert these in the end.

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.4",
+  "version": "0.10.0-beta.40",
   "type": "commonjs",
   "bin": "dist/cli.js",
   "main": "./dist/index.js",
@@ -64,7 +64,7 @@
     "build": "yarn prebuild && yarn build:client && yarn build:creevey && yarn postbuild",
     "build:client": "vite build",
     "build:creevey": "tsc --build tsconfig.prod.json",
-    "postbuild": "cp \"\"scripts/dist/*.d.ts\"\" dist/",
+    "postbuild": "cp \"\"scripts/dist/*.d.ts\"\" dist/ && cp \"\"src/server/playwright/index-source.mjs\"\" dist/server/playwright/index-source.mjs",
     "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
     "build-storybook": "storybook build",
     "chromatic": "chromatic --project-token=chpt_80df83ca94e6fb4",
@@ -74,11 +74,11 @@
     "node": ">=18.0"
   },
   "peerDependencies": {
-    "playwright": "*",
+    "playwright-core": "*",
     "selenium-webdriver": "*"
   },
   "peerDependenciesMeta": {
-    "playwright": {
+    "playwright-core": {
       "optional": true
     },
     "selenium-webdriver": {
@@ -87,33 +87,33 @@
   },
   "dependencies": {
     "@koa/cors": "^5.0.0",
-    "@octokit/core": "^6.1.2",
-    "@storybook/icons": "^1.2.12",
+    "@octokit/core": "^6.1.4",
+    "@storybook/icons": "^1.4.0",
     "@types/chai": "^4.3.20",
-    "@types/dockerode": "^3.3.31",
+    "@types/dockerode": "^3.3.37",
     "@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.16",
     "@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.18",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
+    "@types/selenium-webdriver": "^4.1.28",
     "@types/shelljs": "^0.8.15",
-    "@types/ws": "^8.5.13",
+    "@types/ws": "^8.18.1",
     "chai": "^4.5.0",
     "chalk": "^4.1.2",
-    "chokidar": "^4.0.1",
-    "dockerode": "^4.0.2",
+    "chokidar": "^4.0.3",
+    "dockerode": "^4.0.5",
     "find-cache-dir": "^5.0.0",
     "get-port": "^7.1.0",
-    "koa": "^2.15.3",
+    "koa": "^2.16.0",
     "koa-bodyparser": "^4.4.1",
     "koa-mount": "^4.0.0",
     "koa-static": "^5.0.0",
@@ -122,72 +122,73 @@
     "loglevel-plugin-prefix": "^0.8.4",
     "micromatch": "^4.0.8",
     "minimist": "^1.2.8",
-    "odiff-bin": "^3.1.2",
+    "odiff-bin": "^3.2.1",
+    "package-manager-detector": "^0.2.11",
+    "pidtree": "^0.6.0",
     "pixelmatch": "^6.0.0",
     "pngjs": "^7.0.0",
     "polished": "^4.3.1",
-    "qs": "^6.13.0",
-    "semver": "^7.6.3",
-    "shelljs": "^0.8.5",
+    "qs": "^6.14.0",
+    "semver": "^7.7.1",
+    "shelljs": "^0.9.2",
     "tar-stream": "^3.1.7",
-    "tsx": "^4.19.2",
-    "uuid": "^11.0.2",
-    "ws": "^8.18.0",
-    "yocto-spinner": "^0.1.1"
+    "tsx": "^4.19.3",
+    "uuid": "^11.1.0",
+    "ws": "^8.18.1",
+    "yocto-spinner": "^0.2.1"
   },
   "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/components": "^8.4.1",
-    "@storybook/csf": "^0.1.11",
-    "@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.6",
+    "@eslint/js": "^9.23.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/channels": "^8.6.12",
+    "@storybook/components": "^8.6.12",
+    "@storybook/manager-api": "^8.6.12",
+    "@storybook/preview-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
+    "@storybook/types": "^8.6.12",
     "@types/eslint": "^9.6.1",
     "@types/eslint__js": "^8.42.3",
-    "@types/node": "^18.19.64",
+    "@types/node": "^18.19.86",
     "@types/resize-observer-browser": "^0.1.11",
-    "@types/semver": "^7",
+    "@types/semver": "^7.7.0",
     "@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.8.1",
+    "browserstack-local": "^1.5.6",
+    "chromatic": "^11.28.0",
+    "concurrently": "^9.1.2",
     "conventional-changelog-cli": "^5.0.0",
-    "dotenv": "^16.4.5",
-    "eslint": "^9.14.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",
+    "dotenv": "^16.4.7",
+    "eslint": "^9.23.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "git-cz": "^4.9.0",
-    "globals": "^15.11.0",
-    "husky": "^9.1.6",
+    "globals": "^16.0.0",
+    "husky": "^9.1.7",
     "immer": "^10.1.1",
-    "lint-staged": "^15.2.10",
+    "lint-staged": "^15.5.0",
     "pinst": "^3.0.0",
-    "playwright-core": "^1.48.0",
-    "prettier": "^3.3.3",
+    "playwright-core": "^1.51.1",
+    "prettier": "^3.5.3",
     "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.30.0",
+    "storybook": "^8.6.12",
     "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.8.2",
+    "typescript-eslint": "^8.29.0",
+    "use-immer": "^0.11.0",
+    "vite": "^5.4.17",
+    "vitest": "^2.1.9"
   },
   "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/withCreevey.ts

@@ -1,4 +1,4 @@
-import type { Renderer, StoryContextForEnhancers } from '@storybook/csf';
+import type { Renderer, StoryContextForEnhancers } from '@storybook/types';
 import { makeDecorator, PreviewWeb, StoryStore } from '@storybook/preview-api';
 import { Channel } from '@storybook/channels';
 import {
@@ -12,9 +12,11 @@ import {
 } 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;
@@ -139,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__;
@@ -225,7 +228,10 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
     }
   }
 
-  function updateGlobals(globals: StorybookGlobals): void {
+  function updateGlobals(newGlobals: StorybookGlobals): void {
+    if (isEqual(globals, newGlobals)) return;
+
+    globals = newGlobals;
     addonsChannel().emit(StorybookEvents.UPDATE_GLOBALS, { globals });
   }
 
@@ -274,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;
@@ -315,6 +322,7 @@ export function withCreevey(): ReturnType<typeof makeDecorator> {
   });
 }
 
+// TODO It's not accessible from the outside the package
 export async function capture(options?: CaptureOptions): Promise<void> {
   if (!isTestBrowser) return;
 

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/PageHeader/PageHeader.tsx

@@ -1,4 +1,4 @@
-import React, { JSX, useEffect } from 'react';
+import React, { JSX, useContext, useEffect } from 'react';
 import { Tabs } from '@storybook/components';
 import { CloseAltIcon } from '@storybook/icons';
 import { styled, withTheme, Theme } from '@storybook/theming';
@@ -6,6 +6,7 @@ import { ImagesViewMode, Images } from '../../../../types.js';
 import { getImageUrl } from '../../helpers.js';
 import { ImagePreview } from './ImagePreview.js';
 import { viewModes } from '../../viewMode.js';
+import { CreeveyContext } from '../../../web/CreeveyContext.js';
 
 interface PageHeaderProps {
   title: string[];
@@ -76,6 +77,7 @@ export function PageHeader({
   onImageChange,
   onViewModeChange,
 }: PageHeaderProps): JSX.Element | null {
+  const { isReport } = useContext(CreeveyContext);
   const imageEntires = Object.entries(images) as [string, Images][];
 
   const handleViewModeChange = (mode: string): void => {
@@ -110,7 +112,7 @@ export function PageHeader({
             <ImagePreview
               key={name}
               imageName={name}
-              url={`${getImageUrl(title, name)}/${image.actual}`}
+              url={`${getImageUrl(title, name, isReport)}/${image.actual}`}
               isActive={name === imageName}
               onClick={onImageChange}
               error={imagesWithError.includes(name)}

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

@@ -1,12 +1,13 @@
-import React, { JSX, useState } from 'react';
+import React, { JSX, useCallback, useContext, 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';
+import { CreeveyContext } from '../../web/CreeveyContext.js';
 
 interface ResultsPageProps {
   path: string[];
@@ -65,8 +66,9 @@ export function ResultsPageInternal({
   onRetryChange,
 }: ResultsPageProps): JSX.Element {
   const result = results[retry - 1] ?? {};
+  const { isReport } = useContext(CreeveyContext);
   const [viewMode, setViewMode] = useState<ImagesViewMode>(getViewMode());
-  const url = getImageUrl(path, imageName);
+  const url = getImageUrl(path, imageName, isReport);
   const image = result.images?.[imageName];
   const canApprove = Boolean(image && approved?.[imageName] != retry - 1 && result.status != 'success');
   const hasDiffAndExpect = canApprove && Boolean(image?.diff && image.expect);
@@ -77,10 +79,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 +115,7 @@ export function ResultsPageInternal({
           errorMessage={result.error}
           showViewModes={hasDiffAndExpect}
           viewMode={viewMode}
-          onViewModeChange={handleChangeViewMode}
+          onViewModeChange={setViewMode}
           onImageChange={onImageChange}
           imagesWithError={imagesWithError}
         />

package/src/client/shared/creeveyClientApi.ts

@@ -12,6 +12,7 @@ export interface CreeveyClientApi {
 
 export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
   let clientApiResolver: (api: CreeveyClientApi) => void = noop;
+  let clientApiRejecter: (error: Error | Event) => void = noop;
   const updateListeners = new Set<(update: CreeveyUpdate) => void>();
   let statusRequest: Promise<CreeveyStatus> | null = null;
   let statusResolver: (status: CreeveyStatus) => void = noop;
@@ -22,6 +23,10 @@ export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
     ws.send(JSON.stringify(request));
   }
 
+  ws.addEventListener('error', (event) => {
+    clientApiRejecter(event);
+  });
+
   ws.addEventListener('open', () => {
     clientApiResolver({
       start(ids: string[]) {
@@ -64,5 +69,8 @@ export async function initCreeveyClientApi(): Promise<CreeveyClientApi> {
   });
   // TODO Reconnect
 
-  return new Promise((resolve) => (clientApiResolver = resolve));
+  return new Promise((resolve, reject) => {
+    clientApiResolver = resolve;
+    clientApiRejecter = reject;
+  });
 }

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';
@@ -300,12 +299,14 @@ export function getConnectionUrl(): string {
     .join(':');
 }
 
-export function getImageUrl(path: string[], imageName: string): string {
+export function getImageUrl(path: string[], imageName: string, isReport?: boolean): string {
   // path => [title, story, test, browser]
   const browser = path.slice(-1)[0];
   const imagesUrl = window.location.host
     ? `${window.location.protocol}//${getConnectionUrl()}${
-        window.location.pathname == '/' ? '/report' : window.location.pathname.split('/').slice(0, -1).join('/')
+        window.location.pathname == '/' && !isReport
+          ? '/report'
+          : window.location.pathname.split('/').slice(0, -1).join('/')
       }/${encodeURI(path.slice(0, -1).join('/'))}`
     : encodeURI(path.slice(0, -1).join('/'));
 
@@ -393,27 +394,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);