chore: support stubbing subgraph in integration tests (#2039)

* upgrade to 7.0

* first iteration of stubbing subgraph in integration tests

cypress.json

@@ -2,7 +2,6 @@
   "projectId": "yp82ef",
   "baseUrl": "http://localhost:3000",
   "pluginsFile": false,
-  "fixturesFolder": false,
   "supportFile": "cypress/support/index.js",
   "video": false,
   "defaultCommandTimeout": 10000

cypress/fixtures/feeTierDistribution.json

+{
+  "_meta": {
+    "block": {
+      "number": 99999999
+    }
+  },
+  "asToken0": [
+    {
+      "feeTier": "500",
+      "totalValueLockedToken0": "0",
+      "totalValueLockedToken1": "1"
+    },
+    {
+      "feeTier": "3000",
+      "totalValueLockedToken0": "0",
+      "totalValueLockedToken1": "7"
+    },
+    {
+      "feeTier": "10000",
+      "totalValueLockedToken0": "0",
+      "totalValueLockedToken1": "2"
+    }
+  ],
+  "asToken1": []
+}

cypress/integration/add-liquidity.test.ts

+import { CyHttpMessages } from 'cypress/types/net-stubbing'
+import { aliasQuery, hasQuery } from '../utils/graphql-test-utils'
+
 describe('Add Liquidity', () => {
+  beforeEach(() => {
+    cy.intercept('POST', '/subgraphs/name/uniswap/uniswap-v3', (req) => {
+      aliasQuery(req, 'feeTierDistribution')
+    })
+  })
+
   it('loads the two correct tokens', () => {
     cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/0xc778417E063141139Fce010982780140Aa0cD5Ab/500')
     cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'MKR')
@@ -23,4 +32,32 @@ describe('Add Liquidity', () => {
     cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
     cy.get('#add-liquidity-input-tokena .token-symbol-container').should('contain.text', 'MKR')
   })
+
+  it('loads fee tier distribution', () => {
+    cy.fixture('feeTierDistribution.json').then((feeTierDistribution) => {
+      cy.intercept('POST', '/subgraphs/name/uniswap/uniswap-v3', (req: CyHttpMessages.IncomingHttpRequest) => {
+        if (hasQuery(req, 'feeTierDistribution')) {
+          req.alias = 'feeTierDistributionQuery'
+
+          req.reply({
+            body: {
+              data: {
+                ...feeTierDistribution,
+              },
+            },
+            headers: {
+              'access-control-allow-origin': '*',
+            },
+          })
+        }
+      })
+
+      cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/0xc778417E063141139Fce010982780140Aa0cD5Ab')
+
+      cy.wait('@feeTierDistributionQuery')
+
+      cy.get('#add-liquidity-selected-fee .selected-fee-label').should('contain.text', '0.3% fee tier')
+      cy.get('#add-liquidity-selected-fee .selected-fee-percentage').should('contain.text', '70%')
+    })
+  })
 })

cypress/utils/graphql-test-utils.ts

+// Utility to match GraphQL mutation based on the query name
+export const hasQuery = (req: any, queryName: string) => {
+  const { body } = req
+  return body.hasOwnProperty('query') && body.query.includes(queryName)
+}
+
+// Alias query if queryName  matches
+export const aliasQuery = (req: any, queryName: string) => {
+  if (hasQuery(req, queryName)) {
+    req.alias = `${queryName}Query`
+  }
+}

package.json

@@ -66,7 +66,7 @@
     "cids": "^1.0.0",
     "copy-to-clipboard": "^3.2.0",
     "cross-env": "^7.0.2",
-    "cypress": "^4.11.0",
+    "cypress": "^7.7.0",
     "d3": "^7.0.0",
     "eslint": "^7.11.0",
     "eslint-config-prettier": "^6.11.0",

src/components/FeeSelector/index.tsx

@@ -137,7 +137,7 @@ export default function FeeSelector({
       <DynamicSection gap="md" disabled={disabled}>
         <FocusedOutlineCard pulsing={pulsing} onAnimationEnd={() => setPulsing(false)}>
           <RowBetween>
-            <AutoColumn>
+            <AutoColumn id="add-liquidity-selected-fee">
               {!feeAmount ? (
                 <>
                   <TYPE.label>
@@ -149,10 +149,10 @@ export default function FeeSelector({
                 </>
               ) : (
                 <>
-                  <TYPE.label>
+                  <TYPE.label className="selected-fee-label">
                     <Trans>{FeeAmountLabel[feeAmount].label}% fee tier</Trans>
                   </TYPE.label>
-                  <Box style={{ width: 'fit-content', marginTop: '8px' }}>
+                  <Box style={{ width: 'fit-content', marginTop: '8px' }} className="selected-fee-percentage">
                     {distributions && feeAmount && <FeeTierPercentageBadge percentage={distributions[feeAmount]} />}
                   </Box>
                 </>

src/state/data/slice.ts

@@ -8,7 +8,10 @@ import { AppState } from 'state'
 // List of supported subgraphs. Note that the app currently only support one active subgraph at a time
 const CHAIN_SUBGRAPH_URL: Record<number, string> = {
   [SupportedChainId.MAINNET]: 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3',
+  [SupportedChainId.RINKEBY]: 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3',
+
   [SupportedChainId.ARBITRUM_ONE]: 'https://api.thegraph.com/subgraphs/name/ianlapham/uniswap-arbitrum-one',
+
   [SupportedChainId.OPTIMISM]: 'https://api.thegraph.com/subgraphs/name/ianlapham/uniswap-optimism',
 }