feat: cypress tests to visual diff changes

.eslintrc.js

@@ -21,5 +21,9 @@ module.exports = {
     'prefer-arrow-callback': 'off',
     'no-restricted-exports': 'warn',
     'react/jsx-no-useless-fragment': 'off',
+    'import/no-extraneous-dependencies': [
+      'error',
+      { devDependencies: ['**/*.test.js', '**/*.spec.js', 'cypress/**/*', 'cypress.config.ts'] },
+    ],
   },
 };

.github/workflows/screenshots-in-pr.yml

@@ -0,0 +1,67 @@
+name: "comment-on-pr"
+
+on: 
+  pull_request:
+    types: 
+      - opened
+      - edited
+      - synchronize
+    paths:
+      - 'src/**/*'
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Start the server
+        run: |
+          npm run build 
+          npm run start & npx wait-on http://localhost:3001
+        env:
+          NODE_ENV: test
+          NEXT_TELEMETRY_DISABLED: 1
+
+      - name: Run Cypress tests
+        run: npx cypress run --e2e --browser=chrome
+        env:
+          CI: true
+
+      - name: Archive screenshots
+        uses: actions/upload-artifact@v3
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+          retention-days: 7
+
+  post-cypress:
+    needs: cypress-run
+    runs-on: ubuntu-20.04
+    permissions:
+      issues: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Download screenshots
+        uses: actions/download-artifact@v3
+        with:
+          name: cypress-screenshots
+          path: ./screenshots
+
+      - name: Create comment with screenshots
+        run: |
+          for file in ./screenshots/**/*; do
+            echo "![Screenshot](https://github.com/${{ github.repository }}/raw/${{ github.sha }}/$file)" >> comment.md
+          done
+          gh pr comment ${{ github.event.pull_request.number }} --body "$(cat comment.md)"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

cypress.config.ts

@@ -0,0 +1,54 @@
+/* eslint-disable no-param-reassign */
+import { defineConfig } from 'cypress';
+
+const { addCompareScreenshotPlugin } = require('cypress-odiff');
+
+export default defineConfig({
+  trashAssetsBeforeRuns: false, // needed to avoid deleting expeted screenshot
+  e2e: {
+    blockHosts: [
+      // 'cdn.segment.com',
+      // 'api.segment.io',
+      'px.ads.linkedin.com',
+      'www.redditstatic.com',
+      'pixel-config.reddit.com',
+      'c.6sc.co',
+      'ipv6.6sc.co',
+      'epsilon.6sense.com',
+      '*.auth0.com',
+      //   '*google.com',
+      //   '*reddit*.com',
+      //   '*segment.io',
+      //   '*segment.com',
+      //   '*.6sc.co',
+      //   '*clearbit*.com',
+      //   '*redditstatic.com',
+    ],
+    baseUrl: 'http://localhost:3001',
+    setupNodeEvents(on, config) {
+      on('before:browser:launch', (browser, launchOptions) => {
+        const maxWidth = 7680;
+        const maxHeight = 4320;
+        if (browser.name === 'chrome' && browser.isHeadless) {
+          launchOptions.args.push(`--window-size=${maxWidth},${maxHeight}`);
+          // force screen to be non-retina
+          launchOptions.args.push('--force-device-scale-factor=1');
+        }
+
+        if (browser.name === 'electron' && browser.isHeadless) {
+          launchOptions.preferences.width = maxWidth;
+          launchOptions.preferences.height = maxHeight;
+        }
+
+        if (browser.family === 'chromium' && browser.name !== 'electron') {
+          launchOptions.args.push('--force-color-profile=srgb');
+          launchOptions.args.push('--disable-low-res-tiling');
+          launchOptions.args.push('--disable-smooth-scrolling');
+        }
+        return launchOptions;
+      });
+      addCompareScreenshotPlugin(on, { ...config, ...{ customSnapshotsDir: 'cypress/snapshots' } });
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/1-visual-consistency/app.cy.js

@@ -0,0 +1,46 @@
+const pages = {
+  'the homepage': '/',
+  // 'the pricing page': '/pricing',
+  // 'the private connectivity use case page': '/for/private-connectivity',
+};
+const resolutions = {
+  iPhone: 'iphone-6+',
+  // iPad: 'ipad-2',
+  // 'small Macbook': 'macbook-11',
+  // 'large Macbook': 'macbook-16',
+  // '4K display': [3840, 2160],
+  // '8K display': [7680, 4320],
+};
+for (const page in pages) {
+  describe('Visual formatting for ' + page, () => {
+    for (const resolution in resolutions) {
+      it('should be readable on a ' + resolution, () => {
+        const viewport = resolutions[resolution];
+        cy.get('html, body').invoke('attr', 'style', 'scroll-behavior: auto;');
+        cy.get('html, body').invoke('attr', 'style', 'height: initial;');
+        if (Array.isArray(viewport)) {
+          cy.viewport(...viewport);
+        } else {
+          cy.viewport(viewport);
+        }
+        cy.visit(pages[page]);
+        cy.screenshot();
+        // cy.compareScreenshot({
+        //   screenshotOptions: {
+        //     capture: 'fullPage',
+        //     disableTimersAndAnimations: true,
+        //   },
+        // });
+
+        // // Find a link with an href attribute containing "about" and click it
+        // cy.get('a[href*="about"]').click()
+
+        // // The new url should include "/about"
+        // cy.url().should('include', '/about')
+
+        // // The new page should contain an h1 with "About"
+        // cy.get('h1').contains('About')
+      });
+    }
+  });
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,64 @@
+/// <reference types="cypress" />
+
+const { addCompareScreenshotCommand } = require('cypress-odiff');
+
+addCompareScreenshotCommand({});
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+Cypress.Screenshot.defaults({
+  scale: true,
+  onBeforeScreenshot($el) {
+    $el.find('html, body').css('height', 'auto');
+    $el.find('html, body').css('scroll-behavior', 'auto');
+    $el.find('header').css('display', 'none');
+    cy.window().then((win) => {
+      win.scrollTo({
+        top: 0,
+        left: document.body.scrollHeight,
+        behavior: 'smooth',
+      });
+      win.scrollTo(0, 0);
+    });
+  },
+  onAfterScreenshot($el) {
+    $el.find('header').css('display', 'block');
+  },
+});
+
+export default {};

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

next-sitemap.config.js

@@ -2,7 +2,7 @@ module.exports = {
   siteUrl:
     process.env.NEXT_PUBLIC_VERCEL_ENV === 'production'
       ? process.env.NEXT_PUBLIC_SITE_URL
-      : process.env.NEXT_PUBLIC_VERCEL_URL,
+      : process.env.NEXT_PUBLIC_VERCEL_URL || 'http://localhost:3001',
   exclude: ['/404'],
   generateRobotsTxt: process.env.NEXT_PUBLIC_VERCEL_ENV === 'production',
   robotsTxtOptions: {