feat: dom preview, closes #53

examples/vue3/histoire-preview.ts

@@ -0,0 +1 @@
+import './src/style.css'

examples/vue3/package.json

@@ -3,12 +3,14 @@
   "private": true,
   "scripts": {
     "test": "peeky run",
-    "test:dev": "peeky open"
+    "test:dev": "peeky open",
+    "server": "nodemon ../../packages/peeky-server/dist/standalone.js --watch ../../packages --delay 200ms -e js --ignore tests/ --nexus-artifacts"
   },
   "devDependencies": {
     "@peeky/test": "workspace:*",
     "@vitejs/plugin-vue": "^1",
     "@vue/test-utils": "^2.0.0-rc.17",
+    "nodemon": "^2.0.7",
     "vite": "^2.7.10",
     "vue": "^3"
   }

examples/vue3/src/Meow.spec.ts

@@ -0,0 +1,9 @@
+// import { describe, test, expect } from '@peeky/test'
+import { mount } from '@vue/test-utils'
+import Meow from './Meow.vue'
+
+test('meow', async () => {
+  const wrapper = mount(Meow)
+
+  expect(wrapper.html()).toMatchSnapshot()
+})

examples/vue3/src/Meow.vue

@@ -0,0 +1,14 @@
+<template>
+  <button class="meow">
+    Meow
+  </button>
+</template>
+
+<style scoped>
+.meow {
+  background: cyan;
+  border: none;
+  border-radius: 6px;
+  padding: 4px 8px;
+}
+</style>

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

@@ -0,0 +1,7 @@
+// Peeky snapshots v1.0
+
+exports[`Meow meow 1`] = `
+<button class="meow">
+  Meow
+</button>
+`;

examples/vue3/src/style.css

@@ -0,0 +1,4 @@
+html,
+body {
+  background: #ebf1f1;
+}

examples/vue3/vite.config.ts

@@ -7,5 +7,8 @@ export default defineConfig({
   ],
   test: {
     runtimeEnv: 'dom',
+    previewSetupFiles: [
+      'histoire-preview.ts',
+    ],
   },
 })

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

