Skip to content

Commit 3003c43

Browse files
hi-ogawahi-ogawa
authored
fix(ui): fix module graph in browser mode with --ui (#10386)
1 parent 6d772c8 commit 3003c43

9 files changed

Lines changed: 57 additions & 16 deletions

File tree

‎packages/ui/client/components/FileDetails.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,6 @@ async function loadModuleGraph(force = false) {
113113
let moduleGraph = await client.rpc.getModuleGraph(
114114
gd.projectName,
115115
gd.filepath,
116-
!!browserState,
117116
)
118117
// remove node_modules from the graph when enabled
119118
if (hideNodeModules.value) {

‎packages/ui/client/components/ModuleTransformResultView.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { asyncComputed, onKeyStroke } from '@vueuse/core'
66
import { Tooltip as VueTooltip } from 'floating-vue'
77
import { join, relative } from 'pathe'
88
import { computed } from 'vue'
9-
import { browserState, client, config } from '~/composables/client'
9+
import { client, config } from '~/composables/client'
1010
import { currentModule } from '~/composables/navigation'
1111
import { formatPreciseTime, formatTime, getDurationClass, getImportDurationType } from '~/utils/task'
1212
import Badge from './Badge.vue'
@@ -31,7 +31,7 @@ const result = asyncComputed<TransformResultWithSource | ExternalResult | undefi
3131
return undefined
3232
}
3333
if (props.type === 'inline') {
34-
return client.rpc.getTransformResult(props.projectName, props.id, currentModule.value.id, !!browserState)
34+
return client.rpc.getTransformResult(props.projectName, props.id, currentModule.value.id)
3535
}
3636
if (props.type === 'external') {
3737
return client.rpc.getExternalResult(props.id, currentModule.value.id)

‎packages/ui/node/reporter.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,6 @@ async function serializeReportMetadata(
201201
ctx,
202202
projectName,
203203
testModule.moduleId,
204-
project.config.browser.enabled,
205204
)
206205
})())
207206
}

