POC: run Alert and Dialog tests in real-browser vitest mode#2638
Open
matyasf wants to merge 2 commits into
Open
POC: run Alert and Dialog tests in real-browser vitest mode#2638matyasf wants to merge 2 commits into
matyasf wants to merge 2 commits into
Conversation
matyasf
changed the title
|
matyasf
commented
Jul 14, 2026
| }) | ||
| DialogExample.displayName = 'DialogExample' | ||
|
|
||
| const NestedDialogExample = (props: DialogProps) => { |
Collaborator
Author
There was a problem hiding this comment.
This was not used by the test at all
Visual regression report✅ No changes.
Baselines come from the |
matyasf
commented
Jul 14, 2026
| enabled: true, | ||
| provider: playwright(), | ||
| headless: true, | ||
| instances: [{ browser: 'chromium' }], |
Collaborator
Author
There was a problem hiding this comment.
we can add here other browsers easily to run our test suite on e.g. Firefox (but CI support might be tricky)
Contributor
There was a problem hiding this comment.
Good idea; I would add Safari if it is possible, it has many tricky cases when it comes to a11y
… vitest mode Add a Vitest browser-mode project (Playwright/chromium) as a Cypress component-test replacement POC and port the Alert and Dialog suites to it. - Convert Alert.test.tsx and Dialog.test.tsx from jsdom/RTL to vitest-browser-react + vitest/browser (page/userEvent), and fold the former cypress Alerts/Dialog specs in as `Component tests` blocks. - Add a `browser` project to vitest.config.mts (source aliases, moment locale alias, browser setup) and exclude ui-alerts/ui-dialog from the jsdom `web` project to avoid double-running. - Add `test:browser`/`test:browser-watch` scripts and the playwright/@vitest/browser/vitest-browser-react dev deps. - Ignore `.vitest-attachments/`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
matyasf
commented
Jul 14, 2026
| /// <reference types="vitest" /> | ||
|
|
||
| import { defineConfig } from 'vitest/config' | ||
| import { defineConfig, configDefaults } from 'vitest/config' |
Collaborator
Author
There was a problem hiding this comment.
I havent checked this config thoroughly, we should do it, if this is the way forward
…lled The default `test:vitest` ran all projects including the new `browser` project, which failed on CI because the Playwright chromium binary was never downloaded. - Scope `test:vitest`/`test:vitest-watch` to the `web` + `node` projects so the unit-test and release pipelines stay pure-jsdom. - Add a `vitest-browser-tests` job to pr-validation that installs the Playwright browser and runs `test:browser`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
balzss
reviewed
Jul 15, 2026
| - name: Install dependencies | ||
| run: pnpm install --frozen-lockfile | ||
| - name: Install Playwright browser | ||
| run: pnpm exec playwright install --with-deps chromium |
Contributor
There was a problem hiding this comment.
why isnt it installed from dev deps?
| find: `${pkgName}/src`, | ||
| replacement: path.join(pkgPath, 'src') | ||
| }) | ||
| // Fallback bare-name -> package dir (for packages without an exports map) |
Contributor
There was a problem hiding this comment.
is this an existing scenario or just AI being cautious?
| @@ -49,6 +126,14 @@ export default defineConfig({ | |||
| // Allows using APIs like Jest without importing them | |||
| globals: true, | |||
Contributor
There was a problem hiding this comment.
not part of the changeset, but maybe we should consider changing this to false?
|
|
||
| // @instructure/console only outputs logs if process.env.NODE_ENV !== 'production' | ||
| // these messages are sometimes used in test assertions | ||
| if (typeof globalThis.process === 'undefined') { |
Contributor
There was a problem hiding this comment.
this file is a bit hard to parse. is it only needed because of the console package?
Collaborator
Author
There was a problem hiding this comment.
I dont know yet, it could be that other errors surface when we dont mock it
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add real-browser Vitest (Playwright/chromium) test POC, that replaces both Cypress component tests AND Vitest unit tests.
Summary
ui-alerts) and Dialog (ui-dialog) suites tovitest/browsertest:browserscripts and new vitest configs.Test Plan
pnpm run test:browserruns the browser tests in the consolepnpm run test:browser-uiruns the browser tests in a browserFuture additions:
Fixes INSTUI-5098
🤖 Generated with Claude Code