Drop tests

components/collection/drop/CollectedBy.vue

@@ -1,14 +1,16 @@
 <template>
  <div
  class="rounded-full h-[62px] md:w-auto border border-k-shade inline-flex items-center justify-between px-3"
- :class="{ 'h-full border-none': size === 'small' }">
+ :class="{ 'h-full border-none': size === 'small' }"
+ data-testid="drop-collected-by-container">
  <div class="flex items-center">
  <CollectionDropCollectedByAvatar
  v-for="(address, index) in addresses.slice(0, maxAddressCount)"
  :key="address"
  :class="[zIndexMap[index], { '-ml-2': index > 0 }]"
  :address="address"
- :size="size" />
+ :size="size"
+ data-testid="collector-avatar" />
  </div>
 
  <div v-if="remainingCount" class="ml-2.5">+{{ remainingCount }}</div>

components/collection/drop/CreatedBy.vue

@@ -1,6 +1,7 @@
 <template>
  <div
- class="rounded-full min-w-[236px] h-[62px] md:w-auto border border-k-shade inline-flex justify-start px-2.5">
+ class="rounded-full min-w-[236px] h-[62px] md:w-auto border border-k-shade inline-flex justify-start px-2.5"
+ data-testid="drop-created-by-container">
  <div class="flex items-center">
  <Avatar :size="48" :value="address" />
  <div class="ml-3.5">

components/collection/drop/MintButton.vue

@@ -5,6 +5,7 @@
  expanded
  no-shadow
  size="large"
+ data-testid="drop-mint-button"
  :loading="loading"
  :disabled="!enabled || loading"
  :loading-with-label="

components/collection/drop/MintStepper.vue

@@ -2,6 +2,7 @@
  <NeoStepper
  v-if="show"
  v-model="amountToMint"
+ data-testid="drop-stepper-container"
  :max="max"
  class="[&>.neo-input]:h-full [&>.neo-input>input]:h-full md:w-[200px]" />
 </template>

components/collection/drop/Phase.vue

@@ -1,6 +1,8 @@
 <template>
  <div>
- <div class="flex justify-between items-center mb-6">
+ <div
+ class="flex justify-between items-center mb-6"
+ data-testid="drop-phase-container">
  <div class="flex items-center">
  <div
  v-if="isFetchingDropStatus"
@@ -31,7 +33,10 @@
  {{ $t('opensIn') }}
  <span class="text-text-color">{{ statusText }}</span>
  </div>
- <div v-else class="text-neutral-7 leading-tight">
+ <div
+ v-else
+ class="text-neutral-7 leading-tight"
+ data-testid="drop-status">
  {{ statusText }}
  </div>
  </div>

components/collection/unlockable/UnlockableCollectionInfo.vue

@@ -5,20 +5,24 @@
  <div class="mr-2 font-bold text-xl mb-1">About Collection</div>
  </div>
  <div class="overflow-wrap">
- <Markdown :source="visibleDescription" />
+ <Markdown
+ :source="visibleDescription"
+ data-testid="drops-text-description-container" />
  </div>
  <div class="flex justify-between items-center mb-4">
  <NeoButton
  v-if="hasSeeAllDescriptionOption"
  class="no-shadow is-text text-left p-0"
  :label="seeAllDescription ? $t('showLess') : $t('showMore')"
+ data-testid="drops-text-description-button"
  @click="toggleSeeAllDescription" />
  <NeoButton
  variant="outlined-rounded"
  rounded
  :tag="NuxtLink"
  :to="`/${urlPrefix}/collection/${collectionId}`"
- icon="arrow-right">
+ icon="arrow-right"
+ data-testid="drops-view-collection-button">
  <span>View Collection</span>
  </NeoButton>
  </div>

tests/e2e/drops.spec.ts

