Merge branch 'develop' of github.com:gnosis/dex-react into develop

Author: Velenir

build/__snowpack__/env.js

@@ -0,0 +1 @@
+export default {"MODE":"production","NODE_ENV":"production","SSR":false};

cypress.json

@@ -1,4 +1,5 @@
 {
   "baseUrl": "http://localhost:8080",
-  "projectId": "digs58"
+  "projectId": "digs58",
+  "defaultCommandTimeout": 10000
 }

cypress/integration/about.test.ts

@@ -1,8 +1,22 @@
 describe('About', () => {
-  beforeEach(() => {
-    cy.visit('/about')
+  it('Navigates from link in the footer', () => {
+    // GIVEN: At home page, scrolled to the bottom
+    cy.visitApp('/')
+    cy.scrollTo('bottom')
+
+    // WHEN: Click on the "About" link in the footer
+    cy.get('footer').contains('About').click()
+
+    // THEN: We navigate to the about page
+    cy.url().should('contain', '/about')
   })
-  it('Does not do much!', () => {
-    expect(true).to.equal(true)
+
+  it('Navigates using URL', () => {
+    // GIVEN: about page
+    cy.visitApp('/about')
+
+    // WHEN: -
+    // THEN: There's the heading we expect
+    cy.get('main h1:first').contains('About Gnosis Protocol Web')
   })
 })

cypress/support/commands.js

@@ -1,25 +1,16 @@
-// ***********************************************
-// 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
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+/**
+ * Substitute for "visit" command. The original visit command should not be used, when the tests depend on the
+ * scroll, because cypress has an issue with "scroll-behaviour: smooth"
+ *
+ * See https://github.com/cypress-io/cypress/issues/3200#issuecomment-672788861
+ *
+ * @example cy.visitApp('/about')
+ */
+Cypress.Commands.add('visitApp', (url) => {
+  cy.visit(url)
+  cy.document().then((document) => {
+    const node = document.createElement('style')
+    node.innerHTML = 'html { scroll-behavior: inherit !important; }'
+    document.body.appendChild(node)
+  })
+})

cypress/support/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable {
+    /**
+     * Substitute for "visit" command. The original visit command should not be used, when the tests depend on the
+     * scroll, because cypress has an issue with "scroll-behaviour: smooth
+     *
+     * See https://github.com/cypress-io/cypress/issues/3200#issuecomment-672788861
+     *
+     * @example cy.visitApp('/about')
+     */
+    visitApp(url: string): Chainable<Element>
+  }
+}

empty.webpack.config

@@ -0,0 +1,89 @@
+const { chromium } = require('playwright')
+// const Web3 = require('web3')
+const webpack = require('webpack')
+const path = require('path')
+const compiler = webpack({
+  entry: './playwright/inject_provider.js',
+  output: {
+    path: path.resolve(__dirname, './playwright/build/'),
+    filename: 'inject_provider.js',
+  },
+  cache: true,
+})
+
+;(async () => {
+  await new Promise((resolve, reject) => {
+    compiler.run((error, stats) => {
+      if (error) {
+        return reject(error)
+      }
+
+      resolve(stats)
+    })
+  })
+  const browser = await chromium.launch({
+    headless: false,
+  })
+  const context = await browser.newContext()
+
+  // Open new page
+  const page = await context.newPage()
+
+  // window.ethereum = {
+  //   request(request) {
+  //     if (request.method === 'eth_accounts') return [account]
+
+  //     if (request.method === 'eth_chainId') return '0x4'
+  //   },
+  //   enable() {
+  //     return [account]
+  //   },
+  // }
+
+  await page.addInitScript({
+    path: './playwright/init/inject_provider.js',
+  })
+
+  await page.addInitScript((pk) => {
+    // async function injectProvider() {
+    //   await import('https://unpkg.com/[email protected]/dist/web3.min.js')
+    //   /** @type typeof import('web3').default */
+    //   const Web3 = window.Web3
+    //   const web3 = new Web3('https://rinkeby.infura.io/v3/3c9b697bcf414df8b2e59f7f5523a93a')
+    //   web3.eth.accounts.wallet.add(pk)
+
+    //   window.web3 = web3
+    //   window.ethereum = web3.currentProvider
+    //   // window.ethereum = new HDWalletProvider({
+    //   //   privateKeys: [pk],
+    //   //   providerOrUrl: 'https://rinkeby.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847',
+    //   // })
+    // }
+    // injectProvider()
+
+    window.injectProvider({
+      pk,
+      url: 'https://rinkeby.infura.io/v3/3c9b697bcf414df8b2e59f7f5523a93a',
+    })
+  }, '0xad20c82497421e9784f18460ad2fe84f73569068e98e270b3e63743268af5763')
+
+  // Go to http://localhost:8081/
+  await page.goto('http://localhost:8081/')
+
+  // Go to http://localhost:8081/trade/USDC-DAI?sell=0&price=0
+  await page.goto('http://localhost:8081/trade/USDC-DAI?sell=0&price=0')
+
+  // Go to http://localhost:8081/trade/USDC-DAI?sell=0&price=0&from=&expires=
+  await page.goto('http://localhost:8081/trade/USDC-DAI?sell=0&price=0&from=&expires=')
+
+  // Click text=/.*Connect Wallet.*/
+  await page.click('text=/.*Connect Wallet.*/')
+
+  await page.click('text=/.*Web3.*/')
+  // Close page
+  // await page.close()
+
+  // // ---------------------
+  // await context.close()
+  // await browser.close()
+})()

output.js

@@ -28,7 +28,8 @@
     "docs": "start-storybook --docs",
     "build-docs": "build-storybook --docs",
     "check-types": "tsc --noEmit --incremental",
-    "cypress": "cypress open",
+    "cypress": "CYPRESS_BASE_URL=http://localhost:8081 cypress open",
+    "cypress:dev": "cypress open",
     "cypress:run": "cypress run"
   },
   "husky": {

package.json

@@ -0,0 +1,19 @@
+import HDWalletProvider from '@truffle/hdwallet-provider'
+
+const pk = '0xad20c82497421e9784f18460ad2fe84f73569068e98e270b3e63743268af5763'
+
+// window.ethereum = new HDWalletProvider({
+//   privateKeys: [pk],
+//   providerOrUrl: 'https://rinkeby.infura.io/v3/3c9b697bcf414df8b2e59f7f5523a93a',
+// })
+
+window.injectProvider = ({ pk, url }) => {
+  const provider = new HDWalletProvider({
+    privateKeys: [pk],
+    providerOrUrl: url,
+  })
+
+  provider.enable = () => {}
+
+  window.ethereum = provider
+}

playwright/init/inject_provider.js

@@ -0,0 +1,37 @@
+import { chromium, ChromiumBrowser, Page } from 'playwright'
+let browser: ChromiumBrowser
+let page: Page
+
+const baseURL = process.env.BASE_URL || 'http://localhost:8080 '
+const isDebug = !!process.env.PWDEBUG
+let slowMo: number | undefined = undefined
+
+if (isDebug) {
+  // timeout to have time to look around in the browser
+  jest.setTimeout(15000)
+  // slow down playright actions
+  slowMo = 2000
+} else {
+  // close after only when not debugging
+  afterAll(() => browser.close())
+  afterEach(() => page.close())
+}
+
+beforeAll(async () => {
+  // launch chrome,headless by default
+  browser = await chromium.launch({ slowMo })
+})
+beforeEach(async () => {
+  // new page per test
+  page = await browser.newPage()
+})
+
+describe('About', () => {
+  it('Page has expected title', async () => {
+    // GIVEN: At home page
+    await page.goto(baseURL)
+
+    // THEN: page has title
+    expect(await page.title()).toBe('Gnosis Protocol Web')
+  })
+})