test: update cypress (Uniswap#3908)

* test: update cypress

* chore: comment on infura origin

* test: split build and serve

* chore: rm setupNodeEvents

Author: zzmp

.github/workflows/integration-tests.yaml

@@ -37,11 +37,15 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 
-      - run: yarn build:e2e
+      - run: yarn build
         env:
           CI: false # disables lint checks when building
 
-      - run: yarn test:e2e:ci
+      - run: yarn serve &
+        env:
+          CI: false # disables lint checks when building
+      
+      - run: yarn cypress run --record
         env:
           CYPRESS_INTEGRATION_TEST_PRIVATE_KEY: ${{ secrets.CYPRESS_INTEGRATION_TEST_PRIVATE_KEY }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

CONTRIBUTING.md

@@ -4,25 +4,59 @@ Thank you for your interest in contributing to the Uniswap interface! 🦄
 
 # Development
 
+Before running anything, you'll need to install the dependencies:
+
+```
+yarn install
+```
+
 ## Running the interface locally
 
-1. `yarn install`
-1. `yarn start`
+```
+yarn start
+```
+
+The interface should automatically open. If it does not, navigate to [http://localhost:3000].
 
 ## Creating a production build
 
-1. `yarn install`
-1. `yarn build`
+```
+yarn build
+```
+
+To serve the production build:
+
+```
+yarn serve
+```
+
+Then, navigate to [http://localhost:3000] to see it.
 
 ## Running unit tests
 
-- Run unit tests: `yarn test`
-- Run unit tests and show test coverage info for all tests: `yarn test --watchAll`
+```
+yarn test
+```
+
+By default, this runs only unit tests that have been affected since the last commit. To run _all_ unit tests:
+
+```
+yarn test --watchAll
+```
 
 ## Running cypress integration tests
 
-1. `yarn build:e2e`
-2. `yarn test:e2e`
+Integration tests require a server to be running. In order to see your changes quickly, run `start` in its own tab/window:
+
+```
+yarn start
+```
+
+Integration tests are run using `cypress`. When developing locally, use `cypress open` for an interactive UI, and to inspect the rendered page:
+
+```
+yarn cypress open
+```
 
 ## Engineering standards
 

cypress.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  projectId: 'yp82ef',
+  video: false,
+  defaultCommandTimeout: 10000,
+  chromeWebSecurity: false,
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
+})

cypress.json

@@ -1,5 +1,6 @@
 describe('Pool', () => {
   beforeEach(() => cy.visit('/pool'))
+
   it('add liquidity links to /add/ETH', () => {
     cy.get('#join-pool-button').click()
     cy.url().should('contain', '/add/ETH')