feat: implement auto preview on error

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 0.2.0
+
+## Features
+
+- Auto preview on fail (TODO: Polish this changelog)
+
 # 0.1.7
 
 ## Fixes

demo/__tests__/App.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 
 import userEvent from '@testing-library/user-event';
 import App from '../App';
-import preview from '../../dist/index';
+import { debug } from '../../dist/index';
 
 describe('App', () => {
   it('should work as expected', () => {
@@ -17,7 +17,13 @@ describe('App', () => {
 
     // Open http://localhost:3336 to see preview
     // Require to run `jest-preview` server before
-    preview.debug();
-    expect(screen.getByTestId('count')).toContainHTML('6');
+    // Execute `preview.debug()` or `debug()` to see the UI in a browser
+    debug();
+
+    // Jest Preview automatically preview failed tests without explicitly calling `debug()`
+    // Try to uncomment the following line to see the count equals to 6
+    userEvent.click(screen.getByTestId('increase'));
+
+    expect(screen.getByTestId('count')).toContainHTML('7');
   });
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jest-preview",
-  "version": "0.1.7-alpha.0",
+  "version": "0.2.0-alpha.1",
   "description": "Preview your HTML code while using Jest",
   "keywords": [
     "testing",

rollup.config.js

@@ -10,7 +10,7 @@ function makeBundle({ filePath, dir = 'dist' }) {
       format: 'cjs',
     },
     plugins: [typescript(), terser()],
-    external: ['path', 'camelcase'],
+    external: ['path', 'camelcase', 'fs', 'child_process'],
   };
 }
 

src/configure.ts

@@ -4,22 +4,30 @@ import { exec } from 'child_process';
 
 import { CACHE_FOLDER } from './constants';
 import { createCacheFolderIfNeeded } from './utils';
+import { debug } from './preview';
 
 interface JestPreviewConfigOptions {
-  externalCss: string[];
+  externalCss?: string[];
+  autoPreview?: boolean;
   publicFolder?: string;
 }
 
-export async function jestPreviewConfigure(
-  options: JestPreviewConfigOptions = { externalCss: [] },
-) {
+export async function jestPreviewConfigure({
+  externalCss = [],
+  autoPreview = true,
+  publicFolder,
+}: JestPreviewConfigOptions) {
+  if (autoPreview) {
+    autoRunPreview();
+  }
+
   if (!fs.existsSync(CACHE_FOLDER)) {
     fs.mkdirSync(CACHE_FOLDER, {
       recursive: true,
     });
   }
 
-  options.externalCss?.forEach((cssFile) => {
+  externalCss?.forEach((cssFile) => {
     // Avoid name collision
     // Example: src/common/styles.css => cache-src___common___styles.css
     const delimiter = '___';
@@ -65,15 +73,60 @@ export async function jestPreviewConfigure(
     // }
   });
 
-  if (options.publicFolder) {
+  if (publicFolder) {
     createCacheFolderIfNeeded();
     fs.writeFileSync(
       path.join(CACHE_FOLDER, 'cache-public.config'),
-      options.publicFolder,
+      publicFolder,
       {
         encoding: 'utf-8',
         flag: 'w',
       },
     );
   }
 }
+
+function autoRunPreview() {
+  const originalIt = it;
+  const itWithPreview: jest.It = (name, callback, timeout) => {
+    let callbackWithPreview = undefined as jest.ProvidesCallback | undefined;
+    if (!callback) {
+      callbackWithPreview = undefined;
+    } else if (callback.constructor.name === 'AsyncFunction') {
+      console.log(callback.constructor.name);
+      callbackWithPreview = async function () {
+        try {
+          return await (callback as () => Promise<unknown>)();
+        } catch (error) {
+          debug();
+          throw error;
+        }
+      };
+    } else if (callback.constructor.name === 'Function') {
+      callbackWithPreview = function (
+        ...args: Parameters<jest.ProvidesCallback>
+      ) {
+        try {
+          // @ts-expect-error Just foward the args
+          return callback(...args) as void;
+        } catch (error) {
+          debug();
+          throw error;
+        }
+      };
+    }
+
+    return originalIt(name, callbackWithPreview, timeout);
+  };
+  itWithPreview.each = originalIt.each;
+  itWithPreview.only = originalIt.only;
+  itWithPreview.skip = originalIt.skip;
+  itWithPreview.todo = originalIt.todo;
+  itWithPreview.concurrent = originalIt.concurrent;
+
+  // Overwrite global it/ test
+  // Is there any use cases that `it` and `test` is undefined?
+  it = itWithPreview;
+  test = itWithPreview;
+  // TODO: Patch fit
+}

website/blog/2022-05-03-automatic-mode/index.md

@@ -0,0 +1,28 @@
+---
+slug: automatic-mode
+title: Announcing Automatic Mode
+authors: [nvh95, thanhsonng]
+tags: [jest-preview, developer-experience]
+# TODO
+# image: /img/sass-support.png
+---
+
+<!-- Draft -->
+
+We are so happy to annouce that we are launching Jest Preview Automatic Mode. In this mode, you don't have to trigger the `preview.debug()` function by yourself. Jest Preview automatically preview the UI of your app whenever Jest tests fail
+
+Insert image
+
+We believe this is the game changer feature of Jest Preview, which boost the FE productivity dramatically on debugging test. You don't have to move the `preview.debug()` around by yourself anymore. All you need is just a few lines of code
+
+```js
+jestPreviewConfigure({
+  autoPreview: true, // recheck name
+});
+```
+
+Automatic Mode is in experiement and is an opt-in option. We recommend you to start use it now. Automatic Mode will be default mode in Jest Preview 0.3.0
+
+If you have any trouble with Automatic Mode, opt out by...
+
+Did you use Jest Preview Automatic Mode yet, let's us know by tweeting (insert I use Jest Preview Automatic Mode and it's great! #jest-preview #automatic-mode)

website/docs/api/jestPreviewConfigure.md

@@ -21,3 +21,44 @@ jestPreviewConfigure({
   publicFolder: 'your-public-folder-name',
 });
 ```
+
+## externalCss: string[]
+
+Default: `[]`
+
+CSS files outside your Jest rendered app (e.g: CSS from `src/index.js`, `main.jsx`) should be configured via `externalCss` option. They should be path from root of your project. For example:
+
+```js
+jestPreviewConfigure({
+  // Configure external CSS
+  externalCss: [
+    'demo/global.css',
+    'demo/global.scss', // Sass
+    'node_modules/@your-design-system/css/dist/index.min.css', // css from node_modules
+    'node_modules/bootstrap/dist/css/bootstrap.min.css',
+  ],
+```
+
+## publicFolder: string (default: "public")
+
+Default: `public`.
+
+Name of your public folder from the project root.
+
+You don't have to configure this by yourself if your public folder is `public`. Below you can find a list of public directories which have different names than `public`:
+
+<!-- Thanks msw for the idea https://github.com/mswjs/mswjs.io/blob/9f62d45a3740789cc4308ae1475027598541a007/docs/snippets/public-dir.mdx -->
+
+| Project name                         | Public directory |
+| ------------------------------------ | ---------------- |
+| [GatsbyJS](https://www.gatsbyjs.org) | `static`         |
+| [Angular](https://angular.io/)       | `src`            |
+| [Preact](https://preactjs.com)       | `src/static`     |
+
+## autoPreview: boolean
+
+Default: `true`
+
+Automatically preview the UI in the external browser when the test fails. You don't need to invoke `preview.debug()` by yourself anymore.
+
+Set to `false` if you experience any error or just want to opt-out.