Centrifuge App: e2e test setup (#1688)

* Setup and run first synpress test * Remove redundancy * Add sample env file * Remove env from run command * Clean up config * Fix linting * Move from centrifuge-app to tests * Attempt to run test in docker on CI * Move to workflow folder * Fix order * Add working dir * Set working dir * Attempt to set title * Add env variables * Remove duplicates * Convert config to js * Update script * Add module type * Simple CI attempt * Switch to npm * Switch to npm * Stop execution of big docker container * downgrade version * Overwrite install command * Use command instead of start * Check pwd * Check pwd * Check pwd * Set project directory * More attempts * Actually set working directory * Command * Update how env variables are passed * Add project ID for cypress cloud * Try to set env variables * Try to set env variables * Move env variables * Try again * Add base url * Remove docker * Remove remaining docker stuff * Add key to record to cypress cloud * Start app before running tests * Move tests back * Set working dir * Remove build step * Run local host * Run tests on bundled local server * Add yarn/node setup * Remove extra install * Fix wait on for node 18 * Fix wait on for node 18 take 2 * Build and run preview separate * Point base url to correct port * Add & in preview so it doesn't shut down * Try again * Set working dir * Download build instead of running build * Use main branch artifact * Allow failure * Add back install command & run on firefox * Add spec * Remove linux deps and fluxbox * Add linux and fluxbox back * Set bsae url in workflow * Add env vars to env section * Add more secrets * Move start command from package to workflow * Create env file in action * Run test when PR review is requested * Fix typings for cy commands * Add invest flow test (transfers, whitelisting, investing) * Fix path to eslint file * Run test on single spec * Add close epoch test * Add redeem tests and refactor * Increase gas limit * Fix linting * Test trigger * Add id * Fix types * Run only when PR is closed * Fix build * Fix linting --------- Co-authored-by: Guillermo Perez <gpmayorga@users.noreply.github.com>
centrifuge · Mar 13, 2024 · 8f3e788 · 8f3e788
1 parent ef135ab
commit 8f3e788
Show file tree

Hide file tree

Showing 25 changed files with 7,388 additions and 5,386 deletions.
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -0,0 +1,58 @@
+name: Synpress tests
+
+on:
+  pull_request:
+    types: [closed]
+    branches: [main]
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-22.04
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install linux deps
+        run: |
+          sudo apt-get install --no-install-recommends -y \
+          fluxbox \
+          xvfb
+
+      - name: Run xvfb and fluxbox
+        run: |
+          Xvfb :0 -screen 0 1024x768x24 -listen tcp -ac &
+          fluxbox &
+        env:
+          DISPLAY: :0.0
+      - uses: iamsauravsharma/create-dotenv@v2.0.1
+        with:
+          # input-prefix: '' # Optional (default: '')
+          file-path: 'centrifuge-app/.env' # Optional (default : '.env')
+        # output-prefix: 'OUTPUT_' # Optional (default: '')
+        env: # env available for only this steps
+          CYPRESS_PRIVATE_KEY: ${{secrets.CYPRESS_PRIVATE_KEY}}
+          PRIVATE_KEY: ${{secrets.CYPRESS_PRIVATE_KEY}}
+          NETWORK_NAME: centrifuge
+          RPC_URL: https://fullnode.development.cntrfg.com
+          CHAIN_ID: 2000
+          SYMBOL: DEVEL
+          IS_TESTNET: true
+          DEBUG: true
+      - name: Synpress run
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: centrifuge-app
+          install-command: yarn
+          command: yarn run e2e:run:ci
+          browser: chrome
+          config-file: synpress.config.ts
+          ci-build-id: '${{ github.sha }}-${{ github.workflow }}-${{ github.event_name }}'
+        env:
+          # pass the Cypress Cloud record key as an environment variable
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          CYPRESS_PRIVATE_KEY: ${{ secrets.CYPRESS_PRIVATE_KEY }}
+          PRIVATE_KEY: ${{ secrets.CYPRESS_PRIVATE_KEY }}
+          CYPRESS_BASE_URL: https://app-dev.k-f.dev
+          DISPLAY: :0.0
diff --git a/centrifuge-app/env.sample b/centrifuge-app/env.sample
@@ -0,0 +1,7 @@
+# Copy to .env (for synpress/e2e testing config ONLY)
+PRIVATE_KEY=
+NETWORK_NAME=centrifuge 
+RPC_URL=https://fullnode.development.cntrfg.com 
+CHAIN_ID=2000 
+SYMBOL=DEVEL 
+IS_TESTNET=true
diff --git a/centrifuge-app/package.json b/centrifuge-app/package.json
@@ -20,7 +20,10 @@
     "test": "vitest",
     "coverage": "vitest run --coverage",
     "test:ci": "vitest run",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "e2e:run": "synpress run -cf synpress.config.ts -s tests/e2e/specs/invest.cy.ts",
+    "e2e:run:ci": "synpress run --record -cf synpress.config.ts",
+    "e2e:open": "synpress open -cf synpress.config.ts"
   },
   "dependencies": {
     "@centrifuge/centrifuge-js": "workspace:*",
@@ -53,6 +56,7 @@
     "vitest": "^1.2.1"
   },
   "devDependencies": {
+    "@synthetixio/synpress": "^3.7.2-beta.9",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/react-helmet-async": "^1.0.3",

diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
@@ -165,22 +165,28 @@ export const DataTable = <T extends Record<string, any>>({
       ))}
       {sortedAndPaginatedData?.map((row, i) => (
         <DataRow
+          data-testId={`data-table-row-${i}-${groupIndex ?? 0}`}
           hoverable={hoverable}
           as={onRowClicked ? Link : 'div'}
           to={onRowClicked && (() => onRowClicked(row))}
           key={keyField ? row[keyField] : i}
           tabIndex={onRowClicked ? 0 : undefined}
         >
           {columns.map((col, index) => (
-            <DataCol variant="body2" align={col?.align} key={index}>
+            <DataCol
+              data-testId={`data-table-col-${i}-${groupIndex ?? 0}-${col.header}`}
+              variant="body2"
+              align={col?.align}
+              key={index}
+            >
               {col.cell(row, i)}
             </DataCol>
           ))}
         </DataRow>
       ))}
       {/* summary row is not included in sorting */}
       {summary && (
-        <DataRow>
+        <DataRow data-testId={`row-summary-${groupIndex ?? 0}`}>
           {columns.map((col, i) => (
             <DataCol variant="body2" key={`${col.sortKey}-${i}`} align={col?.align}>
               {col.cell(summary, i)}

diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx
@@ -152,8 +152,8 @@ function InvestRedeemInput({ defaultView: defaultViewProp }: InputProps) {
           selectedIndex={view === 'invest' ? 0 : 1}
           onChange={(index) => setView(index === 0 ? 'invest' : 'redeem')}
         >
-          <TabsItem>Invest</TabsItem>
-          <TabsItem>Redeem</TabsItem>
+          <TabsItem ariaLabel="Go to invest tab">Invest</TabsItem>
+          <TabsItem ariaLabel="Go to redeem tab">Redeem</TabsItem>
         </Tabs>
       </Flex>
       <Box p={2} backgroundColor="backgroundTertiary">
@@ -639,7 +639,9 @@ function RedeemForm({ autoFocus }: RedeemFormProps) {
         )}
         <ButtonGroup>
           {preSubmitAction ? (
-            <Button {...preSubmitAction}>Redeem</Button>
+            <Button {...preSubmitAction} type="submit">
+              Redeem
+            </Button>
           ) : (
             <Button type="submit" loading={isRedeeming} loadingMessage={loadingMessage} disabled={calculatingOrders}>
               Redeem
@@ -860,7 +862,14 @@ function Claim({ type, onDismiss }: { type: 'invest' | 'redeem'; onDismiss?: ()
       )}
       {state.needsToCollectBeforeOrder && <InlineFeedback>Claim tokens before placing another order</InlineFeedback>}
       <ButtonGroup>
-        <Button onClick={actions.collect} loading={isCollecting}>
+        <Button
+          onClick={actions.collect}
+          loading={isCollecting}
+          aria-label={`Claim ${formatBalanceAbbreviated(
+            state.collectAmount,
+            state.collectType === 'invest' ? state.trancheCurrency?.symbol : state.poolCurrency?.symbol
+          )}`}
+        >
           Claim{' '}
           {formatBalanceAbbreviated(
             state.collectAmount,

diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx
@@ -107,7 +107,7 @@ export function PoolCard({
         </Box>
       </Grid>
 
-      {status === 'Upcoming' ? null : <Anchor to={`${basePath}/${poolId}`} aria-label="Go to pool details" />}
+      {status === 'Upcoming' ? null : <Anchor to={`${basePath}/${poolId}`} aria-label={`Go to ${name} details`} />}
     </Root>
   )
 }
diff --git a/centrifuge-app/src/components/Portfolio/TransferTokensDrawer.tsx b/centrifuge-app/src/components/Portfolio/TransferTokensDrawer.tsx
@@ -236,6 +236,7 @@ const SendToken = ({ address, currency, isNativeTransfer }: SendReceiveProps) =>
               {({ field, meta, form }: FieldProps) => (
                 <CurrencyInput
                   {...field}
+                  id="amount"
                   size={0}
                   placeholder="0.00"
                   label="Amount"

diff --git a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
@@ -531,6 +531,7 @@ function CreatePoolForm() {
                 <Field name="poolIcon" validate={validate.poolIcon}>
                   {({ field, meta, form }: FieldProps) => (
                     <FileUpload
+                      name="poolIcon"
                       file={field.value}
                       onFileChange={async (file) => {
                         form.setFieldTouched('poolIcon', true, false)

diff --git a/centrifuge-app/src/pages/IssuerPool/Investors/InvestorStatus.tsx b/centrifuge-app/src/pages/IssuerPool/Investors/InvestorStatus.tsx
@@ -96,7 +96,12 @@ export function InvestorStatus() {
     >
       <Stack gap={2}>
         <Grid columns={2} gap={2} alignItems="center">
-          <SearchInput value={address} onChange={(e) => setAddress(e.target.value)} placeholder="Enter address..." />
+          <SearchInput
+            name="investorStatus"
+            value={address}
+            onChange={(e) => setAddress(e.target.value)}
+            placeholder="Enter address..."
+          />
           <Select
             value={chain}
             options={[
@@ -168,6 +173,7 @@ export function InvestorStatus() {
                       onClick={() => toggleAllowed(row.id)}
                       loading={isTransactionPending && pendingTrancheId === row.id}
                       small
+                      aria-label={isAllowed ? `Remove ${row.id} to memberlist` : `Add ${row.id} to memberlist`}
                     >
                       {isAllowed ? 'Remove from memberlist' : 'Add to memberlist'}
                     </Button>

diff --git a/centrifuge-app/src/pages/Pool/Overview/index.tsx b/centrifuge-app/src/pages/Pool/Overview/index.tsx
@@ -181,7 +181,11 @@ export function InvestButton(props: InvestRedeemProps) {
   return (
     <>
       <InvestRedeemDrawer open={open} onClose={() => setOpen(false)} {...props} />
-      <Button onClick={() => connectAndOpen()} style={{ marginLeft: 'auto' }}>
+      <Button
+        aria-label={`Invest in ${props.trancheId}`}
+        onClick={() => connectAndOpen()}
+        style={{ marginLeft: 'auto' }}
+      >
         Invest
       </Button>
     </>

diff --git a/centrifuge-app/synpress.config.ts b/centrifuge-app/synpress.config.ts
@@ -0,0 +1,35 @@
+const synpress = require('@synthetixio/synpress/plugins/index.js')
+const { defineConfig } = require('cypress')
+
+export default defineConfig({
+  projectId: 'cwss36', // cypress cloud
+  userAgent: 'synpress',
+  retries: {
+    runMode: 0,
+    openMode: 0,
+  },
+
+  screenshotsFolder: 'tests/e2e/screenshots',
+  videosFolder: 'tests/e2e/videos',
+  video: true,
+  chromeWebSecurity: true,
+  viewportWidth: 1366,
+  viewportHeight: 850,
+
+  env: {
+    coverage: false,
+  },
+  defaultCommandTimeout: 10000,
+  pageLoadTimeout: 10000,
+  requestTimeout: 10000,
+
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    setupNodeEvents(on, config) {
+      return synpress(on, config)
+    },
+    pageLoadTimeout: 30000,
+    supportFile: 'tests/e2e/support/e2e.ts',
+    specPattern: 'tests/e2e/specs/**/*.cy.ts',
+  },
+})
diff --git a/centrifuge-app/tests/e2e/data/pool.json b/centrifuge-app/tests/e2e/data/pool.json
@@ -0,0 +1,19 @@
+{
+  "name": "E2E Pool",
+  "poolId": "3515519799",
+  "poolCurrency": "USDT",
+  "investAmount": "2",
+  "poolAdmin": "0x70fC4d9C87E9e9B0751A5680b1Dd654517f02309",
+  "tranches": [
+    {
+      "name": "Junior",
+      "symbol": "E2EJUN",
+      "id": "0xec6528e5b1a899fed47777b19963b1a6"
+    },
+    {
+      "name": "Senior",
+      "symbol": "E2ESEN",
+      "id": "0xc18e73516eda0e038c50f6ab075b74ec"
+    }
+  ]
+}
diff --git a/centrifuge-app/tests/e2e/specs/health-check.ts b/centrifuge-app/tests/e2e/specs/health-check.ts
@@ -0,0 +1,6 @@
+describe('E2E test health check', () => {
+  it('Connects a wallet', () => {
+    cy.visit('/pools', { failOnStatusCode: false })
+    cy.connectWallet({ init: true })
+  })
+})