test(cypress): fixes for chat images validations (#3795)

Satellite-im · Jun 22, 2022 · a12fb8c · a12fb8c
1 parent 1b7be43
commit a12fb8c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git a/components/ui/Chat/Image/Image.html b/components/ui/Chat/Image/Image.html
@@ -2,10 +2,14 @@
   <figure class="image-placeholder" v-if="usePlaceholder">
     <img
       class="image-placeholder-img"
+      data-cy="chat-image-placeholder"
       :src="placeholderSrc"
       :alt="placeholderText"
     />
-    <figcaption class="image-placeholder-caption">
+    <figcaption
+      class="image-placeholder-caption"
+      data-cy="image-placeholder-caption"
+    >
       {{placeholderText}}
     </figcaption>
   </figure>

diff --git a/cypress/integration/chat-images-validations.js b/cypress/integration/chat-images-validations.js
@@ -14,7 +14,7 @@ const path = require('path')
 
 describe('Chat - Sending Images Tests', () => {
   const downloadsFolder = Cypress.config('downloadsFolder')
-  it('PNG image is sent successfully on chat', { retries: 2 }, () => {
+  it('Load account for test chat images scenarios', { retries: 2 }, () => {
     //Import account
     cy.importAccount(randomPIN, recoverySeed)
 
@@ -23,36 +23,46 @@ describe('Chat - Sending Images Tests', () => {
 
     //Validate message is sent
     cy.goToConversation('cypress friend')
+  })
 
+  it('PNG image is sent successfully on chat', () => {
     //Send PNG Image
-    // cy.chatFeaturesSendImage(pngImagePath, 'logo.png')
-    // cy.goToLastImageOnChat(90000) // first image sent takes more time
+    cy.chatFeaturesSendImage(pngImagePath, 'logo.png')
+    cy.goToLastImageOnChat(90000) // first image sent takes more time
   })
 
-  it.skip('JPG image is sent successfully on chat', () => {
+  it('JPG image is sent successfully on chat', () => {
     //Send JPG Image
     cy.chatFeaturesSendImage(jpgImagePath, 'jpeg-test.jpg')
     cy.goToLastImageOnChat(30000)
   })
 
-  it.skip('Save Image from Chat', () => {
+  it('Save Image from Chat', () => {
     // Go to last image (jpeg), right click and select on context menu Save Image
     cy.goToLastImageOnChat(30000).as('lastImage')
     cy.selectContextMenuOption('@lastImage', 'Save Image')
     // Assert image was downloaded in downloads folder with the same name
-    const downloadedFile = path.join(downloadsFolder, 'download.jpeg')
+    const downloadedFile = path.join(downloadsFolder, 'jpeg-test.jpg')
     cy.readFile(downloadedFile, { timeout: 15000 }).should('exist')
   })
 
-  it.skip('GIF image is sent successfully on chat', () => {
+  it('GIF image is sent successfully on chat', () => {
     //Send GIF Image
     cy.chatFeaturesSendImage(gifImagePath, 'gif-test.gif')
     cy.goToLastImageOnChat()
   })
 
-  it.skip('Invalid image is not sent successfully on chat', () => {
-    //Send Invalid Image
+  it('Invalid image is not sent successfully on chat', () => {
+    //Send Invalid Image and validate that image placeholder is visible instead of image
+    //Ensure that Image failed to load text is displayed
     cy.chatFeaturesSendImage(invalidImagePath, 'incorrect-image.png')
-    cy.goToLastImageOnChat()
-  }) //skipped due to DOM issue - AP-1665
+    cy.get('[data-cy=chat-image-placeholder]')
+      .last()
+      .scrollIntoView()
+      .should('be.visible')
+    cy.get('[data-cy=image-placeholder-caption]').should(
+      'contain',
+      'Image failed to load',
+    )
+  })
 })
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -512,24 +512,22 @@ Cypress.Commands.add('goToConversation', (user, isMobile = false) => {
   }
 
   //Wait until conversation is fully loaded
-  cy.get('[data-cy=chat-message]', { timeout: 180000 }).last().should('exist')
+  cy.get('[data-cy=message-container]', { timeout: 180000 })
+    .last()
+    .should('be.visible')
 })
 
 // Chat - Hover on Icon Commands
 
 Cypress.Commands.add('hoverOnComingSoonIcon', (locator, expectedMessage) => {
   cy.get(locator).should('be.visible').find('.coming-soon').should('exist')
   cy.get(locator).realHover()
-  cy.wait(1000)
   cy.contains(expectedMessage).should('be.visible')
-  cy.wait(1000)
 })
 
 Cypress.Commands.add('hoverOnActiveIcon', (locator, expectedMessage) => {
   cy.get(locator).should('be.visible').realHover()
-  cy.wait(1000)
   cy.contains(expectedMessage).should('be.visible')
-  cy.wait(1000)
 })
 
 // Chat - URL Commands