test(cypress): copy paste test on chat and small fixes for existing s…

…cripts (#2373)

cypress/integration-pair-chat/chat-first-user.js

@@ -43,7 +43,7 @@ describe('Chat features with two accounts at the same time - First User', () =>
     cy.contains('Chat User A', { timeout: 300000 }).should('be.visible')
     //Attempt 3 times to ensure that if first account loads before, second account will see the typing indicator
     for (let times = 0; times < 3; times++) {
-      cy.get('.messageuser').should('be.visible').type(longMessage).clear()
+      cy.get('.editable-input').should('be.visible').type(longMessage).clear()
     }
   })
 })

cypress/integration/chat-features.js

@@ -2,8 +2,11 @@ const faker = require('faker')
 const randomPIN = faker.internet.password(7, false, /[A-Z]/, 'test') // generate random PIN
 const randomNumber = faker.datatype.number() // generate random number
 const randomMessage = faker.lorem.sentence() // generate random sentence
+const imageLocalPath = 'cypress/fixtures/images/logo.png'
+const randomTextToCopy = faker.lorem.sentence() // generate random sentence
 const recoverySeed =
   'boring over tilt regret diamond rubber example there fire roof sheriff always{enter}'
+let imageURL
 
 describe('Chat Features Tests', () => {
   it('Chat - Send stuff on chat', () => {
@@ -17,6 +20,7 @@ describe('Chat Features Tests', () => {
     cy.get('.toggle-sidebar').should('be.visible').click()
 
     //Validate message and emojis are sent
+    cy.waitForMessagesToLoad()
     cy.chatFeaturesSendMessage(randomMessage)
     cy.chatFeaturesSendEmoji('[title="smile"]', '😄')
 
@@ -48,4 +52,77 @@ describe('Chat Features Tests', () => {
     cy.get('.pack-list > .is-text').should('contain', 'Try using some glyphs')
     cy.get('#glyph-toggle').click()
   })
+
+  it('Chat - Copy paste text', () => {
+    //Sending another random message to validate the scenario
+    cy.chatFeaturesSendMessage(randomTextToCopy)
+
+    // Allowing Chrome Browser to have read and write access to clipboard
+    cy.wrap(
+      Cypress.automation('remote:debugger:protocol', {
+        command: 'Browser.grantPermissions',
+        params: {
+          permissions: ['clipboardReadWrite', 'clipboardSanitizedWrite'],
+          //make the permission trigger by allowing the current origin only
+          origin: window.location.origin,
+        },
+      }),
+    )
+
+    //Ensuring permissions for read were granted
+    cy.window()
+      .its('navigator.permissions')
+      .invoke('query', { name: 'clipboard-read' })
+      .its('state')
+      .should('equal', 'granted')
+
+    //Copying the latest text message sent
+    cy.get('[data-cy=chat-message]').last().rightclick()
+    cy.contains('Copy Message').realClick()
+
+    //Validating that text messsage copied matches with actual clipboard value
+    cy.window()
+      .its('navigator.clipboard')
+      .invoke('readText')
+      .should('equal', randomTextToCopy)
+      .then((clipboardText) => {
+        //Simulating the paste event through a cypress command passing the clipboard data
+        cy.get('.editable-input').realClick().paste({
+          pasteType: 'text',
+          pastePayload: clipboardText,
+        })
+      })
+    //Validating that editable input text matches with pasted value
+    cy.get('.editable-input').should('have.text', randomTextToCopy)
+  })
+
+  it.skip('Chat - Copy paste images - Test skipped until AP-1080 bug is fixed', () => {
+    //Test skipped until AP-1080 bug is fixed
+    //Send an image in chat
+    cy.chatFeaturesSendImage(imageLocalPath)
+
+    //Copying the latest image URL sent
+    cy.get('[data-cy=chat-image]')
+      .last()
+      .invoke('attr', 'src')
+      .then((imgSrcValue) => {
+        imageURL = imgSrcValue
+      })
+    cy.get('[data-cy=chat-image]').last().rightclick()
+    cy.contains('Copy Image').realClick()
+
+    //Simulating paste event through a cypress command passing the clipboard image URL data
+    cy.window()
+      .its('navigator.clipboard')
+      .invoke('read')
+      .then((clipboardImageURL) => {
+        cy.get('.editable-input').realClick().paste({
+          pasteType: 'url',
+          pastePayload: clipboardImageURL,
+        })
+      })
+    //Validating that preview of image is displayed and matches with image filename copied from clipboard
+    cy.get('.file-item').should('be.visible')
+    cy.get('.file-info > .title').should('contain', 'logo.png')
+  })
 })

cypress/integration/chat-pair-features.js

@@ -21,6 +21,7 @@ describe('Chat features with two accounts - First User', () => {
   })
 
   it('Send message to user B', () => {
+    cy.waitForMessagesToLoad()
     cy.chatFeaturesSendMessage(randomMessage)
     cy.contains(randomMessage).last().scrollIntoView().should('be.visible')
   })
@@ -75,6 +76,8 @@ describe('Chat features with two accounts - First User', () => {
   })
 
   it('Assert message received from user A', () => {
+    //Adding assertion to validate that messages are displayed
+    cy.waitForMessagesToLoad()
     cy.contains(randomMessage).last().scrollIntoView().should('be.visible')
   })
 

cypress/integration/mobiles-responsiveness.js

@@ -58,6 +58,7 @@ describe('Run responsiveness tests on several devices', () => {
       cy.get('.toggle-sidebar').should('be.visible').click()
 
       //Validate message and emojis are sent
+      cy.waitForMessagesToLoad()
       cy.chatFeaturesSendMessage(randomMessage)
       cy.chatFeaturesSendEmoji('[title="smile"]', '😄')
 

cypress/integration/snapshots-test.js

@@ -33,11 +33,17 @@ describe('Snapshots Testing', () => {
   })
 
   it('Import account - Buffering screen', () => {
-    cy.snapshotTestContains('Linking Satellites...', 60000)
+    cy.contains('Linking Satellites...').should('be.visible')
+    cy.snapshotTestContains(
+      'Aligning satellites to retrieve your account',
+      60000,
+    )
   })
 
   it('Import account - Main Screen Loaded', () => {
-    cy.snapshotTestContains('SnapQA', 60000)
+    cy.contains('SnapQA', { timeout: 60000 })
+    cy.get('body').realClick({ position: 'topLeft' })
+    cy.snapshotTestContains('SnapQA')
   })
 
   it('Import account - Go to files', () => {
@@ -158,6 +164,9 @@ describe('Snapshots Testing', () => {
     //User input fill and finishing account creation
     cy.createAccountUserInput(randomName, randomStatus)
     cy.createAccountSubmit()
-    cy.snapshotTestContains('Linking Satellites...', 20000)
+    cy.snapshotTestContains(
+      'Aligning satellites to retrieve your account...',
+      20000,
+    )
   })
 })

cypress/support/commands.js

@@ -34,14 +34,10 @@ for (const command of [
 //Command to retry visiting root page when previous PIN data is not cleared correctly
 
 Cypress.Commands.add('visitRootPage', () => {
-  cy.window().then((win) => {
-    win.sessionStorage.clear()
-  })
-  cy.clearCookies()
-  cy.clearLocalStorage()
   cy.visit('/')
-  cy.url().then(($url) => {
-    if (!($url === redirectedURL)) {
+  cy.get('[data-cy=pin-label]').then(($label) => {
+    // retries visiting the page after deleting storage and cookies to delete stored pin
+    if ($label.text() === 'Decrypt Account') {
       cy.window().then((win) => {
         win.sessionStorage.clear()
       })
@@ -250,16 +246,16 @@ Cypress.Commands.add('chatFeaturesProfileName', (value) => {
 })
 
 Cypress.Commands.add('chatFeaturesSendMessage', (message) => {
-  cy.get('.messageuser').should('be.visible').type(message)
-  cy.get('.messageuser').type('{enter}') // sending text message
+  cy.get('.editable-input').should('be.visible').type(message, { force: true })
+  cy.get('.editable-input').type('{enter}') // sending text message
   cy.contains(message)
 })
 
 Cypress.Commands.add('chatFeaturesSendEmoji', (emojiLocator, emojiValue) => {
   cy.get('#emoji-toggle > .control-icon').click()
   cy.get(emojiLocator).click() // sending emoji
-  cy.get('.messageuser').click()
-  cy.get('.messageuser').type('{enter}')
+  cy.get('.editable-input').click()
+  cy.get('.editable-input').type('{enter}')
   cy.contains(emojiValue)
 })
 
@@ -278,7 +274,7 @@ Cypress.Commands.add('chatFeaturesSendGlyph', () => {
   cy.get('#glyph-toggle').click()
   cy.get('.pack-list > .is-text').should('contain', 'Try using some glyphs')
   cy.get('.glyph-item').first().click()
-  cy.get('.messageuser').click().type('{enter}')
+  cy.get('.editable-input').click().type('{enter}')
 })
 
 Cypress.Commands.add('chatFeaturesSendImage', (imagePath) => {
@@ -289,7 +285,7 @@ Cypress.Commands.add('chatFeaturesSendImage', (imagePath) => {
   cy.get('.file-info > .title').should('contain', 'logo.png')
   cy.contains('Scanning', { timeout: 120000 }).should('not.exist')
   cy.get('.thumbnail').should('be.visible')
-  cy.get('.messageuser').type('{enter}')
+  cy.get('.editable-input').type('{enter}')
   cy.get('.thumbnail', { timeout: 120000 }).should('not.exist')
 })
 
@@ -300,15 +296,22 @@ Cypress.Commands.add('chatFeaturesSendFile', (filePath) => {
   cy.get('.file-item').should('be.visible')
   cy.get('.file-info > .title').should('contain', 'test-file.txt')
   cy.get('.preview', { timeout: 120000 }).should('exist')
-  cy.get('.messageuser').type('{enter}')
+  cy.get('.editable-input').type('{enter}')
   cy.get('.preview', { timeout: 120000 }).should('not.exist')
 })
 
+Cypress.Commands.add('waitForMessagesToLoad', () => {
+  cy.get('[data-cy=chat-message]', { timeout: 30000 })
+    .last()
+    .scrollIntoView()
+    .should('be.visible')
+})
+
 //Version Release Notes Commands
 
 Cypress.Commands.add('releaseNotesScreenValidation', () => {
   cy.get('[data-cy=version]').should('be.visible').click()
-  cy.contains('Update').should('be.visible')
+  cy.contains('Update', { timeout: 30000 }).should('be.visible')
   cy.contains('is Here!').should('be.visible')
   cy.contains('Got It!').should('be.visible').click()
 })
@@ -345,3 +348,31 @@ Cypress.Commands.add('validatePassphraseLocalStorage', () => {
     expect(valueObject.accounts.phrase).to.eq('')
   })
 })
+
+// Paste Command
+
+Cypress.Commands.add(
+  'paste',
+  { prevSubject: true },
+  function (subject, pasteOptions) {
+    const { pastePayload, pasteType } = pasteOptions
+    const data =
+      pasteType === 'application/json'
+        ? JSON.stringify(pastePayload)
+        : pastePayload
+    // https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer
+    const clipboardData = new DataTransfer()
+    clipboardData.setData(pasteType, data)
+    // https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event
+    const pasteEvent = new ClipboardEvent('paste', {
+      bubbles: true,
+      cancelable: true,
+      dataType: pasteType,
+      data,
+      clipboardData,
+    })
+    subject[0].dispatchEvent(pasteEvent)
+
+    return subject
+  },
+)

pages/auth/unlock/Unlock.html

@@ -13,6 +13,7 @@
       size="small"
       input-kind="password"
       :type="`${error ? 'danger' : 'primary'}`"
+      :data-cy="`pin-label`"
       :label-text="`${getPinHash ? $t('pages.unlock.decrypt') : 'Choose Your Pin'}`"
       :placeholder="$t('pages.unlock.placeholder')"
       :loading="decrypting"