feat: add empty state page

nvh95 · Oct 22, 2022 · 1a94b4f · 1a94b4f
1 parent 8e4f41b
commit 1a94b4f
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 6 deletions.
diff --git a/packages/vitest-preview/package.json b/packages/vitest-preview/package.json
@@ -13,8 +13,9 @@
     "vitest-preview": "./dist/previewServer.js"
   },
   "scripts": {
-    "build": "rimraf dist && rollup -c",
-    "build:watch": "rimraf dist && rollup -c -w"
+    "copy": "mkdir dist && cp src/node/empty.html dist/empty.html",
+    "build": "rimraf dist && pnpm copy && rollup -c",
+    "build:watch": "rimraf dist && pnpm copy && rollup -c -w"
   },
   "keywords": [],
   "author": {

diff --git a/packages/vitest-preview/src/node/empty.html b/packages/vitest-preview/src/node/empty.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" class="dark h-full">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vitest Preview Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="h-full bg-slate-200">
+    <div class="p-10 m-auto">
+      No previews found.<br />
+      Please add following lines to your test: <br />
+      <br />
+      <div class="bg-slate-400 p-4 w-fit rounded">
+        <code>
+          import { debug } from 'vitest-preview';
+          <br />
+          <br />
+          // Inside your tests
+          <br />
+          describe('my test', () => {
+          <br />
+          &nbsp;&nbsp;render(&#60;MyComponent /&#62;);
+          <br />
+          &nbsp;&nbsp;debug(); // 👈 Add this line
+          <br />
+          }
+        </code>
+      </div>
+      <br />
+      Then rerun your tests.
+    </div>
+  </body>
+</html>
diff --git a/packages/vitest-preview/src/node/previewServer.ts b/packages/vitest-preview/src/node/previewServer.ts
@@ -3,6 +3,7 @@ import fs from 'fs';
 import path from 'path';
 import express from 'express';
 import { createServer as createViteServer } from 'vite';
+import { fileURLToPath } from 'url';
 
 import { openBrowser } from '@vitest-preview/dev-utils';
 
@@ -11,6 +12,8 @@ import { CACHE_FOLDER } from '../constants';
 // TODO: Find the available port
 const port = process.env.PORT || 5006;
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 async function createServer() {
   const app = express();
   const vite = await createViteServer({
@@ -34,10 +37,16 @@ async function createServer() {
     const url = req.originalUrl;
 
     try {
-      let template = fs.readFileSync(
-        path.resolve(CACHE_FOLDER, 'index.html'),
-        'utf-8',
-      );
+      const snapshotHtmlFile = path.join(CACHE_FOLDER, 'index.html');
+      if (!fs.existsSync(snapshotHtmlFile)) {
+        const emptyHtml = fs.readFileSync(
+          path.resolve(__dirname, 'empty.html'),
+          'utf-8',
+        );
+        res.status(200).set({ 'Content-Type': 'text/html' }).end(emptyHtml);
+        return;
+      }
+      let template = fs.readFileSync(path.resolve(snapshotHtmlFile), 'utf-8');
 
       template = await vite.transformIndexHtml(url, template);