Merge pull request #3802 from preschian/e2e-identity

e2e: Identity on hover

components/identity/module/IdentityPopoverFooter.vue

@@ -1,15 +1,21 @@
 <template>
   <div class="popover-stats-container pt-3">
     <div class="has-text-centered">
-      <p class="has-text-weight-bold is-size-6">{{ totalCollected }}</p>
+      <p class="has-text-weight-bold is-size-6" data-cy="identity-collected">
+        {{ totalCollected }}
+      </p>
       <span class="is-size-7 is-uppercase">{{ $t('profile.collected') }}</span>
     </div>
     <div class="has-text-centered">
-      <p class="has-text-weight-bold is-size-6">{{ totalCreated }}</p>
+      <p class="has-text-weight-bold is-size-6" data-cy="identity-created">
+        {{ totalCreated }}
+      </p>
       <span class="is-size-7 is-uppercase">{{ $t('profile.created') }}</span>
     </div>
     <div class="has-text-centered">
-      <p class="has-text-weight-bold is-size-6">{{ totalSold }}</p>
+      <p class="has-text-weight-bold is-size-6" data-cy="identity-sold">
+        {{ totalSold }}
+      </p>
       <span class="is-size-7 is-uppercase">{{ $t('profile.sold') }}</span>
     </div>
   </div>

components/identity/module/IdentityPopoverHeader.vue

@@ -8,15 +8,18 @@
         class="popover-image avatar mr-5" />
     </div>
     <div class="column is-three-quarters">
-      <p class="has-text-weight-bold is-size-5 mb-1 break-word">
+      <p
+        class="has-text-weight-bold is-size-5 mb-1 break-word"
+        data-cy="identity-display">
         {{ identity?.display }}
       </p>
       <a
         v-if="identity?.twitter"
         :href="`https://twitter.com/${identity?.twitter}`"
         class="is-flex is-align-items-center mb-2"
         target="_blank"
-        rel="noopener noreferrer">
+        rel="noopener noreferrer"
+        data-cy="identity-twitter">
         <b-icon
           pack="fab"
           icon="twitter"
@@ -25,7 +28,7 @@
           {{ identity?.twitter }}
         </span>
       </a>
-      <p class="is-size-7 mb-1">
+      <p class="is-size-7 mb-1" data-cy="identity-address">
         {{ shortenedAddress }}
         <b-icon
           v-clipboard:copy="identity?.address"
@@ -36,13 +39,15 @@
       </p>
       <p
         v-if="totalCreated"
-        class="is-size-7 is-flex is-align-items-center py-3">
+        class="is-size-7 is-flex is-align-items-center py-3"
+        data-cy="identity-started-minting">
         <b-icon icon="clock" size="is-small" />
         <span class="ml-2">Started minting {{ startedMinting }}</span>
       </p>
       <p
         v-if="totalCollected && lastBought"
-        class="is-size-7 is-flex is-align-items-center py-3">
+        class="is-size-7 is-flex is-align-items-center py-3"
+        data-cy="identity-last-bought">
         <b-icon icon="clock" size="is-small" />
         <span class="ml-2">Last bought {{ lastBought }}</span>
       </p>

components/rmrk/Profile/ProfileDetail.vue

@@ -5,7 +5,7 @@
         <div class="container image is-64x64 mb-2">
           <Avatar :value="id" />
         </div>
-        <h1 class="title is-2">
+        <h1 class="title is-2" data-cy="user-identity">
           <a
             v-if="hasBlockExplorer"
             :href="explorer"

package.json

@@ -138,6 +138,7 @@
     "cypress": "^10.6.0",
     "cypress-file-upload": "^5.0.8",
     "cypress-network-idle": "^1.10.0",
+    "cypress-real-events": "^1.7.1",
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",

tests/cypress/e2e/components/identity.cy.ts

@@ -0,0 +1,56 @@
+import shortAddress from '@/utils/chainProperties'
+
+const users = [
+  {
+    address: 'FqCJeGcPidYSsvvmT17fHVaYdE2nXMYgPsBn3CP9gugvZR5',
+    name: 'deepologic',
+    twitter: '@deepologic',
+    startedMinting: 'Started minting over 1 year ago',
+  },
+  {
+    address: 'FUEGFWoPPtX4XkRzEnZnMgwGKENscHXAiEZy6kcgaDz1BY6',
+    name: 'Yumi Arts',
+    twitter: '@YumiArtsNFT',
+    startedMinting: 'Started minting 12 months ago',
+  },
+  {
+    address: 'FQBgFrkzevAZCvFZB485rQa6h7gsZQz3UXRuYwxAzG7zQ4w',
+    name: 'cwh',
+    twitter: '@ClownWorldHouse',
+    startedMinting: 'Started minting 10 months ago',
+  },
+]
+
+describe('Identity.vue component', () => {
+  users.forEach(({ address, name, twitter, startedMinting }) => {
+    it(`should get Identity stats for ${name}`, () => {
+      cy.visit(`/rmrk/u/${address}`)
+
+      cy.getCy('identity').realHover()
+      cy.get('.tippy-popper')
+        .should('exist')
+        .then(() => {
+          cy.getCy('identity-display').should('contain.text', name)
+          cy.getCy('identity-twitter').should('contain.text', twitter)
+          cy.getCy('identity-address').should(
+            'contain.text',
+            shortAddress(address)
+          )
+          cy.getCy('identity-started-minting').should(
+            'contain.text',
+            startedMinting
+          )
+          cy.getCy('identity-last-bought').should('exist')
+          cy.getCy('identity-collected').should(
+            'not.have.text',
+            '\n      0\n    '
+          )
+          cy.getCy('identity-created').should(
+            'not.have.text',
+            '\n      0\n    '
+          )
+          cy.getCy('identity-sold').should('not.have.text', '\n      0\n    ')
+        })
+    })
+  })
+})

tests/cypress/support/commands.ts

@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-namespace */
 import 'cypress-file-upload'
 import 'cypress-network-idle'
+import 'cypress-real-events/support'
 import consola from 'consola'
 
 export {}

tsconfig.json

@@ -22,7 +22,8 @@
       "vue-apollo",
       "vitest/globals",
       "cypress",
-      "cypress-file-upload"
+      "cypress-file-upload",
+      "cypress-real-events"
     ]
   },
   "exclude": ["node_modules", "dist", "**/*.spec.ts"]