@@ -5,12 +5,17 @@ import portfinder from 'portfinder'
 
 export async function server (options) {
   try {
-    const {
-      http,
-    } = await createServer()
     const port = options.port ?? process.env.PORT ?? await portfinder.getPortPromise({
       startPort: 5000,
     })
+    const vitePort = await portfinder.getPortPromise({
+      startPort: port,
+    })
+    const {
+      http,
+    } = await createServer({
+      vitePort,
+    })
     http.listen(port, () => {
       const url = `http://localhost:${port}`
       consola.success(`🚀 Server ready at ${url}`)

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

@@ -34,6 +34,11 @@ export default defineComponent({
       type: String,
       default: null,
     },
+
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   setup (props) {
@@ -72,11 +77,11 @@ export default defineComponent({
     })
 
     const leftStyle = computed(() => ({
-      [props.orientation === 'landscape' ? 'width' : 'height']: `${boundSplit.value}%`,
+      [props.orientation === 'landscape' ? 'width' : 'height']: `${props.disabled ? 50 : boundSplit.value}%`,
     }))
 
     const rightStyle = computed(() => ({
-      [props.orientation === 'landscape' ? 'width' : 'height']: `${100 - boundSplit.value}%`,
+      [props.orientation === 'landscape' ? 'width' : 'height']: `${props.disabled ? 50 : 100 - boundSplit.value}%`,
     }))
 
     const dragging = ref(false)
@@ -126,7 +131,7 @@ export default defineComponent({
 <template>
   <div
     ref="el"
-    class="flex h-full"
+    class="base-split-pane flex h-full"
     :class="{
       'flex-col meow': orientation === 'portrait',
       'cursor-ew-resize': dragging && orientation === 'landscape',
@@ -141,13 +146,14 @@ export default defineComponent({
       class="relative top-0 left-0"
       :class="{
         'pointer-events-none': dragging,
-        'border-r border-gray-200 dark:border-gray-800': orientation === 'landscape'
+        'border-r border-gray-100 dark:border-gray-800': orientation === 'landscape'
       }"
       :style="leftStyle"
     >
       <slot name="first" />
 
       <div
+        v-if="!disabled"
         class="dragger absolute z-100 hover:bg-primary-500 hover:bg-opacity-25 transition-colors duration-150 delay-150"
         :class="{
           'top-0 bottom-0 cursor-ew-resize': orientation === 'landscape',
@@ -161,7 +167,7 @@ export default defineComponent({
       class="relative bottom-0 right-0"
       :class="{
         'pointer-events-none': dragging,
-        'border-t border-gray-200 dark:border-gray-800': orientation === 'portrait'
+        'border-t border-gray-100 dark:border-gray-800': orientation === 'portrait'
       }"
       :style="rightStyle"
     >
@@ -170,42 +176,42 @@ export default defineComponent({
   </div>
 </template>
 
-<style scoped>
+<style lang="postcss" scoped>
 .dragger {
-  .landscape & {
+  .landscape > div > & {
     width: 10px;
   }
 
-  .portrait & {
+  .portrait > div > & {
     height: 10px;
   }
 
   &.dragger-offset-before {
-    .landscape & {
+    .landscape > div > & {
       right: 0;
     }
 
-    .portrait & {
+    .portrait > div > & {
       bottom: 0;
     }
   }
 
   &.dragger-offset-center {
-    .landscape & {
+    .landscape > div > & {
       right: -5px;
     }
 
-    .portrait & {
+    .portrait > div > & {
       bottom: -5px;
     }
   }
 
   &.dragger-offset-after {
-    .landscape & {
+    .landscape > div > & {
       right: -10px;
     }
 
-    .portrait & {
+    .portrait > div > & {
       bottom: -10px;
     }
   }

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

@@ -1,10 +1,14 @@
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { useMutation } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
+import { getIframeHtml } from '../../util/preview'
+
 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'
+import BaseSplitPane from '../BaseSplitPane.vue'
 
 const props = defineProps({
   snapshot: {
@@ -123,6 +127,10 @@ mutation updateSnapshot ($id: ID!) {
     }
   },
 })
+
+const isHtml = computed(() => props.snapshot.content.trim().startsWith('<'))
+const isEnvDom = computed(() => !!props.test.envResult?.html)
+const showPreview = computed(() => isHtml.value && isEnvDom.value)
 </script>
 
 <template>
@@ -177,16 +185,46 @@ mutation updateSnapshot ($id: ID!) {
       </BaseButton>
     </div>
 
-    <DiffEditor
-      v-if="snapshot.failed"
-      :actual="snapshot.newContent"
-      :expected="snapshot.content"
-      class="flex-1"
-    />
-    <CodeEditor
-      v-else
-      :code="snapshot.content"
+    <BaseSplitPane
+      :disabled="!showPreview"
+      :default-split="60"
+      :min="20"
+      :max="80"
+      save-id="peeky-snapshot-view"
+      orientation="portrait"
       class="flex-1"
-    />
+    >
+      <template #first>
+        <DiffEditor
+          v-if="snapshot.failed"
+          :actual="snapshot.newContent"
+          :expected="snapshot.content"
+          class="h-full"
+        />
+        <CodeEditor
+          v-else
+          :code="snapshot.content"
+          class="h-full"
+        />
+      </template>
+
+      <template #last>
+        <div
+          v-if="showPreview"
+          class="h-full flex items-stretch divide-x divide-gray-100 dark:divide-gray-900"
+        >
+          <iframe
+            :srcdoc="getIframeHtml(snapshot.content, props.test.previewImports)"
+            class="w-full h-full"
+          />
+          <iframe
+            v-if="snapshot.failed"
+            :srcdoc="getIframeHtml(snapshot.newContent, props.test.previewImports)"
+            class="w-full h-full"
+          />
+          <div class="flex-none w-[30px]" />
+        </div>
+      </template>
+    </BaseSplitPane>
   </div>
 </template>

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

@@ -12,6 +12,7 @@ fragment runTestFileList on RunTestFile {
     relativePath
     deleted
   }
+  envName
 }
 `
 </script>

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

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+import { getIframeHtml } from '../../util/preview'
+
+import BaseSplitPane from '../BaseSplitPane.vue'
+import CodeEditor from '../editor/CodeEditor.vue'
+
+const props = defineProps({
+  test: {
+    type: Object,
+    required: true,
+  },
+
+  suite: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <BaseSplitPane
+    :default-split="50"
+    :min="20"
+    :max="80"
+    save-id="peeky-test-dom-preview"
+    class="h-full"
+  >
+    <template #first>
+      <CodeEditor
+        :code="props.test.envResult?.html || ''"
+        class="h-full"
+      />
+    </template>
+    <template #last>
+      <iframe
+        class="w-full h-full"
+        :srcdoc="getIframeHtml(props.test.envResult?.html ?? '', props.test.previewImports)"
+      />
+    </template>
+  </BaseSplitPane>
+</template>

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

@@ -2,7 +2,7 @@
 import { useMutation, useQuery, useResult } from '@vue/apollo-composable'
 import gql from 'graphql-tag'
 import { useRoute } from 'vue-router'
-import { EditIcon } from '@zhuowenli/vue-feather-icons'
+import { EditIcon, HexagonIcon } from '@zhuowenli/vue-feather-icons'
 import BaseButton from '../BaseButton.vue'
 import BaseTab from '../BaseTab.vue'
 import StatusIcon from '../StatusIcon.vue'
@@ -24,6 +24,8 @@ fragment testView on Test {
   hasLogs
   snapshotCount
   failedSnapshotCount
+  envResult
+  previewImports
 }
 ${errorFragment}
 `
@@ -45,6 +47,7 @@ const { result, subscribeToMore, onResult } = useQuery(() => gql`
             id
             relativePath
           }
+          envName
         }
         test: testBySlug (slug: $testSlug) {
           ...testView
@@ -106,12 +109,21 @@ mutation openInEditor ($id: ID!, $line: Int!, $col: Int!) {
     v-if="test"
     class="divide-y divide-gray-100 dark:divide-gray-800 h-full flex flex-col"
   >
-    <div class="flex bg-gray-50 dark:bg-gray-950 pr-4">
+    <div class="flex items-center gap-4 bg-gray-50 dark:bg-gray-950 pr-4">
       <TestFileItem
         :file="suite.runTestFile"
         class="!h-8 m-1 rounded shrink"
       />
 
+      <div
+        v-if="suite.runTestFile?.envName"
+        v-tooltip="'Runtime environment'"
+        class="flex gap-1 items-center"
+      >
+        <HexagonIcon class="opacity-50 w-4 h-4" />
+        {{ suite.runTestFile.envName }}
+      </div>
+
       <div class="flex-1 flex items-center space-x-2 justify-end">
         <BaseButton
           v-tooltip="'Open in your editor'"
@@ -194,6 +206,16 @@ mutation openInEditor ($id: ID!, $line: Int!, $col: Int!) {
           />
         </div>
       </BaseTab>
+      <BaseTab
+        v-if="test.envResult?.html"
+        :to="{
+          name: 'test-dom-preview',
+          query: { ...$route.query },
+          params: { ...$route.params },
+        }"
+      >
+        Preview
+      </BaseTab>
     </nav>
 
     <router-view