feat: wip take automatic screenshots of key pages

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

@@ -0,0 +1,59 @@
+name: "comment-on-pr"
+
+on:
+  pull_request:
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Start the server
+        run: npm run build && npm run start &
+        env:
+          NODE_ENV: development
+
+      - name: Run Cypress tests
+        run: npx cypress run --e2e
+        env:
+          CI: true
+
+      - name: Archive screenshots
+        uses: actions/upload-artifact@v3
+        with:
+          name: cypress-screenshots
+          path: cypress/screenshots
+
+  post-cypress:
+    needs: cypress-run
+    runs-on: ubuntu-latest
+
+    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

@@ -1,12 +1,52 @@
+/* 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

@@ -5,29 +5,32 @@ const pages = {
 };
 const resolutions = {
   iPhone: 'iphone-6+',
-  iPad: 'ipad-2',
+  // iPad: 'ipad-2',
   'small Macbook': 'macbook-11',
-  'large Macbook': 'macbook-16',
-  '4K display': [3840, 2160],
+  // '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.compareScreenshot({
-          screenshotOptions: {
-            capture: 'fullPage',
-            disableTimersAndAnimations: true,
-          },
-        });
+        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()

cypress/support/commands.ts

@@ -40,3 +40,23 @@ addCompareScreenshotCommand({});
 //     }
 //   }
 // }
+
+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');
+  },
+});

package.json

@@ -24,7 +24,8 @@
     "excalidraw-animate": "node ./bin/excalidraw-animate.js",
     "cypress:open": "cypress open",
     "e2e": "start-server-and-test dev http://localhost:3001 \"cypress open --e2e\"",
-    "e2e:headless": "start-server-and-test dev http://localhost:3001 \"cypress run --e2e\""
+    "e2e:headlessold": "start-server-and-test dev http://localhost:3001 \"cypress run --e2e\"",
+    "e2e:headless": "cypress run --e2e --browser=chrome"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [

src/components/Signup/SignupFlowManager.tsx

@@ -87,7 +87,6 @@ const SignupFlowManager: FC<Props> = ({ install }): ReactElement => {
 
   useEffect(() => {
     const stepName = steps[activeStep].title;
-    // @ts-ignore window.analytics undefined below
     window.analytics.track(`Signup - Step - ${stepName}`);
     const generatedUrl = `${window.location.protocol}//${window.location.host}/${window.location.pathname}/${stepName}`;
     // @ts-ignore window.analytics undefined below

src/config.ts

@@ -19,6 +19,7 @@ const getRootUrl = (): string => {
 };
 
 export default {
+  app_env: process.env.NODE_ENV,
   app: {
     title: 'Ockam | Build Trust',
     description: `Modern applications are distributed, interconnected, and have Zero-Trust in network boundaries. These applications must exchange data with Trust. Ockam empowers developers to build applications that can Trust Data-in-Motion across complex, variable, and hostile networks. Ockam has a simple developer experience and powerful primitives that orchestrate end-to-end encryption, key management, authorization policy enforcement, and mutual authentication.`,

src/utils/segmentAnalytics.js

@@ -1,7 +1,14 @@
 import CONFIG from '@config';
 
-if (typeof window !== "undefined") {
+if (typeof window !== 'undefined' && CONFIG.app_env === 'production') {
   segmentAnalytics();
+} else if (typeof window !== 'undefined') {
+  segmentAnalytics();
+  // window.analytics = {
+  //   track: () => {},
+  //   page: () => {},
+  //   identify: () => {},
+  // }
 }
 
 function segmentAnalytics() {