feat: add support for files and math for messages (#5)

cypress/fixtures/channels/[channelId]/get.ts

@@ -1,5 +1,4 @@
 import { Handler } from '../../handler'
-
 import { channelExample } from '../channel'
 
 export const getChannelWithChannelIdHandler: Handler = {

cypress/fixtures/channels/[channelId]/messages/get.ts

@@ -1,7 +1,14 @@
 import { Handler } from '../../../handler'
 import {
   messageExampleComplete,
-  messageExampleComplete2
+  messageExampleComplete2,
+  messageExampleComplete3,
+  messageExampleComplete4,
+  messageExampleComplete5,
+  messageExampleComplete6,
+  messageExampleComplete7,
+  messageExampleComplete8,
+  messageExampleComplete9
 } from '../../../messages/message'
 import { channelExample } from '../../channel'
 
@@ -10,6 +17,16 @@ export const getMessagesWithChannelIdHandler: Handler = {
   url: `/channels/${channelExample.id}/messages`,
   response: {
     statusCode: 200,
-    body: [messageExampleComplete, messageExampleComplete2]
+    body: [
+      messageExampleComplete,
+      messageExampleComplete2,
+      messageExampleComplete3,
+      messageExampleComplete4,
+      messageExampleComplete5,
+      messageExampleComplete6,
+      messageExampleComplete7,
+      messageExampleComplete8,
+      messageExampleComplete9
+    ]
   }
 }

cypress/fixtures/guilds/[guildId]/get.ts

@@ -1,5 +1,4 @@
 import { Handler } from '../../handler'
-
 import { guildExample } from '../guild'
 import { memberExampleComplete } from '../../members/member'
 

cypress/fixtures/guilds/get.ts

@@ -1,5 +1,4 @@
 import { Handler } from '../handler'
-
 import { guildExample, guildExample2 } from './guild'
 
 export const getGuildsHandler: Handler = {

cypress/fixtures/guilds/post.ts

@@ -1,5 +1,4 @@
 import { Handler } from '../handler'
-
 import { guildExample } from './guild'
 import { channelExample } from '../channels/channel'
 import { memberExampleComplete } from '../members/member'

cypress/fixtures/guilds/public/get.ts

@@ -1,5 +1,4 @@
 import { Handler } from '../../handler'
-
 import { guildExample, guildExample2 } from '../guild'
 
 export const getGuildsPublicEmptyHandler: Handler = {

cypress/fixtures/handler.ts

@@ -5,6 +5,7 @@ export interface Handler {
   method: 'GET' | 'POST' | 'PUT' | 'DELETE'
   url: `/${string}`
   response: {
+    isFile?: boolean
     body: any
     statusCode: number
   }

cypress/fixtures/messages/message.ts

@@ -18,8 +18,63 @@ export const messageExampleComplete = {
 }
 
 export const messageExampleComplete2 = {
-  ...messageExample,
+  ...messageExampleComplete,
   id: 2,
-  value: 'Second message',
-  member: memberExampleComplete
+  value: 'Message with bad html: <script>alert("xss")</script>'
+}
+
+export const messageExampleComplete3 = {
+  ...messageExampleComplete,
+  id: 3,
+  value:
+    'Message with **bold text** and *italic text*.\nNewlines and some emoji: :smile:'
+}
+
+export const messageExampleComplete4 = {
+  ...messageExampleComplete,
+  id: 4,
+  value: `The Quadratic Formula:
+
+**Theorem 1**: $(a, b, c) \\in \\mathbb{R}^3$, the solutions of $ax^2 + bx + c = 0$ are:
+
+$x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$
+  `
+}
+
+export const messageExampleComplete5 = {
+  ...messageExampleComplete,
+  id: 5,
+  value: ':wave:'
+}
+
+export const messageExampleComplete6 = {
+  ...messageExampleComplete,
+  id: 6,
+  value: '/uploads/messages/image.png',
+  type: 'file',
+  mimetype: 'image/png'
+}
+
+export const messageExampleComplete7 = {
+  ...messageExampleComplete,
+  id: 7,
+  value: '/uploads/messages/audio.mp3',
+  type: 'file',
+  mimetype: 'audio/mp3'
+}
+
+export const messageExampleComplete8 = {
+  ...messageExampleComplete,
+  id: 8,
+  value: '/uploads/messages/video.mp4',
+  type: 'file',
+  mimetype: 'video/mp4'
+}
+
+export const messageExampleComplete9 = {
+  ...messageExampleComplete,
+  id: 9,
+  value: '/uploads/messages/download.zip',
+  type: 'file',
+  mimetype: 'application/zip'
 }

cypress/fixtures/uploads/messages/get.ts

@@ -0,0 +1,47 @@
+import { Handler } from '../../handler'
+import {
+  messageExampleComplete6,
+  messageExampleComplete7,
+  messageExampleComplete8,
+  messageExampleComplete9
+} from '../../messages/message'
+
+export const getMessagesUploadsImageHandler: Handler = {
+  method: 'GET',
+  url: messageExampleComplete6.value as `/${string}`,
+  response: {
+    statusCode: 200,
+    isFile: true,
+    body: ['image.png']
+  }
+}
+
+export const getMessagesUploadsAudioHandler: Handler = {
+  method: 'GET',
+  url: messageExampleComplete7.value as `/${string}`,
+  response: {
+    statusCode: 200,
+    isFile: true,
+    body: ['audio.mp3']
+  }
+}
+
+export const getMessagesUploadsVideoHandler: Handler = {
+  method: 'GET',
+  url: messageExampleComplete8.value as `/${string}`,
+  response: {
+    statusCode: 200,
+    isFile: true,
+    body: ['video.mp4']
+  }
+}
+
+export const getMessagesUploadsDownloadHandler: Handler = {
+  method: 'GET',
+  url: messageExampleComplete9.value as `/${string}`,
+  response: {
+    statusCode: 200,
+    isFile: true,
+    body: ['download.zip']
+  }
+}

cypress/fixtures/users/current/get.ts

@@ -1,5 +1,4 @@
 import { Handler } from '../../handler'
-
 import { userExample, userSettingsExample } from '../user'
 
 export const getUsersCurrentHandler: Handler = {

cypress/fixtures/users/signup/post.ts

@@ -1,5 +1,4 @@
 import { Handler } from '../../handler'
-
 import { userExample, userSettingsExample } from '../user'
 
 export const postUsersSignupHandler: Handler = {

cypress/integration/pages/application/[guildId]/[channelId].spec.ts

@@ -18,6 +18,12 @@ import {
 import { getMembersWithGuildIdHandler } from '../../../../fixtures/guilds/[guildId]/members/get'
 import { memberExampleComplete } from '../../../../fixtures/members/member'
 import { API_URL } from '../../../../../tools/api'
+import {
+  getMessagesUploadsAudioHandler,
+  getMessagesUploadsDownloadHandler,
+  getMessagesUploadsImageHandler,
+  getMessagesUploadsVideoHandler
+} from '../../../../fixtures/uploads/messages/get'
 
 describe('Pages > /application/[guildId]/[channelId]', () => {
   beforeEach(() => {
@@ -79,36 +85,95 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
       ...authenticationHandlers,
       getGuildMemberWithGuildIdHandler,
       getChannelWithChannelIdHandler,
-      getMessagesWithChannelIdHandler
+      getMessagesWithChannelIdHandler,
+      getMessagesUploadsImageHandler,
+      getMessagesUploadsAudioHandler,
+      getMessagesUploadsVideoHandler,
+      getMessagesUploadsDownloadHandler
     ]).setCookie('refreshToken', 'refresh-token')
     cy.intercept(`${API_URL}${getMessagesWithChannelIdHandler.url}*`).as(
       'getMessagesWithChannelIdHandler'
     )
+    cy.intercept(`${API_URL}${getMessagesUploadsImageHandler.url}`).as(
+      'getMessagesUploadsImageHandler'
+    )
+    cy.intercept(`${API_URL}${getMessagesUploadsAudioHandler.url}`).as(
+      'getMessagesUploadsAudioHandler'
+    )
+    cy.intercept(`${API_URL}${getMessagesUploadsVideoHandler.url}`).as(
+      'getMessagesUploadsVideoHandler'
+    )
+    cy.intercept(`${API_URL}${getMessagesUploadsDownloadHandler.url}`).as(
+      'getMessagesUploadsDownloadHandler'
+    )
     cy.intercept(`/_next/*`).as('nextStaticAndImages')
     cy.visit(`/application/${guildExample.id}/${channelExample.id}`)
-    cy.wait(['@getMessagesWithChannelIdHandler', '@nextStaticAndImages']).then(
-      () => {
-        cy.get('.messages-list').children().should('have.length', 2)
-        cy.get('.messages-list p:first').should(
-          'have.text',
-          messageExampleComplete.value
+    cy.wait([
+      '@getMessagesWithChannelIdHandler',
+      '@nextStaticAndImages',
+      '@getMessagesUploadsImageHandler',
+      '@getMessagesUploadsAudioHandler',
+      '@getMessagesUploadsVideoHandler',
+      '@getMessagesUploadsDownloadHandler'
+    ]).then(() => {
+      cy.get('.messages-list').children().should('have.length', 9)
+      cy.get('[data-cy=message-1] p').should(
+        'have.text',
+        messageExampleComplete.value
+      )
+      cy.get('[data-cy=message-1] [data-cy=message-member-user-name]').should(
+        'have.text',
+        messageExampleComplete.member.user.name
+      )
+      cy.get('[data-cy=message-1] [data-cy=message-date]').should(
+        'have.text',
+        date.format(
+          new Date(messageExampleComplete.createdAt),
+          'DD/MM/YYYY - HH:mm:ss'
         )
-        cy.get(
-          '.messages-list [data-cy=message-member-user-name]:first'
-        ).should('have.text', messageExampleComplete.member.user.name)
-        cy.get('.messages-list [data-cy=message-date]:first').should(
-          'have.text',
-          date.format(
-            new Date(messageExampleComplete.createdAt),
-            'DD/MM/YYYY - HH:mm:ss'
-          )
-        )
-        cy.get('.messages-list p:last').should(
-          'have.text',
-          messageExampleComplete2.value
-        )
-      }
-    )
+      )
+      cy.get('[data-cy=message-2] p').should(
+        'have.text',
+        messageExampleComplete2.value
+      )
+      cy.get('[data-cy=message-3] p').should(
+        'have.text',
+        'Message with bold text and italic text.\nNewlines and some emoji: '
+      )
+      cy.get('[data-cy=message-3] strong').should('have.text', 'bold text')
+      cy.get('[data-cy=message-3] em').should('have.text', 'italic text')
+      cy.get('[data-cy=message-3] span[title=smile]').should('exist')
+      cy.get('[data-cy=message-3] span[title=smile]').should(
+        'have.css',
+        'width',
+        '20px'
+      )
+      cy.get('[data-cy=message-3] span[title=smile]').should(
+        'have.css',
+        'height',
+        '20px'
+      )
+      cy.get('[data-cy=message-4] p:first').should(
+        'have.text',
+        'The Quadratic Formula:'
+      )
+      cy.get('[data-cy=message-4] .math').should('have.length', 3)
+      cy.get('[data-cy=message-5] span[title=wave]').should('exist')
+      cy.get('[data-cy=message-5] span[title=wave]').should(
+        'have.css',
+        'width',
+        '40px'
+      )
+      cy.get('[data-cy=message-5] span[title=wave]').should(
+        'have.css',
+        'height',
+        '40px'
+      )
+      cy.get('[data-cy=message-file-image-6]').should('exist')
+      cy.get('[data-cy=message-file-audio-7]').should('exist')
+      cy.get('[data-cy=message-file-video-8]').should('exist')
+      cy.get('[data-cy=message-file-download-9]').should('exist')
+    })
   })
 
   it('should succeeds and display the members in right sidebar correctly', () => {

cypress/integration/pages/authentication/signin.spec.ts

@@ -2,7 +2,7 @@ import { authenticationHandlers } from '../../../fixtures/handler'
 import {
   postUsersSigninHandler,
   postUsersSigninInvalidCredentialsHandler
-} from 'cypress/fixtures/users/signin/post'
+} from '../../../fixtures/users/signin/post'
 import { userExample } from '../../../fixtures/users/user'
 
 describe('Pages > /authentication/signin', () => {

cypress/plugins/index.js

@@ -1,3 +1,5 @@
+import path from 'node:path'
+
 import { getLocal } from 'mockttp'
 
 import { API_DEFAULT_PORT } from '../../tools/api'
@@ -7,6 +9,13 @@ import { API_DEFAULT_PORT } from '../../tools/api'
 /** @type {import('mockttp').Mockttp | null}  */
 let server = null
 
+const UPLOADS_FIXTURES_DIRECTORY = path.join(
+  process.cwd(),
+  'cypress',
+  'fixtures',
+  'uploads'
+)
+
 /**
  * @type {Cypress.PluginConfig}
  */
@@ -21,10 +30,18 @@ module.exports = (on, config) => {
       })
       await server.start(API_DEFAULT_PORT)
       for (const handler of handlers) {
-        await server[handler.method.toLowerCase()](handler.url).thenJson(
-          handler.response.statusCode,
-          handler.response.body
-        )
+        const { isFile = false } = handler.response
+        if (isFile) {
+          await server[handler.method.toLowerCase()](handler.url).thenFromFile(
+            handler.response.statusCode,
+            path.join(UPLOADS_FIXTURES_DIRECTORY, ...handler.response.body)
+          )
+        } else {
+          await server[handler.method.toLowerCase()](handler.url).thenJson(
+            handler.response.statusCode,
+            handler.response.body
+          )
+        }
       }
       return null
     },