From 3003c4327db9e75b0f646e533552f558853f10ac Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Tue, 19 May 2026 18:40:59 +0900 Subject: [PATCH] fix(ui): fix module graph in browser mode with --ui (#10386) --- packages/ui/client/components/FileDetails.vue | 1 - .../components/ModuleTransformResultView.vue | 4 +- packages/ui/node/reporter.ts | 1 - packages/vitest/src/api/setup.ts | 7 +-- packages/vitest/src/api/types.ts | 2 - packages/vitest/src/utils/graph.ts | 2 +- .../main/browser/sample-browser.test.ts | 5 ++ test/ui/playwright.config.ts | 2 +- test/ui/test/ui.spec.ts | 49 +++++++++++++++++-- 9 files changed, 57 insertions(+), 16 deletions(-) create mode 100644 test/ui/fixtures/main/browser/sample-browser.test.ts diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue index c68f6f6a2..f235f4a3f 100644 --- a/packages/ui/client/components/FileDetails.vue +++ b/packages/ui/client/components/FileDetails.vue @@ -113,7 +113,6 @@ async function loadModuleGraph(force = false) { let moduleGraph = await client.rpc.getModuleGraph( gd.projectName, gd.filepath, - !!browserState, ) // remove node_modules from the graph when enabled if (hideNodeModules.value) { diff --git a/packages/ui/client/components/ModuleTransformResultView.vue b/packages/ui/client/components/ModuleTransformResultView.vue index 892dc9c77..938f14755 100644 --- a/packages/ui/client/components/ModuleTransformResultView.vue +++ b/packages/ui/client/components/ModuleTransformResultView.vue @@ -6,7 +6,7 @@ import { asyncComputed, onKeyStroke } from '@vueuse/core' import { Tooltip as VueTooltip } from 'floating-vue' import { join, relative } from 'pathe' import { computed } from 'vue' -import { browserState, client, config } from '~/composables/client' +import { client, config } from '~/composables/client' import { currentModule } from '~/composables/navigation' import { formatPreciseTime, formatTime, getDurationClass, getImportDurationType } from '~/utils/task' import Badge from './Badge.vue' @@ -31,7 +31,7 @@ const result = asyncComputed { - return getModuleGraph(ctx, project, id, browser) + async getModuleGraph(project, id): Promise { + return getModuleGraph(ctx, project, id) }, async updateSnapshot(file?: File) { // silently ignore exec/write attempts if not allowed diff --git a/packages/vitest/src/api/types.ts b/packages/vitest/src/api/types.ts index 24d100cf7..05e8a4b8d 100644 --- a/packages/vitest/src/api/types.ts +++ b/packages/vitest/src/api/types.ts @@ -47,13 +47,11 @@ export interface WebSocketHandlers { getModuleGraph: ( projectName: string, id: string, - browser?: boolean, ) => Promise getTransformResult: ( projectName: string, id: string, testFileId: string, - browser?: boolean, ) => Promise getExternalResult: ( id: string, diff --git a/packages/vitest/src/utils/graph.ts b/packages/vitest/src/utils/graph.ts index c6b2bbf4e..2b0104700 100644 --- a/packages/vitest/src/utils/graph.ts +++ b/packages/vitest/src/utils/graph.ts @@ -7,13 +7,13 @@ export async function getModuleGraph( ctx: Vitest, projectName: string, testFilePath: string, - browser = false, ): Promise { const graph: Record = {} const externalized = new Set() const inlined = new Set() const project = ctx.getProjectByName(projectName) + const browser = project.config.browser.enabled const environment = project.config.experimental.viteModuleRunner === false ? project.vite.environments.__vitest__ diff --git a/test/ui/fixtures/main/browser/sample-browser.test.ts b/test/ui/fixtures/main/browser/sample-browser.test.ts new file mode 100644 index 000000000..e6e87e39a --- /dev/null +++ b/test/ui/fixtures/main/browser/sample-browser.test.ts @@ -0,0 +1,5 @@ +import { expect, test } from 'vitest' + +test('window', () => { + expect(typeof window).toBe('object') +}) diff --git a/test/ui/playwright.config.ts b/test/ui/playwright.config.ts index 6e08054a2..c333c5a81 100644 --- a/test/ui/playwright.config.ts +++ b/test/ui/playwright.config.ts @@ -6,7 +6,7 @@ export default defineConfig({ { name: 'chromium', // increase viewport height so virtual scroller renders all explorer items - use: { ...devices['Desktop Chrome'], viewport: { width: 1280, height: 900 } }, + use: { ...devices['Desktop Chrome'], viewport: { width: 800, height: 1300 } }, }, ], use: { diff --git a/test/ui/test/ui.spec.ts b/test/ui/test/ui.spec.ts index 46c9a82fc..60a093a6c 100644 --- a/test/ui/test/ui.spec.ts +++ b/test/ui/test/ui.spec.ts @@ -53,6 +53,12 @@ test.describe('ui', () => { await testFilter(page, { mode: 'ui' }) }) + test('filter reveals initially invisible explorer item', async ({ page }) => { + await page.setViewportSize({ width: 1000, height: 500 }) + await page.goto(pageUrl) + await testFilterInitiallyInvisibleItem(page) + }) + test('tags filter', async ({ page }) => { await page.goto(pageUrl) await testTagsFilter(page) @@ -87,6 +93,11 @@ test.describe('ui', () => { await page.goto(pageUrl) await testExecute(page, { mode: 'ui' }) }) + + test('module graph', async ({ page }) => { + await page.goto(pageUrl) + await testModuleGraph(page) + }) }) test.describe('html report', () => { @@ -175,8 +186,21 @@ test.describe('html report', () => { await page.goto(pageUrl) await testExecute(page, { mode: 'static' }) }) + + test('module graph', async ({ page }) => { + await page.goto(pageUrl) + await testModuleGraph(page) + }) }) +const TEST_COUNTS = { + pass: 18, + fail: 3, + files: { + pass: 7, + }, +} + async function testBasic(page: Page, pageUrl: string) { const pageErrors: unknown[] = [] page.on('pageerror', error => pageErrors.push(error)) @@ -184,7 +208,7 @@ async function testBasic(page: Page, pageUrl: string) { await page.goto(pageUrl) // dashboard - await assertTestCounts(page, { pass: 17, fail: 3 }) + await assertTestCounts(page, { pass: TEST_COUNTS.pass, fail: TEST_COUNTS.fail }) // unhandled errors await expect(page.getByTestId('unhandled-errors')).toContainText( @@ -210,6 +234,18 @@ async function testBasic(page: Page, pageUrl: string) { expect(pageErrors).toEqual([]) } +async function testModuleGraph(page: Page) { + await openExplorerFileItem(page, 'sample.test.ts') + await page.getByTestId('btn-graph').click() + await expect(page.locator('[data-testid=graph] text')).toBeVisible() + await expect(page.locator('[data-testid=graph] text')).toHaveText('sample.test.ts') + + await openExplorerFileItem(page, 'sample-browser.test.ts') + await page.getByTestId('btn-graph').click() + await expect(page.locator('[data-testid=graph] text')).toBeVisible() + await expect(page.locator('[data-testid=graph] text')).toHaveText('sample-browser.test.ts') +} + async function testCoverage(page: Page) { await page.getByLabel('Show coverage').click() await page.frameLocator('#vitest-ui-coverage').getByRole('heading', { name: 'All files' }).click() @@ -414,7 +450,7 @@ async function testDashboardFilter(page: Page) { async function testFilter(page: Page, options: { mode: 'ui' | 'static' }) { // match all files when no filter await page.getByPlaceholder('Search...').fill('') - await page.getByText('PASS (6)').click() + await page.getByText(`PASS (${TEST_COUNTS.files.pass})`).click() await expect(page.getByTestId('results-panel').getByText('sample.test.ts', { exact: true })).toBeVisible() // match nothing @@ -466,6 +502,12 @@ async function testFilter(page: Page, options: { mode: 'ui' | 'static' }) { } } +async function testFilterInitiallyInvisibleItem(page: Page) { + await expect(getExplorerItem(page, 'sample.test.ts')).not.toBeVisible() + await page.getByPlaceholder('Search...').fill('sample.test.ts') + await expect(getExplorerItem(page, 'sample.test.ts')).toBeVisible() +} + async function testCrossOriginAccess(page: Page, pageUrl: string) { await page.route('https://example.com/**', (route) => { return route.fulfill({ @@ -527,7 +569,6 @@ async function testExecute(page: Page, options: { mode: 'ui' | 'ui-disallow' | ' await item.hover() await expect(item.getByTestId('btn-run-test')).toBeEnabled() - await page.getByPlaceholder('Search...').fill('snapshot') const snapshotItem = getExplorerItem(page, 'snapshot.test.ts') await snapshotItem.hover() await expect(snapshotItem.getByTestId('btn-fix-snapshot')).toBeVisible() @@ -539,7 +580,6 @@ async function testExecute(page: Page, options: { mode: 'ui' | 'ui-disallow' | ' await item.hover() await expect(item.getByTestId('btn-run-test')).toBeDisabled() - await page.getByPlaceholder('Search...').fill('snapshot') const snapshotItem = getExplorerItem(page, 'snapshot.test.ts') await snapshotItem.hover() await expect(snapshotItem.getByTestId('btn-fix-snapshot')).not.toBeVisible() @@ -551,7 +591,6 @@ async function testExecute(page: Page, options: { mode: 'ui' | 'ui-disallow' | ' await item.hover() await expect(item.getByTestId('btn-run-test')).not.toBeVisible() - await page.getByPlaceholder('Search...').fill('snapshot') const snapshotItem = getExplorerItem(page, 'snapshot.test.ts') await snapshotItem.hover() await expect(snapshotItem.getByTestId('btn-fix-snapshot')).not.toBeVisible() -- 2.51.2