Merge pull request #3451 from petersopko/2911-cypress-init

#2911 cypress e2e
kodadot · Aug 5, 2022 · 94e8e3e · 94e8e3e
2 parents 9748838 + 2d5168c
commit 94e8e3e
Show file tree

Hide file tree

Showing 24 changed files with 1,085 additions and 48 deletions.
diff --git a/components/Navbar.vue b/components/Navbar.vue
@@ -60,14 +60,18 @@
         arrowless
         collapsible
         id="NavCreate"
-        v-show="isCreateVisible">
+        v-show="isCreateVisible"
+        data-cy="create-dropdown">
         <template #label>
           <span>{{ $t('create') }}</span>
         </template>
         <b-tooltip
           label="Start by creating your collection and add NFTs to it"
           position="is-right">
-          <b-navbar-item tag="nuxt-link" :to="`/${urlPrefix}/create`">
+          <b-navbar-item
+            tag="nuxt-link"
+            :to="`/${urlPrefix}/create`"
+            data-cy="classic">
             {{ $t('classic') }}
           </b-navbar-item>
         </b-tooltip>
@@ -76,44 +80,76 @@
             label="Simplified process to create your NFT in a single step"
             position="is-right"
             style="display: block">
-            <b-navbar-item tag="nuxt-link" :to="`/${urlPrefix}/mint`">
+            <b-navbar-item
+              tag="nuxt-link"
+              :to="`/${urlPrefix}/mint`"
+              data-cy="simple">
               {{ $t('simple') }}
             </b-navbar-item>
           </b-tooltip>
           <b-tooltip
             label="AI powered process to create your NFT"
             position="is-right"
             append-to-body>
-            <b-navbar-item tag="nuxt-link" :to="`/${urlPrefix}/creative`">
+            <b-navbar-item
+              tag="nuxt-link"
+              :to="`/${urlPrefix}/creative`"
+              data-cy="creative">
               {{ $t('creative') }}
             </b-navbar-item>
           </b-tooltip>
         </template>
       </b-navbar-dropdown>
-      <b-navbar-item tag="nuxt-link" :to="`/${urlPrefix}/explore`">
+      <b-navbar-item
+        tag="nuxt-link"
+        :to="`/${urlPrefix}/explore`"
+        data-cy="explore">
         <span>{{ $t('explore') }}</span>
       </b-navbar-item>
-      <b-navbar-item v-if="isBsx" tag="nuxt-link" :to="`/${urlPrefix}/stats`">
+      <b-navbar-item
+        v-if="isBsx"
+        tag="nuxt-link"
+        :to="`/${urlPrefix}/stats`"
+        data-cy="stats">
         <span>{{ $t('stats') }}</span>
       </b-navbar-item>
-      <b-navbar-dropdown arrowless collapsible v-if="isRmrk" id="NavStats">
+      <b-navbar-dropdown
+        arrowless
+        collapsible
+        v-if="isRmrk"
+        id="NavStats"
+        data-cy="stats">
         <template #label>
           <span>{{ $t('stats') }}</span>
         </template>
         <template>
-          <b-navbar-item tag="nuxt-link" to="/spotlight">
+          <b-navbar-item tag="nuxt-link" to="/spotlight" data-cy="spotlight">
             {{ $t('spotlight.page') }}
           </b-navbar-item>
-          <b-navbar-item tag="nuxt-link" to="/series-insight">
+          <b-navbar-item
+            tag="nuxt-link"
+            to="/series-insight"
+            data-cy="series-insight">
             Series
           </b-navbar-item>
-          <b-navbar-item tag="nuxt-link" to="/sales"> Sales </b-navbar-item>
-          <b-navbar-item tag="nuxt-link" to="/hot"> Hot </b-navbar-item>
+          <b-navbar-item tag="nuxt-link" to="/sales" data-cy="sales">
+            Sales
+          </b-navbar-item>
+          <b-navbar-item tag="nuxt-link" to="/hot" data-cy="hot">
+            Hot
+          </b-navbar-item>
         </template>
       </b-navbar-dropdown>
       <LazyChainSelect class="custom-navbar-item" id="NavChainSelect" />
