test(cypress): add markdown tests

components/views/chat/conversation/Conversation.html

@@ -11,7 +11,7 @@
       <TypographyHorizontalRuleText :value="group.at.toString()" />
     </div>
   </div>
-  <div v-if="textile.messageLoading" class="zoop">
+  <div v-if="textile.messageLoading" data-cy="loading-indicator" class="zoop">
     <UiLoadersLoadingBar />
   </div>
 </div>

cypress/integration/chat-text-validations.js

@@ -3,6 +3,8 @@ const randomPIN = faker.internet.password(7, false, /[A-Z]/, 'test') // generate
 const recoverySeed =
   'useful wedding venture reopen forest lawsuit essence hamster kitchen bundle level tower{enter}'
 let longMessage = faker.random.alphaNumeric(2060) // generate random alphanumeric text with 2060 chars
+const randomMessage = faker.lorem.sentence() // generate random sentence
+const randomURL = faker.internet.url() // generate random url
 let urlToValidate = 'https://www.satellite.im'
 let urlToValidateTwo = 'http://www.satellite.im'
 let urlToValidateThree = 'www.satellite.im'
@@ -101,4 +103,58 @@ describe('Chat Text and Sending Links Validations', () => {
       .scrollIntoView()
       .should('not.have.attr', 'href', urlToValidateThree)
   })
+
+  it('User should be able to use markdown "*" to make a word italic in chat', () => {
+    cy.sendMessageWithMarkdown(randomMessage, '*')
+  })
+
+  it('User should be able to use markdown "_" to make a word italic in chat', () => {
+    cy.sendMessageWithMarkdown(randomMessage, '_')
+  })
+
+  it('User should be able to use markdown "**" to make a word bold in chat', () => {
+    cy.sendMessageWithMarkdown(randomMessage, '**')
+  })
+
+  it('User should be able to use markdown "__" to put an underscore on a word in chat', () => {
+    cy.sendMessageWithMarkdown(randomMessage, '__')
+  })
+
+  it('User should be able to use "" to escape in chat', () => {
+    cy.sendMessageWithEscapeOrAutolink('*To Do')
+    cy.get('[data-cy=chat-message]')
+      .last()
+      .scrollIntoView()
+      .should('have.text', '*To Do')
+  })
+
+  it('User should be able to use "\\" to write a single "" in chat', () => {
+    cy.sendMessageWithEscapeOrAutolink('\\*To Do')
+    cy.get('[data-cy=chat-message]')
+      .last()
+      .scrollIntoView()
+      .should('have.text', '*To Do')
+  })
+
+  it('User should be able to use markdown ` to code with single', () => {
+    cy.sendMessageWithMarkdown(randomMessage, '`')
+  })
+
+  it('User should be able to use markdown "***" to use combined bold/italics', () => {
+    cy.sendMessageWithMarkdown(randomMessage, '***')
+  })
+
+  it('User should be able to use markdown "~~" to put a strikethrough a word in chat', () => {
+    cy.sendMessageWithMarkdown(randomMessage, '~~')
+  })
+
+  it('User should use markdown "<>" to insert an autolink', () => {
+    let locatorURL = 'a[href="' + randomURL + '"]'
+    cy.sendMessageWithEscapeOrAutolink('<' + randomURL + '>')
+    cy.get(locatorURL).last().scrollIntoView().should('have.attr', 'href')
+  })
+
+  it('User should use markdown "||" to insert an spoiler', () => {
+    cy.sendMessageWithMarkdown(randomMessage, '||')
+  })
 })

cypress/support/commands.js

@@ -724,6 +724,72 @@ Cypress.Commands.add('renameFileOrFolder', (newName, type = 'folder') => {
   cy.contains(newName, { timeout: 30000 }).should('be.visible')
 })
 
+// Chat - Markdown Commands
+
+Cypress.Commands.add('sendMessageWithMarkdown', (text, markdown) => {
+  let pastePayload = markdown + text + markdown
+  // Write the text message
+  cy.get('[data-cy=editable-input]')
+    .should('be.visible')
+    .trigger('input')
+    .paste({
+      pasteType: 'text',
+      pastePayload: pastePayload,
+    })
+  // Assert the text message is displayed before sending
+  cy.get('[data-cy=editable-input]')
+    .should('have.text', pastePayload)
+    .then(() => {
+      cy.get('[data-cy=send-message]').click() //sending text message
+    })
+  // Wait until loading indicator disappears
+  cy.get('[data-cy=loading-indicator]', { timeout: 30000 }).should('not.exist')
+  // Depending on the markdown passed, assert the text from the corresponding HTML tag
+  if (markdown === '*' || markdown === '_') {
+    cy.get('em').last().should('have.text', text)
+  } else if (markdown === '**') {
+    cy.get('strong').last().should('have.text', text)
+  } else if (markdown === '__') {
+    cy.get('u').last().should('have.text', text)
+  } else if (markdown === '`') {
+    cy.get('code').last().should('have.text', text)
+  } else if (markdown === '***') {
+    cy.get('strong')
+      .last()
+      .should('have.text', text)
+      .parent('em') // Assert that text have a parent EM HTML tag
+      .should('exist')
+  } else if (markdown === '~~') {
+    cy.get('del').last().should('have.text', text)
+  } else if (markdown === '||') {
+    cy.get('.spoiler')
+      .last()
+      .should('not.have.class', 'spoiler-open')
+      .click() // Assert that after clicking the spoiler, text is displayed
+      .should('have.class', 'spoiler-open')
+      .and('have.text', text)
+  }
+})
+
+Cypress.Commands.add('sendMessageWithEscapeOrAutolink', (textWithMarkdown) => {
+  // Write the text message
+  cy.get('[data-cy=editable-input]')
+    .should('be.visible')
+    .trigger('input')
+    .paste({
+      pasteType: 'text',
+      pastePayload: textWithMarkdown,
+    })
+  // Assert the text message is displayed before sending
+  cy.get('[data-cy=editable-input]')
+    .should('have.text', textWithMarkdown)
+    .then(() => {
+      cy.get('[data-cy=send-message]').click() //sending text message
+    })
+  // Wait until loading indicator disappears
+  cy.get('[data-cy=loading-indicator]', { timeout: 30000 }).should('not.exist')
+})
+
 //Version Release Notes Commands
 
 Cypress.Commands.add('releaseNotesScreenValidation', () => {