Cypress implementation (#549)

* Cypress io implementation

* code cleanup

* fix test typo

* refactor tsconfig && integration pipeline

* refactor integration pipeline

.eslintrc

@@ -1,12 +1,15 @@
 {
   "root": true,
-  "extends": ["react-app"],
-  "plugins": ["@typescript-eslint"],
+  "extends": ["react-app", "plugin:cypress/recommended"],
+  "plugins": ["@typescript-eslint", "cypress"],
   "parserOptions": {
     "ecmaVersion": 6,
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
     }
+  },
+  "env": {
+    "cypress/globals": true
   }
 }

.github/workflows/integration-tests.yml

@@ -0,0 +1,56 @@
+name: Integration tests
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - master
+      - develop
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  cypress-run:
+    # TODO: Add some condition if we don't want to trigger this on every pr. (maybe some flag)
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    strategy:
+      matrix:
+        node-version: [16.13.0]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+
+      - name: Cypress cache
+        id: cypress-cache
+        uses: actions/cache@v2
+        with:
+          path: |
+            ~/.cache/Cypress
+          key: cypress-cache-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            cypress-cache
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Disable Cypress warnings
+        run: |
+          echo -e 'pcm.!default {\n type hw\n card 0\n}\n\nctl.!default {\n type hw\n card 0\n}' > ~/.asoundrc
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        env:
+          NODE_ENV: 'development'
+        with:
+          browser: chrome
+          headless: true
+          start: yarn start
+          wait-on: 'http://localhost:3000'
+          wait-on-timeout: 300

.gitignore

@@ -39,3 +39,7 @@ yarn-error.log*
 src/types/*
 !src/types/types.d.ts
 !src/types/types.guilds.d.ts
+
+# cypress
+cypress/screenshots
+cypress/videos

cypress.json

@@ -0,0 +1,17 @@
+{
+    "integrationFolder": "cypress/integration",
+    "experimentalStudio": true,
+    "viewportWidth": 1920,
+    "viewportHeight": 1080,
+    "waitForAnimations": true,
+    "chromeWebSecurity": false,
+    "watchForFileChanges": false,
+    "defaultCommandTimeout": 10000,
+    "videoUploadOnPasses": false,
+    "video": true,
+    "retries": {
+      "runMode": 2,
+      "openMode": 1
+    }
+  }
+

cypress/config/development.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:3000/#"
+}

cypress/config/production.json

@@ -0,0 +1,3 @@
+{
+    "baseUrl": "https://dxvote.eth.link/#"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/Guilds/Guilds.example.spec.ts

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+import Guilds from '../../support/pageObjects/Guilds';
+import { NETWORKS } from '../../support/utils';
+
+describe('Guilds main Page', () => {
+  NETWORKS.forEach(network => {
+    describe(`On ${network.name} network`, () => {
+      beforeEach(() => {
+        Guilds.goToGuildsPage(network.name);
+      });
+
+      it('Should render proposals list', () => {
+        Guilds.shouldRenderProposalsList();
+      });
+
+      it('Should render sidebar', () => {
+        Guilds.shouldRenderSidebar();
+      });
+    });
+  });
+});

cypress/plugins/index.ts

@@ -0,0 +1,40 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+const fs = require('fs-extra');
+const path = require('path');
+
+function getConfigurationByFile(file) {
+  const pathToConfigFile = path.resolve('cypress', 'config', `${file}.json`);
+  if (!fs.existsSync(pathToConfigFile)) {
+    return {};
+  }
+
+  return fs.readJson(pathToConfigFile);
+}
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = async (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config=
+  const envConfig = await getConfigurationByFile(
+    config.env.configFile ?? 'development'
+  );
+  const result = {
+    ...config,
+    ...envConfig,
+  };
+  console.debug(`Using baseUrl: ${result.baseUrl}`);
+  return result;
+};

cypress/support/commands.ts

@@ -0,0 +1,11 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+import '@testing-library/cypress/add-commands';

cypress/support/index.ts

@@ -0,0 +1,16 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import './commands';

cypress/support/pageObjects/Guilds.ts

@@ -0,0 +1,26 @@
+class Guilds {
+  public proposalsListId: string;
+  public sidebarId: string;
+
+  constructor() {
+    this.proposalsListId = 'proposals-list';
+    this.sidebarId = 'sidebar';
+  }
+
+  goToGuildsPage(network: string = 'rinkeby') {
+    const baseUrl = Cypress.config('baseUrl');
+    cy.visit(`${baseUrl}/guilds/${network}`, { timeout: 120000 });
+  }
+
+  shouldRenderProposalsList() {
+    cy.findByTestId(this.proposalsListId).should('be.visible');
+  }
+
+  shouldRenderSidebar() {
+    cy.findByTestId(this.sidebarId).should('be.visible');
+  }
+}
+
+const guilds: Guilds = new Guilds();
+
+export default guilds;

cypress/support/utils.ts

@@ -0,0 +1 @@
+export { NETWORKS, NETWORK_NAMES } from '../../src/utils';

cypress/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+      "target": "es5",
+      "lib": ["es5", "dom"],
+      "types": ["node", "cypress", "@testing-library/cypress"], 
+      "typeRoots": ["../node_modules/@types"],
+      "isolatedModules": false,
+    },
+    "include": ["**/*.ts"]
+  }

