feat(ui): run summary

packages/peeky-client/src/features/run/RunSummaryBar.vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { NexusGenFieldTypes } from '@peeky/server/types'
+import { useQuery, useSubscription } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { computed } from 'vue'
+
+const runStatsFragment = gql`fragment runStats on Run {
+  testCount
+  inProgressTestCount: testCount (status: in_progress)
+  successTestCount: testCount (status: success)
+  errorTestCount: testCount (status: error)
+  skippedTestCount: testCount (status: skipped)
+  todoTestCount: testCount (status: todo)
+}`
+
+const props = defineProps<{
+  run: NexusGenFieldTypes['Run']
+}>()
+
+const { result, refetch } = useQuery<{
+  run: {
+    id: string
+    testCount: number
+    successTestCount: number
+    errorTestCount: number
+    skippedTestCount: number
+    todoTestCount: number
+  }
+}>(gql`query runStats ($runId: ID!) {
+  run (id: $runId) {
+    id
+    ...runStats
+  }
+}
+${runStatsFragment}`, () => ({
+  runId: props.run.id,
+}))
+const runStats = computed(() => result.value?.run)
+
+useSubscription(gql`subscription testUpdatedInRunSummary ($runId: ID!) {
+  runStatsUpdated (runId: $runId) {
+    id
+    ...runStats
+  }
+}
+${runStatsFragment}`, () => ({
+  runId: props.run.id,
+}))
+
+const kinds = [
+  { field: 'errorTestCount', label: 'Error', css: 'bg-red-400 dark:bg-red-600' },
+  { field: 'successTestCount', label: 'Success', css: 'bg-green-500' },
+  { field: 'todoTestCount', label: 'Todo', css: 'bg-yellow-400 dark:bg-yellow-600' },
+  { field: 'skippedTestCount', label: 'Skipped', css: 'bg-gray-200 dark:bg-gray-800' },
+]
+</script>
+
+<template>
+  <div class="flex-none flex items-center space-x-2 h-10">
+    <template v-if="runStats">
+      <div class="w-full h-full relative mx-3 flex items-center">
+        <div class="w-full h-2 rounded-full overflow-hidden flex bg-gray-100 dark:bg-gray-900">
+          <div
+            v-for="kind of kinds"
+            :key="kind.field"
+            class="h-full"
+            :class="kind.css"
+            :style="{
+              width: (runStats[kind.field] / runStats.testCount * 100) + '%',
+            }"
+          />
+        </div>
+
+        <div class="absolute top-0 left-0 w-full h-full flex">
+          <VTooltip
+            v-for="kind of kinds"
+            :key="kind.field"
+            class="h-full"
+            :style="{
+              width: (runStats[kind.field] / runStats.testCount * 100) + '%',
+            }"
+          >
+            <div class="w-full h-full" />
+
+            <template #popper>
+              <div class="flex items-center space-x-4">
+                <div
+                  class="w-6 h-2 rounded-full"
+                  :class="kind.css"
+                />
+                <div>
+                  <b>{{ kind.label }} {{ runStats[kind.field] }}</b> / {{ runStats.testCount }} test{{ runStats.testCount > 1 ? 's' : '' }}
+                </div>
+              </div>
+            </template>
+          </VTooltip>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

packages/peeky-client/src/features/test-file/TestFileAllView.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import SuitesView from '../suite/SuitesView.vue'
+import RunSummaryBar from '../run/RunSummaryBar.vue'
 import { testItemFragment } from '../test/TestItem.vue'
 import { testSuiteItemFragment } from '../suite/SuiteItem.vue'
 import { useQuery, useResult } from '@vue/apollo-composable'
