test: support stubbing subgraph data in cypress (#2259)

* upgrade to 7.0

* first iteration of stubbing subgraph in integration tests

* added fixtures

* add tests for fee tier distribution and liquidity chart

* remove unused test utils

* update yarn.lock

* fixed merge artifacts

cypress/fixtures/subgraph/feeTierDistribution.json

@@ -0,0 +1,27 @@
+{
+  "data": {
+    "_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/fixtures/subgraph/v3Ticks.json

@@ -0,0 +1,48 @@
+{
+  "data": {
+    "ticks": [
+      {
+        "tickIdx": "-100",
+        "liquidityNet": "1500.0",
+        "price0": "1000",
+        "price1": "0.01"
+      },
+      {
+        "tickIdx": "-50",
+        "liquidityNet": "1200.0",
+        "price0": "1000",
+        "price1": "0.01"
+      },
+      {
+        "tickIdx": "-25",
+        "liquidityNet": "1000.0",
+        "price0": "1000",
+        "price1": "0.01"
+      },
+      {
+        "tickIdx": "-24",
+        "liquidityNet": "300.0",
+        "price0": "1000",
+        "price1": "0.01"
+      },
+      {
+        "tickIdx": "-23",
+        "liquidityNet": "200.0",
+        "price0": "1000",
+        "price1": "0.01"
+      },
+      {
+        "tickIdx": "-22",
+        "liquidityNet": "100.0",
+        "price0": "1000",
+        "price1": "0.01"
+      },
+      {
+        "tickIdx": "100",
+        "liquidityNet": "100.0",
+        "price0": "1000",
+        "price1": "0.01"
+      }
+    ]
+  }
+}

cypress/integration/add-liquidity.test.ts

@@ -1,13 +1,4 @@
-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')
@@ -33,31 +24,31 @@ describe('Add Liquidity', () => {
     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': '*',
-            },
-          })
-        }
-      })
+  describe('with subgraph', () => {
+    it('loads fee tier distribution', () => {
+      cy.intercept('POST', '/subgraphs/name/uniswap/uniswap-v3', { fixture: 'subgraph/feeTierDistribution.json' }).as(
+        'getFeeTierDistributionQuery'
+      )
 
       cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/0xc778417E063141139Fce010982780140Aa0cD5Ab')
 
-      cy.wait('@feeTierDistributionQuery')
+      cy.wait('@getFeeTierDistributionQuery')
+
+      cy.get('[data-test-id=selected-fee-label]').should('contain.text', '0.3% fee tier')
+      cy.get('[data-test-id=selected-fee-percentage]').should('contain.text', '70%')
+    })
+
+    it('loads ticks data', () => {
+      cy.intercept('POST', '/subgraphs/name/uniswap/uniswap-v3', { fixture: 'subgraph/v3Ticks.json' }).as(
+        'getV3TicksQuery'
+      )
+
+      cy.visit('/add/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85/0xc778417E063141139Fce010982780140Aa0cD5Ab/3000')
+
+      cy.wait('@getV3TicksQuery')
 
-      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%')
+      // TODO: test ticks data (requires stubbing infura pool.tickCurrent)
+      cy.get('[data-test-id=liquidity-chart-loader]').should('exist')
     })
   })
 })

src/components/FeeSelector/index.tsx

@@ -149,10 +149,10 @@ export default function FeeSelector({
                 </>
               ) : (
                 <>
-                  <TYPE.label className="selected-fee-label">
+                  <TYPE.label data-test-id="selected-fee-label">
                     <Trans>{FeeAmountLabel[feeAmount].label}% fee tier</Trans>
                   </TYPE.label>
-                  <Box style={{ width: 'fit-content', marginTop: '8px' }} className="selected-fee-percentage">
+                  <Box style={{ width: 'fit-content', marginTop: '8px' }} data-test-id="selected-fee-percentage">
                     {distributions && feeAmount && <FeeTierPercentageBadge percentage={distributions[feeAmount]} />}
                   </Box>
                 </>

src/components/LiquidityChartRangeInput/index.tsx

@@ -166,7 +166,7 @@ export default function LiquidityChartRangeInput({
           icon={<Inbox size={56} stroke={theme.text1} />}
         />
       ) : isLoading ? (
-        <InfoBox icon={<Loader size="40px" stroke={theme.text4} />} />
+        <InfoBox icon={<Loader size="40px" stroke={theme.text4} data-test-id="liquidity-chart-loader" />} />
       ) : isError ? (
         <InfoBox
           message={<Trans>Liquidity data not available.</Trans>}