feat: adding ui component tests

.github/workflows/test.yml

@@ -44,6 +44,9 @@ jobs:
       - name: Test
         run: pnpm run test:ci
 
+      - name: Test UI
+        run: pnpm run ui:test
+
       - name: Lint
         run: pnpm run lint --if-present
 

.gitignore

@@ -12,3 +12,6 @@ dist
 .idea
 .DS_Store
 bench/test/*/*/
+cypress/videos
+cypress/downloads
+cypress/screenshots

package.json

@@ -23,7 +23,8 @@
     "test:ci": "cross-env CI=true pnpm -r --stream --filter !@vitest/monorepo --filter !@vitest/test-fails run test --",
     "typecheck": "tsc --noEmit",
     "ui:build": "vite build packages/ui",
-    "ui:dev": "vite packages/ui"
+    "ui:dev": "vite packages/ui",
+    "ui:test": "npm -C packages/ui run test:run"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.16.0",

packages/ui/client/components/IconButton.cy.tsx

@@ -0,0 +1,23 @@
+import IconButton from './IconButton.vue'
+
+const title = 'A star'
+const icon = 'i-carbon-star-filled'
+
+describe('IconButton', () => {
+  it('should render the title', () => {
+    cy.mount(<IconButton m="2" title={title} icon={icon}/>)
+      .get(`[aria-label="${title}"][role=button]`)
+      .should('be.visible')
+  })
+
+  it('can be overridden with a slot', () => {
+    cy.mount(<IconButton m="2" icon={icon}>
+      <span text="32px">⭐️</span>
+    </IconButton>)
+      .get(`.${icon}`)
+      .should('not.exist')
+      .get('button')
+      .contains('⭐️')
+      .should('be.visible')
+  })
+})

packages/ui/client/components/dashboard/DashboardEntry.cy.tsx

@@ -0,0 +1,35 @@
+import faker from '@faker-js/faker'
+import DashboardEntry from './DashboardEntry.vue'
+
+const body = () => (<div data-testid="body-content">{ faker.lorem.words(2) }</div>)
+const header = () => (<div data-testid="header-content">{ faker.hacker.phrase() }</div>)
+const bodySelector = '[data-testid=body-content]'
+const headerSelector = '[data-testid=header-content]'
+const tailSelector = '[data-testid=tail]'
+
+// Used as a workaround until unocss HMR is compatible w Cy.
+it('initial', () => {
+  cy.mount(<DashboardEntry v-slots={{ body, header }}/>)
+})
+
+describe('DashboardEntry', () => {
+  it('tail is rendered by default 2', () => {
+    cy.mount(<DashboardEntry v-slots={{ body, header }}/>)
+      .get(tailSelector)
+      .should('exist')
+  })
+
+  it('tail is not shown when true', () => {
+    cy.mount(<DashboardEntry tail v-slots={{ body, header }}/>)
+      .get(tailSelector)
+      .should('not.exist')
+  })
+
+  it('renders the body and header slots', () => {
+    cy.mount(<DashboardEntry v-slots={{ body, header }}/>)
+      .get(bodySelector)
+      .should('be.visible')
+      .get(headerSelector)
+      .should('be.visible')
+  })
+})

packages/ui/client/components/dashboard/DashboardEntry.vue

@@ -12,6 +12,6 @@ withDefaults(defineProps<{ tail?: boolean }>(), { tail: false })
         <slot name="header" />
       </div>
     </div>
-    <div v-if="!tail" my-2 op50 w-1px bg-current origin-center rotate-15 translate-x-3 />
+    <div v-if="!tail" data-testid="tail" my-2 op50 w-1px bg-current origin-center rotate-15 translate-x-3 />
   </div>
 </template>

packages/ui/client/components/dashboard/TestFilesEntry.cy.tsx

@@ -0,0 +1,20 @@
+import TestFilesEntry from './TestFilesEntry.vue'
+
+const entrySelector = '[data-testid=test-files-entry]'
+const numFilesSelector = '[data-testid=num-files]'
+const timingSelector = '[data-testid=run-time]'
+
+describe('TestFilesEntry', () => {
+  it('renders the headers', () => {
+    cy.mount(<TestFilesEntry/>)
+      .get(entrySelector)
+      .should('contain.text', 'Files')
+      .and('contain.text', 'Time')
+
+      // Empty state
+      .get(timingSelector)
+      .should('have.text', '0ms')
+      .get(numFilesSelector)
+      .should('have.text', '0')
+  })
+})

packages/ui/client/components/dashboard/TestFilesEntry.vue

@@ -5,13 +5,14 @@ import { filesFailed, filesSnapshotFailed, filesSuccess, time } from '../../comp
 
 <template>
   <div