-      <LazySwitchLocale class="custom-navbar-item" id="NavLocaleChanger" />
-      <NavbarProfileDropdown :isRmrk="isRmrk" :isBsx="isBsx" id="NavProfile" />
+      <LazySwitchLocale
+        class="custom-navbar-item"
+        id="NavLocaleChanger"
+        data-cy="localChanger" />
+      <NavbarProfileDropdown
+        :isRmrk="isRmrk"
+        :isBsx="isBsx"
+        id="NavProfile"
+        data-cy="profileDropdown" />
     </template>
     <template #end v-else>
       <div class="image is-32x32 mr-2">

diff --git a/components/bsx/Gallery/Item/ActionList.vue b/components/bsx/Gallery/Item/ActionList.vue
@@ -13,7 +13,8 @@
         outlined
         expanded
         class="only-border-top"
-        @click="handleActionSelect(action)">
+        @click="handleActionSelect(action)"
+        :data-cy="action">
         {{ actionLabel(action) }}
       </b-button>
     </b-tooltip>

diff --git a/components/bsx/Gallery/Item/GalleryItem.vue b/components/bsx/Gallery/Item/GalleryItem.vue
@@ -79,7 +79,7 @@
                       </div>
                       <div class="price-block__container">
                         <div class="price-block__original">
-                          <Money :value="nft.price" inline />
+                          <Money :value="nft.price" inline data-cy="money" />
                         </div>
                         <b-button
                           v-if="nft.currentOwner === accountId"
@@ -137,8 +137,9 @@
         :current-owner-id="nft.currentOwner"
         :nftId="id"
         @offersUpdate="offersUpdate"
-        :collectionId="collectionId" />
-      <History :events="events" :openOnDefault="false" />
+        :collectionId="collectionId"
+        data-cy="offer-list" />
+      <History :events="events" :openOnDefault="false" data-cy="history" />
     </template>
   </BaseGalleryItem>
 </template>

diff --git a/components/rmrk/Collection/List/CollectionList.vue b/components/rmrk/Collection/List/CollectionList.vue
@@ -35,7 +35,8 @@
           <nuxt-link
             :to="`/${urlPrefix}/collection/${collection.id}`"
             tag="div"
-            class="card collection-card">
+            class="card collection-card"
+            :data-cy="results.indexOf(collection)">
             <div class="card-image">
               <BasicImage
                 :src="collection.image"

diff --git a/components/rmrk/ExploreLayout/ExploreLayout.vue b/components/rmrk/ExploreLayout/ExploreLayout.vue
@@ -4,7 +4,7 @@
       {{ $t('general.searchResultsText') }}
       <span class="text__stroked is-size-3">{{ $route.query.search }}</span>
     </div>
-    <b-tabs v-model="selectedTab">
+    <b-tabs v-model="selectedTab" data-cy="tabs">
       <b-tab-item label="Collections" value="COLLECTION">
         <template v-if="selectedTab === 'COLLECTION'">
           <CollectionList />

diff --git a/components/rmrk/Gallery/AvailableActions.vue b/components/rmrk/Gallery/AvailableActions.vue
@@ -34,7 +34,8 @@
             style="border-width: 2px"
             outlined
             @click="handleAction(ShoppingActions.BUY)"
-            expanded>
+            expanded
+            data-cy="BUY">
             {{ replaceBuyNowWithYolo ? 'YOLO' : actionLabel('BUY') }}
           </b-button>
         </b-tooltip>

diff --git a/components/rmrk/Gallery/CollectionDetail.vue b/components/rmrk/Gallery/CollectionDetail.vue
@@ -37,7 +37,11 @@
       <div class="level-item column is-6 has-text-centered">
         <div>
           <p class="heading--inline heading">
-            {{ $t('Floor') }} : <Money :value="collectionFloorPrice" inline />
+            {{ $t('Floor') }} :
+            <Money
+              :value="collectionFloorPrice"
+              inline
+              data-cy="collection-floor-price" />
           </p>
         </div>
       </div>

