CI cypress tests patch [WIP]

.eslintrc

@@ -33,5 +33,6 @@
     "no-invalid-this": 0,
     "no-unused-vars": "off",
     "sort-imports": "error"
-  }
+  },
+  "ignorePatterns": ["cypress.config.js"]
 }

.github/workflows/ci.yml

@@ -8,7 +8,7 @@ on:
 
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -32,7 +32,7 @@ jobs:
       #     name: build-artifact
       #     path: ./build-artifact.zip
   lint:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -45,7 +45,7 @@ jobs:
       - run: npm run lint
 
   test:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -60,7 +60,7 @@ jobs:
           CI: true
 
   coverage:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
@@ -79,10 +79,15 @@ jobs:
   coverage-cypress:
     env:
       REACT_APP_NOTIFY_DAPP_ID: ${{ secrets.REACT_APP_NOTIFY_DAPP_ID }}
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     services:
       saddle-contract:
         image: saddlefinance/contracts:latest
+        options: >-
+          --health-cmd "node -e 'const fetch=require(\"node-fetch\");(function main(){const body={method:\"eth_blockNumber\",params:[],id:1,jsonrpc:\"2.0\"};fetch(\"http://localhost:8545\",{method:\"POST\",body:JSON.stringify(body),headers:{\"Content-Type\":\"application/json\"}}).then((res)=>res.json()).then((json)=>{const block=parseInt(json.result||\"0x0\",16);if(block>0){process.exit(0)}throw new Error()}).catch(()=>process.exit(1))})();'"
+          --health-interval 30s
+          --health-timeout 10s
+          --health-retries 10
         ports:
           - 8545:8545
     steps:
@@ -106,8 +111,6 @@ jobs:
       - run: 'git config --global --replace-all url."https://github.com/".insteadOf ssh://[email protected]/'
       - run: npm ci
       - run: npm run cy:coverage
-        env:
-          CHOKIDAR_USEPOLLING: 1
       - run: npx nyc report --reporter=text
       - uses: codecov/codecov-action@v1
         with:
@@ -116,4 +119,4 @@ jobs:
         if: failure()
         with:
           name: E2E Failures
-          path: cypress/screenshots/
+          path: cypress/videos/

cypress.config.js

@@ -0,0 +1,28 @@
+const { defineConfig } = require("cypress");
+const setupNodeEvents = require('./cypress/plugins/index.js')
+
+module.exports = defineConfig({
+  "env": {
+    "NETWORK_ID": 31337,
+    "PROVIDER_HOST": "http://localhost:8545/",
+    "PRIVATE_TEST_WALLET_PK": "0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80",
+    "PRIVATE_TEST_WALLET_ADDRESS": "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
+    "cypress-react-selector": {
+      "root": "#root"
+    }
+  },
+  "e2e": { 
+    setupNodeEvents,
+    "supportFile": "cypress/support/commands.ts",
+    // "specPattern":	"cypress/integration/*.test.ts",
+    "specPattern":	"cypress/integration/e2e-suite.ts",
+    "baseUrl": "http://localhost:3000",
+    "pageLoadTimeout": 100000,
+    "responseTimeout": 100000,
+    "defaultCommandTimeout": 40000,
+    "requestTimeout": 40000,
+    "video": true,
+    "viewportWidth": 1440,
+    "viewportHeight": 1080
+  }
+})

cypress/integration/accountDetail.test.ts

