fix(ui): render project name consistently (#6329)

Author: sheremet-va

package.json

@@ -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"

packages/ui/README.md

@@ -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
-```

packages/ui/client/components/FileDetails.vue

@@ -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>
@@ -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>

packages/ui/client/components/explorer/ExplorerItem.vue

@@ -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" />

packages/vitest/src/node/logger.ts

@@ -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)}`,
           ),
         ),
       )

test/browser/specs/server-url.test.ts

@@ -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')
 })

test/browser/specs/utils.ts

@@ -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']> },
@@ -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 }
 }