chore: Nft cypress tests 2 (#5658)

* adding in final set of nft cypress tests

cypress/e2e/nfts.test.ts

@@ -32,4 +32,33 @@ describe('Testing nfts', () => {
     cy.get(getTestSelector('nft-activity')).first().click()
     cy.get(getTestSelector('nft-activity-row')).should('exist')
   })
+
+  it('should go to the details page', () => {
+    cy.visit(`/#/nfts/collection/${COLLECTION_ADDRESS}`)
+    cy.get(getTestSelector('nft-filter')).first().click()
+    cy.get(getTestSelector('nft-collection-filter-buy-now')).click()
+    cy.get(getTestSelector('nft-details-link')).first().click()
+    cy.get(getTestSelector('nft-details-traits')).should('exist')
+    cy.get(getTestSelector('nft-details-activity')).should('exist')
+    cy.get(getTestSelector('nft-details-description')).should('exist')
+    cy.get(getTestSelector('nft-details-asset-details')).should('exist')
+  })
+
+  it('should toggle buy now on details page', () => {
+    cy.get(getTestSelector('nft-details-description-text')).should('exist')
+    cy.get(getTestSelector('nft-details-description')).click()
+    cy.get(getTestSelector('nft-details-description-text')).should('not.exist')
+    cy.get(getTestSelector('nft-details-toggle-bag')).eq(1).click()
+    cy.get(getTestSelector('nft-bag')).should('exist')
+  })
+
+  it('should go view my nfts', () => {
+    cy.get(getTestSelector('web3-status-connected')).click()
+    cy.get(getTestSelector('nft-view-self-nfts')).click()
+    cy.get(getTestSelector('nft-explore-nfts-button')).should('exist')
+    cy.get(getTestSelector('nft-no-nfts-selected')).should('exist')
+    cy.get(getTestSelector('nft-bag-close-icon')).click()
+    cy.get(getTestSelector('nft-explore-nfts-button')).click()
+    cy.get(getTestSelector('nft-welcome-modal')).should('exist')
+  })
 })

src/components/WalletDropdown/AuthenticatedHeader.tsx

