feat: text snapshots, closes #9

examples/demo/src/__snapshots__/vue.spec.ts.snap

@@ -0,0 +1,17 @@
+// Peeky snapshots v1.0
+
+exports[`vue create vue app 1`] = `
+<div data-v-app>
+  <div>
+    hello
+  </div>
+</div>
+`;
+
+exports[`vue create vue app demo 1`] = `
+"Hello"
+`;
+
+exports[`vue create vue app demo 2`] = `
+"Meow"
+`;

examples/demo/src/vue.spec.ts

@@ -13,13 +13,16 @@ describe('vue', () => {
           msg: 'hello',
         }
       },
-      template: '<div>hello</div>',
+      template: '<div>{{ msg }}</div>',
     })
     console.log(app)
     expect(typeof app.version).toBe('string')
     const el = document.createElement('div')
     document.body.appendChild(el)
     app.mount(el)
-    expect(el.innerHTML).toBe('<div>hello</div>')
+    expect(document.body.innerHTML).toMatchSnapshot()
+    expect('Hello').toMatchSnapshot('demo')
+    expect('Meow').toMatchSnapshot('demo')
+    // expect(el.innerHTML).toBe('<div>hello</div>')
   })
 })

examples/vue3/src/Hello.spec.ts

@@ -13,8 +13,8 @@ describe('vue + peeky demo', () => {
     })
 
     expect(wrapper.text()).toContain('4 x 2 = 8')
-    // Available soon
-    // expect(wrapper.html()).toMatchSnapshot()
+
+    expect(wrapper.html()).toMatchSnapshot()
 
     await wrapper.get('button').trigger('click')
 

examples/vue3/src/__snapshots__/Hello.spec.ts.snap

@@ -0,0 +1,10 @@
+// Peeky snapshots v1.0
+
+exports[`vue + peeky demo mount component 1`] = `
+<pre>
+  4 x 2 = 9
+</pre>
+<button>
+  More
+</button>
+`;

packages/peeky-cli/src/bin.ts

@@ -15,6 +15,7 @@ program.command('run [quickFilter]')
   .option('-m, --match <globs...>', 'Globs to match test files. Example: `peeky run -m "**/*.spec.ts" "**/__tests__/*.ts"`')
   .option('-i, --ignore <globs...>', 'Globs ignore when looking for test files. Example: `peeky run -i "node_modules" "dist/**/*.ts"`')
   .option('-r, --reporters <reporter...>', 'Reporters to use. Available: console-fancy, console-json')