diff --git a/components/rmrk/Gallery/CollectionItem.vue b/components/rmrk/Gallery/CollectionItem.vue
@@ -40,9 +40,10 @@
           v-if="sharingVisible"
           class="mb-2"
           :label="name"
-          :iframe="iframeSettings">
+          :iframe="iframeSettings"
+          data-cy="share-button">
           <DestroyCollection v-if="isOwner && urlPrefix === 'bsx'" :id="id" />
-          <DonationButton :address="issuer" />
+          <DonationButton :address="issuer" data-cy="donation-button" />
         </Sharing>
       </div>
     </div>

diff --git a/components/rmrk/Gallery/Gallery.vue b/components/rmrk/Gallery/Gallery.vue
@@ -47,7 +47,10 @@
                 <span
                   v-if="nft.price > 0 && showPriceValue"
                   class="card-image__price">
-                  <Money :value="nft.price" inline />
+                  <Money
+                    :value="nft.price"
+                    inline
+                    :data-cy="results.indexOf(nft)" />
                 </span>
               </div>
 

diff --git a/components/rmrk/Gallery/GalleryCardList.vue b/components/rmrk/Gallery/GalleryCardList.vue
@@ -17,7 +17,8 @@
           :price="nft.price"
           :emoteCount="nft.emoteCount"
           :currentOwner="nft.currentOwner"
-          :listed="listed" />
+          :listed="listed"
+          :data-cy="items.indexOf(nft)" />
       </div>
     </div>
   </div>

diff --git a/components/rmrk/Gallery/GalleryItem.vue b/components/rmrk/Gallery/GalleryItem.vue
@@ -68,7 +68,7 @@
                     </div>
                     <div class="price-block__container">
                       <div class="price-block__original">
-                        <Money :value="nft.price" inline />
+                        <Money :value="nft.price" inline data-cy="money" />
                       </div>
                       <b-button
                         v-if="nft.currentOwner === accountId"
@@ -129,7 +129,8 @@
             v-if="!isLoading"
             :events="nft.events"
             :open-on-default="!compactGalleryItem"
-            @setPriceChartData="setPriceChartData" />
+            @setPriceChartData="setPriceChartData"
+            data-cy="history" />
         </div>
       </div>
     </template>

diff --git a/components/rmrk/Gallery/History.vue b/components/rmrk/Gallery/History.vue
@@ -22,7 +22,10 @@
       </template>
       <div class="box">
         <div class="is-flex is-justify-content-space-between box-container">
-          <b-select placeholder="Select an event" v-model="selectedEvent">
+          <b-select
+            placeholder="Select an event"
+            v-model="selectedEvent"
+            data-cy="select-event">
             <option
               v-for="option in uniqType"
               :value="option.type"

diff --git a/components/rmrk/Gallery/Search/SearchBar.vue b/components/rmrk/Gallery/Search/SearchBar.vue
@@ -13,7 +13,8 @@
           aria-controls="sortAndFilter"
           type="is-primary is-bordered-light"
           class="is-hidden-mobile mr-2"
-          @click="isVisible = !isVisible" />
+          @click="isVisible = !isVisible"
+          data-cy="expand-search" />
         <slot name="next-filter"></slot>
         <b-autocomplete
           v-if="!hideSearchInput"
@@ -134,21 +135,24 @@
             step="any"
             class="column is-2"
             :placeholder="$t('query.priceRange.minPrice')"
-            v-model="rangeSlider[0]">
+            v-model="rangeSlider[0]"
+            data-cy="input-min">
           </b-input>
           <b-input
             min="0"
             step="any"
             type="number"
             class="column is-2"
             :placeholder="$t('query.priceRange.maxPrice')"
-            v-model="rangeSlider[1]">
+            v-model="rangeSlider[1]"
+            data-cy="input-max">
           </b-input>
           <div class="column is-1">
             <b-button
               class="is-primary"
               @click="sliderChange(rangeSlider)"
