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]>
vitest-dev · Feb 11, 2023 · 4ea1f1d · 4ea1f1d
1 parent fcd2df2
commit 4ea1f1d
Show file tree

Hide file tree

Showing 13 changed files with 670 additions and 168 deletions.
diff --git a/packages/ui/client/components/FileDetails.vue b/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>
diff --git a/packages/ui/client/components/Suites.vue b/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)"