docs: Add visual regression testing section to the examples (#621)

docs/.vitepress/config.js

@@ -381,6 +381,20 @@ module.exports = {
             },
           ],
         },
+        {
+          text: 'Visual regression testing',
+          collapsible: true,
+          items: [
+            {
+              text: 'Lost Pixel',
+              link: '/examples/visual-regression-testing/lost-pixel',
+            },
+            {
+              text: 'Percy',
+              link: '/examples/visual-regression-testing/percy',
+            },
+          ],
+        },
       ],
     },
 

docs/examples/visual-regression-testing/lost-pixel.md

@@ -0,0 +1,63 @@
+# Lost Pixel visual regression testing
+
+Lost Pixel is a [modern open-source visual regression testing tool](https://github.com/lost-pixel/lost-pixel) that allows you to run self-hosted visual regression tests. [Lost Pixel Platofrm](https://lost-pixel.com) is for teams and is a cloud version of visual testing.
+
+## Setting up self-hosted visual testing
+
+Lost Pixel has first-class Histoire support meaning that you don't need to do much to add visual tests to your app if you have your Histoire book ready!
+
+Start with installing lost-pixel by `npm install lost-pixel` and creating a `lostpixel.config.js|ts` file with following contents. 
+
+```javascript
+import { CustomProjectConfig } from 'lost-pixel';
+
+export const config: CustomProjectConfig = {
+  histoireShots: {
+    histoireUrl: './.histoire/dist',
+  },
+  generateOnly: true,
+  failOnDifference: true
+};
+```
+**Before running visual tests you need to have your Histoire book built first**.
+
+This setup allows you to run visual tests locally. To test your stories run `npx lost-pixel`
+
+To update the baselines run `npx lost-pixel update`.
+
+## GitHub actions
+
+To run your tests on CI you can use lost-pixel action utility. If you are running on any other CI provider - lost-pixel is a [docker image](https://hub.docker.com/r/lostpixel/lost-pixel) that is runnable on CI of your choice(only **within GitHub** currently though)
+
+```yaml
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build histoire
+        run: npm run story:build
+
+      - name: Lost Pixel
+        uses: lost-pixel/[email protected]
+```
+
+To update baselines locally run `npx lost-pixel docker update`, this will ensure that lost-pixel runs in docker and there are no OS differences in rendering between CI and local tests.
+
+## Lost Pixel Platform
+
+If you have self-hosted version of tests working it is not complicated to migrate to Lost Pixel Platform. Follow [this guide](https://docs.lost-pixel.com/user-docs/setup/lost-pixel-platform) to achieve that.

docs/examples/visual-regression-testing/percy.md

@@ -0,0 +1,30 @@
+# Histoire Screenshot with Percy for visual regression testing
+
+You need the [Percy CLI](https://docs.percy.io/docs/cli-overview) installed to be able to send snapshots to Percy.
+
+
+```bash
+pnpm add -D @histoire/plugin-percy
+```
+
+Add the plugin in histoire config:
+
+```js
+import { defineConfig } from 'histoire'
+import { HstPercy } from '@histoire/plugin-percy'
+
+export default defineConfig({
+  plugins: [
+    HstPercy({
+      // Options here
+    }),
+  ],
+})
+```
+
+Then use the Percy CLI
+
+```bash
+# Replace `story:build` with the script to build the stories if you changed it
+percy exec pnpm run story:build
+```

docs/guide/index.md

@@ -106,7 +106,7 @@ Put your own components and logic in the story controls pane! Or use the [builti
 
 ### :camera: Visual regression testing
 
-Take snapshots of your stories when your book is built on your CI, with Percy support.
+Take snapshots of your stories when your book is built on your CI, with [Percy](/examples/visual-regression-testing/percy) & [Lost Pixel](/examples/visual-regression-testing/lost-pixel) support.
 
 ### :art: Automatic design tokens