+    data-testid="test-files-entry"
     grid="~ cols-[min-content_1fr_min-content]"
     items-center gap="x-2 y-3" p="x4" relative font-light w-80
     op80
   >
     <div i-carbon-document />
     <div>Files</div>
-    <div class="number">
+    <div class="number" data-testid="num-files">
       {{ files.length }}
     </div>
 
@@ -45,7 +46,7 @@ import { filesFailed, filesSnapshotFailed, filesSuccess, time } from '../../comp
 
     <div i-carbon-timer />
     <div>Time</div>
-    <div class="number">
+    <div class="number" data-testid="run-time">
       {{ time }}
     </div>
   </div>

packages/ui/client/components/dashboard/TestsEntry.cy.tsx

@@ -0,0 +1,30 @@
+import TestsEntry from './TestsEntry.vue'
+
+const passEntrySelector = '[data-testid=pass-entry]'
+const failEntrySelector = '[data-testid=fail-entry]'
+const totalEntrySelector = '[data-testid=total-entry]'
+const todoEntrySelector = '[data-testid=todo-entry]'
+const skippedEntrySelector = '[data-testid=skipped-entry]'
+
+describe('TestsEntry', () => {
+  it('renders the headers for pass, fail, and total', () => {
+    cy.mount(<TestsEntry/>)
+      .get(passEntrySelector)
+      .should('contain.text', 'Pass')
+      .and('contain.text', '0')
+      .get(failEntrySelector)
+      .and('contain.text', 'Fail')
+      .and('contain.text', '0')
+      .get(totalEntrySelector)
+      .and('contain.text', 'Total')
+      .and('contain.text', '0')
+  })
+
+  it('does not render skipped and todo unless there are tests matched', () => {
+    cy.mount(<TestsEntry/>)
+      .get(skippedEntrySelector)
+      .should('not.exist')
+      .get(todoEntrySelector)
+      .should('not.exist')
+  })
+})

packages/ui/client/components/dashboard/TestsEntry.vue

