ERC20 and Mother e2e tests

.eslintignore

@@ -1,3 +1,5 @@
 *.cjs
 dist
-node_modules
+node_modules
+cypress
+*.config.ts

.github/workflows/build.yml

@@ -8,6 +8,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+      - name: Setup node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14
 
       - name: Install and build
         run: |
@@ -25,7 +29,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - run: |
-          curl -L "https://github.com/paritytech/substrate-contracts-node/releases/download/v0.15.1/substrate-contracts-node-linux.tar.gz" -O
+          curl -L "https://github.com/paritytech/substrate-contracts-node/releases/download/v0.16.0/substrate-contracts-node-linux.tar.gz" -O
           ls -lash
       - name: Save node artifact
         uses: actions/upload-artifact@v3
@@ -66,6 +70,7 @@ jobs:
           browser: chrome
           record: true
           parallel: true
+          config-file: cypress.config.ts
           group: 'UI - Chrome'
         env:
           CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
@@ -104,6 +109,7 @@ jobs:
           browser: firefox
           record: true
           parallel: true
+          config-file: cypress.config.ts
           group: 'UI - Firefox'
         env:
           CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}

cypress.config.ts

@@ -0,0 +1,19 @@
+// Copyright 2022 @paritytech/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  projectId: 'eup7bh',
+
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
+
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+    },
+  },
+});

cypress/integration/contracts/erc20.spec.ts → cypress/e2e/contracts/erc20.spec.ts