@@ -104,5 +105,11 @@ subscribeToMore(() => ({
     v-if="run"
     :suites="run.testSuites"
     :run="run"
-  />
+  >
+    <template #toolbar>
+      <RunSummaryBar
+        :run="run"
+      />
+    </template>
+  </SuitesView>
 </template>

packages/peeky-server/src/generated/nexus-typegen.ts

@@ -135,6 +135,7 @@ export interface NexusGenFieldTypes {
     snapshotById: NexusGenRootTypes['Snapshot'] | null; // Snapshot
     snapshotCount: number; // Int!
     status: NexusGenEnums['Status']; // Status!
+    testCount: number; // Int!
     testSuiteById: NexusGenRootTypes['TestSuite'] | null; // TestSuite
     testSuiteBySlug: NexusGenRootTypes['TestSuite'] | null; // TestSuite
   }
@@ -170,6 +171,7 @@ export interface NexusGenFieldTypes {
   Subscription: { // field return type
     runAdded: NexusGenRootTypes['Run']; // Run!
     runRemoved: NexusGenRootTypes['Run']; // Run!
+    runStatsUpdated: NexusGenRootTypes['Run'] | null; // Run
     runTestFileUpdated: NexusGenRootTypes['RunTestFile']; // RunTestFile!
     runUpdated: NexusGenRootTypes['Run']; // Run!
     testAdded: NexusGenRootTypes['Test']; // Test!
@@ -270,6 +272,7 @@ export interface NexusGenFieldTypeNames {
     snapshotById: 'Snapshot'
     snapshotCount: 'Int'
     status: 'Status'
+    testCount: 'Int'
     testSuiteById: 'TestSuite'
     testSuiteBySlug: 'TestSuite'
   }
@@ -305,6 +308,7 @@ export interface NexusGenFieldTypeNames {
   Subscription: { // field return type name
     runAdded: 'Run'
     runRemoved: 'Run'
+    runStatsUpdated: 'Run'
     runTestFileUpdated: 'RunTestFile'
     runUpdated: 'Run'
     testAdded: 'Test'
@@ -415,6 +419,9 @@ export interface NexusGenArgTypes {
     snapshotById: { // args
       id: string; // ID!
     }
+    testCount: { // args
+      status?: NexusGenEnums['Status'] | null; // Status
+    }
     testSuiteById: { // args
       id: string; // ID!
     }
@@ -423,6 +430,9 @@ export interface NexusGenArgTypes {
     }
   }
   Subscription: {
+    runStatsUpdated: { // args
+      runId: string; // ID!
+    }
     testAdded: { // args
       runId: string; // ID!
       runTestFileId?: string | null; // ID

packages/peeky-server/src/generated/schema.graphql

@@ -46,6 +46,7 @@ type Run {
   snapshotById(id: ID!): Snapshot
   snapshotCount: Int!
   status: Status!
+  testCount(status: Status): Int!
   testSuiteById(id: ID!): TestSuite
   testSuiteBySlug(slug: String!): TestSuite
 }
@@ -99,6 +100,7 @@ enum Status {
 type Subscription {
   runAdded: Run!
   runRemoved: Run!
+  runStatsUpdated(runId: ID!): Run
   runTestFileUpdated: RunTestFile!
   runUpdated: Run!
   testAdded(runId: ID!, runTestFileId: ID): Test!

packages/peeky-server/src/schema/Run.ts

@@ -10,7 +10,7 @@ import type { Context } from '../context'
 import { Status, StatusEnum } from './Status.js'
 import { updateTestFile, testFiles } from './TestFile.js'
 import { clearTestSuites, createTestSuite, updateTestSuite, testSuites } from './TestSuite.js'
-import { updateTest } from './Test.js'
+import { clearTests, updateTest } from './Test.js'
 import { RunTestFileData, updateRunTestFile } from './RunTestFile.js'
 import { getErrorPosition, getSrcFile, formatRunTestFileErrorMessage } from '../util.js'
 import { settings } from './Settings.js'
@@ -421,6 +421,7 @@ export async function clearRun (ctx: Context, id: string) {
     runs.splice(index, 1)
   }
   clearTestSuites(ctx, id)
+  clearTests(ctx, id)
   ctx.pubsub.publish(RunRemoved, {
     run,
   } as RunRemovedPayload)
@@ -429,6 +430,8 @@ export async function clearRun (ctx: Context, id: string) {
 
 export function clearRuns (ctx: Context) {
   clearTestSuites(ctx)
+  clearTests(ctx)
+  clearSnapshots()
   runs = []
   return true
 }

packages/peeky-server/src/schema/Stats.ts

@@ -0,0 +1,46 @@
+import { withFilter } from 'apollo-server-express'
+import { arg, extendType, idArg, nonNull } from 'nexus'
+import { Context } from 'vm'
+import { getRunId, runs } from './Run.js'
+import { tests } from './Test.js'
+
+export const StatsExtendRun = extendType({
+  type: 'Run',
+  definition (t) {
+    t.nonNull.int('testCount', {
+      args: {
+        status: arg({
+          type: 'Status',
+        }),
+      },
+      resolve: (run, { status }) => tests.filter(t => t.runId === run.id && (!status || t.status === status)).length,
+    })
+  },
+})
+
+export const RunStatsUpdated = 'run-stats-updated'
+
+export interface RunStatsUpdatedPayload {
+  runId: string
+}
+
+export const StatsExtendSubpscription = extendType({
+  type: 'Subscription',
+  definition (t) {
+    t.field('runStatsUpdated', {
+      type: 'Run',
+      args: {
+        runId: nonNull(idArg()),
+      },
+      subscribe: withFilter(
+        (_, args, ctx) => ctx.pubsub.asyncIterator(RunStatsUpdated),
+        (payload: RunStatsUpdatedPayload, args) => payload.runId === getRunId(args.runId),
+      ),
+      resolve: (payload: RunStatsUpdatedPayload) => runs.find(r => r.id === getRunId(payload.runId)),
+    })
+  },
+})
+
+export function publishRunStatsUpdated (ctx: Context, runId: string) {
+  ctx.pubsub.publish(RunStatsUpdated, { runId } as RunStatsUpdatedPayload)
+}

packages/peeky-server/src/schema/Test.ts

@@ -10,6 +10,7 @@ import { Status, StatusEnum } from './Status.js'
 import { getTestSuite, TestSuiteData } from './TestSuite.js'
 import { SnapshotData } from './Snapshot.js'
 import { getSrcFile } from '../util.js'
+import { publishRunStatsUpdated } from './Stats.js'
 
 const __filename = fileURLToPath(import.meta.url)
 
@@ -212,6 +213,8 @@ export interface CreateTestOptions {
   status: StatusEnum
 }
 
+export let tests: TestData[] = []
+
 export async function createTest (ctx: Context, options: CreateTestOptions) {
   const test: TestData = {
     id: options.id,
@@ -227,6 +230,7 @@ export async function createTest (ctx: Context, options: CreateTestOptions) {
     snapshots: [],
     failedSnapshotCount: 0,
   }
+  tests.push(test)
   ctx.pubsub.publish(TestAdded, {
     test,
   } as TestAddedPayload)
@@ -251,9 +255,16 @@ export async function updateTest (ctx: Context, testSuiteId: string, id: string,
   const test = getTest(ctx, testSuiteId, id)
   if (!test) return
   const newData = typeof data === 'function' ? data(test) : data
+  if (test.status !== newData.status) {
+    publishRunStatsUpdated(ctx, test.runId)
+  }
   Object.assign(test, newData)
   ctx.pubsub.publish(TestUpdated, {
     test,
   } as TestUpdatedPayload)
   return test
 }
+
+export function clearTests (ctx: Context, runId: string = null) {
+  tests = runId ? tests.filter(t => t.runId !== runId) : []
+}

packages/peeky-server/src/schema/index.ts

@@ -6,3 +6,4 @@ export * from './Run.js'
 export * from './RunTestFile.js'
 export * from './Settings.js'
 export * from './Snapshot.js'
+export * from './Stats.js'