Refactor explore.spec.ts

components/shared/filters/SidebarFilter.vue

@@ -3,7 +3,10 @@
     <NeoSidebar :reduce="false" :open="open" fullheight>
       <EventTypeFilter v-if="isCollectionActivityTab" expanded fluid-padding />
       <StatusFilter v-else expanded fluid-padding />
-      <PriceFilter v-if="!isCollectionActivityTab" fluid-padding />
+      <PriceFilter
+        v-if="!isCollectionActivityTab"
+        fluid-padding
+        data-testid="expand-search" />
       <PopularCollections v-if="isExploreItems" expanded fluid-padding />
     </NeoSidebar>
   </div>

playwright.config.ts

@@ -73,5 +73,6 @@ export default defineConfig({
     command: process.env.CI ? 'pnpm start:static' : 'pnpm run dev',
     url: 'http://localhost:9090',
     reuseExistingServer: !process.env.CI,
+    timeout: 2 * 60 * 1000,
   },
 })

tests/e2e/explore.spec.ts

@@ -0,0 +1,73 @@
+import { test } from '@playwright/test'
+
+const SORT_SAMPLES = ['blockNumber_DESC', 'updatedAt_ASC']
+
+test.describe('Explore collections', async () => {
+  const routes = ['/rmrk/explore/collectibles', '/bsx/explore/collectibles']
+
+  for (const route of routes)
+    test(`Collections explore at ${route}`, async ({ page }) => {
+      await page.goto(route)
+      await testCollections(page)
+    })
+})
+
+const testCollections = async (page) => {
+  const tabs = await page.getByTestId('tabs')
+  await tabs.nth(2).waitFor()
+
+  await tabs.nth(2).getByText('Collections')
+  await tabs.nth(2).getByText('Items')
+
+  const exploreSort = await page.getByTestId('explore-sort')
+  await exploreSort.nth(2).click()
+
+  await Promise.all(SORT_SAMPLES.map((sort) => page.$(`[value="${sort}"]`)))
+
+  await Promise.all(
+    [...Array(5).keys()].map(async (i) => {
+      const collectionIndex = await page.getByTestId(`collection-index-${i}`)
+      await collectionIndex.waitFor()
+    })
+  )
+}
+
+test.describe('Explore items', async () => {
+  const routes = ['/rmrk/explore/items?page=1', '/bsx/explore/items?page=1']
+
+  for (const route of routes)
+    test(`Items explore at ${route}`, async ({ page }) => {
+      await page.goto(route)
+      await testItems(page)
+    })
+})
+
+const testItems = async (page) => {
+  const tabs = await page.getByTestId('tabs')
+  await tabs.nth(2).waitFor()
+
+  await tabs.nth(2).getByText('Collections')
+  await tabs.nth(2).getByText('Items')
+
+  const expandSearch = await page.getByTestId('expand-search')
+  await expandSearch.click()
+  const inputMin = await expandSearch.getByTestId('input-min')
+  await inputMin.type('100')
+  const btnApply = await expandSearch.getByTestId('apply')
+
+  await Promise.all([
+    page.waitForResponse(
+      (resp) => resp.url().includes('squid.subsquid.io') && resp.ok()
+    ),
+    btnApply.click(),
+  ])
+
+  const exploreSort = await page.getByTestId('explore-sort')
+  await exploreSort.nth(2).click()
+
+  const btnAsc = await page.$('[value="price_ASC"]')
+  await btnAsc?.click()
+
+  const firstItem = await page.getByTestId('0')
+  await firstItem.getByText(/\d+(\.\d+)?\s+[A-Z]{1,4}/)
+}