chore: initial set of cypress tests for nft (#5590)

* initial set of cypress tests for nft

cypress/e2e/nfts.test.ts

+import { getTestSelector } from '../utils'
+
+const COLLECTION_ADDRESS = '0xbd3531da5cf5857e7cfaa92426877b022e612cf8'
+
+describe('Testing nfts', () => {
+  before(() => {
+    cy.visit('/')
+  })
+
+  it('should load nft leaderboard', () => {
+    cy.get(getTestSelector('nft-nav')).first().click()
+    cy.get(getTestSelector('nft-nav')).first().should('exist')
+    cy.get(getTestSelector('nft-nav')).first().click()
+    cy.get(getTestSelector('nft-trending-collection')).its('length').should('be.gte', 25)
+  })
+
+  it('should load pudgy penguin collection page', () => {
+    cy.visit(`/#/nfts/collection/${COLLECTION_ADDRESS}`)
+    cy.get(getTestSelector('nft-collection-asset')).should('exist')
+    cy.get(getTestSelector('nft-collection-filter-buy-now')).should('not.exist')
+    cy.get(getTestSelector('nft-filter')).first().click()
+    cy.get(getTestSelector('nft-collection-filter-buy-now')).should('exist')
+  })
+
+  it('should be able to open bag and open sweep', () => {
+    cy.get(getTestSelector('nft-sweep-button')).first().click()
+    cy.get(getTestSelector('nft-empty-bag')).should('exist')
+    cy.get(getTestSelector('nft-sweep-slider')).should('exist')
+  })
+
+  it('should be able to navigate to activity', () => {
+    cy.get(getTestSelector('nft-activity')).first().click()
+    cy.get(getTestSelector('nft-activity-row')).should('exist')
+  })
+})

cypress/support/e2e.ts

@@ -65,6 +65,17 @@ beforeEach(() => {
     res.headers['origin'] = 'http://localhost:3000'
     res.continue()
   })
+
+  // Graphql security policies are based on Origin headers.
+  // These are stripped by cypress because chromeWebSecurity === false; this adds them back in.
+  cy.intercept('https://api.uniswap.org/v1/graphql', (res) => {
+    res.headers['origin'] = 'https://app.uniswap.org'
+    res.continue()
+  })
+  cy.intercept('https://beta.api.uniswap.org/v1/graphql', (res) => {
+    res.headers['origin'] = 'https://app.uniswap.org'
+    res.continue()
+  })
 })
 
 Cypress.on('uncaught:exception', (_err, _runnable) => {

src/components/NavBar/index.tsx

@@ -45,15 +45,17 @@ interface MenuItemProps {
   id?: NavLinkProps['id']
   isActive?: boolean
   children: ReactNode
+  dataTestId?: string
 }
 
-const MenuItem = ({ href, id, isActive, children }: MenuItemProps) => {
+const MenuItem = ({ href, dataTestId, id, isActive, children }: MenuItemProps) => {
   return (
     <NavLink
       to={href}
       className={isActive ? styles.activeMenuItem : styles.menuItem}
       id={id}
       style={{ textDecoration: 'none' }}
+      data-testid={dataTestId}
     >
       {children}
     </NavLink>
@@ -82,7 +84,7 @@ const PageTabs = () => {
       <MenuItem href={`/tokens/${chainName.toLowerCase()}`} isActive={pathname.startsWith('/tokens')}>
         <Trans>Tokens</Trans>
       </MenuItem>
-      <MenuItem href="/nfts" isActive={isNftPage}>
+      <MenuItem dataTestId="nft-nav" href="/nfts" isActive={isNftPage}>
         <Trans>NFTs</Trans>
       </MenuItem>
       <MenuItem href="/pool" id="pool-nav-link" isActive={isPoolActive}>

src/nft/components/bag/EmptyContent.tsx

@@ -26,7 +26,7 @@ const EmptyState = () => {
         <Center className={subhead}>No NFTs selected</Center>
       ) : (
         <Column gap="16">
-          <Center className={subhead} style={{ lineHeight: '24px' }}>
+          <Center data-testid="nft-empty-bag" className={subhead} style={{ lineHeight: '24px' }}>
             Your bag is empty
           </Center>
           <Center fontSize="12" fontWeight="normal" color="textSecondary" style={{ lineHeight: '16px' }}>

src/nft/components/collection/Activity.tsx

@@ -159,7 +159,7 @@ export const Activity = ({ contractAddress, rarityVerified, collectionName, chai
             style={{ overflow: 'unset' }}
           >
             {events.map((event, i) => (
-              <Box as="a" href={baseHref(event)} className={styles.eventRow} key={i}>
+              <Box as="a" data-testid="nft-activity-row" href={baseHref(event)} className={styles.eventRow} key={i}>
                 <ItemCell
                   event={event}
                   rarityVerified={rarityVerified}

src/nft/components/collection/ActivitySwitcher.tsx

@@ -48,6 +48,7 @@ export const ActivitySwitcher = ({
               as="button"
               className={!showActivity ? styles.activitySwitcherToggle : styles.selectedActivitySwitcherToggle}
               onClick={() => !showActivity && toggleActivity()}
+              data-testid="nft-activity"
             >
               Activity
             </Box>

src/nft/components/collection/CollectionAsset.tsx

@@ -122,7 +122,7 @@ export const CollectionAsset = ({
       removeAssetFromBag={handleRemoveAssetFromBag}
     >
       <Card.ImageContainer isDisabled={asset.notForSale}>
-        <StyledContainer>
+        <StyledContainer data-testid="nft-collection-asset">
           <Tooltip
             text={
               <Box as="span" className={bodySmall} color="textPrimary">

src/nft/components/collection/CollectionNfts.tsx

@@ -528,6 +528,7 @@ export const CollectionNfts = ({ contractAddress, collectionStats, rarityVerifie
               disabled={hasErc1155s}
               className={buttonTextMedium}
               onClick={handleSweepClick}
+              data-testid="nft-sweep-button"
             >
               <SweepIcon viewBox="0 0 24 24" width="20px" height="20px" />
               <SweepText fontWeight={600} color="currentColor" lineHeight="20px">

src/nft/components/collection/FilterButton.tsx

@@ -34,6 +34,7 @@ export const FilterButton = ({
       height="44"
       whiteSpace="nowrap"
       color="white"
+      data-testid="nft-filter"
     >
       <FilterIcon />
       {!isMobile ? (

src/nft/components/collection/Filters.tsx

@@ -53,7 +53,9 @@ export const Filters = ({ traitsByGroup }: { traitsByGroup: Record<string, Trait
           onMouseEnter={toggleBuyNowHover}
           onMouseLeave={toggleBuyNowHover}
         >
-          <Box className={subhead}>Buy now</Box>
+          <Box data-testid="nft-collection-filter-buy-now" className={subhead}>
+            Buy now
+          </Box>
           <Checkbox hovered={buyNowHovered} checked={buyNow} onClick={handleBuyNowToggle}>
             <span />
           </Checkbox>

src/nft/components/collection/Sweep.tsx

@@ -363,7 +363,7 @@ export const Sweep = ({ contractAddress, minPrice, maxPrice }: SweepProps) => {
   }
 
   return (
-    <SweepContainer>
+    <SweepContainer data-testid="nft-sweep-slider">
       <SweepLeftmostContainer>
         <SweepHeaderContainer>
           <ThemedText.SubHeader color="textPrimary" lineHeight="20px" paddingTop="6px" paddingBottom="6px">

src/nft/components/explore/Table.tsx

@@ -198,6 +198,7 @@ export function Table<D extends Record<string, unknown>>({
                   {...row.getRowProps()}
                   key={row.id}
                   onClick={() => navigate(`/nfts/collection/${row.original.collection.address}`)}
+                  data-testid="nft-trending-collection"
                 >
                   {row.cells.map((cell, cellIndex) => {
                     return (

src/nft/components/explore/WelcomeModal.tsx

@@ -112,7 +112,7 @@ export function WelcomeModal({ onDismissed }: { onDismissed: () => void }) {
               Learn more.
             </Link>
           </Paragraph>
-          <CloseButton size={24} onClick={dismiss} />
+          <CloseButton data-testid="nft-intro-modal" size={24} onClick={dismiss} />
         </Content>
       </Container>
     </Modal>