diff --git a/.github/workflows/screenshots-in-pr.yml b/.github/workflows/screenshots-in-pr.yml new file mode 100644 index 000000000..54ed5b7bb --- /dev/null +++ b/.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 }} diff --git a/cypress.config.ts b/cypress.config.ts index 61d406b43..b901ec1a1 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-param-reassign */ import { defineConfig } from 'cypress'; const { addCompareScreenshotPlugin } = require('cypress-odiff'); @@ -5,8 +6,47 @@ 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 }, diff --git a/cypress/e2e/1-visual-consistency/app.cy.js b/cypress/e2e/1-visual-consistency/app.cy.js index 289bfa744..cfb42b108 100644 --- a/cypress/e2e/1-visual-consistency/app.cy.js +++ b/cypress/e2e/1-visual-consistency/app.cy.js @@ -5,10 +5,10 @@ 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) { @@ -16,18 +16,21 @@ for (const page in pages) { 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() diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 0e02bd80e..1f9224655 100644 --- a/cypress/support/commands.ts +++ b/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'); + }, +}); diff --git a/package.json b/package.json index 47c72bc6b..84a3009b9 100644 --- a/package.json +++ b/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}": [ diff --git a/src/components/Signup/SignupFlowManager.tsx b/src/components/Signup/SignupFlowManager.tsx index b0231a940..697e8a5d0 100644 --- a/src/components/Signup/SignupFlowManager.tsx +++ b/src/components/Signup/SignupFlowManager.tsx @@ -87,7 +87,6 @@ const SignupFlowManager: FC = ({ 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 diff --git a/src/config.ts b/src/config.ts index 4dcd533d7..17f551611 100644 --- a/src/config.ts +++ b/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.`, diff --git a/src/utils/segmentAnalytics.js b/src/utils/segmentAnalytics.js index 2d0f74209..177188e2c 100644 --- a/src/utils/segmentAnalytics.js +++ b/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() {