@@ -1,8 +1,7 @@
 context("Account detail test", () => {
   beforeEach(() => {
-    cy.visit(`/#/`)
-    cy.waitForReact()
-    cy.wait(2000)
+    cy.reload()
+    cy.visit(`/#/`).waitForReact(2000)
   })
 
   it("renders account detail after click account avatar", () => {

cypress/integration/advancedOption.test.ts

@@ -17,7 +17,6 @@ context("Advanced option test", () => {
         .within(() => {
           cy.get("button").contains("Withdraw").click()
         })
-      cy.wait(10000)
 
       cy.get("[data-testid=advOptionContainer]")
         .should("exist")

cypress/integration/deposit.test.ts

@@ -5,7 +5,19 @@ const STABLECOIN_POOL_V2_NAME = "USDv2"
 const SUSD_METAPOOL_V3_NAME = "sUSD-USDv2_v3"
 const pools = [STABLECOIN_POOL_V2_NAME, SUSD_METAPOOL_V3_NAME] // order is important basepool must have balance prior to metapool
 
-async function increaseTime() {
+context("Deposit Flow", () => {
+  beforeEach(() => {
+    cy.reload()
+    cy.visit(`/#/pools`)
+    cy.waitForReact()
+  })
+
+  for (let i = 0; i < pools.length; i++) {
+    testPoolDeposit(pools[i])
+  }
+})
+
+function increaseTime() {
   const provider = getDefaultProvider(
     Cypress.env("PROVIDER_HOST"),
   ) as JsonRpcProvider
@@ -18,43 +30,55 @@ async function increaseTime() {
       .then(resolve)
   })
 }
-context("Deposit Flow", () => {
-  beforeEach(() => {
-    cy.visit(`/#/pools`)
-    cy.wait(2000)
-  })
 
-  function testPoolDeposit(poolName: string) {
+function testPoolDeposit(poolName: string) {
+  it(`successfully completes a deposit of all ${poolName} assets`, () => {
     if (poolName === SUSD_METAPOOL_V3_NAME) {
       void increaseTime()
     }
-    it(`successfully completes a deposit of all ${poolName} assets`, () => {
-      cy.contains(new RegExp("^" + poolName + "$"))
-        .parents("[data-testid=poolOverview]")
-        .within(() => {
-          cy.get("button").contains("Deposit").click()
-        })
-      if (poolName === SUSD_METAPOOL_V3_NAME) {
-        cy.get("[data-testid=deposit-wrapped-checkbox]").click()
-      }
-      cy.get("#tokenInput input").then(($inputs) => {
-        cy.wrap($inputs).each(($input) => {
-          cy.wrap($input).type("100")
-        })
+
+    cy.contains(poolName)
+      .parents("[data-testid=poolOverview]")
+      .within(() => {
+        cy.wait(2000)
+        cy.get("button").contains("Deposit").click()
       })
-      cy.get("[data-testid=tokenValue]")
-        .first()
-        .then(($value) => {
-          const prevVal = $value.text()
-          cy.get("button").contains("Deposit").first().click()
-          cy.get("button").contains("Confirm Deposit").click()
-          cy.get(".Toastify").contains(`Deposit on ${poolName} complete`)
-          cy.get("[data-testid=tokenValue]")
-            .first()
-            .should("not.have.text", prevVal)
+
+    cy.wait(2000)
+
+    cy.get("[data-testid=advOptionContainer]")
+      .click()
+      .then(() => {
+        cy.get("[data-testid=txnDeadlineInputGroup]").within(() => {
+          cy.get("input").then(($input) => {
+            cy.wrap($input).clear().type("1000")
+          })
         })
-    })
-  }
+      })
 
-  pools.forEach(testPoolDeposit)
-})
+    cy.wait(2000)
+
+    cy.get("#tokenInput input")
+      .then(($inputs) => {
+        cy.wrap($inputs).each((_, $index) => {
+          cy.get(`[data-testid=token-input-${$index}]`)
+            .click()
+            .clear()
+            .type("100")
+        })
+      })
+      .wait(2000)
+    cy.scrollTo("top").wait(2000)
+    cy.get("[data-testid=tokenValue]")
+      .first()
+      .then(($value) => {
+        const prevVal = $value.text()
+        cy.get("button").contains("Deposit").first().click()
+        cy.get("button").contains("Confirm Deposit").click()
+        cy.get(".Toastify").contains(`Deposit on ${poolName} complete`)
+        cy.get("[data-testid=tokenValue]")
+          .first()
+          .should("not.have.text", prevVal)
+      })
+  })
+}

cypress/integration/e2e-suite.ts

@@ -0,0 +1,8 @@
+import "./accountDetail.test.ts"
+import "./advancedOption.test.ts"
+import "./risk.test.ts"
+import "./topMenu.test.ts"
+import "./veSdl.test.ts"
+import "./deposit.test.ts"
+import "./swap.test.ts"
+import "./withdrawal.test.ts"

cypress/integration/swap.test.ts

@@ -3,10 +3,11 @@ context("Swap Flow", () => {
   function testAssetSwap(poolName: string, poolTokenSymbols: string[]) {
     describe(`Swapping within ${poolName}`, () => {
       before(() => {
-        cy.visit(`/#/`)
-        cy.waitForReact()
+        cy.reload()
+        cy.visit(`/#`).waitForReact()
         cy.wait(2000)
       })
+
       it("starts in a neutral state", () => {
         cy.get('[data-testid="swapTokenInputFrom"]')
           .eq(0)
@@ -16,13 +17,19 @@ context("Swap Flow", () => {
           .should("include.text", "Choose")
       })
       it("shows all of the pool's tokens and balances in dropdown", () => {
+        cy.get("[data-testid=poolsNavLink]").click()
+        cy.get("[data-testid=swapNavLink]").click()
         cy.get('[data-testid="swapTokenInputFrom"]')
           .eq(0)
           .contains("Choose")
           .as("dropdownButton")
           .click() // show
+          .wait(2000)
+          .click()
+          .wait(2000)
+          .click()
         poolTokenSymbols.forEach((tokenSymbol) => {
-          cy.react("ListItem", { options: { timeout: 3000 } }).should("exist") // wait for listitem to appear
+          cy.react("ListItem", { options: { timeout: 10000 } }).should("exist") // wait for listitem to appear
           cy.get('[data-testid="dropdownContainer"]')
             .contains(tokenSymbol, { matchCase: false })
             .should("exist")
@@ -62,6 +69,12 @@ context("Swap Flow", () => {
           .should("not.have.text", "≈$0.0")
       })
       it("allows users to select only tokens in the same pool", () => {
+        cy.get('[data-testid="swapTokenInputFrom"]')
+          .contains(poolTokenSymbols[0], { matchCase: false })
+          .click()
+          .get('[data-testid="dropdownContainer"]')
+          .contains(poolTokenSymbols[0], { matchCase: false })
+          .click()
         cy.get('[data-testid="swapTokenInputTo"]')
           .contains("Choose")
           .as("dropdownButton")

cypress/integration/veSdl.test.ts

@@ -1,7 +1,7 @@
 context("veSDL test", () => {
   beforeEach(() => {
-    cy.visit(`/#/vesdl`)
-    cy.wait(2000)
+    cy.reload()
+    cy.visit(`/#/vesdl`).waitForReact(2000)
   })
   it("veSDL test", () => {
     cy.getBySelId("lockVeSdlBtn").should("be.disabled")
@@ -15,7 +15,9 @@ context("veSDL test", () => {
 
     cy.getBySelId("veSdlUnlockData")
       .find("input")
+      .clear()
       .type("07/28/2022", { force: true })
+      .wait(2000)
       .should("have.value", "07/28/2022")
   })
 })