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

<script setup lang="ts">
import { explorerTree } from '~/composables/explorer'
import { filter } from '~/composables/explorer/state'
import DashboardEntry from './DashboardEntry.vue'

function toggleFilter(type: 'success' | 'failed' | 'skipped' | 'total') {
  // Reset all filters first
  filter.success = false
  filter.failed = false
  filter.skipped = false

  if (type === 'total') {
    return
  }
  // Then set the selected one
  filter[type] = true
}
</script>

<template>
  <div flex="~ wrap" justify-evenly gap-2 p="x-4" relative>
    <DashboardEntry
      text-green5
      data-testid="pass-entry"
      cursor-pointer
      hover="op80"
      @click="toggleFilter('success')"
    >
      <template #header>
        Pass
      </template>
      <template #body>
        {{ explorerTree.summary.testsSuccess }}
      </template>
    </DashboardEntry>
    <DashboardEntry
      :class="{ 'text-red5': explorerTree.summary.testsFailed, 'op50': !explorerTree.summary.testsFailed }"
      data-testid="fail-entry"
      cursor-pointer
      hover="op80"
      @click="toggleFilter('failed')"
    >
      <template #header>
        Fail
      </template>
      <template #body>
        {{ explorerTree.summary.testsFailed }}
      </template>
    </DashboardEntry>
    <DashboardEntry
      v-if="explorerTree.summary.testsSkipped"
      op50
      data-testid="skipped-entry"
      cursor-pointer
      hover="op80"
      @click="toggleFilter('skipped')"
    >
      <template #header>
        Skip
      </template>
      <template #body>
        {{ explorerTree.summary.testsSkipped }}
      </template>
    </DashboardEntry>
    <DashboardEntry
      v-if="explorerTree.summary.testsTodo"
      op50
      data-testid="todo-entry"
    >
      <template #header>
        Todo
      </template>
      <template #body>
        {{ explorerTree.summary.testsTodo }}
      </template>
    </DashboardEntry>
    <DashboardEntry
      :tail="true"
      data-testid="total-entry"
      cursor-pointer
      hover="op80"
      @click="toggleFilter('total')"
    >
      <template #header>
        Total
      </template>
      <template #body>
        {{ explorerTree.summary.totalTests }}
      </template>
    </DashboardEntry>
  </div>
</template>