@@ -207,7 +207,12 @@ const AuthenticatedHeader = () => {
           </Text>
           <USDText>${amountUSD.toFixed(2)} USD</USDText>
         </BalanceWrapper>
-        <ProfileButton onClick={navigateToProfile} size={ButtonSize.medium} emphasis={ButtonEmphasis.medium}>
+        <ProfileButton
+          data-testid="nft-view-self-nfts"
+          onClick={navigateToProfile}
+          size={ButtonSize.medium}
+          emphasis={ButtonEmphasis.medium}
+        >
           <Trans>View and sell NFTs</Trans>
         </ProfileButton>
         {isUnclaimed && (

src/nft/components/bag/Bag.tsx

@@ -282,7 +282,11 @@ const Bag = () => {
   return (
     <Portal>
       {!(isProfilePage && profilePageState === ProfilePageStateType.LISTING) ? (
-        <Column zIndex={isMobile || isOpen ? 'modalOverTooltip' : '3'} className={styles.bagContainer}>
+        <Column
+          data-testid="nft-bag"
+          zIndex={isMobile || isOpen ? 'modalOverTooltip' : '3'}
+          className={styles.bagContainer}
+        >
           <BagHeader
             numberOfAssets={isProfilePage ? sellAssets.length : itemsInBag.length}
             closeBag={handleCloseBag}

src/nft/components/bag/BagHeader.tsx

@@ -86,7 +86,7 @@ export const BagHeader = ({ numberOfAssets, closeBag, resetFlow, isProfilePage }
         </>
       )}
       <IconWrapper onClick={closeBag}>
-        <BagCloseIcon />
+        <BagCloseIcon data-testid="nft-bag-close-icon" />
       </IconWrapper>
     </Wrapper>
   )

src/nft/components/bag/EmptyContent.tsx

@@ -23,7 +23,9 @@ const EmptyState = () => {
         )}
       </Center>
       {isProfilePage ? (
-        <Center className={subhead}>No NFTs selected</Center>
+        <Center data-testid="nft-no-nfts-selected" className={subhead}>
+          No NFTs selected
+        </Center>
       ) : (
         <Column gap="16">
           <Center data-testid="nft-empty-bag" className={subhead} style={{ lineHeight: '24px' }}>

src/nft/components/collection/Card.tsx

@@ -647,7 +647,7 @@ const DetailsLink = () => {
         e.stopPropagation()
       }}
     >
-      <Box>Details</Box>
+      <Box data-testid="nft-details-link">Details</Box>
     </DetailsLinkContainer>
   )
 }

src/nft/components/details/AssetDetails.tsx

@@ -394,6 +394,7 @@ export const AssetDetails = ({ asset, collection }: AssetDetailsProps) => {
       </AssetPriceDetailsContainer>
       {asset.traits && (
         <InfoContainer
+          data-testid="nft-details-traits"
           primaryHeader="Traits"
           defaultOpen
           secondaryHeader={
@@ -423,6 +424,7 @@ export const AssetDetails = ({ asset, collection }: AssetDetailsProps) => {
         primaryHeader="Activity"
         defaultOpen
         secondaryHeader={formattedPrice ? `Last Sale: ${formattedPrice} ETH` : undefined}
+        data-testid="nft-details-activity"
       >
         <>
           <ActivitySelectContainer $isHorizontalScroll>
@@ -460,7 +462,12 @@ export const AssetDetails = ({ asset, collection }: AssetDetailsProps) => {
           )}
         </>
       </InfoContainer>
-      <InfoContainer primaryHeader="Description" defaultOpen secondaryHeader={null}>
+      <InfoContainer
+        primaryHeader="Description"
+        defaultOpen
+        secondaryHeader={null}
+        data-testid="nft-details-description"
+      >
         <>
           <ByText>By </ByText>
           {asset?.creator && asset.creator?.address && (
@@ -473,7 +480,9 @@ export const AssetDetails = ({ asset, collection }: AssetDetailsProps) => {
             </AddressTextLink>
           )}
 
-          <DescriptionText>{collection.collectionDescription}</DescriptionText>
+          <DescriptionText data-testid="nft-details-description-text">
+            {collection.collectionDescription}
+          </DescriptionText>
           <SocialsContainer>
             {collection.externalUrl && <Resource name="Website" link={`${collection.externalUrl}`} />}
             {collection.twitterUrl && <Resource name="Twitter" link={`https://twitter.com/${collection.twitterUrl}`} />}
@@ -481,7 +490,7 @@ export const AssetDetails = ({ asset, collection }: AssetDetailsProps) => {
           </SocialsContainer>
         </>
       </InfoContainer>
-      <InfoContainer primaryHeader="Details" defaultOpen secondaryHeader={null}>
+      <InfoContainer primaryHeader="Details" defaultOpen secondaryHeader={null} data-testid="nft-details-asset-details">
         <DetailsContainer asset={asset} collection={collection} />
       </InfoContainer>
     </Column>

src/nft/components/details/AssetPriceDetails.tsx

@@ -413,7 +413,7 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
                 }}
               >
                 <ThemedText.SubHeader color="white" lineHeight="20px">
-                  <span>{assetInBag ? 'Remove' : 'Add to Bag'}</span>
+                  <span data-testid="nft-details-toggle-bag">{assetInBag ? 'Remove' : 'Add to Bag'}</span>
                 </ThemedText.SubHeader>
               </BuyNowButton>
             </BuyNowButtonContainer>

src/nft/components/details/InfoContainer.tsx

@@ -65,6 +65,7 @@ const InfoContainer = ({
   primaryHeader,
   secondaryHeader,
   defaultOpen,
+  ...props
 }: {
   children: JSX.Element
   primaryHeader: string
@@ -75,7 +76,7 @@ const InfoContainer = ({
 
   return (
     <div>
-      <Header isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
+      <Header {...props} isOpen={isOpen} onClick={() => setIsOpen(!isOpen)}>
         <PrimaryHeader>
           {primaryHeader} <SecondaryHeader>{secondaryHeader}</SecondaryHeader>
         </PrimaryHeader>

src/nft/components/explore/WelcomeModal.tsx

@@ -87,7 +87,7 @@ export function WelcomeModal({ onDismissed }: { onDismissed: () => void }) {
 
   return (
     <Modal isOpen={isOpen} onSwipe={dismiss} maxWidth={720} isBottomSheet={false}>
-      <Container>
+      <Container data-testid="nft-welcome-modal">
         <Background
           {...(theme.darkMode ? BACKGROUND_IMAGE.dark : BACKGROUND_IMAGE.light)}
           alt="Welcome modal background"

src/nft/components/profile/view/EmptyWalletContent.tsx

@@ -45,7 +45,9 @@ export const EmptyWalletContent = () => {
       <EmptyWalletText className={headlineMedium}>
         <Trans>No NFTs in</Trans>&nbsp;{shortenAddress(account ?? '')}
       </EmptyWalletText>
-      <ExploreNFTsButton onClick={() => navigate('/nfts')}>Explore NFTs</ExploreNFTsButton>
+      <ExploreNFTsButton data-testid="nft-explore-nfts-button" onClick={() => navigate('/nfts')}>
+        Explore NFTs
+      </ExploreNFTsButton>
     </EmptyWalletContainer>
   )
 }