test: ui e2e (#2710)

* feat: ui test

* test: ui

* feat: no auto open browser

* fix: lint

* fix: test timeout

* fix: timeout

* fix: test

* fix: wait more times

* fix: kill

* fix: exit process

* fix: kill

* chore: update

* chore: update

* chore: update

* fix: lint

* fix: await page load

* chore: update

* fix: test

* fix: test

* fix: test

* feat: must had content

* chore: update

* chore: update

* chore: update

* fix: times

* fix: ports

* chore: update config

* fix: catch

* feat: asset command no error

* feat: log the command stdout

* fix: error

* chore: update

* chore: use the same port

* chore: update pnpm

* fix: error

* chore: update

* feat: test

* chore: update page register

* chore: ignore not close process

* fix: params

* fix: port

* feat: pipe

* feat: catch error

* feat: test report

* chore: update

* chore: update

* chore: update sna

* test: ui

* chore: update

* chore: update

* test: untilUpdated

* chore: untilUpdated

* test: format named

* test: url should update

* chore: update

* chore: fix lockfile

* chore: upate snapshot

---------

Co-authored-by: Vladimir Sheremet <[email protected]>

Author: poyoho

packages/ui/client/components/FileDetails.vue

@@ -43,7 +43,7 @@ function onDraft(value: boolean) {
 </script>
 
 <template>
-  <div v-if="current" flex flex-col h-full max-h-full overflow-hidden>
+  <div v-if="current" flex flex-col h-full max-h-full overflow-hidden data-testid="file-detail">
     <div>
       <div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
         <StatusIcon :task="current" />
@@ -65,12 +65,14 @@ function onDraft(value: boolean) {
         <button
           tab-button
           :class="{ 'tab-button-active': viewMode == null }"
+          data-testid="btn-report"
           @click="changeViewMode(null)"
         >
           Report
         </button>
         <button
           tab-button
+          data-testid="btn-graph"
           :class="{ 'tab-button-active': viewMode === 'graph' }"
           @click="changeViewMode('graph')"
         >
@@ -79,13 +81,15 @@ function onDraft(value: boolean) {
         <button
           v-if="!isReport"
           tab-button
+          data-testid="btn-code"
           :class="{ 'tab-button-active': viewMode === 'editor' }"
           @click="changeViewMode('editor')"
         >
           {{ draft ? '*&#160;' : '' }}Code
         </button>
         <button
           tab-button
+          data-testid="btn-console"
           :class="{ 'tab-button-active': viewMode === 'console', 'op20': viewMode !== 'console' && consoleCount === 0 }"
           @click="changeViewMode('console')"
         >
@@ -96,11 +100,11 @@ function onDraft(value: boolean) {
 
     <div flex flex-col flex-1 overflow="hidden">
       <div v-if="hasGraphBeenDisplayed" flex-1>
-        <ViewModuleGraph v-show="viewMode === 'graph'" :graph="graph" />
+        <ViewModuleGraph v-show="viewMode === 'graph'" :graph="graph" data-testid="graph" />
       </div>
-      <ViewEditor v-if="viewMode === 'editor'" :key="current.filepath" :file="current" @draft="onDraft" />
-      <ViewConsoleOutput v-else-if="viewMode === 'console'" :file="current" />
-      <ViewReport v-else-if="!viewMode" :file="current" />
+      <ViewEditor v-if="viewMode === 'editor'" :key="current.filepath" :file="current" data-testid="editor" @draft="onDraft" />
+      <ViewConsoleOutput v-else-if="viewMode === 'console'" :file="current" data-testid="console" />
+      <ViewReport v-else-if="!viewMode" :file="current" data-testid="report" />
     </div>
   </div>
 </template>

packages/ui/client/components/Suites.vue

@@ -13,7 +13,7 @@ const updateSnapshot = () => current.value && client.rpc.updateSnapshot(current.
     <TasksList :tasks="current.tasks" :nested="true">
       <template #header>
         <StatusIcon mx-1 :task="current" />
-        <span font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>{{ name }}</span>
+        <span data-testid="filenames" font-bold text-sm flex-auto ws-nowrap overflow-hidden truncate>{{ name }}</span>
         <div class="flex text-lg">
           <IconButton
             v-if="(failedSnapshot && !isReport)"