feat(tests): Add Percy Visual Snapshots

.github/workflows/visual-snapshots.yml

@@ -0,0 +1,23 @@
+name: Visual Snapshots
+on:
+  push:
+  pull_request:
+    paths:
+      - .github/workflows/visual-snapshots.yml
+      - 'test/e2e/e2e.spec.js'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install
+        run: yarn install
+      - name: Build
+        run: yarn build
+      - name: Run Percy to check visual changes
+        uses: percy/exec-action@v0.3.1
+        with:
+          command: "yarn test:e2e"
+        env:
+          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}

package.json

@@ -49,6 +49,7 @@
     "@material-ui/icons": "4.11.2",
     "@material-ui/styles": "^4.11.2",
     "@octokit/rest": "16.43.2",
+    "@percy/puppeteer": "^1.1.0",
     "@testing-library/dom": "^7.29.0",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "10.4.9",

test/e2e/e2e.spec.js

@@ -1,3 +1,5 @@
+const { percySnapshot } = require('@percy/puppeteer');
+
 const protectedPackageMetadata = require('./partials/pkg-protected');
 const scopedPackageMetadata = require('./partials/pkg-scoped');
 
@@ -58,6 +60,7 @@ describe('/ (Verdaccio Page)', () => {
     await page.waitFor(1000);
 
     expect(text).toContain('verdaccio-server-e2e');
+    await percySnapshot(page, 'main page - should display a title');
   });
   //