package.json

@@ -12,7 +12,12 @@
     "lint": "eslint src/",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,md}\" \"scripts/*.{js,jsx,ts,tsx,json,md}\"",
     "format-check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,md}\" \"scripts/*.{js,jsx,ts,tsx,json,md}\"",
-    "postinstall": "typechain --target=ethers-v5 --out-dir src/types/ './src/contracts/*.json'"
+    "postinstall": "typechain --target=ethers-v5 --out-dir src/types/ './src/contracts/*.json'",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run",
+    "cy:run:development": "cypress run --env configFile=development",
+    "cy:run:production": "cypress run --env configFile=production",
+    "test:e2e": "start-server-and-test 'yarn start --no-browser' 3000 cy:run:development"
   },
   "engines": {
     "node": "^16.13.0"
@@ -79,15 +84,19 @@
   "devDependencies": {
     "@nomiclabs/hardhat-truffle5": "^2.0.0",
     "@nomiclabs/hardhat-web3": "^2.0.0",
+    "@testing-library/cypress": "^8.0.2",
     "@typechain/ethers-v5": "^8.0.5",
     "@types/jsonexport": "^3.0.2",
     "@types/react-router-dom": "^5.1.2",
     "cra-bundle-analyzer": "^0.1.0",
+    "cypress": "^9.2.0",
     "dotenv": "^8.1.0",
     "dotenv-cli": "^4.0.0",
+    "eslint-plugin-cypress": "^2.12.1",
     "hardhat": "^2.2.0",
     "hardhat-dependency-compiler": "^1.1.1",
     "prettier": "2.5.0",
+    "start-server-and-test": "^1.14.0",
     "typechain": "^6.0.5",
     "web3": "^1.3.5"
   },

scripts/start.sh

@@ -1,4 +1,10 @@
 #!/usr/bin/env bash
 export REACT_APP_GIT_SHA=$(echo $(git rev-parse  HEAD) | cut -c1-9)
 export SKIP_PREFLIGHT_CHECK=true
+
+if [[ $* == *--no-browser* ]]; then
+    echo "Setting BROWSER=none. No browser window will pop up"
+    export BROWSER=none
+fi
+
 FORCE_COLOR=true npx react-app-rewired start | cat

src/components/Guilds/Sidebar/index.tsx

@@ -99,7 +99,7 @@ export const Sidebar = () => {
   const [isMember, setIsMember] = useState(false);
 
   return (
-    <SidebarWrapper>
+    <SidebarWrapper data-testid="sidebar">
       <DaoInfoPanel>
         <DaoInfo>
           <DaoBrand>

src/pages/Guilds/Guilds.tsx

@@ -53,7 +53,7 @@ const GuildsPage: React.FC = () => {
       </SidebarContent>
       <PageContent>
         <Filter />
-        <ProposalsList>
+        <ProposalsList data-testid="proposals-list">
           {loading && (
             <>
               <SkeletonProposalCard />