Can we use ChatGPT to help us update and test web applications

.github/workflows/dev-portfolio.yml

@@ -29,29 +29,34 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 16.x]
+        node-version: [18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+      # when one test fails, DO NOT cancel the other
+      # containers, because this will kill Cypress processes
+      # leaving the Dashboard hanging ...
+      # https://github.com/cypress-io/github-action/issues/48
+      fail-fast: false
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
-    - name: Install dependencies 📦
-      #Using npm ci is generally faster than running npm install
-      run: |
-        ls -a
-        npm ci
-    - name: Unit tests
-      run: |
-        npm run test:jest
-    - name: Build the app for prod 🏗
-      run: |
-        ls -a
-        npm run build && npm run start
-    - name: Run front-end perf
-      run: |
-        npm run test:lighthouse
-    - name: Run visual tests 👁
-      run: |
-        npm run test:visual
+    - name: Cypress info
+      run: npx cypress info
+
+    - name: Node info
+      run: node -v
+
+    - name: Run tests
+      uses: cypress-io/github-action@v5
+      env:
+        HAPPO_API_KEY: ${{ secrets.HAPPO_API_KEY }}
+        HAPPO_API_SECRET: ${{ secrets.HAPPO_API_SECRET }}
+      with:
+        browser: chrome
+        build: npm run build
+        start: npm run start
+        wait-on: "http://localhost:3000"
+        working-directory: ./dev-portfolio
+        command: npm run test:all

dev-portfolio/.gitignore

@@ -33,4 +33,6 @@ tests_output/
 .next**
 .next/.**
 
-**/coverage/**
+**/coverage/**
+/out/
+cypress/downloads

dev-portfolio/.happo.js

@@ -1,36 +1,36 @@
-const { RemoteBrowserTarget } = require("happo.io");
+const { RemoteBrowserTarget } = require('happo.io')
 
 module.exports = {
-  apiKey: process.env.HAPPO_API_KEY,
-  apiSecret: process.env.HAPPO_API_SECRET,
-  project: "dev-portfolio-tutorial",
-  targets: {
-    "chrome-1080p": new RemoteBrowserTarget("chrome", {
-      viewport: "1920x1080",
-      freezeAnimations: "last-frame",
-    }),
-    // all viewports https://viewportsizer.com/devices/
-    // 	Samsung Galaxy S10+, S10
-    "chrome-galaxy-s10": new RemoteBrowserTarget("chrome", {
-      viewport: "360x740",
-      freezeAnimations: "last-frame",
-    }),
-    // iphone viewports https://yesviz.com/iphones.php
-    "safari-1080p": new RemoteBrowserTarget("safari", {
-      viewport: "1920x1080",
-      freezeAnimations: "last-frame",
-    }),
-    // iphone 12 pro
-    "safari-iphone-12-pro": new RemoteBrowserTarget("safari", {
-      viewport: "390x844",
-      freezeAnimations: "last-frame",
-    }),
-    // iphone 12 pro
-    "chrome-650": new RemoteBrowserTarget("chrome", {
-      viewport: "650x415",
-      freezeAnimations: "last-frame",
-    }),
-    // only works on public urls
-    // pages: [{ url: 'http://localhost:3000/', title: 'Home Page' }],
-  },
-};
+    apiKey: process.env.HAPPO_API_KEY,
+    apiSecret: process.env.HAPPO_API_SECRET,
+    project: 'dev-portfolio-tutorial',
+    targets: {
+        'chrome-1080p': new RemoteBrowserTarget('chrome', {
+            viewport: '1920x1080',
+        }),
+        // all viewports https://viewportsizer.com/devices/
+        // 	Samsung Galaxy S10+, S10
+        'chrome-galaxy-s10': new RemoteBrowserTarget('chrome', {
+            viewport: '360x740',
+        }),
+        'chrome-650-bug': new RemoteBrowserTarget('chrome', {
+            viewport: '650x415',
+            scrollStitch: true,
+        }),
+        // iphone viewports https://yesviz.com/iphones.php
+        'safari-1080p': new RemoteBrowserTarget('safari', {
+            viewport: '1920x1080',
+            freezeAnimations: 'last-frame',
+            scrollStitch: true,
+        }),
+        // iphone 12 pro
+        'safari-iphone-12-pro': new RemoteBrowserTarget('safari', {
+            viewport: '390x844',
+            freezeAnimations: 'last-frame',
+            scrollStitch: true,
+        }),
+
+        // only works on public urls
+        // pages: [{ url: 'http://localhost:3000/', title: 'Home Page' }],
+    },
+}

dev-portfolio/README.md

@@ -4,30 +4,38 @@
 
 ## Get started
 
+For deployment
+
+```
+npm i && npm run build
+```
+
+Start on localhost:3000
+
 ```
 npm i && npm run dev
 ```
 
 ## About repo
 
-- Using NextJs
-- React
-- Styled components (each component has a corresponding ComponentStyles.js file)
+-   Using NextJs
+-   React
+-   Styled components (each component has a corresponding ComponentStyles.js file)
 
 [Thanks to JavaScript Mastery for the inspiration](https://www.youtube.com/watch?v=OPaLnMw2i_0&list=PL1YmAbfxmHuOsV3zmAnncnql3MMsIeO2_&index=24)
 
 ## I'm Nikolay Advolodkin
 
-- 🔭 I’m the founder of [Ultimate QA](https://ultimateqa.com/)
-- 🥗 Like my content? [Buy me a salad](https://www.buymeacoffee.com/nikolaya)
-- 📫 How to reach me:
-  - [Youtube where you can learn at your pace](https://www.youtube.com/ultimateqa?sub_confirmation=1)
-  - [JS Testing Newsletter](https://ultimateqa.ck.page/js-testing-tips)
-  - [Read about testing](https://ultimateqa.com/)
-  - [LinkedIn](https://www.linkedin.com/in/nikolayadvolodkin/)
-  - [Twitter for great Dev quotes](https://twitter.com/intent/follow?screen_name=nikolay_a00&region=follow_link)
-- 😄 Pronouns: he/him
-- ⚡ Fun fact: I'm a vegan that's pasionate about the 🌎, saving 🐮, and bridging the technical divide!
+-   🔭 I’m the founder of [Ultimate QA](https://ultimateqa.com/)
+-   🥗 Like my content? [Buy me a salad](https://www.buymeacoffee.com/nikolaya)
+-   📫 How to reach me:
+    -   [Youtube where you can learn at your pace](https://www.youtube.com/ultimateqa?sub_confirmation=1)
+    -   [JS Testing Newsletter](https://ultimateqa.ck.page/js-testing-tips)
+    -   [Read about testing](https://ultimateqa.com/)
+    -   [LinkedIn](https://www.linkedin.com/in/nikolayadvolodkin/)
+    -   [Twitter for great Dev quotes](https://twitter.com/intent/follow?screen_name=nikolay_a00&region=follow_link)
+-   😄 Pronouns: he/him
+-   ⚡ Fun fact: I'm a vegan that's pasionate about the 🌎, saving 🐮, and bridging the technical divide!
 
 ## Testing
 
@@ -39,22 +47,40 @@ How do we test all of the urls in our app?
 
 What about timelineData.js, do we need to write a snapshot test for it?
 
-- No, since the data appears in our visual tests, it's not necessary
+-   No, since the data appears in our visual tests, it's not necessary
+
+-   Disable running all of the cypress files for visual tests by using [Cypress --spec](https://docs.cypress.io/guides/guides/command-line#cypress-run)
 
-- Disable running all of the cypress files for visual tests by using [Cypress --spec](https://docs.cypress.io/guides/guides/command-line#cypress-run)
+How do we get the test status to fail if there are failed diffs?
 
 ### functional testing
 
-- how do we test the links in Projects.js?
+-   how do we test the links in Projects.js?
 
 ### front-end perf
 
 `cy.lighthouse(), Electron is not supported. Skipping...` error was a result of running Cypress on Electron. Changing to Chrome browser fixed the issue.
 
+### CICD
+
+[Cypress github actions yml commands](https://github.com/cypress-io/github-action#env)
+
 ### updating npm packages
 
 Use [npm-check](https://koalatea.io/how-to-update-all-your-npm-packages-at-once)
 
+## Errors
+
+SWC Error
+
+```text
+failed to load SWC binary, see more info here: https://nextjs.org/docs/messages/failed-loading-swc
+```
+
+[SWC Error solutions](https://nextjs.org/docs/messages/failed-loading-swc)
+
+[SWC Solution thread](https://github.com/vercel/next.js/discussions/30468?sort=top)
+
 ## Inspired by
 
 ⭐ Huge thanks to [JS Mastery for the tutorial](https://youtu.be/OPaLnMw2i_0) ⭐

dev-portfolio/cypress/e2e/SocialDetails.cy.js

@@ -1,31 +1,36 @@
 /// <reference types="cypress" />
 
-describe("SocialDetails", () => {
-  beforeEach(() => {
-    cy.visit("/");
-    cy.get("body").should("be.visible");
-  });
+describe('SocialDetails', () => {
+    beforeEach(() => {
+        cy.visit('/')
+        cy.get('body').should('be.visible')
+    })
 
-  it("have correct social links", () => {
-    cy.get("[data-testid='github']").should(
-      "have.attr",
-      "href",
-      "https://github.com/nadvolod"
-    );
-    cy.get("[data-testid='youtube']").should(
-      "have.attr",
-      "href",
-      "https://www.youtube.com/ultimateqa"
-    );
-    cy.get("[data-testid='linkedin']").should(
-      "have.attr",
-      "href",
-      "https://www.linkedin.com/in/nikolayadvolodkin/"
-    );
-    cy.get("[data-testid='twitter']").should(
-      "have.attr",
-      "href",
-      "https://twitter.com/Nikolay_A00"
-    );
-  });
-});
+    it('have correct social links', () => {
+        cy.get("[data-testid='github']").should(
+            'have.attr',
+            'href',
+            'https://github.com/nadvolod',
+        )
+        cy.get("[data-testid='youtube']").should(
+            'have.attr',
+            'href',
+            'https://www.youtube.com/ultimateqa',
+        )
+        cy.get("[data-testid='linkedin']").should(
+            'have.attr',
+            'href',
+            'https://www.linkedin.com/in/nikolayadvolodkin/',
+        )
+        cy.get("[data-testid='twitter']").should(
+            'have.attr',
+            'href',
+            'https://twitter.com/Nikolay_A00',
+        )
+        cy.get("[data-testid='mailto']").should(
+            'have.attr',
+            'href',
+            'mailto:[email protected]',
+        )
+    })
+})

dev-portfolio/cypress/e2e/homepage.cy.js

@@ -11,7 +11,7 @@ describe('Homepage', () => {
             'best-practices': 87,
             seo: 75,
             pwa: 20,
-            performance: 30,
+            performance: 25,
         })
     })
 })

dev-portfolio/cypress/plugins/index.js

@@ -15,18 +15,17 @@
 /**
  * @type {Cypress.PluginConfig}
  */
-const happoTask = require("happo-cypress/task");
-const { lighthouse, prepareAudit } = require("@cypress-audit/lighthouse");
+const happoTask = require('happo-cypress/task')
+const { lighthouse, pa11y, prepareAudit } = require('cypress-audit')
 
 module.exports = (on) => {
-  happoTask.register(on);
-  on("before:browser:launch", (browser = {}, launchOptions) => {
-    prepareAudit(launchOptions);
-  });
+    happoTask.register(on)
+    on('before:browser:launch', (browser = {}, launchOptions) => {
+        prepareAudit(launchOptions)
+    })
 
-  on("task", {
-    lighthouse: lighthouse((lighthouseReport) => {
-      console.log(lighthouseReport); // raw lighthouse reports
-    }),
-  });
-};
+    on('task', {
+        lighthouse: lighthouse(), // calling the function is important
+        pa11y: pa11y(), // calling the function is important
+    })
+}

dev-portfolio/cypress/support/commands.js

@@ -23,5 +23,5 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-import "happo-cypress";
-import "@cypress-audit/lighthouse/commands";
+import 'cypress-audit/commands'
+import 'happo-cypress'