@@ -1,16 +1,17 @@
-// Copyright 2021 @paritytech/contracts-ui authors & contributors
-// SPDX-License-Identifier: Apache-2.0
+// Copyright 2022 @paritytech/contracts-ui authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
 
 describe('ERC20 Contract ', () => {
   const initialSupply = 77;
   const transferValue = 2;
-  const timeout = 25000;
+  const allowance = 25;
 
   it('contract file uploads', () => {
     cy.visit('http://localhost:8081/#/instantiate');
     cy.get('[data-cy="file-input"]').attachFile('erc20.contract');
     cy.get('[data-cy="next-btn"]').should('not.be.disabled');
   });
+
   it('moves to step 2', () => {
     cy.get('[data-cy="next-btn"]').click();
     cy.contains('Deployment Constructor').should('be.visible');
@@ -29,37 +30,44 @@ describe('ERC20 Contract ', () => {
   });
 
   it('submits instantiate transaction', () => {
-    cy.get('[data-cy="submit-btn"]').click();
-    cy.get('[data-cy="transaction-complete"]', { timeout })
-      .should('be.visible')
-      .and('contain', 'contracts:Instantiated')
-      .and('contain', 'system:NewAccount')
-      .and('contain', 'balances:Endowed')
-      .and('contain', 'balances:Transfer')
-      .and('contain', 'balances:Reserved')
-      .and('contain', 'balances:Withdraw')
-      .and('contain', 'system:ExtrinsicSuccess');
-
-    cy.get('[data-cy="dismiss-notification"]').click();
+    cy.instantiate();
   });
+
   it('redirects to contract page after instantiation', () => {
     cy.url().should('contain', '/contract/');
   });
+
   it(`calling totalSupply() returns ${initialSupply}`, () => {
-    cy.contains('Read').click();
-    cy.get('[data-cy="totalSupply"]').find('.return-value').should('contain', `${initialSupply}`);
+    cy.assertReturnValue('totalSupply', `${initialSupply}`);
   });
+
   it(`transfers ${transferValue} Units to another account`, () => {
-    cy.get('.constructorDropdown').click().find('.dropdown__option').eq(3).click();
-    cy.get('.constructorDropdown').find('.dropdown__single-value').should('contain', 'transfer');
+    cy.selectMessage('transfer', 3);
     cy.get('.form-field.to').find('.dropdown').click().find('.dropdown__option').eq(3).click();
     cy.get('.form-field.value').find('input[type="text"]').eq(0).type(`${transferValue}`);
-    cy.contains('Call').click();
-    cy.get('[data-cy="transaction-complete"]', { timeout })
-      .should('be.visible')
-      .and('contain', 'system:ExtrinsicSuccess')
-      .and('contain', 'balances:Transfer')
-      .and('contain', 'balances:Reserved')
-      .and('contain', 'balances:Withdraw');
+    cy.call();
+    cy.selectMessage('balanceOf', 1);
+    cy.assertReturnValue('balanceOf', `${initialSupply - transferValue}`);
+  });
+
+  it(`successfully approves allowance`, () => {
+    cy.selectMessage('approve', 4);
+    cy.get('.form-field.spender').find('.dropdown').click().find('.dropdown__option').eq(2).click();
+    cy.get('.form-field.value').find('input[type="text"]').type(`${allowance}`);
+    cy.call();
+    cy.selectMessage('allowance', 2);
+    cy.get('.form-field.spender').find('.dropdown').click().find('.dropdown__option').eq(2).click();
+    cy.assertReturnValue('allowance', `${allowance}`);
+  });
+
+  it(`transfers ${transferValue} on behalf of alice`, () => {
+    cy.get('.form-field.caller').click().find('.dropdown__option').eq(2).click();
+    cy.selectMessage('transferFrom', 5);
+    cy.get('.form-field.to').find('.dropdown').click().find('.dropdown__option').eq(2).click();
+    cy.get('.form-field.value').find('input[type="text"]').type(`${transferValue}`);
+    cy.call();
+    cy.selectMessage('balanceOf', 1);
+    cy.get('.form-field.owner').find('.dropdown').click().find('.dropdown__option').eq(2).click();
+    cy.assertReturnValue('balanceOf', `${transferValue}`);
   });
 });

cypress/integration/contracts/flipper.spec.ts → cypress/e2e/contracts/flipper.spec.ts

@@ -26,41 +26,25 @@ describe('Flipper Contract ', () => {
   });
 
   it(`submits instantiate transaction`, () => {
-    cy.get('[data-cy="submit-btn"]').click();
-    cy.get('[data-cy="transaction-complete"]', { timeout })
-      .should('be.visible')
-      .and('contain', 'contracts:Instantiated')
-      .and('contain', 'system:NewAccount')
-      .and('contain', 'balances:Endowed')
-      .and('contain', 'balances:Transfer')
-      .and('contain', 'balances:Reserved')
-      .and('contain', 'balances:Withdraw')
-      .and('contain', 'system:ExtrinsicSuccess');
-
-    cy.get('[data-cy="dismiss-notification"]').click();
+    cy.instantiate();
   });
   it('redirects to contract page after instantiation', () => {
     cy.url().should('contain', '/contract/');
   });
   it('calling get() returns true', () => {
-    cy.get('.constructorDropdown').click().find('.dropdown__option').eq(1).click();
-    cy.get('.constructorDropdown').find('.dropdown__single-value').should('contain', 'get');
-    cy.contains('Read').click();
-    cy.get('[data-cy="get"]').find('.return-value').should('contain', 'true');
+    cy.selectMessage('get', 1);
+    cy.assertReturnValue('get', 'true');
   });
   it(`submits flip() transaction`, () => {
-    cy.get('.constructorDropdown').click().find('.dropdown__option').eq(0).click();
-    cy.get('.constructorDropdown').find('.dropdown__single-value').should('contain', 'flip');
+    cy.selectMessage('flip', 0);
     cy.contains('Call').click();
     cy.get('[data-cy="transaction-complete"]', { timeout })
       .should('be.visible')
       .and('contain', 'system:ExtrinsicSuccess')
       .and('contain', 'balances:Withdraw');
   });
   it('calling get() returns false', () => {
-    cy.get('.constructorDropdown').click().find('.dropdown__option').eq(1).click();
-    cy.get('.constructorDropdown').find('.dropdown__single-value').should('contain', 'get');
-    cy.contains('Read').click();
-    cy.get('[data-cy="get"]').find('.return-value').should('contain', 'false');
+    cy.selectMessage('get', 1);
+    cy.assertReturnValue('get', 'false');
   });
 });

