Cypress testing/add connection metamask wallet test (#9429)

* updating dependencies to use custom fork of cypress-metamask

* add script and options for running cypress tests

* redirect webserver logs to /dev/null

* update docker-compose file: use default accounts for ganache

* test running connect site with metamask on ci

* attempt at passing in env from config

* add ganache-cli to dev dependencies

* updated script call

* moving where NETWORK_NAME is defined

* build please

* moving network_name again

* remove network_name

* add superuser creation to script

* take two at creating a superuser

* third times a charm - create superuser

* try loading user data from fixtures

* scroll metamask button into view

* add cypress settings to gain access to screenshots/videos

* no longer need the scrolling command

.gitignore

@@ -57,3 +57,7 @@ src/
 _build/
 **/.vs
 **/dist/*
+
+# cypress artifacts
+cypress/videos
+cypress/screenshots

.travis.yml

@@ -53,7 +53,6 @@ jobs:
         - (cd app; python3 ./manage.py collectstatic --noinput --disable-collectfast)
         - pytest -p no:ethereum -p no:warnings
         # Run cypress tests
-        - export SECRET_WORDS="${SECRET_WORDS}"
         - bin/ci/cypress-run
         # Generate Markdown documentation and static docs page.
         - pydocmd build

app/app/travis.env

@@ -8,4 +8,3 @@ GEOIP_PATH=/opt/GeoIP/
 WEB3_HTTP_PROVIDER=https://rinkeby.infura.io/v3/e24d261245fa47d28f0bb4b0dda7a2cb
 INFURA_USE_V3=True
 INFURA_V3_PROJECT_ID=e24d261245fa47d28f0bb4b0dda7a2cb
-NETWORK_NAME=localhost

bin/ci/cypress-run

@@ -2,14 +2,31 @@
 set -eou pipefail
 
 # start ganache and send to background
-yarn exec ganche-cli -m "${SECRET_WORDS}" -h 0.0.0.0 &
+node_modules/.bin/ganache-cli -m "${SECRET_WORDS}" -h 0.0.0.0 &
 
-# set up and run web application (sends to background but still writes to stdout)
+# build assets
+mkdir -p app/assets/{static,media}
+export STATICFILES_DIRS="${TRAVIS_BUILD_DIR}/app/assets/"
+python3 app/manage.py bundle
+yarn run build
+
+python3 app/manage.py collectstatic --noinput --disable-collectfast
+
+# set up database
 python3 app/manage.py migrate
+python3 app/manage.py loaddata "${TRAVIS_BUILD_DIR}/app/app/fixtures/users.json"
+
+# run app server
 python3 app/manage.py runserver 0.0.0.0:8000 &
 
 # run cypress tests
+export NETWORK_NAME=localhost
 export CYPRESS_REMOTE_DEBUGGING_PORT=9222
-yarn exec cypress install
-yarn exec wait-on http://0.0.0.0:8000
-node_modules/.bin/cypress run --headed -b chrome
+export VERBOSE=1
+node_modules/.bin/cypress install
+node_modules/.bin/wait-on http://0.0.0.0:8000
+node_modules/.bin/cypress run \
+  --browser chrome \
+  --headed \
+  --record \
+  --key 23c824d9-b9eb-4aea-88fd-d0bb06a9eb51

cypress.json

@@ -1 +1,5 @@
-{}
+{
+  "chromeWebSecurity": true,
+  "baseUrl": "http://localhost:8000",
+  "projectId": "e7rv3w"
+}

cypress/integration/connect-wallet/test_connect_with_metamask.js

@@ -0,0 +1,24 @@
+describe('connect wallet: metamask', () => {
+  before(() => {
+    cy.setupMetamask();
+    cy.changeMetamaskNetwork('localhost');
+  });
+
+  after(() => {
+    cy.disconnectMetamaskWallet();
+    cy.clearWindows();
+  });
+
+  it('pulls address from metamask accounts', () => {
+    cy.impersonateUser();
+
+    cy.get('#navbarDropdownWallet').as('wallet').click();
+    cy.contains('Connect Wallet').click();
+    cy.contains('MetaMask').click();
+
+    cy.acceptMetamaskAccess();
+
+    cy.get('@wallet').click();
+    cy.get('#wallet-btn').should('contain.text', 'Change Wallet');
+  });
+});

cypress/plugins/index.js

@@ -14,4 +14,5 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+  require('cypress-metamask/plugins')(on);
 };

cypress/support/commands.js

@@ -23,3 +23,84 @@
 //
 // -- This is will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+// authentication
+Cypress.Commands.add('loginRootUser', () => {
+  const url = '_administrationlogin/';
+
+  cy.request({url, method: 'GET', log: true}).then((response) => {
+    const body = Cypress.$(response.body);
+    const csrfmiddlewaretoken = body.find('input[name=csrfmiddlewaretoken]').val();
+
+    cy.request({
+      url,
+      method: 'POST',
+      body: {
+        csrfmiddlewaretoken,
+        username: 'root',
+        password: 'gitcoinco'
+      },
+      form: true
+    });
+  });
+});
+
+Cypress.Commands.add('impersonateUser', () => {
+  cy.loginRootUser();
+  cy.visit('impersonate/4/');
+});
+
+Cypress.Commands.add('logout', () => {
+  cy.request('logout/?next=/');
+});
+
+// grants
+Cypress.Commands.add('createGrantSubmission', (options = {}) => {
+  cy.logout();
+  cy.impersonateUser();
+
+  const url = 'grants/new/';
+
+  return cy.request(url)
+    .then((response) => {
+      const body = Cypress.$(response.body);
+      const csrfmiddlewaretoken = body.find('input[name=csrfmiddlewaretoken]').val();
+
+      return cy.request({
+        url,
+        method: 'POST',
+        body: {
+          csrfmiddlewaretoken,
+          grant_type: options.grant_type || 'media',
+          title: options.title || 'Test Grant Submission',
+          description: options.description || 'Describing grant submission',
+          description_rich: options.description_rich || "{'ops':[{'insert':'The mission of the grant is to...},{'insert':'\n'}]}'",
+          has_external_funding: options.has_exeternal_funding || 'no',
+          eth_payout_address: options.eth_payout_address || '0xB81C935D01e734b3D8bb233F5c4E1D72DBC30f6c',
+          handle1: options.handle1 || '@gitcoin',
+          handle2: options.handle2 || '@kbw',
+          region: options.region || 'north_america',
+          reference_url: options.reference_url || 'https://gitcoin.co',
+          github_project_url: options.github_project_url || 'https://github.com/gitcoinco/web',
+          'team_members[]': options.team_members || '',
+          'categories[]': options.categories || 4
+        },
+        form: true
+      });
+    });
+});
+
+Cypress.Commands.add('approveGrant', (grantSlug) => {
+  cy.logout();
+  cy.loginRootUser();
+
+  const pk = grantSlug.match(/\/grants\/(\d*)\//)[1];
+  const changePath = `_administrationgrants/grant/${pk}/change/`;
+
+  cy.visit(changePath);
+  cy.get('[name=active]').check();
+  cy.get('[name=defer_clr_to]').select(pk);
+  cy.get('[name=_save]').click();
+
+  cy.logout();
+});

cypress/support/index.js

@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands';
+import 'cypress-metamask';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
@@ -24,3 +25,4 @@ Cypress.on('uncaught:exception', (err, runnable) => {
   // failing the test
   return false;
 });
+

package.json

@@ -27,10 +27,11 @@
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "css-loader": "^5.2.4",
-    "cypress": "^3.4.1",
+    "cypress": "^8.3.1",
     "eslint": "^7.14.0",
     "file-loader": "^6.2.0",
     "filemanager-webpack-plugin": "^4.0.0",
+    "ganache-cli": "^6.12.2",
     "glob": "^7.1.6",
     "sass": "^1.32.11",
     "sass-loader": "^11.0.1",
@@ -48,7 +49,7 @@
     "@joeattardi/emoji-button": "^3.1.1",
     "bootstrap": "4.6.0",
     "bootstrap-vue": "2.18.0",
-    "cypress-metamask": "github:gitcoinco/cypress-metamask",
+    "cypress-metamask": "https://github.com/gitcoinco/cypress-metamask",
     "daterangepicker": "3.0.5",
     "dompurify": "^2.2.9",
     "gsap": "3.6.0",