diff --git a/.github/workflows/shared-component-visual-tests.yaml b/.github/workflows/shared-component-visual-tests.yaml index d7cef886b7..f07e015639 100644 --- a/.github/workflows/shared-component-visual-tests.yaml +++ b/.github/workflows/shared-component-visual-tests.yaml @@ -54,11 +54,11 @@ jobs: - name: Run Visual tests working-directory: packages/shared-components - run: "yarn test:storybook:ci" + run: "yarn test:storybook --run" - name: Upload received images & diffs if: always() uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6 with: name: received-images - path: packages/shared-components/playwright/shared-component-received + path: packages/shared-components/__vis__/linux diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 80800791ff..3ecb301350 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -132,27 +132,34 @@ jobs: working-directory: "packages/shared-components" run: "yarn install" - - name: Jest Cache + - name: Cache storybook & vitest uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5 with: - path: /tmp/jest_cache - key: ${{ hashFiles('**/yarn.lock') }} + path: | + packages/shared-components/node_modules/.cache + packages/shared-components/node_modules/.vite/vitest + key: ${{ hashFiles('packages/shared-components/yarn.lock') }} - - name: Get number of CPU cores - id: cpu-cores - uses: SimenB/github-actions-cpu-cores@97ba232459a8e02ff6121db9362b09661c875ab8 # v2 + - name: Get installed Playwright version + working-directory: packages/shared-components + id: playwright + run: echo "version=$(yarn list --pattern @playwright/test --depth=0 --json --non-interactive --no-progress | jq -r '.data.trees[].name')" >> $GITHUB_OUTPUT + + - name: Cache playwright binaries + uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5 + id: playwright-cache + with: + path: ~/.cache/ms-playwright + key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright.outputs.version }}-onlyshell + + - name: Install Playwright browsers + working-directory: packages/shared-components + if: steps.playwright-cache.outputs.cache-hit != 'true' + run: "yarn playwright install --with-deps --only-shell" - name: Run tests working-directory: "packages/shared-components" - run: | - yarn test \ - --coverage=${{ env.ENABLE_COVERAGE }} \ - --ci \ - --max-workers ${{ steps.cpu-cores.outputs.count }} \ - --cacheDirectory /tmp/jest_cache - env: - # tell jest to use coloured output - FORCE_COLOR: true + run: yarn test:unit --coverage=${{ env.ENABLE_COVERAGE }} - name: Upload Artifact if: env.ENABLE_COVERAGE == 'true' diff --git a/packages/shared-components/.gitignore b/packages/shared-components/.gitignore new file mode 100644 index 0000000000..78e081f843 --- /dev/null +++ b/packages/shared-components/.gitignore @@ -0,0 +1,7 @@ +# Ignore test failure screenshots +/src/**/__screenshots__/ + +# Ignore vis diffs & local baseline +/__vis__/**/__diffs__ +/__vis__/**/__results__ +/__vis__/local diff --git a/packages/shared-components/.storybook/main.ts b/packages/shared-components/.storybook/main.ts index 2696e0b2a3..20631c27ed 100644 --- a/packages/shared-components/.storybook/main.ts +++ b/packages/shared-components/.storybook/main.ts @@ -9,13 +9,29 @@ import type { StorybookConfig } from "@storybook/react-vite"; import fs from "node:fs"; import { nodePolyfills } from "vite-plugin-node-polyfills"; import { mergeConfig } from "vite"; +import { dirname } from "node:path"; +import { fileURLToPath } from "node:url"; // Get a list of available languages so the language selector can display them at runtime const languages = fs.readdirSync("src/i18n/strings").map((f) => f.slice(0, -5)); +/** + * This function is used to resolve the absolute path of a package. + * It is needed in projects that use Yarn PnP or are set up within a monorepo. + */ +function getAbsolutePath(value: string): any { + return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`))); +} + const config: StorybookConfig = { stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], - addons: ["@storybook/addon-docs", "@storybook/addon-designs", "@storybook/addon-a11y"], + addons: [ + "@storybook/addon-docs", + "@storybook/addon-designs", + "@storybook/addon-a11y", + "@storybook/addon-vitest", + getAbsolutePath("storybook-addon-vis"), + ], framework: "@storybook/react-vite", core: { disableTelemetry: true, @@ -27,7 +43,7 @@ const config: StorybookConfig = { return mergeConfig(config, { plugins: [ // Needed for counterpart to work - nodePolyfills({ include: ["util"] }), + nodePolyfills({ include: ["util"], globals: { global: false } }), { name: "language-middleware", configureServer(server) { diff --git a/packages/shared-components/.storybook/preview.tsx b/packages/shared-components/.storybook/preview.tsx index 4d4069e58a..f3be0a8e88 100644 --- a/packages/shared-components/.storybook/preview.tsx +++ b/packages/shared-components/.storybook/preview.tsx @@ -80,7 +80,7 @@ const withI18nProvider: Decorator = (Story) => { }; const preview: Preview = { - tags: ["autodocs"], + tags: ["autodocs", "snapshot"], decorators: [withThemeProvider, withTooltipProvider, withI18nProvider], parameters: { options: { diff --git a/packages/shared-components/.storybook/test-runner.ts b/packages/shared-components/.storybook/test-runner.ts deleted file mode 100644 index 92f886a1da..0000000000 --- a/packages/shared-components/.storybook/test-runner.ts +++ /dev/null @@ -1,34 +0,0 @@ -/* -Copyright 2025 New Vector Ltd. - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial -Please see LICENSE files in the repository root for full details. -*/ - -import { waitForPageReady, TestRunnerConfig } from "@storybook/test-runner"; -import { toMatchImageSnapshot } from "jest-image-snapshot"; - -const customSnapshotsDir = `${process.cwd()}/playwright/snapshots/`; -const customReceivedDir = `${process.cwd()}/playwright/received/`; - -const config: TestRunnerConfig = { - setup() { - expect.extend({ toMatchImageSnapshot }); - }, - async postVisit(page, context) { - await waitForPageReady(page); - - // If you want to take screenshot of multiple browsers, use - // page.context().browser().browserType().name() to get the browser name to prefix the file name - const image = await page.screenshot({ animations: "disabled" }); - expect(image).toMatchImageSnapshot({ - customSnapshotsDir, - customSnapshotIdentifier: `${context.id}-${process.platform}`, - storeReceivedOnFailure: true, - customReceivedDir, - customDiffDir: customReceivedDir, - }); - }, -}; - -export default config; diff --git a/packages/shared-components/.storybook/vitest.setup.ts b/packages/shared-components/.storybook/vitest.setup.ts new file mode 100644 index 0000000000..7a2eef0d86 --- /dev/null +++ b/packages/shared-components/.storybook/vitest.setup.ts @@ -0,0 +1,36 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview"; +import { setProjectAnnotations } from "@storybook/react-vite"; +import { vis, visAnnotations } from "storybook-addon-vis/vitest-setup"; + +import * as projectAnnotations from "./preview.tsx"; + +// This is an important step to apply the right configuration when testing your stories. +// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations +setProjectAnnotations([a11yAddonAnnotations, projectAnnotations, visAnnotations]); + +vis.setup({ + async auto() { + const style = document.createElement("style"); + style.setAttribute("type", "text/css"); + style.appendChild( + document.createTextNode(` + /* Inhibit all animations for the screenshot to be more stable */ + *, *::before, *::after { + animation: none !important; + } + /* Hide all storybook elements */ + .sb-wrapper { + visibility: hidden !important; + } + `), + ); + document.head.appendChild(style); + }, +}); diff --git a/packages/shared-components/README.md b/packages/shared-components/README.md index 6da67bbe25..86d3803486 100644 --- a/packages/shared-components/README.md +++ b/packages/shared-components/README.md @@ -261,25 +261,17 @@ Two types of tests are available: unit tests and visual regression tests. ### Unit Tests -These tests cover the logic of the components and utilities. Built with Jest +These tests cover the logic of the components and utilities. Built with Vitest and React Testing Library. ```bash -yarn test +yarn test:unit ``` ### Visual Regression Tests -These tests ensure the UI components render correctly. They need Storybook to -be running and they will run in docker using [Playwright](../../playwright.md). - -First run storybook: - -```bash -yarn storybook -``` - -Then, in another terminal, run: +These tests ensure the UI components render correctly. +Built with Storybook and run under vitest using playwright. ```bash yarn test:storybook:update diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/AudioPlayerView/AudioPlayerView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/AudioPlayerView/AudioPlayerView.stories.tsx/default-auto.png new file mode 100644 index 0000000000..53a2ebad9e Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/audio/AudioPlayerView/AudioPlayerView.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/AudioPlayerView/AudioPlayerView.stories.tsx/has-error-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/AudioPlayerView/AudioPlayerView.stories.tsx/has-error-auto.png new file mode 100644 index 0000000000..40780744aa Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/audio/AudioPlayerView/AudioPlayerView.stories.tsx/has-error-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/AudioPlayerView/AudioPlayerView.stories.tsx/no-media-name-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/AudioPlayerView/AudioPlayerView.stories.tsx/no-media-name-auto.png new file mode 100644 index 0000000000..10b13a2596 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/audio/AudioPlayerView/AudioPlayerView.stories.tsx/no-media-name-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/AudioPlayerView/AudioPlayerView.stories.tsx/no-size-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/AudioPlayerView/AudioPlayerView.stories.tsx/no-size-auto.png new file mode 100644 index 0000000000..c8f672ccd7 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/audio/AudioPlayerView/AudioPlayerView.stories.tsx/no-size-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/Clock/Clock.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/Clock/Clock.stories.tsx/default-auto.png new file mode 100644 index 0000000000..7e727a80d0 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/audio/Clock/Clock.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/Clock/Clock.stories.tsx/lot-of-seconds-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/Clock/Clock.stories.tsx/lot-of-seconds-auto.png new file mode 100644 index 0000000000..41d3bb5784 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/audio/Clock/Clock.stories.tsx/lot-of-seconds-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/default-auto.png new file mode 100644 index 0000000000..9ee24b5c55 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/playing-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/playing-auto.png new file mode 100644 index 0000000000..4e432ba9b7 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/playing-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/SeekBar/SeekBar.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/SeekBar/SeekBar.stories.tsx/default-auto.png new file mode 100644 index 0000000000..3c1c35b2d3 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/audio/SeekBar/SeekBar.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/SeekBar/SeekBar.stories.tsx/disabled-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/SeekBar/SeekBar.stories.tsx/disabled-auto.png new file mode 100644 index 0000000000..24ceee9310 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/audio/SeekBar/SeekBar.stories.tsx/disabled-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/avatar/AvatarWithDetails/AvatarWithDetails.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/avatar/AvatarWithDetails/AvatarWithDetails.stories.tsx/default-auto.png new file mode 100644 index 0000000000..9d558cc762 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/avatar/AvatarWithDetails/AvatarWithDetails.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/critical-auto.png b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/critical-auto.png new file mode 100644 index 0000000000..d248fc94cf Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/critical-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/default-auto.png new file mode 100644 index 0000000000..e967598620 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/info-auto.png b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/info-auto.png new file mode 100644 index 0000000000..50109032d9 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/info-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/success-auto.png b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/success-auto.png new file mode 100644 index 0000000000..e47d77bc42 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/success-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/with-action-auto.png b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/with-action-auto.png new file mode 100644 index 0000000000..24c4f77fdc Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/with-action-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/with-avatar-image-auto.png b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/with-avatar-image-auto.png new file mode 100644 index 0000000000..4f3ebb33f2 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/with-avatar-image-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/with-loads-of-content-auto.png b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/with-loads-of-content-auto.png new file mode 100644 index 0000000000..97592a756d Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/with-loads-of-content-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/without-close-auto.png b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/without-close-auto.png new file mode 100644 index 0000000000..43792a86a3 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/composer/Banner/Banner.stories.tsx/without-close-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/composer/HistoryVisibleBannerView/HistoryVisibleBannerView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/composer/HistoryVisibleBannerView/HistoryVisibleBannerView.stories.tsx/default-auto.png new file mode 100644 index 0000000000..a79770445e Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/composer/HistoryVisibleBannerView/HistoryVisibleBannerView.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/event-tiles/TextualEventView/TextualEventView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/TextualEventView/TextualEventView.stories.tsx/default-auto.png new file mode 100644 index 0000000000..ef1ac10465 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/event-tiles/TextualEventView/TextualEventView.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/message-body/MediaBody/MediaBody.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/message-body/MediaBody/MediaBody.stories.tsx/default-auto.png new file mode 100644 index 0000000000..320d80fc6f Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/message-body/MediaBody/MediaBody.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/pill-input/Pill/Pill.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/pill-input/Pill/Pill.stories.tsx/default-auto.png new file mode 100644 index 0000000000..5877ff657b Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/pill-input/Pill/Pill.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/pill-input/Pill/Pill.stories.tsx/without-close-button-auto.png b/packages/shared-components/__vis__/linux/__baselines__/pill-input/Pill/Pill.stories.tsx/without-close-button-auto.png new file mode 100644 index 0000000000..a12a0ba0e3 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/pill-input/Pill/Pill.stories.tsx/without-close-button-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/pill-input/PillInput/PillInput.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/pill-input/PillInput/PillInput.stories.tsx/default-auto.png new file mode 100644 index 0000000000..09815ae73e Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/pill-input/PillInput/PillInput.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/pill-input/PillInput/PillInput.stories.tsx/no-child-auto.png b/packages/shared-components/__vis__/linux/__baselines__/pill-input/PillInput/PillInput.stories.tsx/no-child-auto.png new file mode 100644 index 0000000000..8f7d91a3a9 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/pill-input/PillInput/PillInput.stories.tsx/no-child-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/default-auto.png new file mode 100644 index 0000000000..1532118e7c Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/hover-auto.png b/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/hover-auto.png new file mode 100644 index 0000000000..1532118e7c Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/hover-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/selected-auto.png b/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/selected-auto.png new file mode 100644 index 0000000000..99eecbcb75 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/selected-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/separator-auto.png b/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/separator-auto.png new file mode 100644 index 0000000000..19d11bfda1 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/separator-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/without-timestamp-auto.png b/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/without-timestamp-auto.png new file mode 100644 index 0000000000..f2e179cbdd Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichItem/RichItem.stories.tsx/without-timestamp-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichList/RichList.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichList/RichList.stories.tsx/default-auto.png new file mode 100644 index 0000000000..ca4053aee7 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichList/RichList.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichList/RichList.stories.tsx/empty-auto.png b/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichList/RichList.stories.tsx/empty-auto.png new file mode 100644 index 0000000000..a23672245d Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/rich-list/RichList/RichList.stories.tsx/empty-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/default-auto.png new file mode 100644 index 0000000000..300e2237bc Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-compose-menu-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-compose-menu-auto.png new file mode 100644 index 0000000000..5564b64357 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-compose-menu-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-space-menu-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-space-menu-auto.png new file mode 100644 index 0000000000..ef05e424a5 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-space-menu-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSearchView/RoomListSearchView.stories.tsx/all-buttons-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSearchView/RoomListSearchView.stories.tsx/all-buttons-auto.png new file mode 100644 index 0000000000..35205a70e1 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSearchView/RoomListSearchView.stories.tsx/all-buttons-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSearchView/RoomListSearchView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSearchView/RoomListSearchView.stories.tsx/default-auto.png new file mode 100644 index 0000000000..d61a99a268 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSearchView/RoomListSearchView.stories.tsx/default-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSearchView/RoomListSearchView.stories.tsx/with-dial-pad-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSearchView/RoomListSearchView.stories.tsx/with-dial-pad-auto.png new file mode 100644 index 0000000000..35205a70e1 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSearchView/RoomListSearchView.stories.tsx/with-dial-pad-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSearchView/RoomListSearchView.stories.tsx/without-explore-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSearchView/RoomListSearchView.stories.tsx/without-explore-auto.png new file mode 100644 index 0000000000..74468944e0 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListSearchView/RoomListSearchView.stories.tsx/without-explore-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-connection-lost-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-connection-lost-auto.png new file mode 100644 index 0000000000..227e21000e Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-connection-lost-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-consent-link-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-consent-link-auto.png new file mode 100644 index 0000000000..eeca3d8763 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-consent-link-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-local-room-retry-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-local-room-retry-auto.png new file mode 100644 index 0000000000..2415c1f469 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-local-room-retry-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-resource-limit-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-resource-limit-auto.png new file mode 100644 index 0000000000..e81f7dee80 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-resource-limit-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-unsent-messages-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-unsent-messages-auto.png new file mode 100644 index 0000000000..32963c4fd3 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-unsent-messages-auto.png differ diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-unsent-messages-sending-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-unsent-messages-sending-auto.png new file mode 100644 index 0000000000..41f37ca7e5 Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/RoomStatusBar/RoomStatusBarView.stories.tsx/with-unsent-messages-sending-auto.png differ diff --git a/packages/shared-components/babel.config.cjs b/packages/shared-components/babel.config.cjs deleted file mode 100644 index 02ff2e43fe..0000000000 --- a/packages/shared-components/babel.config.cjs +++ /dev/null @@ -1,21 +0,0 @@ -module.exports = { - sourceMaps: true, - presets: [ - [ - "@babel/preset-env", - { - include: ["@babel/plugin-transform-class-properties"], - }, - ], - ["@babel/preset-typescript", { allowDeclareFields: true }], - "@babel/preset-react", - ], - plugins: [ - "@babel/plugin-proposal-export-default-from", - "@babel/plugin-transform-numeric-separator", - "@babel/plugin-transform-object-rest-spread", - "@babel/plugin-transform-optional-chaining", - "@babel/plugin-transform-nullish-coalescing-operator", - "@babel/plugin-transform-runtime", - ], -}; diff --git a/packages/shared-components/jest.config.ts b/packages/shared-components/jest.config.ts deleted file mode 100644 index f4c49235f9..0000000000 --- a/packages/shared-components/jest.config.ts +++ /dev/null @@ -1,52 +0,0 @@ -/* -Copyright 2025 Element Creations Ltd. - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial -Please see LICENSE files in the repository root for full details. -*/ - -import { env } from "process"; - -import type { Config } from "jest"; - -const config: Config = { - testEnvironment: "jest-fixed-jsdom", - testEnvironmentOptions: { - url: "http://localhost/", - }, - testMatch: ["/src/**/*.test.[tj]s?(x)"], - setupFilesAfterEnv: ["/src/test/setupTests.ts"], - moduleNameMapper: { - // Support CSS module - "\\.(module.css)$": "identity-obj-proxy", - "\\.(css|scss|pcss)$": "/__mocks__/cssMock.js", - "\\.(gif|png|ttf|woff2)$": "/__mocks__/imageMock.js", - "\\.svg$": "/__mocks__/svg.js", - "^react$": "/node_modules/react", - "^react-dom$": "/node_modules/react-dom", - "waveWorker\\.min\\.js": "/__mocks__/empty.js", - "context-filter-polyfill": "/__mocks__/empty.js", - "workers/(.+)Factory": "/__mocks__/workerFactoryMock.js", - }, - transformIgnorePatterns: [ - "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs|@storybook|storybook|matrix-web-i18n)).+$", - ], - collectCoverageFrom: [ - "/src/**/*.{js,ts,tsx}", - "/packages/**/*.{js,ts,tsx}", - // Coverage chokes on type definition files - "!/src/**/*.d.ts", - ], - coverageReporters: ["text-summary", "lcov"], - testResultsProcessor: "@casualbot/jest-sonar-reporter", - prettierPath: null, - moduleDirectories: ["node_modules", "./src/test/utils"], -}; - -// if we're running under GHA, enable the GHA reporter -if (env["GITHUB_ACTIONS"] !== undefined) { - const reporters: Config["reporters"] = [["github-actions", { silent: false }], "summary"]; - config.reporters = reporters; -} - -export default config; diff --git a/packages/shared-components/package.json b/packages/shared-components/package.json index 65010edb43..55345a50da 100644 --- a/packages/shared-components/package.json +++ b/packages/shared-components/package.json @@ -38,16 +38,15 @@ "i18n": "matrix-gen-i18n src && yarn i18n:sort && yarn i18n:lint", "i18n:sort": "matrix-sort-i18n src/i18n/strings/en_EN.json", "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null", - "test": "jest", + "test:unit": "vitest --project=unit", + "test:storybook": "vitest --project=storybook", + "test:storybook:update": "playwright-screenshots --entrypoint /work/scripts/storybook-screenshot-update.sh --with-node-modules", "prepare": "patch-package && vite build", "storybook": "storybook dev -p 6007", "build-storybook": "storybook build", "lint": "yarn lint:types && yarn lint:js", "lint:js": "eslint --max-warnings 0 src && prettier --check .", - "lint:types": "tsc --noEmit && tsc --noEmit -p tsconfig.node.json", - "test:storybook": "test-storybook --url http://localhost:6007/", - "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --no-open\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\"", - "test:storybook:update": "playwright-screenshots --entrypoint /work/scripts/storybook-screenshot-update.sh --with-node-modules" + "lint:types": "tsc --noEmit && tsc --noEmit -p tsconfig.node.json" }, "resolutions": { "playwright": "1.57.0" @@ -59,45 +58,36 @@ "counterpart": "^0.18.6", "lodash": "^4.17.21", "matrix-web-i18n": "3.6.0", - "patch-package": "^8.0.1", "react-merge-refs": "^3.0.2", "temporal-polyfill": "^0.3.0" }, "devDependencies": { - "@babel/eslint-parser": "^7.28.6", - "@babel/eslint-plugin": "^7.27.1", - "@babel/plugin-proposal-export-default-from": "^7.27.1", - "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6", - "@babel/plugin-transform-numeric-separator": "^7.28.6", - "@babel/plugin-transform-object-rest-spread": "^7.28.6", - "@babel/plugin-transform-optional-chaining": "^7.28.6", - "@babel/plugin-transform-runtime": "^7.28.5", - "@babel/preset-env": "^7.28.6", - "@babel/preset-react": "^7.28.5", - "@babel/preset-typescript": "^7.28.5", - "@casualbot/jest-sonar-reporter": "^2.5.0", "@element-hq/element-web-playwright-common": "2.2.4", - "@fetch-mock/jest": "^0.2.20", + "@fetch-mock/vitest": "^0.2.18", "@matrix-org/react-sdk-module-api": "^2.5.0", "@playwright/test": "1.57.0", "@storybook/addon-a11y": "^10.0.7", "@storybook/addon-designs": "^11.0.1", "@storybook/addon-docs": "^10.0.7", + "@storybook/addon-vitest": "^10.1.11", "@storybook/icons": "^2.0.0", "@storybook/react-vite": "^10.0.7", - "@storybook/test-runner": "^0.24.1", "@stylistic/eslint-plugin": "^5.7.0", "@testing-library/dom": "^10.4.1", - "@testing-library/react": "^16.3.0", + "@testing-library/jest-dom": "^6.9.1", + "@testing-library/react": "^16.3.2", + "@testing-library/user-event": "^14.6.1", "@types/counterpart": "^0.18.4", - "@types/jest-image-snapshot": "^6.4.0", "@types/lodash": "^4.17.20", "@types/react": "^19.2.2", "@types/react-dom": "^19.2.3", "@typescript-eslint/eslint-plugin": "^8.53.1", "@typescript-eslint/parser": "^8.53.1", "@vector-im/compound-web": "^8.3.5", - "concurrently": "^9.2.1", + "@vitejs/plugin-react": "^5.1.2", + "@vitest/browser-playwright": "^4.0.17", + "@vitest/coverage-v8": "^4.0.17", + "@vitest/ui": "^4.0.17", "eslint": "8", "eslint-config-google": "^0.14.0", "eslint-config-prettier": "^10.1.8", @@ -110,18 +100,17 @@ "eslint-plugin-react-hooks": "^7.0.1", "eslint-plugin-storybook": "^10.0.7", "eslint-plugin-unicorn": "^56.0.0", - "identity-obj-proxy": "^3.0.0", - "jest": "^30.2.0", - "jest-environment-jsdom": "^30.2.0", - "jest-fixed-jsdom": "^0.0.11", - "jest-image-snapshot": "^6.5.1", "patch-package": "^8.0.1", "prettier": "^3.6.2", "storybook": "^10.0.7", + "storybook-addon-vis": "^3.1.2", "typescript": "^5.9.3", - "vite": "^7.1.9", + "vite": "^7.3.1", "vite-plugin-dts": "^4.5.4", - "vite-plugin-node-polyfills": "^0.25.0" + "vite-plugin-node-polyfills": "^0.25.0", + "vitest": "^4.0.17", + "vitest-browser-react": "^2.0.2", + "vitest-sonar-reporter": "^3.0.0" }, "engines": { "node": ">=20.0.0" diff --git a/packages/shared-components/playwright/snapshots/audio-audioplayerview--default-linux.png b/packages/shared-components/playwright/snapshots/audio-audioplayerview--default-linux.png deleted file mode 100644 index 707649c9df..0000000000 Binary files a/packages/shared-components/playwright/snapshots/audio-audioplayerview--default-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/audio-audioplayerview--has-error-linux.png b/packages/shared-components/playwright/snapshots/audio-audioplayerview--has-error-linux.png deleted file mode 100644 index 332979d698..0000000000 Binary files a/packages/shared-components/playwright/snapshots/audio-audioplayerview--has-error-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/audio-audioplayerview--no-media-name-linux.png b/packages/shared-components/playwright/snapshots/audio-audioplayerview--no-media-name-linux.png deleted file mode 100644 index 3230b66b04..0000000000 Binary files a/packages/shared-components/playwright/snapshots/audio-audioplayerview--no-media-name-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/audio-audioplayerview--no-size-linux.png b/packages/shared-components/playwright/snapshots/audio-audioplayerview--no-size-linux.png deleted file mode 100644 index 7c77af1821..0000000000 Binary files a/packages/shared-components/playwright/snapshots/audio-audioplayerview--no-size-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/audio-clock--default-linux.png b/packages/shared-components/playwright/snapshots/audio-clock--default-linux.png deleted file mode 100644 index be66f4b70c..0000000000 Binary files a/packages/shared-components/playwright/snapshots/audio-clock--default-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/audio-clock--lot-of-seconds-linux.png b/packages/shared-components/playwright/snapshots/audio-clock--lot-of-seconds-linux.png deleted file mode 100644 index b4879e1a0c..0000000000 Binary files a/packages/shared-components/playwright/snapshots/audio-clock--lot-of-seconds-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/audio-playpausebutton--default-linux.png b/packages/shared-components/playwright/snapshots/audio-playpausebutton--default-linux.png deleted file mode 100644 index 2bb1a4fe65..0000000000 Binary files a/packages/shared-components/playwright/snapshots/audio-playpausebutton--default-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/audio-playpausebutton--playing-linux.png b/packages/shared-components/playwright/snapshots/audio-playpausebutton--playing-linux.png deleted file mode 100644 index 29fb40293f..0000000000 Binary files a/packages/shared-components/playwright/snapshots/audio-playpausebutton--playing-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/audio-seekbar--default-linux.png b/packages/shared-components/playwright/snapshots/audio-seekbar--default-linux.png deleted file mode 100644 index 60e51020cf..0000000000 Binary files a/packages/shared-components/playwright/snapshots/audio-seekbar--default-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/audio-seekbar--disabled-linux.png b/packages/shared-components/playwright/snapshots/audio-seekbar--disabled-linux.png deleted file mode 100644 index 128f7e2ee5..0000000000 Binary files a/packages/shared-components/playwright/snapshots/audio-seekbar--disabled-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/avatar-avatarwithdetails--default-linux.png b/packages/shared-components/playwright/snapshots/avatar-avatarwithdetails--default-linux.png deleted file mode 100644 index ae339219e5..0000000000 Binary files a/packages/shared-components/playwright/snapshots/avatar-avatarwithdetails--default-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/composer-historyvisiblebannerview--default-linux.png b/packages/shared-components/playwright/snapshots/composer-historyvisiblebannerview--default-linux.png deleted file mode 100644 index 7ab93a0cb8..0000000000 Binary files a/packages/shared-components/playwright/snapshots/composer-historyvisiblebannerview--default-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/event-textualevent--default-linux.png b/packages/shared-components/playwright/snapshots/event-textualevent--default-linux.png deleted file mode 100644 index 16855e8448..0000000000 Binary files a/packages/shared-components/playwright/snapshots/event-textualevent--default-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/messagebody-mediabody--default-linux.png b/packages/shared-components/playwright/snapshots/messagebody-mediabody--default-linux.png deleted file mode 100644 index 56b8072d2d..0000000000 Binary files a/packages/shared-components/playwright/snapshots/messagebody-mediabody--default-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/pillinput-pill--default-linux.png b/packages/shared-components/playwright/snapshots/pillinput-pill--default-linux.png deleted file mode 100644 index be3dcdb9ac..0000000000 Binary files a/packages/shared-components/playwright/snapshots/pillinput-pill--default-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/pillinput-pill--without-close-button-linux.png b/packages/shared-components/playwright/snapshots/pillinput-pill--without-close-button-linux.png deleted file mode 100644 index 451de895dc..0000000000 Binary files a/packages/shared-components/playwright/snapshots/pillinput-pill--without-close-button-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/pillinput-pillinput--default-linux.png b/packages/shared-components/playwright/snapshots/pillinput-pillinput--default-linux.png deleted file mode 100644 index 93bf6317a9..0000000000 Binary files a/packages/shared-components/playwright/snapshots/pillinput-pillinput--default-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/pillinput-pillinput--no-child-linux.png b/packages/shared-components/playwright/snapshots/pillinput-pillinput--no-child-linux.png deleted file mode 100644 index a303e726b5..0000000000 Binary files a/packages/shared-components/playwright/snapshots/pillinput-pillinput--no-child-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/richlist-richitem--default-linux.png b/packages/shared-components/playwright/snapshots/richlist-richitem--default-linux.png deleted file mode 100644 index 9a5ad9eb0f..0000000000 Binary files a/packages/shared-components/playwright/snapshots/richlist-richitem--default-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/richlist-richitem--hover-linux.png b/packages/shared-components/playwright/snapshots/richlist-richitem--hover-linux.png deleted file mode 100644 index 9a5ad9eb0f..0000000000 Binary files a/packages/shared-components/playwright/snapshots/richlist-richitem--hover-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/richlist-richitem--selected-linux.png b/packages/shared-components/playwright/snapshots/richlist-richitem--selected-linux.png deleted file mode 100644 index f9c92b066f..0000000000 Binary files a/packages/shared-components/playwright/snapshots/richlist-richitem--selected-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/richlist-richitem--separator-linux.png b/packages/shared-components/playwright/snapshots/richlist-richitem--separator-linux.png deleted file mode 100644 index a405f35902..0000000000 Binary files a/packages/shared-components/playwright/snapshots/richlist-richitem--separator-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/richlist-richitem--without-timestamp-linux.png b/packages/shared-components/playwright/snapshots/richlist-richitem--without-timestamp-linux.png deleted file mode 100644 index de5ecda7c3..0000000000 Binary files a/packages/shared-components/playwright/snapshots/richlist-richitem--without-timestamp-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/richlist-richlist--default-linux.png b/packages/shared-components/playwright/snapshots/richlist-richlist--default-linux.png deleted file mode 100644 index 7919f356df..0000000000 Binary files a/packages/shared-components/playwright/snapshots/richlist-richlist--default-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/richlist-richlist--empty-linux.png b/packages/shared-components/playwright/snapshots/richlist-richlist--empty-linux.png deleted file mode 100644 index f655ecab96..0000000000 Binary files a/packages/shared-components/playwright/snapshots/richlist-richlist--empty-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-banner--critical-linux.png b/packages/shared-components/playwright/snapshots/room-banner--critical-linux.png deleted file mode 100644 index d920c59664..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-banner--critical-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-banner--default-linux.png b/packages/shared-components/playwright/snapshots/room-banner--default-linux.png deleted file mode 100644 index 39079994d2..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-banner--default-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-banner--info-linux.png b/packages/shared-components/playwright/snapshots/room-banner--info-linux.png deleted file mode 100644 index 7d93288e42..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-banner--info-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-banner--success-linux.png b/packages/shared-components/playwright/snapshots/room-banner--success-linux.png deleted file mode 100644 index 8417f0aee3..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-banner--success-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-banner--with-action-linux.png b/packages/shared-components/playwright/snapshots/room-banner--with-action-linux.png deleted file mode 100644 index b3968f9db7..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-banner--with-action-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-banner--with-avatar-image-linux.png b/packages/shared-components/playwright/snapshots/room-banner--with-avatar-image-linux.png deleted file mode 100644 index d015a12a00..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-banner--with-avatar-image-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-banner--with-loads-of-content-linux.png b/packages/shared-components/playwright/snapshots/room-banner--with-loads-of-content-linux.png deleted file mode 100644 index 85372e48fa..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-banner--with-loads-of-content-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-banner--without-close-linux.png b/packages/shared-components/playwright/snapshots/room-banner--without-close-linux.png deleted file mode 100644 index 9645bd1d8a..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-banner--without-close-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-list-roomlistsearchview--all-buttons-linux.png b/packages/shared-components/playwright/snapshots/room-list-roomlistsearchview--all-buttons-linux.png deleted file mode 100644 index 0d7f17d511..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-list-roomlistsearchview--all-buttons-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-list-roomlistsearchview--default-linux.png b/packages/shared-components/playwright/snapshots/room-list-roomlistsearchview--default-linux.png deleted file mode 100644 index 2f41682551..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-list-roomlistsearchview--default-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-list-roomlistsearchview--with-dial-pad-linux.png b/packages/shared-components/playwright/snapshots/room-list-roomlistsearchview--with-dial-pad-linux.png deleted file mode 100644 index 0d7f17d511..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-list-roomlistsearchview--with-dial-pad-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-list-roomlistsearchview--without-explore-linux.png b/packages/shared-components/playwright/snapshots/room-list-roomlistsearchview--without-explore-linux.png deleted file mode 100644 index e3e14ccfb4..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-list-roomlistsearchview--without-explore-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-connection-lost-linux.png b/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-connection-lost-linux.png deleted file mode 100644 index 59e59e4461..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-connection-lost-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-consent-link-linux.png b/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-consent-link-linux.png deleted file mode 100644 index f4be9ccdc1..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-consent-link-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-local-room-retry-linux.png b/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-local-room-retry-linux.png deleted file mode 100644 index ffe9050a23..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-local-room-retry-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-resource-limit-linux.png b/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-resource-limit-linux.png deleted file mode 100644 index 7ccad17abb..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-resource-limit-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-unsent-messages-linux.png b/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-unsent-messages-linux.png deleted file mode 100644 index d30f9b0761..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-unsent-messages-linux.png and /dev/null differ diff --git a/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-unsent-messages-sending-linux.png b/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-unsent-messages-sending-linux.png deleted file mode 100644 index 0d4c8f2885..0000000000 Binary files a/packages/shared-components/playwright/snapshots/room-roomstatusbarview--with-unsent-messages-sending-linux.png and /dev/null differ diff --git a/packages/shared-components/scripts/storybook-screenshot-update.sh b/packages/shared-components/scripts/storybook-screenshot-update.sh index 6310d6887f..fb06017500 100755 --- a/packages/shared-components/scripts/storybook-screenshot-update.sh +++ b/packages/shared-components/scripts/storybook-screenshot-update.sh @@ -3,22 +3,9 @@ # Update storybook screenshots # # This script should be used as the entrypoint parameter of the `playwright-screenshots` script. It -# installs the yarn dependencies, and then runs `test-storybook` to update the storybook screenshots. +# installs the yarn dependencies, and then runs `vitest --run --update --project=storybook` to update the storybook screenshots. # -# It expects to find a storybook instance running at :6007 on the host machine. It also requires that -# `playwright-screenshots` is given the `--with-node-modules` parameter. -# -# Example: -# -# test-storybook --url http://localhost:6007/ -# playwright-screenshots --entrypoint /work/scripts/storybook-screenshot-update.sh --with-node-modules -# -# -# Note: even though this script is small, it is important because the alternative is running -# `playwright-screenshots` twice in quick succession (once to do `yarn install`, a second to do the -# actual updates): and that fails, because running `playwright-screenshots` without actually starting -# Testcontainers leaves a ryuk container hanging around for up to 60s, which will block the second -# invocation. +# It requires that `playwright-screenshots` is given the `--with-node-modules` parameter. set -e @@ -28,5 +15,5 @@ set -e # those on the host). yarn -# Now run the screenshot update -/work/node_modules/.bin/test-storybook --url http://host.docker.internal:6007/ --updateSnapshot +# Now run the screenshot update, we set CI=1 to inform vis to update the real baselines +CI=1 /work/node_modules/.bin/vitest --run --update --project=storybook "$@" diff --git a/packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.test.tsx b/packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.test.tsx index 55e159f110..89e08bb340 100644 --- a/packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.test.tsx +++ b/packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.test.tsx @@ -5,11 +5,12 @@ * Please see LICENSE files in the repository root for full details. */ -import { render, screen } from "jest-matrix-react"; +import { render, screen } from "@test-utils"; import { composeStories } from "@storybook/react-vite"; import React from "react"; import userEvent from "@testing-library/user-event"; import { fireEvent } from "@testing-library/dom"; +import { describe, it, vi, afterEach, expect } from "vitest"; import * as stories from "./AudioPlayerView.stories.tsx"; import { AudioPlayerView, type AudioPlayerViewActions, type AudioPlayerViewSnapshot } from "./AudioPlayerView"; @@ -21,7 +22,7 @@ const { Default, NoMediaName, NoSize, HasError } = composeStories(stories); describe("AudioPlayerView", () => { afterEach(() => { - jest.clearAllMocks(); + vi.clearAllMocks(); }); it("renders the audio player in default state", () => { @@ -44,9 +45,9 @@ describe("AudioPlayerView", () => { expect(container).toMatchSnapshot(); }); - const onKeyDown = jest.fn(); - const togglePlay = jest.fn(); - const onSeekbarChange = jest.fn(); + const onKeyDown = vi.fn(); + const togglePlay = vi.fn(); + const onSeekbarChange = vi.fn(); class AudioPlayerViewModel extends MockViewModel implements AudioPlayerViewActions { public onKeyDown = onKeyDown; diff --git a/packages/shared-components/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap b/packages/shared-components/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap index d82cbf4202..051a91da21 100644 --- a/packages/shared-components/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap +++ b/packages/shared-components/src/audio/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap @@ -1,6 +1,6 @@ -// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`AudioPlayerView renders the audio player in default state 1`] = ` +exports[`AudioPlayerView > renders the audio player in default state 1`] = `
`; -exports[`AudioPlayerView renders the audio player in error state 1`] = ` +exports[`AudioPlayerView > renders the audio player in error state 1`] = `
`; -exports[`AudioPlayerView renders the audio player without media name 1`] = ` +exports[`AudioPlayerView > renders the audio player without media name 1`] = `
`; -exports[`AudioPlayerView renders the audio player without size 1`] = ` +exports[`AudioPlayerView > renders the audio player without size 1`] = `
renders the clock 1`] = `