Skip to content

Commit

Permalink
fix(ui): render project name consistently (#6329)
Browse files Browse the repository at this point in the history
  • Loading branch information
sheremet-va committed Sep 12, 2024
1 parent 29b97d5 commit 6e82711
Show file tree
Hide file tree
Showing 7 changed files with 33 additions and 23 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"typecheck": "tsc -p tsconfig.check.json --noEmit",
"typecheck:why": "tsc -p tsconfig.check.json --noEmit --explainFiles > explainTypes.txt",
"ui:build": "vite build packages/ui",
"ui:dev": "vite packages/ui",
"ui:dev": "npm -C packages/ui run dev:client",
"ui:test": "npm -C packages/ui run test:run",
"test:browser:webdriverio": "pnpm -C test/browser run test:webdriverio",
"test:browser:playwright": "pnpm -C test/browser run test:playwright"
Expand Down
8 changes: 1 addition & 7 deletions packages/ui/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,14 @@

This package is for UI interface of Vitest.

> Work in progress.
## Development Setup

At project root, create terminals with each of the following commands:

```bash
nr dev
nr ui:dev
```

```bash
nr test --api
```

```bash
nr ui:dev
```
27 changes: 20 additions & 7 deletions packages/ui/client/components/FileDetails.vue
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,21 @@ debouncedWatch(
},
{ debounce: 100, immediate: true },
)
const projectNameColor = computed(() => {
return getProjectNameColor(current.value?.file.projectName)
})
const projectNameTextColor = computed(() => {
switch (projectNameColor.value) {
case 'blue':
case 'green':
case 'magenta':
return 'white'
default:
return 'black'
}
})
</script>

<template>
Expand All @@ -127,15 +142,13 @@ debouncedWatch(
<div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
<StatusIcon :state="current.result?.state" :mode="current.mode" :failed-snapshot="failedSnapshot" />
<div v-if="isTypecheck" v-tooltip.bottom="'This is a typecheck test. It won\'t report results of the runtime tests'" class="i-logos:typescript-icon" flex-shrink-0 />
<div
<span
v-if="current?.file.projectName"
font-light
op-50
text-sm
:style="{ color: getProjectNameColor(current?.file.projectName) }"
class="rounded-full py-0.5 px-1 text-xs font-light"
:style="{ backgroundColor: projectNameColor, color: projectNameTextColor }"
>
[{{ current?.file.projectName || "" }}]
</div>
{{ current.file.projectName }}
</span>
<div flex-1 font-light op-50 ws-nowrap truncate text-sm>
{{ current?.name }}
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/client/components/explorer/ExplorerItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ const projectNameTextColor = computed(() => {
<div flex items-end gap-2 overflow-hidden>
<div v-if="type === 'file' && typecheck" v-tooltip.bottom="'This is a typecheck test. It won\'t report results of the runtime tests'" class="i-logos:typescript-icon" flex-shrink-0 />
<span text-sm truncate font-light>
<span v-if="type === 'file' && projectName" class="rounded-full p-1 mr-1 text-xs" :style="{ backgroundColor: projectNameColor, color: projectNameTextColor }">
<span v-if="type === 'file' && projectName" class="rounded-full py-0.5 px-1 mr-1 text-xs" :style="{ backgroundColor: projectNameColor, color: projectNameTextColor }">
{{ projectName }}
</span>
<span :text="state === 'fail' ? 'red-500' : ''" v-html="highlighted" />
Expand Down
4 changes: 3 additions & 1 deletion packages/vitest/src/node/logger.ts
Original file line number Diff line number Diff line change
Expand Up @@ -228,10 +228,12 @@ export class Logger {

const resolvedUrls = project.browser.vite.resolvedUrls
const origin = resolvedUrls?.local[0] ?? resolvedUrls?.network[0]
const provider = project.browser.provider.name
const providerString = provider === 'preview' ? '' : ` by ${provider}`
this.log(
c.dim(
c.green(
` ${output} Browser runner started at ${new URL('/', origin)}`,
` ${output} Browser runner started${providerString} at ${new URL('/', origin)}`,
),
),
)
Expand Down
8 changes: 4 additions & 4 deletions test/browser/specs/server-url.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@ afterEach(() => {
})

test('server-url http', async () => {
const { stdout, stderr } = await runBrowserTests({
const { stdout, stderr, provider } = await runBrowserTests({
root: './fixtures/server-url',
})
expect(stderr).toBe('')
expect(stdout).toContain('Browser runner started at http://localhost:5173/')
expect(stdout).toContain(`Browser runner started by ${provider} at http://localhost:5173/`)
})

test('server-url https', async () => {
process.env.TEST_HTTPS = '1'
const { stdout, stderr } = await runBrowserTests({
const { stdout, stderr, provider } = await runBrowserTests({
root: './fixtures/server-url',
})
expect(stderr).toBe('')
expect(stdout).toContain('Browser runner started at https://localhost:5173/')
expect(stdout).toContain(`Browser runner started by ${provider} at https://localhost:5173/`)
expect(stdout).toContain('Test Files 1 passed')
})
5 changes: 3 additions & 2 deletions test/browser/specs/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import type { UserConfig as ViteUserConfig } from 'vite'
import type { UserConfig } from 'vitest'
import { runVitest } from '../../test-utils'

export const browser = process.env.BROWSER || (process.env.PROVIDER !== 'playwright' ? 'chromium' : 'chrome')
const provider = process.env.PROVIDER || 'playwright'
export const browser = process.env.BROWSER || (provider !== 'playwright' ? 'chromium' : 'chrome')

export async function runBrowserTests(
config?: Omit<UserConfig, 'browser'> & { browser?: Partial<UserConfig['browser']> },
Expand All @@ -29,5 +30,5 @@ export async function runBrowserTests(
const passedTests = getPassed(browserResultJson.testResults)
const failedTests = getFailed(browserResultJson.testResults)

return { ...result, browserResultJson, passedTests, failedTests, browser }
return { ...result, browserResultJson, passedTests, failedTests, browser, provider }
}

0 comments on commit 6e82711

Please sign in to comment.