cypress/support/commands.ts

@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+import 'cypress-file-upload';
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      instantiate(): Chainable<Element>;
+      call(): Chainable<Element>;
+      selectMessage(name: string, index: number): Chainable<Element>;
+      assertReturnValue(messageName: string, value: string): Chainable<Element>;
+    }
+  }
+}

cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/component.ts

@@ -0,0 +1,12 @@
+import './commands';
+
+import { mount } from 'cypress/react';
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount);

cypress/support/e2e.ts

@@ -0,0 +1,39 @@
+import './commands';
+
+const timeout = 25000;
+
+Cypress.Commands.add('instantiate', () => {
+  cy.get('[data-cy="submit-btn"]').click();
+  cy.get('[data-cy="transaction-complete"]', { timeout })
+    .should('be.visible')
+    .and('contain', 'contracts:Instantiated')
+    .and('contain', 'system:NewAccount')
+    .and('contain', 'balances:Endowed')
+    .and('contain', 'balances:Transfer')
+    .and('contain', 'balances:Reserved')
+    .and('contain', 'balances:Withdraw')
+    .and('contain', 'system:ExtrinsicSuccess');
+  cy.get('[data-cy="dismiss-notification"]').click();
+});
+
+Cypress.Commands.add('call', () => {
+  cy.contains('Call').click();
+  cy.get('[data-cy="transaction-complete"]', { timeout })
+    .should('be.visible')
+    .and('contain', 'system:ExtrinsicSuccess')
+    .and('contain', 'balances:Transfer')
+    .and('contain', 'balances:Reserved')
+    .and('contain', 'balances:Withdraw')
+    .and('contain', 'contracts:ContractEmitted');
+  cy.get('[data-cy="dismiss-notification"]').click();
+});
+
+Cypress.Commands.add('selectMessage', (name, index) => {
+  cy.get('.constructorDropdown').click().find('.dropdown__option').eq(index).click();
+  cy.get('.constructorDropdown').find('.dropdown__single-value').should('contain', name);
+});
+
+Cypress.Commands.add('assertReturnValue', (messageName, value) => {
+  cy.contains('Read').click();
+  cy.get(`[data-cy=${messageName}]`).find('.return-value').should('contain', `${value}`);
+});

cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node", "cypress-file-upload"]
+  },
+  "include": ["**/*.ts"]
+}

package.json

@@ -59,16 +59,13 @@
     "@types/node": "^17.0.33",
     "@types/react-dom": "^18.0.4",
     "@types/react-dropzone": "^5.1.0",
-    "@types/react-router": "^5.1.18",
-    "@types/react-router-dom": "^5.3.3",
     "@types/react-select": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
     "@vitejs/plugin-react": "^1.3.2",
     "autoprefixer": "^10.4.7",
-    "cypress": "^9.6.1",
+    "cypress": "^10.2.0",
     "cypress-file-upload": "^5.0.8",
-    "cypress-wait-until": "^1.7.2",
     "eslint": "^8.15.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^2.7.1",

src/ui/components/contract/Interact.tsx

@@ -198,7 +198,7 @@ export const InteractTab = ({ contract }: Props) => {
       <div className="col-span-6 lg:col-span-6 2xl:col-span-7 rounded-lg w-full">
         <Form>
           <FormField
-            className="mb-8"
+            className="mb-8 caller"
             help="The sending account for this interaction. Any transaction fees will be deducted from this account."
             id="accountId"
             label="Account"

tsconfig.json

@@ -28,8 +28,7 @@
       "types/*": ["./src/types/*"],
       "ui": ["./src/ui"],
       "ui/*": ["./src/ui/*"]
-    },
-    "types": ["cypress", "cypress-wait-until"]
+    }
   },
   "include": ["src"]
 }