@@ -14,39 +14,39 @@ const pending = computed(() => {
 
 <template>
   <div flex="~ wrap" justify-evenly gap-2 p="x-4" relative>
-    <DashboardEntry text-green5>
+    <DashboardEntry text-green5 data-testid="pass-entry">
       <template #header>
         Pass
       </template>
       <template #body>
         {{ pass }}
       </template>
     </DashboardEntry>
-    <DashboardEntry :class="{ 'text-red5': failed, 'op50': !failed }">
+    <DashboardEntry :class="{ 'text-red5': failed, 'op50': !failed }" data-testid="fail-entry">
       <template #header>
         Fail
       </template>
       <template #body>
         {{ failed }}
       </template>
     </DashboardEntry>
-    <DashboardEntry v-if="skipped" op50>
+    <DashboardEntry v-if="skipped" op50 data-testid="skipped-entry">
       <template #header>
         Skip
       </template>
       <template #body>
         {{ skipped }}
       </template>
     </DashboardEntry>
-    <DashboardEntry v-if="todo" op50>
+    <DashboardEntry v-if="todo" op50 data-testid="todo-entry">
       <template #header>
         Todo
       </template>
       <template #body>
         {{ todo }}
       </template>
     </DashboardEntry>
-    <DashboardEntry :tail="true">
+    <DashboardEntry :tail="true" data-testid="total-entry">
       <template #header>
         Total
       </template>

packages/ui/client/components/dashboard/TestsFilesContainer.cy.tsx

@@ -0,0 +1,11 @@
+import TestsFilesContainer from './TestsFilesContainer.vue'
+
+const entrySelector = '[data-testid=test-files-entry]'
+
+describe('TestsFilesContainer', () => {
+  it('renders the TestEntry', () => {
+    cy.mount(<TestsFilesContainer/>)
+      .get(entrySelector)
+      .should('be.visible')
+  })
+})

packages/ui/client/components/views/ViewConsoleOutput.spec.tsx

@@ -0,0 +1,13 @@
+import ViewConsoleOutput from './ViewConsoleOutput.vue'
+
+const entrySelector = '[data-testid=logs]'
+
+describe('ViewConsoleOutput', () => {
+  it('renders', () => {
+    cy.mount(<ViewConsoleOutput/>)
+      .get(entrySelector)
+      // TODO: stub the websocket connection
+      // so that we can add logs and other data
+      .should('not.exist')
+  })
+})

packages/ui/client/components/views/ViewConsoleOutput.vue

@@ -18,7 +18,7 @@ function getTaskName(id?: string) {
 </script>
 
 <template>
-  <div v-if="logs?.length" h-full class="scrolls" flex flex-col>
+  <div v-if="logs?.length" h-full class="scrolls" flex flex-col data-testid="logs">
     <div v-for="log of logs" :key="log.taskId" font-mono>
       <div border="b base" p-4>
         <div

packages/ui/client/components/views/ViewEditor.cy.tsx

@@ -0,0 +1,21 @@
+import faker from '@faker-js/faker'
+import ViewEditor from './ViewEditor.vue'
+
+const viewEditorSelector = '[data-testid=code-mirror]'
+
+// TODO: stub out the rpc call in order to fully test this component
+describe('ViewEditor', () => {
+  it('renders codemirror with line numbers', () => {
+    const file = {
+      filepath: faker.system.filePath(),
+      collectDuration: faker.time.recent(),
+      tasks: [],
+    }
+    cy.mount(<ViewEditor h="200px" file={file}/>)
+      .get(viewEditorSelector)
+      .type(`// ${faker.git.commitSha()}{enter}`, { delay: 0 })
+      .get(viewEditorSelector)
+      .should('contain.text', '1')
+      .and('contain.text', '2')
+  })
+})

packages/ui/client/components/views/ViewEditor.vue

@@ -67,6 +67,7 @@ watch([cm, failed], () => {
     h-full
     v-bind="{ lineNumbers: true }"
     :mode="ext"
+    data-testid="code-mirror"
     @save="onSave"
   />
 </template>

packages/ui/client/global-setup.ts

@@ -0,0 +1,25 @@
+import { createRouter as _createRouter, createWebHistory } from 'vue-router'
+import FloatingVue, { VTooltip } from 'floating-vue'
+import routes from 'virtual:generated-pages'
+import 'd3-graph-controller/default.css'
+import 'splitpanes/dist/splitpanes.css'
+import '@unocss/reset/tailwind.css'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror-theme-vars/base.css'
+import './styles/main.css'
+import 'floating-vue/dist/style.css'
+import 'uno.css'
+
+export const directives = {
+  tooltip: VTooltip,
+}
+
+FloatingVue.options.instantMove = true
+FloatingVue.options.distance = 10
+
+export const createRouter = () => _createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+})
+
+export const plugins = [createRouter]

packages/ui/client/main.ts

@@ -1,27 +1,15 @@
 import { createApp } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
-import routes from 'virtual:generated-pages'
-import FloatingVue, { VTooltip } from 'floating-vue'
+import { directives, plugins } from './global-setup'
 import App from './App.vue'
 
-import 'd3-graph-controller/default.css'
-import 'splitpanes/dist/splitpanes.css'
-import '@unocss/reset/tailwind.css'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror-theme-vars/base.css'
-import 'floating-vue/dist/style.css'
-import './styles/main.css'
-import 'uno.css'
-
 const app = createApp(App)
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes,
+
+plugins.forEach((plugin) => {
+  app.use(plugin)
 })
-app.use(router)
 
-app.directive('tooltip', VTooltip)
-FloatingVue.options.instantMove = true
-FloatingVue.options.distance = 10
+Object.entries(directives).forEach(([name, directive]) => {
+  app.directive(name, directive)
+})
 
 app.mount('#app')

packages/ui/client/pages/App.cy.tsx

@@ -0,0 +1,9 @@
+import App from './index.vue'
+
+// When mocking WebSockets, we'll want to follow the guide here
+// https://glebbahmutov.com/blog/test-socketio-chat-using-cypress/#use-socketio-from-cypress
+describe('App', () => {
+  it('should render', () => {
+    cy.mount(<App />)
+  })
+})

packages/ui/cypress.json

@@ -0,0 +1,7 @@
+{
+  "testFiles": "**/*.cy.{js,ts,jsx,tsx}",
+  "componentFolder": "client",
+  "supportFile": "cypress/support/index.ts",
+  "pluginsFile": "cypress/plugins/index.ts",
+  "fixturesFolder": false
+}

packages/ui/cypress/plugins/index.ts

@@ -0,0 +1,15 @@
+import path from 'path'
+import { startDevServer } from '@cypress/vite-dev-server'
+
+const plugin: Cypress.PluginConfig = (on, config) => {
+  on('dev-server:start', options => startDevServer({
+    options,
+    viteConfig: {
+      configFile: path.resolve(__dirname, './vite.config.ts'),
+    },
+  }))
+
+  return config
+}
+
+export default plugin

packages/ui/cypress/plugins/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import { config } from '../../vite.config'
+
+config.plugins?.push(vueJsx())
+
+export default defineConfig(config)

packages/ui/cypress/support/index.ts

@@ -0,0 +1,10 @@
+import faker from '@faker-js/faker'
+import '../../client/global-setup'
+
+import { registerMount } from './mount'
+
+before(() => {
+  faker.seed(0)
+})
+
+registerMount()