feat(tests): Add Percy Visual Snapshots

Author: priscilawebdev

.github/workflows/visual-snapshots.yml

@@ -0,0 +1,18 @@
+name: Visual Snapshots
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Install
+        run: yarn install
+      - name: Build
+        run: yarn build
+      - name: Run Percy to check visual changes
+        uses: percy/[email protected]
+        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');
   });
   //