New Playwright tests and modifications

.github/workflows/playwright.yml

@@ -6,7 +6,7 @@ on:
  branches: [ main, master ]
 jobs:
  test:
- timeout-minutes: 10
+ timeout-minutes: 15
  runs-on: ubuntu-latest
  steps:
  - uses: actions/checkout@v3

components/TheFooter.vue

@@ -1,13 +1,13 @@
 <template>
- <footer class="footer-container section">
+ <footer class="footer-container section" data-testid="footer-container">
  <div
  class="footer-container-inner is-flex is-align-items-start is-justify-content-space-between">
  <section class="footer-container-subs is-flex is-flex-direction-column">
  <h2 class="subtitle is-5">
  {{ $t('footer.subscribe') }}
  </h2>
  <div class="is-flex is-align-items-center footer-container-subs-items">
- <div id="custom-substack-embed"></div>
+ <div id="custom-substack-embed" data-testid="footer-subscribe"></div>
 
  <script>
  window.CustomSubstackWidget = {

components/create/CreateCollection.vue

@@ -26,6 +26,7 @@
  <NeoField
  :label="`${$t('mint.collection.name.label')} *`"
  required
+ data-testid="collection-name"
  :error="!name">
  <NeoInput v-model="name" required />
  </NeoField>
@@ -38,13 +39,15 @@
  type="textarea"
  has-counter
  maxlength="1000"
- height="10rem" />
+ height="10rem"
+ data-testid="collection-desc" />
  </NeoField>
 
  <!-- collection max nfts -->
  <NeoField
  v-if="!isBasilisk"
  :label="$t('Maximum NFTs in collection')"
+ data-testid="collection-maxAmount"
  required>
  <div class="w-full">
  <div class="is-flex is-justify-content-space-between">
@@ -65,7 +68,11 @@
  <NeoField :label="`${$t('mint.blockchain.label')} *`">
  <div>
  <p>{{ $t('mint.blockchain.message') }}</p>
- <NeoSelect v-model="selectBlockchain" class="mt-3" expanded>
+ <NeoSelect
+ v-model="selectBlockchain"
+ class="mt-3"
+ data-testid="collection-chain"
+ expanded>
  <option v-for="menu in menus" :key="menu.value" :value="menu.value">
  {{ menu.text }}
  </option>
@@ -96,11 +103,15 @@
  <div class="monospace">
  <p class="has-text-weight-medium is-size-6 has-text-info">
  <span>{{ $t('mint.deposit') }}:</span>
- <span>{{ totalCollectionDeposit }} {{ chainSymbol }}</span>
+ <span data-testid="collection-deposit"
+ >{{ totalCollectionDeposit }} {{ chainSymbol }}</span
+ >
  </p>
  <p>
  <span>{{ $t('general.balance') }}: </span>
- <span>{{ balance }} {{ chainSymbol }}</span>
+ <span data-testid="collection-balance"
+ >{{ balance }} {{ chainSymbol }}</span
+ >
  </p>
  <nuxt-link v-if="isBasilisk" :to="`/${currentChain}/assets`">
  {{ $t('general.tx.feesPaidIn', [chainSymbol]) }}
@@ -119,6 +130,7 @@
  :label="`${canDeposit ? 'Create Collection' : 'Not Enough Funds'}`"
  type="submit"
  size="medium"
+ data-testid="collection-create"
  :loading="isLoading"
  :disabled="!canDeposit" />
 

components/search/Search.vue

@@ -13,6 +13,7 @@
  ref="searchRef"
  v-model="name"
  :query="query"
+ data-testid="search-bar"
  @redirect="redirectToGalleryPageIfNeed"
  @enter="nativeSearch"
  @blur="onBlur" />

components/search/SearchSuggestion.vue

@@ -13,6 +13,7 @@
  <NeoTabItem
  label="Collections"
  value="Collections"
+ data-testid="collection-tab"
  item-header-class="has-text-left is-block mb-0 pb-4 px-0 pt-0">
  <div v-if="isCollectionResultLoading">
  <SearchResultItem
@@ -97,7 +98,8 @@
  <NeoTabItem
  label="NFTs"
  value="NFTs"
- item-header-class="has-text-left is-block mb-0 pb-4 px-0 pt-0">
+ item-header-class="has-text-left is-block mb-0 pb-4 px-0 pt-0"
+ data-testid="nft-tab">
  <div v-if="isNFTResultLoading">
  <SearchResultItem
  v-for="item in searchSuggestionEachTypeMaxNum"

playwright.config.ts

@@ -22,6 +22,7 @@ export default defineConfig({
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+ timeout: 1 * 60 * 1000,
  use: {
  /* Base URL to use in actions like `await page.goto('/')`. */
  baseURL: 'http://localhost:9090',

tests/e2e/createcollection.spec.ts

@@ -0,0 +1,63 @@
+import { expect, test } from '@playwright/test'
+
+test('Fill fields to check if they work', async ({ page }) => {
+ await page.goto('/create/collection')
+ //upload image logo
+ await page.setInputFiles('input[type="file"]', 'tests/e2e/unsplash-image.jpg')
+ //checks if Collection Name Title Exists
+ await expect(
+ page
+ .getByTestId('collection-name')
+ .filter({ has: page.getByText('Collection Name') })
+ ).toHaveCount(1)
+ await page
+ .getByTestId('collection-name')
+ .locator('input')
+ .fill('Best Collection Name')
+ // Fill collection Description
+ await page.getByTestId('collection-desc').fill('Best Collection Ever Created')
+ //active unlimited items switch
+ const collectionAmount = page.getByTestId('collection-maxAmount')
+ await collectionAmount.locator('.o-switch').click()
+ await expect(
+ collectionAmount.getByPlaceholder('1 is the minimum')
+ ).toBeVisible()
+ //Check if button exists
+ await expect(page.getByTestId('collection-create')).toBeVisible()
+ await expect(
+ page
+ .getByTestId('collection-create')
+ .filter({ has: page.getByText('Not Enough Funds') })
+ ).toHaveCount(1)
+})
+
+test('Check if chain change works using the dropdown', async ({ page }) => {
+ //E2E connection
+ await page.goto('/e2e-login')
+ await page.waitForTimeout(10000)
+ await expect(page.getByTestId('mockAddress')).toHaveText('true')
+ await page.goto('/create/collection')
+ expect(page.getByTestId('collection-chain')).toBeVisible()
+ await page.getByTestId('collection-chain').selectOption('KusamaHub [Beta]')
+ //Check if balances and deposits shows
+ await expect(page.getByTestId('collection-deposit')).toBeVisible({
+ timeout: 30000,
+ })
+ await expect(page.getByTestId('collection-balance')).toBeVisible({
+ timeout: 30000,
+ })
+ await page.getByTestId('collection-chain').selectOption('RMRK2')
+})
+
+test('Show warning message on field when collection name empty', async ({
+ page,
+}) => {
+ await page.goto('/create/collection')
+ // defines a variable containing the collection name data-testid
+ const collectionName = page.getByTestId('collection-name')
+ // Fill and check if Collection Name works properly by checking warning
+ await collectionName.locator('input').fill('Kodadot Warning Test')
+ await collectionName.locator('input').fill('')
+ await page.getByTestId('collection-desc').click()
+ await expect(collectionName.locator('.o-field__message-danger')).toBeVisible()
+})

tests/e2e/footer.spec.ts

@@ -0,0 +1,120 @@
+import { expect, test } from '@playwright/test'
+
+const footerLinks = [
+ {
+ linkName: 'Ambassador Program',
+ linkAddress:
+ 'https://hello.kodadot.xyz/be-part-of-kodadot/kodadots-programs/ambassador-program',
+ },
+ {
+ linkName: 'Artist Ambassador',
+ linkAddress:
+ 'https://hello.kodadot.xyz/be-part-of-kodadot/kodadots-programs/artist-ambassador-program',
+ },
+ {
+ linkName: 'Referral Program',
+ linkAddress:
+ 'https://hello.kodadot.xyz/be-part-of-kodadot/kodadots-programs/artist-referral-program',
+ },
+ {
+ linkName: 'Developers',
+ linkAddress: 'https://developers.kodadot.xyz/',
+ },
+ {
+ linkName: 'FAQ',
+ linkAddress: 'https://hello.kodadot.xyz/ecosystem/faq',
+ },
+ {
+ linkName: 'Tutorial',
+ linkAddress: 'https://hello.kodadot.xyz/tutorial/wallet',
+ },
+ {
+ linkName: 'About',
+ linkAddress: 'https://hello.kodadot.xyz/about-us/who-are-we',
+ },
+ {
+ linkName: 'Careers',
+ linkAddress:
+ 'https://hello.kodadot.xyz/be-part-of-kodadot/join-as-a-developer/hiring',
+ },
+ {
+ linkName: 'Press Kit',
+ linkAddress: 'https://github.com/kodadot/kodadot-presskit/tree/main/pre-v4',
+ },
+ {
+ linkName: 'MerchShop',
+ linkAddress: 'https://shop.kodadot.xyz/',
+ },
+]
+
+const footerSocialMediaLinks = [
+ {
+ linkName: 'Twitter',
+ linkAddress: 'https://twitter.com/KodaDot',
+ },
+ {
+ linkName: 'Discord',
+ linkAddress: 'https://discord.com/invite/u6ymnbz4PR',
+ },
+ {
+ linkName: 'Substack',
+ linkAddress: 'https://kodadot.substack.com',
+ },
+ //{
+ // linkName: 'Medium',
+ // linkAddress: 'https://medium.com/kodadot',
+ //},
+ {
+ linkName: 'Youtube',
+ linkAddress: 'https://www.youtube.com/channel/UCEULduld5NrqOL49k1KVjoA',
+ },
+ //{
+ // linkName: 'Instagram',
+ // linkAddress: 'https://instagram.com/kodadot.xyz',
+ // },
+ {
+ linkName: 'Reddit',
+ linkAddress: 'https://www.reddit.com/r/KodaDot/',
+ },
+]
+
+test('Check Footer Subscription', async ({ page }) => {
+ await page.goto('/')
+ const footerSubscribe = page.getByTestId('footer-subscribe')
+ await page.getByPlaceholder('jane.doe@kodadot.xyz').fill('a')
+ await footerSubscribe.locator('button').click()
+ await expect(footerSubscribe.locator('.error')).toBeVisible()
+})
+
+test('Check Footer links', async ({ page }) => {
+ await page.goto('/')
+ for (const data of footerLinks) {
+ const footer = page.getByTestId('footer-container')
+ const newTabPromise = page.waitForEvent('popup')
+ await footer.getByRole('link', { name: data.linkName }).click()
+ const newTab = await newTabPromise
+ await newTab.waitForLoadState()
+ await expect(newTab).toHaveURL(data.linkAddress)
+ await newTab.close()
+ }
+})
+
+test('Check blog link', async ({ page }) => {
+ await page.goto('/')
+ const footer = page.getByTestId('footer-container')
+ await footer.getByRole('link', { name: 'Blog' }).click()
+ await expect(page).toHaveURL('http://localhost:9090/blog')
+})
+
+test('Check Social Media Links', async ({ page }) => {
+ await page.goto('/')
+ for (const data of footerSocialMediaLinks) {
+ const socialMedia = page.locator('.footer-container-socials-list')
+ const newTabPromise = page.waitForEvent('popup')
+ await socialMedia.locator(`[aria-label="${data.linkName}"]`).click()
+ const newTab = await newTabPromise
+ await newTab.waitForLoadState()
+ await expect(newTab).toHaveURL(data.linkAddress)
+ await newTab.close()
+ }
+})

tests/e2e/language.spec.ts

@@ -2,16 +2,15 @@ import { expect, test } from '@playwright/test'
 
 test('Check Language translations', async ({ page }) => {
  await page.goto('/e2e-login')
- await page.waitForTimeout(5000)
+ await page.waitForTimeout(10000)
  await expect(page.getByTestId('mockAddress')).toHaveText('true')
- await page.goto('/')
+ await page.goto('')
  //DE
  await page.getByTestId('profileDropdown').click()
  await page.getByTestId('sidebar-language').click()
  await expect(page.getByRole('menu')).toBeVisible()
  //await expect(page.getByTestId('skeleton-multiple-balances')).toHaveCount(0)
  await page.getByTestId('sidebar-language-de').click()
- await page.getByTestId('profileDropdown').click()
  await expect(
  page.getByTestId('create').filter({ has: page.getByText('Erstellen') })
  ).toHaveCount(1)
@@ -21,11 +20,8 @@ test('Check Language translations', async ({ page }) => {
  .filter({ has: page.getByText('Letzte Verkäufe') })
  ).toHaveCount(1)
  //FR
- await page.getByTestId('profileDropdown').click()
  await page.getByTestId('sidebar-language').click()
- await expect(page.getByRole('menu')).toBeVisible()
  await page.getByTestId('sidebar-language-fr').click()
- await page.getByTestId('profileDropdown').click()
  await expect(
  page.getByTestId('create').filter({ has: page.getByText('Créer') })
  ).toHaveCount(1)
@@ -35,11 +31,8 @@ test('Check Language translations', async ({ page }) => {
  .filter({ has: page.getByText('Dernières ventes') })
  ).toHaveCount(1)
  //ES
- await page.getByTestId('profileDropdown').click()
  await page.getByTestId('sidebar-language').click()
- await expect(page.getByRole('menu')).toBeVisible()
  await page.getByTestId('sidebar-language-es').click()
- await page.getByTestId('profileDropdown').click()
  await expect(
  page.getByTestId('create').filter({ has: page.getByText('Crear') })
  ).toHaveCount(1)