@@ -1,19 +1,106 @@
-import { expect, test } from '@playwright/test'
+import { expect, test } from './fixtures'
+
+const TEST_DROPS = [
+ {
+ address: '/ahp/drops/convergente',
+ collection: '/ahp/collection/112',
+ },
+ {
+ address: '/ahp/drops/chroma',
+ collection: '/ahp/collection/51',
+ },
+ {
+ address: '/ahp/drops/echo',
+ collection: '/ahp/collection/95',
+ },
+]
+
+const addresses = TEST_DROPS.map((drop) => drop.address)
+const collections = TEST_DROPS.map((drop) => drop.collection)
 
 test('make sure drops page with type holder not broken', async ({ page }) => {
- await page.goto('/ahp/drops/echo')
+ await page.goto(addresses[2])
  await expect(page.locator('div.content-markdown')).toHaveText(
  `
  Artist: Nicolas Lebrun
  Echo is a captivating exploration of the realm of composition, where the essence lies in a dynamic interplay between samples and a meticulous process...
  `,
  )
 
- await page.goto('/ahp/drops/chroma')
+ await page.goto(addresses[1])
  await expect(page.locator('div.content-markdown')).toHaveText(
  `
  Artist: @atimtay
  'Chroma Lattice' conjures an image of a vibrant and structured visual experience. In this generative art project, the name suggests an exploration of color...
  `,
  )
 })
+
+//CONVERGENTE
+test('Drop page verification', async ({ page, Commands }) => {
+ await page.goto(addresses[0])
+
+ await test.step('Created By', async () => {
+ await expect(page.getByTestId('drop-created-by-container')).toBeVisible()
+ })
+
+ await test.step('Collected By', async () => {
+ await expect(page.getByTestId('drop-collected-by-container')).toBeVisible()
+ await expect(page.getByTestId('collector-avatar').first()).toBeVisible()
+ await page.getByTestId('collector-avatar').first().hover()
+ await expect(page.getByTestId('identity-popover-container')).toBeVisible()
+ })
+
+ await test.step('Text Description', async () => {
+ const textDesc = page.getByTestId('drops-text-description-container')
+ const textDescButton = page.getByTestId('drops-text-description-button')
+ await expect(textDescButton).toBeVisible()
+ await expect(textDesc).toBeVisible()
+ await textDescButton.click()
+ const getTextDesc = await textDesc.locator('p').last().innerText()
+ const descTextEnding = getTextDesc.slice(-10)
+ await textDescButton.click()
+ await expect(textDesc).not.toHaveText(descTextEnding)
+ })
+
+ await test.step('Mint Button State', async () => {
+ const dropContainer = page.getByTestId('drop-phase-container')
+ const dropPhase = page.getByTestId('drop-status')
+ const mintButton = page.getByTestId('drop-mint-button')
+ await expect(dropContainer).toBeVisible()
+ await expect(dropPhase).toBeVisible()
+ await expect(mintButton).toBeVisible()
+ await expect(mintButton).toHaveText('Connect your wallet')
+ await Commands.e2elogin()
+ await page.goto(addresses[0])
+ const dropPhaseStatus = await dropPhase.innerText()
+
+ if (dropPhaseStatus == 'Minting Now') {
+ await expect(mintButton).toContainText('Mint For')
+ await expect(page.getByTestId('drop-stepper-container')).toBeVisible()
+ } else {
+ await expect(mintButton).toContainText('See Listings')
+ }
+ })
+})
+
+test('View Collection', async ({ page }) => {
+ await page.goto(addresses[0])
+ await expect(page.getByTestId('drops-view-collection-button')).toBeVisible()
+ await page.getByTestId('drops-view-collection-button').click()
+ await page.waitForTimeout(2000)
+ await expect(page).toHaveURL(collections[0])
+})
+
+test('Clicking connect wallet opens sidebar', async ({ page }) => {
+ for (const data of TEST_DROPS) {
+ await test.step(`Checking: ${data.address}`, async () => {
+ await page.goto(data.address)
+ await expect(page.getByTestId('drop-mint-button')).toBeVisible()
+ await page.getByTestId('drop-mint-button').click()
+ await expect(
+ page.getByTestId('wallet-connect-sidebar-modal'),
+ ).toBeVisible()
+ })
+ }
+})