‎packages/vitest/src/api/setup.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -122,13 +122,14 @@ export function setup(ctx: Vitest, _server?: ViteDevServer): void {
122122

123123
return result
124124
},
125-
async getTransformResult(projectName: string, moduleId, testFileTaskId, browser = false) {
125+
async getTransformResult(projectName: string, moduleId, testFileTaskId) {
126126
const project = ctx.getProjectByName(projectName)
127127
const testModule = ctx.state.getReportedEntityById(testFileTaskId) as TestModule | undefined
128128
if (!testModule || !isFileServingAllowed(project.vite.config, moduleId)) {
129129
return
130130
}
131131

132+
const browser = !!project.config.browser.enabled
132133
const environment = getTestFileEnvironment(project, testModule.moduleId, browser)
133134

134135
const moduleNode = environment?.moduleGraph.getModuleById(moduleId)
@@ -155,8 +156,8 @@ export function setup(ctx: Vitest, _server?: ViteDevServer): void {
155156
catch {}
156157
return result
157158
},
158-
async getModuleGraph(project, id, browser): Promise<ModuleGraphData> {
159-
return getModuleGraph(ctx, project, id, browser)
159+
async getModuleGraph(project, id): Promise<ModuleGraphData> {
160+
return getModuleGraph(ctx, project, id)
160161
},
161162
async updateSnapshot(file?: File) {
162163
// silently ignore exec/write attempts if not allowed

‎packages/vitest/src/api/types.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,11 @@ export interface WebSocketHandlers {
4747
getModuleGraph: (
4848
projectName: string,
4949
id: string,
50-
browser?: boolean,
5150
) => Promise<ModuleGraphData>
5251
getTransformResult: (
5352
projectName: string,
5453
id: string,
5554
testFileId: string,
56-
browser?: boolean,
5755
) => Promise<TransformResultWithSource | undefined>
5856
getExternalResult: (
5957
id: string,

‎packages/vitest/src/utils/graph.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ export async function getModuleGraph(
77
ctx: Vitest,
88
projectName: string,
99
testFilePath: string,
10-
browser = false,
1110
): Promise<ModuleGraphData> {
1211
const graph: Record<string, string[]> = {}
1312
const externalized = new Set<string>()
1413
const inlined = new Set<string>()
1514

1615
const project = ctx.getProjectByName(projectName)
16+
const browser = project.config.browser.enabled
1717

1818
const environment = project.config.experimental.viteModuleRunner === false
1919
? project.vite.environments.__vitest__

‎test/ui/fixtures/main/browser/sample-browser.test.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { expect, test } from 'vitest'
2+
3+
test('window', () => {
4+
expect(typeof window).toBe('object')
5+
})

‎test/ui/playwright.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default defineConfig({
66
{
77
name: 'chromium',
88
// increase viewport height so virtual scroller renders all explorer items
9-
use: { ...devices['Desktop Chrome'], viewport: { width: 1280, height: 900 } },
9+
use: { ...devices['Desktop Chrome'], viewport: { width: 800, height: 1300 } },
1010
},
1111
],
1212
use: {

‎test/ui/test/ui.spec.ts‎

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,12 @@ test.describe('ui', () => {
5353
await testFilter(page, { mode: 'ui' })
5454
})
5555

56+
test('filter reveals initially invisible explorer item', async ({ page }) => {
57+
await page.setViewportSize({ width: 1000, height: 500 })
58+
await page.goto(pageUrl)
59+
await testFilterInitiallyInvisibleItem(page)
60+
})
61+
5662
test('tags filter', async ({ page }) => {
5763
await page.goto(pageUrl)
5864
await testTagsFilter(page)
@@ -87,6 +93,11 @@ test.describe('ui', () => {
8793
await page.goto(pageUrl)
8894
await testExecute(page, { mode: 'ui' })
8995
})
96+
97+
test('module graph', async ({ page }) => {
98+
await page.goto(pageUrl)
99+
await testModuleGraph(page)
100+
})
90101
})
91102

92103
test.describe('html report', () => {
@@ -175,16 +186,29 @@ test.describe('html report', () => {
175186
await page.goto(pageUrl)
176187
await testExecute(page, { mode: 'static' })
177188
})
189+
190+
test('module graph', async ({ page }) => {
191+
await page.goto(pageUrl)
192+
await testModuleGraph(page)
193+
})
178194
})
179195

196+
const TEST_COUNTS = {
197+
pass: 18,
198+
fail: 3,
199+
files: {
200+
pass: 7,
201+
},
202+
}
203+
180204
async function testBasic(page: Page, pageUrl: string) {
181205
const pageErrors: unknown[] = []
182206
page.on('pageerror', error => pageErrors.push(error))
183207

184208
await page.goto(pageUrl)
185209

186210
// dashboard
187-
await assertTestCounts(page, { pass: 17, fail: 3 })
211+
await assertTestCounts(page, { pass: TEST_COUNTS.pass, fail: TEST_COUNTS.fail })
188212

189213
// unhandled errors
190214
await expect(page.getByTestId('unhandled-errors')).toContainText(
@@ -210,6 +234,18 @@ async function testBasic(page: Page, pageUrl: string) {
210234
expect(pageErrors).toEqual([])
211235
}
212236

237+
async function testModuleGraph(page: Page) {
238+
await openExplorerFileItem(page, 'sample.test.ts')
239+
await page.getByTestId('btn-graph').click()
240+
await expect(page.locator('[data-testid=graph] text')).toBeVisible()
241+
await expect(page.locator('[data-testid=graph] text')).toHaveText('sample.test.ts')
242+
243+
await openExplorerFileItem(page, 'sample-browser.test.ts')
244+
await page.getByTestId('btn-graph').click()
245+
await expect(page.locator('[data-testid=graph] text')).toBeVisible()
246+
await expect(page.locator('[data-testid=graph] text')).toHaveText('sample-browser.test.ts')
247+
}
248+
213249
async function testCoverage(page: Page) {
214250
await page.getByLabel('Show coverage').click()
215251
await page.frameLocator('#vitest-ui-coverage').getByRole('heading', { name: 'All files' }).click()
@@ -414,7 +450,7 @@ async function testDashboardFilter(page: Page) {
414450
async function testFilter(page: Page, options: { mode: 'ui' | 'static' }) {
415451
// match all files when no filter
416452
await page.getByPlaceholder('Search...').fill('')
417-
await page.getByText('PASS (6)').click()
453+
await page.getByText(`PASS (${TEST_COUNTS.files.pass})`).click()
418454
await expect(page.getByTestId('results-panel').getByText('sample.test.ts', { exact: true })).toBeVisible()
419455

420456
// match nothing
@@ -466,6 +502,12 @@ async function testFilter(page: Page, options: { mode: 'ui' | 'static' }) {
466502
}
467503
}
468504

505+
async function testFilterInitiallyInvisibleItem(page: Page) {
506+
await expect(getExplorerItem(page, 'sample.test.ts')).not.toBeVisible()
507+
await page.getByPlaceholder('Search...').fill('sample.test.ts')
508+
await expect(getExplorerItem(page, 'sample.test.ts')).toBeVisible()
509+
}
510+
469511
async function testCrossOriginAccess(page: Page, pageUrl: string) {
470512
await page.route('https://example.com/**', (route) => {
471513
return route.fulfill({
@@ -527,7 +569,6 @@ async function testExecute(page: Page, options: { mode: 'ui' | 'ui-disallow' | '
527569
await item.hover()
528570
await expect(item.getByTestId('btn-run-test')).toBeEnabled()
529571

530-
await page.getByPlaceholder('Search...').fill('snapshot')
531572
const snapshotItem = getExplorerItem(page, 'snapshot.test.ts')
532573
await snapshotItem.hover()
533574
await expect(snapshotItem.getByTestId('btn-fix-snapshot')).toBeVisible()
@@ -539,7 +580,6 @@ async function testExecute(page: Page, options: { mode: 'ui' | 'ui-disallow' | '
539580
await item.hover()
540581
await expect(item.getByTestId('btn-run-test')).toBeDisabled()
541582

542-
await page.getByPlaceholder('Search...').fill('snapshot')
543583
const snapshotItem = getExplorerItem(page, 'snapshot.test.ts')
544584
await snapshotItem.hover()
545585
await expect(snapshotItem.getByTestId('btn-fix-snapshot')).not.toBeVisible()
@@ -551,7 +591,6 @@ async function testExecute(page: Page, options: { mode: 'ui' | 'ui-disallow' | '
551591
await item.hover()
552592
await expect(item.getByTestId('btn-run-test')).not.toBeVisible()
553593

554-
await page.getByPlaceholder('Search...').fill('snapshot')
555594
const snapshotItem = getExplorerItem(page, 'snapshot.test.ts')
556595
await snapshotItem.hover()
557596
await expect(snapshotItem.getByTestId('btn-fix-snapshot')).not.toBeVisible()

0 commit comments

Comments
 (0)