-              :disabled="applyDisabled">
+              :disabled="applyDisabled"
+              data-cy="apply">
               {{ $t('general.apply') }}
             </b-button>
           </div>

diff --git a/components/rmrk/Gallery/Search/SearchSortDropdown.vue b/components/rmrk/Gallery/Search/SearchSortDropdown.vue
@@ -6,17 +6,27 @@
       v-model="selectedAction"
       class="select-dropdown">
       <template #trigger>
-        <b-button type="is-primary" icon-right="caret-down"> Sort by </b-button>
+        <b-button
+          type="is-primary"
+          icon-right="caret-down"
+          data-cy="gallery-sort-by">
+          Sort by
+        </b-button>
       </template>
-      <b-dropdown-item v-for="action in actions" :key="action" :value="action">
+      <b-dropdown-item
+        v-for="action in actions"
+        :key="action"
+        :value="action"
+        :data-cy="$t('sort.' + action)">
         {{ $t('sort.' + action) }}
       </b-dropdown-item>
     </b-dropdown>
     <b-select
       v-else
       v-model="selectedAction"
       placeholder="Sort by"
-      class="select-dropdown">
+      class="select-dropdown"
+      data-cy="collection-sort-by">
       <option v-for="action in actions" :key="action" :value="action">
         {{
           isCollection ? $t('sort.collection.' + action) : $t('sort.' + action)

diff --git a/components/shared/IdentityPopover.vue b/components/shared/IdentityPopover.vue
@@ -4,7 +4,8 @@
     interactive
     :animate-fill="false"
     placement="bottom"
-    :delay="[100, 800]">
+    :delay="[100, 800]"
+    data-cy="identity">
     <template v-slot:trigger>
       <slot name="trigger" />
     </template>

diff --git a/components/shared/form/BasicSwitch.vue b/components/shared/form/BasicSwitch.vue
@@ -5,7 +5,8 @@
       :rounded="false"
       :size="size"
       :disabled="disabled"
-      :class="labelColor">
+      :class="labelColor"
+      data-cy="buy-now">
       <component :is="componentName" :label="message">
         {{ properLabel }}
       </component>

diff --git a/cypress.json b/cypress.json
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "lint:quiet": "eslint --quiet --ignore-path .gitignore --ext .js,.ts,.vue .",
     "lint:fix": "eslint --fix --quiet --ignore-path .gitignore --ext .js,.ts,.vue .",
     "test": "vitest run --reporter verbose --allowOnly",
+    "test:e2e": "cypress run --project tests",
     "test:watch": "vitest --reporter verbose --allowOnly",
     "prepare": "husky install"
   },
@@ -79,6 +80,7 @@
     "chartjs-plugin-annotation": "^1.4.0",
     "chartjs-plugin-zoom": "^1.2.1",
     "css-loader": "5.2.7",
+    "cypress": "^10.3.0",
     "date-fns": "^2.29.1",
     "emoji-unicode": "^2.0.1",
     "graphql": "^16.5.0",
@@ -125,6 +127,7 @@
     "@typescript-eslint/parser": "^5.31.0",
     "all-contributors-cli": "^6.20.0",
     "consola": "^2.15.3",
+    "cypress": "^10.3.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.20.0",
     "eslint-plugin-prettier": "^4.2.1",

diff --git a/pages/e2e-login.vue b/pages/e2e-login.vue
@@ -0,0 +1,25 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import { mnemonicGenerate } from '@polkadot/util-crypto'
+import keyring from '@polkadot/ui-keyring'
+
+@Component({})
+export default class E2ELogin extends Vue {
+  created() {
+    const mnemonic = mnemonicGenerate(12)
+    const { pair } = keyring.addUri(mnemonic, '', {
+      name: 'mnemonic acc',
+    })
+    // TODO: check 'loadAll' error, approx 1 in 10 tests fail without this
+    keyring.addPair(pair, '')
+    const account = pair.address
+    this.$store.dispatch('setAuth', { address: account })
+    localStorage.setItem('kodaauth', account)
+    this.$router.push('/')
+  }
+}
+</script>