Skip to content
This repository has been archived by the owner on Oct 6, 2023. It is now read-only.

Commit

Permalink
feat(ui): snapshots summary, closes #61
Browse files Browse the repository at this point in the history
  • Loading branch information
Akryum committed Jan 2, 2022
1 parent b3973c5 commit 524221e
Show file tree
Hide file tree
Showing 21 changed files with 572 additions and 101 deletions.
4 changes: 4 additions & 0 deletions examples/demo/src/__snapshots__/vue.spec.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,8 @@ exports[`vue create vue app demo 1`] = `

exports[`vue create vue app demo 2`] = `
"Meow"
`;

exports[`vue create vue app demo 3`] = `
"Meow3"
`;
1 change: 1 addition & 0 deletions examples/demo/src/vue.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ describe('vue', () => {
expect(document.body.innerHTML).toMatchSnapshot()
expect('Hello').toMatchSnapshot('demo')
expect('Meow').toMatchSnapshot('demo')
expect('Meow3').toMatchSnapshot('demo')
// expect(el.innerHTML).toBe('<div>hello</div>')
})
})
11 changes: 9 additions & 2 deletions packages/peeky-client/src/features/BaseTab.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,19 @@ import { defineComponent } from 'vue'
export default defineComponent({
inheritAttrs: false,
props: {
exact: {
type: Boolean,
default: false,
},
},
})
</script>

<template>
<router-link
v-slot="{ isExactActive, href, navigate }"
v-slot="{ isActive, isExactActive, href, navigate }"
v-bind="$attrs"
custom
>
Expand All @@ -17,7 +24,7 @@ export default defineComponent({
:href="href"
class="px-4 h-full inline-flex items-center hover:bg-primary-50 dark:hover:bg-primary-900 relative"
:class="{
'text-primary-500 dark:text-primary-400': isExactActive,
'text-primary-500 dark:text-primary-400': (exact && isExactActive) || (!exact && isActive),
}"
@click="navigate"
>
Expand Down
3 changes: 1 addition & 2 deletions packages/peeky-client/src/features/Dashboard.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<script lang="ts" setup>
import BaseSplitPane from './BaseSplitPane.vue'
import RunManager from './run/RunManager.vue'
import TestFiles from './test-file/TestFiles.vue'
</script>

<template>
Expand All @@ -15,7 +14,7 @@ import TestFiles from './test-file/TestFiles.vue'
<template #first>
<div class="h-full flex flex-col divide-y divide-gray-100 dark:divide-gray-800 relative">
<RunManager class="flex-none" />
<TestFiles />
<router-view name="sidepane" />
</div>
</template>

Expand Down
24 changes: 17 additions & 7 deletions packages/peeky-client/src/features/run/RunManager.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
<script lang="ts" setup>
import BaseButton from '../BaseButton.vue'
import BaseSwitch from '../BaseSwitch.vue'
import RunSelector from './RunSelector.vue'
import RunNewButton from './RunNewButton.vue'
import RunItem from './RunItem.vue'
import {
ActivityIcon,
MoreVerticalIcon,
Expand All @@ -14,8 +9,14 @@ import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import { useSettings } from '../settings'
import { NexusGenFieldTypes } from '@peeky/server/types'
import { useSettings } from '../settings'
import BaseButton from '../BaseButton.vue'
import BaseSwitch from '../BaseSwitch.vue'
import RunSelector from './RunSelector.vue'
import RunNewButton from './RunNewButton.vue'
import RunItem from './RunItem.vue'
import RunTabs from './RunTabs.vue'
// Current run
Expand All @@ -27,10 +28,12 @@ fragment runDetails on Run {
status
progress
duration
snapshotCount
failedSnapshotCount
}
`
type Run = Pick<NexusGenFieldTypes['Run'], 'id' | 'date' | 'emoji' | 'status' | 'progress' | 'duration'>
type Run = Pick<NexusGenFieldTypes['Run'], 'id' | 'date' | 'emoji' | 'status' | 'progress' | 'duration' | 'snapshotCount' | 'failedSnapshotCount'>
const route = useRoute()
const { result, subscribeToMore } = useQuery<{
Expand Down Expand Up @@ -65,6 +68,8 @@ subscribeToMore({
status
progress
duration
snapshotCount
failedSnapshotCount
}
}
`,
Expand Down Expand Up @@ -195,4 +200,9 @@ const darkMode = computed<boolean>({
</VDropdown>
</div>
</div>

<RunTabs
v-if="currentRun"
:run="currentRun"
/>
</template>
4 changes: 2 additions & 2 deletions packages/peeky-client/src/features/run/RunSelector.vue
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,8 @@ watch(() => route.params.runId, () => {
>
<router-link
:to="{
name: 'run',
params: {
...$route.params,
runId: 'last-run',
},
}"
Expand All @@ -136,8 +136,8 @@ watch(() => route.params.runId, () => {
v-for="run of runs"
:key="run.id"
:to="{
name: 'run',
params: {
...$route.params,
runId: run.id,
},
}"
Expand Down
35 changes: 35 additions & 0 deletions packages/peeky-client/src/features/run/RunTabs.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<script lang="ts" setup>
import { defineProps, PropType } from 'vue'
import type { NexusGenFieldTypes } from '@peeky/server/types'
import BaseTab from '../BaseTab.vue'
const props = defineProps({
run: {
type: Object as PropType<Pick<NexusGenFieldTypes['Run'], 'snapshotCount' | 'failedSnapshotCount'>>,
required: true,
},
})
</script>

<template>
<nav class="h-10">
<BaseTab :to="{ name: 'run-test' }">
Tests
</BaseTab>
<BaseTab :to="{ name: 'run-snapshot' }">
<div class="flex items-center space-x-2">
<span>Snapshots</span>
<div
v-if="run.failedSnapshotCount"
class="text-xs px-1.5 rounded-full leading-tight text-red-200 bg-red-600 mt-0.5"
>
{{ run.failedSnapshotCount }}
</div>
<div
v-else-if="run.snapshotCount"
class="w-2 h-2 bg-primary-500 dark:bg-primary-400 rounded-full"
/>
</div>
</BaseTab>
</nav>
</template>
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const props = defineProps({
}"
>
<StatusIcon
:status="snapshot.newContent && !snapshot.updated ? 'error' : 'success'"
:status="snapshot.failed ? 'error' : 'success'"
class="w-5 h-5"
/>
<span class="flex-1 truncate py-1">
Expand Down
114 changes: 114 additions & 0 deletions packages/peeky-client/src/features/snapshot/SnapshotSummaryList.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<script lang="ts" setup>import { NexusGenFieldTypes } from '@peeky/server/types'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import SnapshotItem from './SnapshotItem.vue'
const runFragment = gql`fragment runSnapshotSummary on Run {
id
failedSnapshots {
...runSnapshotSummarySnapshot
}
passedSnapshots {
...runSnapshotSummarySnapshot
}
newSnapshots {
...runSnapshotSummarySnapshot
}
}
fragment runSnapshotSummarySnapshot on Snapshot {
id
title
failed
}`
type Run = Pick<NexusGenFieldTypes['Run'], 'id' | 'failedSnapshots' | 'passedSnapshots' | 'newSnapshots'>
const route = useRoute()
const { result, subscribeToMore } = useQuery<{
run: Run
}>(() => route.params.runId !== 'last-run' ? gql`
query testFileAllView ($runId: ID!) {
run (id: $runId) {
...runSnapshotSummary
}
}
${runFragment}
` : gql`
query testFileAllViewLastRun {
run: lastRun {
...runSnapshotSummary
}
}
${runFragment}
`, () => ({
...route.params.runId !== 'last-run' ? {
runId: route.params.runId,
} : {},
}), {
fetchPolicy: 'cache-and-network',
})
// Updated
subscribeToMore({
document: gql`
subscription runUpdated {
runUpdated {
...runSnapshotSummary
}
}
${runFragment}`,
})
const failedSnapshots = computed(() => result.value?.run.failedSnapshots ?? [])
const newSnapshots = computed(() => result.value?.run.newSnapshots ?? [])
const passedSnapshots = computed(() => result.value?.run.passedSnapshots ?? [])
</script>

<template>
<div
v-if="failedSnapshots.length"
class="py-2"
>
<div class="text-red-500 flex items-center justify-center space-x-1 pb-1">
<span>Failed</span>
<span class="text-xs px-1.5 rounded-full leading-tight border border-current mt-0.5">{{ failedSnapshots.length }}</span>
</div>
<SnapshotItem
v-for="snapshot of failedSnapshots"
:key="snapshot.id"
:snapshot="snapshot"
/>
</div>
<div
v-if="newSnapshots.length"
class="py-2"
>
<div class="text-green-500 flex items-center justify-center space-x-1 pb-1">
<span>New</span>
<span class="text-xs px-1.5 rounded-full leading-tight border border-current mt-0.5">{{ newSnapshots.length }}</span>
</div>
<SnapshotItem
v-for="snapshot of newSnapshots"
:key="snapshot.id"
:snapshot="snapshot"
/>
</div>
<div
v-if="passedSnapshots.length"
class="py-2"
>
<div class="text-green-500 flex items-center justify-center space-x-1 pb-1">
<span>Passed</span>
<span class="text-xs px-1.5 rounded-full leading-tight border border-current mt-0.5">{{ passedSnapshots.length }}</span>
</div>
<SnapshotItem
v-for="snapshot of passedSnapshots"
:key="snapshot.id"
:snapshot="snapshot"
/>
</div>
</template>
Loading

0 comments on commit 524221e

Please sign in to comment.