+  .option('-u, --updateSnapshots', 'Update failing snapshots')
   .action(async (quickFilter, options) => {
     const { run } = await import('./commands/run.js')
     return run(quickFilter, options)

packages/peeky-cli/src/commands/run.ts

@@ -21,6 +21,9 @@ export async function run (quickFilter: string, options) {
 
     const { stats: { errorSuiteCount } } = await runAllTests(toProgramConfig(finalConfig), {
       quickTestFilter: quickFilter,
+      ...pick<any>(options, [
+        'updateSnapshots',
+      ]),
     })
 
     if (errorSuiteCount) {

packages/peeky-client/src/apollo.ts

@@ -123,4 +123,5 @@ const cache = new InMemoryCache({
 export const apolloClient = new ApolloClient({
   link,
   cache,
+  connectToDevTools: true,
 })

packages/peeky-client/src/features/BaseTab.vue

@@ -15,7 +15,7 @@ export default defineComponent({
     <a
       v-bind="$attrs"
       :href="href"
-      class="px-4 h-10 inline-flex items-center hover:bg-primary-50 dark:hover:bg-primary-900 relative"
+      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,
       }"

packages/peeky-client/src/features/editor/CodeEditor.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import * as monaco from 'monaco-editor'
+import { onMounted, ref, watch } from 'vue'
+import { onResize } from '../../util/resize'
+import '../../util/monaco'
+import { useSettings } from '../settings'
+
+const props = defineProps({
+  code: {
+    type: String,
+    required: true,
+  },
+})
+
+const el = ref<HTMLDivElement>()
+let editor: monaco.editor.IEditor
+
+onMounted(() => {
+  if (!el.value) return
+  editor = monaco.editor.create(el.value, {
+    readOnly: true,
+    lineNumbers: 'off',
+    scrollBeyondLastLine: false,
+  })
+  updateEditorModel()
+  updateEditorTheme()
+})
+
+/* Model */
+
+watch(() => [props.code], () => {
+  updateEditorModel()
+})
+
+function updateEditorModel () {
+  if (editor) {
+    editor.setModel(monaco.editor.createModel(props.code, props.code.trim().startsWith('<') ? 'html' : 'javascript'))
+  }
+}
+
+/* Theme */
+
+const { settings } = useSettings()
+
+watch(() => settings.value?.darkMode, () => {
+  updateEditorTheme()
+})
+
+function updateEditorTheme () {
+  if (!editor) return
+  editor.updateOptions({
+    // @ts-ignore
+    theme: settings.value?.darkMode ? 'peeky-dark' : 'peeky-light',
+  })
+}
+
+/* Resize */
+
+onResize(el, () => {
+  if (editor) {
+    editor.layout()
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div
+      ref="el"
+      class="flex-1"
+    />
+  </div>
+</template>

packages/peeky-client/src/features/test/TestAssertionDiff.vue → packages/peeky-client/src/features/editor/DiffEditor.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import * as monaco from 'monaco-editor'
-import { onMounted, ref, watch } from 'vue-demi'
+import { onMounted, ref, watch } from 'vue'
 import { onResize } from '../../util/resize'
 import '../../util/monaco'
 import { useSettings } from '../settings'
@@ -40,8 +40,8 @@ watch(() => [props.expected, props.actual], () => {
 function updateEditorModel () {
   if (editor) {
     editor.setModel({
-      original: monaco.editor.createModel(props.expected, 'javascript'),
-      modified: monaco.editor.createModel(props.actual, 'javascript'),
+      original: monaco.editor.createModel(props.expected, props.expected.trim().startsWith('<') ? 'html' : 'javascript'),
+      modified: monaco.editor.createModel(props.actual, props.actual.trim().startsWith('<') ? 'html' : 'javascript'),
     })
   }
 }
@@ -73,7 +73,7 @@ onResize(el, () => {
 
 <template>
   <div class="flex flex-col">
-    <div class="flex-none flex justify-between px-1 mb-1">
+    <div class="flex-none flex justify-between px-4 pt-2 mb-1 text-sm">
       <div class="text-green-600 dark:text-green-500">
         Expected
       </div>

packages/peeky-client/src/features/snapshot/SnapshotItem.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import StatusIcon from '../StatusIcon.vue'
+
+const props = defineProps({
+  snapshot: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <router-link
+    :to="{
+      query: {
+        ...$route.query,
+        snapshotId: snapshot.id,
+      },
+    }"
+    class="px-3 flex items-center hover:bg-gray-50 dark:hover:bg-gray-900 space-x-2 h-8"
+    :class="{
+      'active-colors': $route.query.snapshotId === snapshot.id,
+    }"
+  >
+    <StatusIcon
+      :status="snapshot.newContent && !snapshot.updated ? 'error' : 'success'"
+      class="w-5 h-5"
+    />
+    <span class="flex-1 truncate py-1">
+      {{ snapshot.title }}
+    </span>
+  </router-link>
+</template>

packages/peeky-client/src/features/snapshot/SnapshotView.vue

@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import { useMutation } from '@vue/apollo-composable'
+import gql from 'graphql-tag'
+import { ChevronLeftIcon, ChevronRightIcon, SaveIcon } from '@zhuowenli/vue-feather-icons'
+import BaseButton from '../BaseButton.vue'
+import CodeEditor from '../editor/CodeEditor.vue'
+import DiffEditor from '../editor/DiffEditor.vue'
+
+const props = defineProps({
+  snapshot: {
+    type: Object,
+    required: true,
+  },
+
+  test: {
+    type: Object,
+    required: true,
+  },
+
+  suite: {
+    type: Object,
+    required: true,
+  },
+})
+
+const { mutate: openInEditor } = useMutation(gql`
+mutation openInEditor ($id: ID!, $line: Int!, $col: Int!) {
+  openTestFileInEditor (id: $id, line: $line, col: $col)
+}
+`)
+
+const { mutate: updateSnapshot } = useMutation(gql`
+mutation updateSnapshot ($id: ID!) {
+  updateSnapshot (input: { id: $id }) {
+    id
+    updated
+  }
+}
+`, {
+  update: (cache, { data: { updateSnapshot: snapshot } }) => {
+    const select = {
+      fragment: gql`fragment updateSnapshotCacheTest on Test {
+        id
+        failedSnapshotCount
+      }`,
+      id: `Test:${props.test.id}`,
+    }
+    const data: any = cache.readFragment(select)
+    cache.writeFragment({
+      ...select,
+      data: {
+        ...data,
+        failedSnapshotCount: data.failedSnapshotCount - 1,
+      },
+    })
+  },
+})
+</script>
+
+<template>
+  <div class="flex flex-col divide-y divide-gray-100 dark:divide-gray-800 overflow-hidden">
+    <div class="flex items-center space-x-2 px-4 h-10">
+      <button
+        v-if="snapshot.newContent && !snapshot.updated"
+        class="text-red-500 hover:text-red-400 hover:bg-red-500/10 rounded cursor-pointer px-2 py-1"
+        @click="openInEditor({
+          id: suite.runTestFile.testFile.id,
+          line: snapshot.line,
+          col: snapshot.col,
+        })"
+      >
+        Mismatch at <span class="font-mono text-sm">{{ suite?.runTestFile.testFile.relativePath }}:{{ snapshot.line }}:{{ snapshot.col }}</span>
+      </button>
+
+      <div class="flex-1" />
+
+      <BaseButton
+        v-if="snapshot.newContent && !snapshot.updated && $route.params.runId === 'last-run'"
+        class="px-2 h-8"
+        @click="updateSnapshot({ id: snapshot.id })"
+      >
+        <SaveIcon class="w-4 h-4 mr-1" />
+        <span>Update snapshot</span>
+      </BaseButton>
+
+      <BaseButton
+        color="gray"
+        flat
+        class="p-2"
+        @click="$emit('previous')"
+      >
+        <ChevronLeftIcon class="w-4 h-4" />
+      </BaseButton>
+
+      <BaseButton
+        color="gray"
+        flat
+        class="p-2"
+        @click="$emit('next')"
+      >
+        <ChevronRightIcon class="w-4 h-4" />
+      </BaseButton>
+    </div>
+
+    <DiffEditor
+      v-if="snapshot.newContent && !snapshot.updated"
+      :actual="snapshot.newContent"
+      :expected="snapshot.content"
+      class="flex-1"
+    />
+    <CodeEditor
+      v-else
+      :code="snapshot.content"
+      class="flex-1"
+    />
+  </div>
+</template>

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

@@ -13,6 +13,7 @@ const props = defineProps({
   <router-link
     :to="{
       query: {
+        ...$route.query,
         fileSlug: file.slug,
       },
     }"

packages/peeky-client/src/features/test/TestResult.vue

@@ -19,7 +19,7 @@ import { computed, defineProps, ref } from 'vue'
 import { ChevronRightIcon } from '@zhuowenli/vue-feather-icons'
 import BaseButton from '../BaseButton.vue'
 import StatusIcon from '../StatusIcon.vue'
-import TestAssertionDiff from './TestAssertionDiff.vue'
+import DiffEditor from '../editor/DiffEditor.vue'
 
 const props = defineProps({
   test: {
@@ -132,7 +132,7 @@ const diffShown = computed(() => props.test?.error?.actual && props.test?.error?
         </div>
       </div>
 
-      <TestAssertionDiff
+      <DiffEditor
         v-if="diffShown"
         :actual="test.error.actual"
         :expected="test.error.expected"