feat(pages): add /application/[guildId]/[channelId] (#4)

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

@@ -0,0 +1,14 @@
+import { Handler } from '../../handler'
+
+import { channelExample } from '../channel'
+
+export const getChannelWithChannelIdHandler: Handler = {
+  method: 'GET',
+  url: `/channels/${channelExample.id}`,
+  response: {
+    statusCode: 200,
+    body: {
+      channel: channelExample
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import { Handler } from '../../../handler'
+import {
+  messageExampleComplete,
+  messageExampleComplete2
+} from '../../../messages/message'
+import { channelExample } from '../../channel'
+
+export const getMessagesWithChannelIdHandler: Handler = {
+  method: 'GET',
+  url: `/channels/${channelExample.id}/messages`,
+  response: {
+    statusCode: 200,
+    body: [messageExampleComplete, messageExampleComplete2]
+  }
+}

cypress/fixtures/channels/channel.ts

@@ -1,9 +1,15 @@
-import { guild } from '../guilds/guild'
+import { guildExample } from '../guilds/guild'
 
-export const channel = {
+export const channelExample = {
   id: 1,
   name: 'general',
-  guildId: guild.id,
+  guildId: guildExample.id,
   createdAt: new Date().toISOString(),
   updatedAt: new Date().toISOString()
 }
+
+export const channelExample2 = {
+  ...channelExample,
+  id: 2,
+  name: 'general2'
+}

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

@@ -0,0 +1,12 @@
+import { guildExample } from '../../guild'
+import { Handler } from '../../../handler'
+import { channelExample, channelExample2 } from '../../../channels/channel'
+
+export const getChannelsWithGuildIdHandler: Handler = {
+  method: 'GET',
+  url: `/guilds/${guildExample.id}/channels`,
+  response: {
+    statusCode: 200,
+    body: [channelExample, channelExample2]
+  }
+}

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

@@ -0,0 +1,16 @@
+import { Handler } from '../../handler'
+
+import { guildExample } from '../guild'
+import { memberExampleComplete } from '../../members/member'
+
+export const getGuildMemberWithGuildIdHandler: Handler = {
+  method: 'GET',
+  url: `/guilds/${guildExample.id}`,
+  response: {
+    statusCode: 200,
+    body: {
+      guild: guildExample,
+      member: memberExampleComplete
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import { guildExample } from '../../guild'
+import { Handler } from '../../../handler'
+import { memberExampleComplete } from '../../../members/member'
+
+export const getMembersWithGuildIdHandler: Handler = {
+  method: 'GET',
+  url: `/guilds/${guildExample.id}/members`,
+  response: {
+    statusCode: 200,
+    body: [memberExampleComplete]
+  }
+}

cypress/fixtures/guilds/get.ts

@@ -0,0 +1,15 @@
+import { Handler } from '../handler'
+
+import { guildExample, guildExample2 } from './guild'
+
+export const getGuildsHandler: Handler = {
+  method: 'GET',
+  url: '/guilds',
+  response: {
+    statusCode: 200,
+    body: [
+      { ...guildExample, defaultChannelId: 1 },
+      { ...guildExample2, defaultChannelId: 2 }
+    ]
+  }
+}

cypress/fixtures/guilds/guild.ts

@@ -1,4 +1,6 @@
-export const guild = {
+import { Guild } from '../../../models/Guild'
+
+export const guildExample: Guild = {
   id: 1,
   name: 'GuildExample',
   description: 'guild example.',
@@ -7,7 +9,8 @@ export const guild = {
   updatedAt: new Date().toISOString()
 }
 
-export const guild2 = {
-  ...guild,
+export const guildExample2: Guild = {
+  ...guildExample,
+  id: 2,
   name: 'app'
 }

cypress/fixtures/guilds/post.ts

@@ -1,8 +1,8 @@
 import { Handler } from '../handler'
 
-import { guild } from './guild'
-import { channel } from '../channels/channel'
-import { memberComplete } from '../members/member'
+import { guildExample } from './guild'
+import { channelExample } from '../channels/channel'
+import { memberExampleComplete } from '../members/member'
 
 export const postGuildsHandler: Handler = {
   method: 'POST',
@@ -11,9 +11,9 @@ export const postGuildsHandler: Handler = {
     statusCode: 201,
     body: {
       guild: {
-        ...guild,
-        channels: [channel],
-        members: [memberComplete]
+        ...guildExample,
+        channels: [channelExample],
+        members: [memberExampleComplete]
       }
     }
   }

cypress/fixtures/guilds/public/get.ts

@@ -1,6 +1,6 @@
 import { Handler } from '../../handler'
 
-import { guild, guild2 } from '../guild'
+import { guildExample, guildExample2 } from '../guild'
 
 export const getGuildsPublicEmptyHandler: Handler = {
   method: 'GET',
@@ -17,8 +17,8 @@ export const getGuildsPublicHandler: Handler = {
   response: {
     statusCode: 200,
     body: [
-      { ...guild, membersCount: 1 },
-      { ...guild2, membersCount: 1 }
+      { ...guildExample, membersCount: 1 },
+      { ...guildExample2, membersCount: 1 }
     ]
   }
 }
@@ -28,6 +28,6 @@ export const getGuildsPublicSearchHandler: Handler = {
   url: '/guilds/public',
   response: {
     statusCode: 200,
-    body: [{ ...guild2, membersCount: 1 }]
+    body: [{ ...guildExample2, membersCount: 1 }]
   }
 }

cypress/fixtures/handler.ts

@@ -3,7 +3,7 @@ import { postUsersRefreshTokenHandler } from './users/refresh-token/post'
 
 export interface Handler {
   method: 'GET' | 'POST' | 'PUT' | 'DELETE'
-  url: string
+  url: `/${string}`
   response: {
     body: any
     statusCode: number

cypress/fixtures/members/member.ts

@@ -1,16 +1,16 @@
-import { guild } from '../guilds/guild'
-import { user } from '../users/user'
+import { guildExample } from '../guilds/guild'
+import { userExample } from '../users/user'
 
-export const member = {
+export const memberExample = {
   id: 1,
   isOwner: true,
-  userId: user.id,
-  guildId: guild.id,
+  userId: userExample.id,
+  guildId: guildExample.id,
   createdAt: new Date().toISOString(),
   updatedAt: new Date().toISOString()
 }
 
-export const memberComplete = {
-  ...member,
-  user
+export const memberExampleComplete = {
+  ...memberExample,
+  user: userExample
 }

cypress/fixtures/messages/message.ts

@@ -0,0 +1,25 @@
+import { channelExample } from '../channels/channel'
+import { memberExampleComplete } from '../members/member'
+
+export const messageExample = {
+  id: 1,
+  value: 'Hello, world!',
+  type: 'text' as 'text' | 'file',
+  mimetype: 'text/plain',
+  memberId: memberExampleComplete.id,
+  channelId: channelExample.id,
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString()
+}
+
+export const messageExampleComplete = {
+  ...messageExample,
+  member: memberExampleComplete
+}
+
+export const messageExampleComplete2 = {
+  ...messageExample,
+  id: 2,
+  value: 'Second message',
+  member: memberExampleComplete
+}

cypress/fixtures/users/current/get.ts

@@ -1,6 +1,6 @@
 import { Handler } from '../../handler'
 
-import { user, userSettings } from '../user'
+import { userExample, userSettingsExample } from '../user'
 
 export const getUsersCurrentHandler: Handler = {
   method: 'GET',
@@ -9,8 +9,8 @@ export const getUsersCurrentHandler: Handler = {
     statusCode: 200,
     body: {
       user: {
-        ...user,
-        settings: userSettings,
+        ...userExample,
+        settings: userSettingsExample,
         currentStrategy: 'local',
         strategies: ['local']
       }

cypress/fixtures/users/signup/post.ts

@@ -1,6 +1,6 @@
 import { Handler } from '../../handler'
 
-import { user, userSettings } from '../user'
+import { userExample, userSettingsExample } from '../user'
 
 export const postUsersSignupHandler: Handler = {
   method: 'POST',
@@ -9,8 +9,8 @@ export const postUsersSignupHandler: Handler = {
     statusCode: 201,
     body: {
       user: {
-        ...user,
-        settings: userSettings
+        ...userExample,
+        settings: userSettingsExample
       }
     }
   }

cypress/fixtures/users/user.ts

@@ -1,7 +1,7 @@
 import { UserSettings } from '../../../models/UserSettings'
 import { User } from '../../../models/User'
 
-export const user: User = {
+export const userExample: User = {
   id: 1,
   name: 'Divlo',
   email: 'contact@divlo.fr',
@@ -17,7 +17,7 @@ export const user: User = {
   updatedAt: '2021-10-20T20:59:08.485Z'
 }
 
-export const userSettings: UserSettings = {
+export const userSettingsExample: UserSettings = {
   id: 1,
   language: 'en',
   theme: 'dark',

cypress/integration/common/application/authentication.spec.ts

@@ -0,0 +1,43 @@
+import { channelExample } from '../../../fixtures/channels/channel'
+import { guildExample } from '../../../fixtures/guilds/guild'
+import { userExample } from '../../../fixtures/users/user'
+import { getGuildsHandler } from '../../../fixtures/guilds/get'
+import { authenticationHandlers } from '../../../fixtures/handler'
+import { getGuildMemberWithGuildIdHandler } from '../../../fixtures/guilds/[guildId]/get'
+import { getChannelWithChannelIdHandler } from '../../../fixtures/channels/[channelId]/get'
+
+const applicationPaths = [
+  '/application',
+  `/application/users/${userExample.id}`,
+  '/application/guilds/create',
+  '/application/guilds/join',
+  `/application/${guildExample.id}/${channelExample.id}`
+]
+
+describe('Common > application/authentication', () => {
+  beforeEach(() => {
+    cy.task('stopMockServer')
+  })
+
+  it('should redirect the user to `/authentication/signin` if not signed in', () => {
+    for (const applicationPath of applicationPaths) {
+      cy.visit(applicationPath)
+        .location('pathname')
+        .should('eq', '/authentication/signin')
+    }
+  })
+
+  it('should not redirect the user if signed in', () => {
+    cy.task('startMockServer', [
+      ...authenticationHandlers,
+      getGuildsHandler,
+      getGuildMemberWithGuildIdHandler,
+      getChannelWithChannelIdHandler
+    ]).setCookie('refreshToken', 'refresh-token')
+    for (const applicationPath of applicationPaths) {
+      cy.visit(applicationPath)
+        .location('pathname')
+        .should('eq', applicationPath)
+    }
+  })
+})

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

@@ -1,10 +1,143 @@
+import date from 'date-and-time'
+
+import {
+  channelExample,
+  channelExample2
+} from '../../../../fixtures/channels/channel'
+import { guildExample } from '../../../../fixtures/guilds/guild'
+import { getGuildMemberWithGuildIdHandler } from '../../../../fixtures/guilds/[guildId]/get'
+import { getChannelWithChannelIdHandler } from '../../../../fixtures/channels/[channelId]/get'
 import { authenticationHandlers } from '../../../../fixtures/handler'
+import { getGuildsHandler } from '../../../../fixtures/guilds/get'
+import { getChannelsWithGuildIdHandler } from '../../../../fixtures/guilds/[guildId]/channels/get'
+import { getMessagesWithChannelIdHandler } from '../../../../fixtures/channels/[channelId]/messages/get'
+import {
+  messageExampleComplete,
+  messageExampleComplete2
+} from '../../../../fixtures/messages/message'
+import { getMembersWithGuildIdHandler } from '../../../../fixtures/guilds/[guildId]/members/get'
+import { memberExampleComplete } from '../../../../fixtures/members/member'
+import { API_URL } from '../../../../../tools/api'
 
 describe('Pages > /application/[guildId]/[channelId]', () => {
   beforeEach(() => {
     cy.task('stopMockServer')
   })
 
+  it('should succeeds and display the guilds in left sidebar correctly', () => {
+    cy.task('startMockServer', [
+      ...authenticationHandlers,
+      getGuildMemberWithGuildIdHandler,
+      getChannelWithChannelIdHandler,
+      getGuildsHandler
+    ]).setCookie('refreshToken', 'refresh-token')
+    cy.intercept(`${API_URL}${getGuildsHandler.url}*`).as('getGuildsHandler')
+    cy.intercept(`/_next/*`).as('nextStaticAndImages')
+    cy.visit(`/application/${guildExample.id}/${channelExample.id}`)
+    cy.wait(['@getGuildsHandler', '@nextStaticAndImages']).then(() => {
+      cy.get('[data-cy=application-title]').should(
+        'have.text',
+        `# ${channelExample.name}`
+      )
+      cy.get('[data-cy=guild-left-sidebar-title]').should(
+        'have.text',
+        guildExample.name
+      )
+      cy.get('.guilds-list').children().should('have.length', 2)
+    })
+  })
+
+  it('should succeeds and display the channels in left sidebar correctly', () => {
+    cy.task('startMockServer', [
+      ...authenticationHandlers,
+      getGuildMemberWithGuildIdHandler,
+      getChannelWithChannelIdHandler,
+      getChannelsWithGuildIdHandler
+    ]).setCookie('refreshToken', 'refresh-token')
+    cy.intercept(`${API_URL}${getChannelsWithGuildIdHandler.url}*`).as(
+      'getChannelsWithGuildIdHandler'
+    )
+    cy.intercept(`/_next/*`).as('nextStaticAndImages')
+    cy.visit(`/application/${guildExample.id}/${channelExample.id}`)
+    cy.wait(['@getChannelsWithGuildIdHandler', '@nextStaticAndImages']).then(
+      () => {
+        cy.get('.channels-list').children().should('have.length', 2)
+        cy.get('.channels-list [data-cy=channel-name]:first').should(
+          'have.text',
+          `# ${channelExample.name}`
+        )
+        cy.get('.channels-list [data-cy=channel-name]:last').should(
+          'have.text',
+          `# ${channelExample2.name}`
+        )
+      }
+    )
+  })
+
+  it('should succeeds and display the messages correctly', () => {
+    cy.task('startMockServer', [
+      ...authenticationHandlers,
+      getGuildMemberWithGuildIdHandler,
+      getChannelWithChannelIdHandler,
+      getMessagesWithChannelIdHandler
+    ]).setCookie('refreshToken', 'refresh-token')
+    cy.intercept(`${API_URL}${getMessagesWithChannelIdHandler.url}*`).as(
+      'getMessagesWithChannelIdHandler'
+    )
+    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.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
+        )
+      }
+    )
+  })
+
+  it('should succeeds and display the members in right sidebar correctly', () => {
+    cy.task('startMockServer', [
+      ...authenticationHandlers,
+      getGuildMemberWithGuildIdHandler,
+      getChannelWithChannelIdHandler,
+      getMembersWithGuildIdHandler
+    ]).setCookie('refreshToken', 'refresh-token')
+    cy.intercept(`${API_URL}${getMembersWithGuildIdHandler.url}*`).as(
+      'getMembersWithGuildIdHandler'
+    )
+    cy.intercept(`/_next/*`).as('nextStaticAndImages')
+    cy.visit(`/application/${guildExample.id}/${channelExample.id}`)
+    cy.wait(['@getMembersWithGuildIdHandler', '@nextStaticAndImages']).then(
+      () => {
+        cy.get('.members-list').should('not.be.visible')
+        cy.get('[data-cy=icon-button-right-sidebar-members]').click()
+        cy.get('.members-list').should('be.visible')
+        cy.get('[data-cy=members-title]').should('have.text', 'Member(s)')
+        cy.get('.members-list').children().should('have.length', 1)
+        cy.get('.members-list [data-cy=member-user-name]:first').should(
+          'have.text',
+          memberExampleComplete.user.name
+        )
+      }
+    )
+  })
+
   it('should redirect the user to `/application` if `guildId` or `channelId` are not numbers', () => {
     cy.task('startMockServer', authenticationHandlers).setCookie(
       'refreshToken',
@@ -14,4 +147,26 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
       .location('pathname')
       .should('eq', '/application')
   })
+
+  it("should redirect the user to `/404` if `guildId` doesn't exist", () => {
+    cy.task('startMockServer', [
+      ...authenticationHandlers,
+      getChannelWithChannelIdHandler
+    ]).setCookie('refreshToken', 'refresh-token')
+    cy.visit(`/application/123/${channelExample.id}`, {
+      failOnStatusCode: false
+    })
+      .location('pathname')
+      .should('eq', '/404')
+  })
+
+  it("should redirect the user to `/404` if `channelId` doesn't exist", () => {
+    cy.task('startMockServer', [
+      ...authenticationHandlers,
+      getGuildMemberWithGuildIdHandler
+    ]).setCookie('refreshToken', 'refresh-token')
+    cy.visit(`/application/${guildExample.id}/123`, { failOnStatusCode: false })
+      .location('pathname')
+      .should('eq', '/404')
+  })
 })

cypress/integration/pages/application/guilds/create.spec.ts

@@ -1,5 +1,8 @@
-import { channel } from '../../../../fixtures/channels/channel'
-import { guild } from '../../../../fixtures/guilds/guild'
+import { getChannelWithChannelIdHandler } from '../../../../fixtures/channels/[channelId]/get'
+import { getGuildsHandler } from '../../../../fixtures/guilds/get'
+import { getGuildMemberWithGuildIdHandler } from '../../../../fixtures/guilds/[guildId]/get'
+import { channelExample } from '../../../../fixtures/channels/channel'
+import { guildExample } from '../../../../fixtures/guilds/guild'
 import { postGuildsHandler } from '../../../../fixtures/guilds/post'
 import { authenticationHandlers } from '../../../../fixtures/handler'
 
@@ -11,15 +14,19 @@ describe('Pages > /application/guilds/create', () => {
   it('should succeeds and create the guild', () => {
     cy.task('startMockServer', [
       ...authenticationHandlers,
-      postGuildsHandler
+      postGuildsHandler,
+      getGuildsHandler,
+      getGuildMemberWithGuildIdHandler,
+      getChannelWithChannelIdHandler
     ]).setCookie('refreshToken', 'refresh-token')
     cy.visit('/application/guilds/create')
+    cy.get('[data-cy=application-title]').should('have.text', 'Create a Guild')
     cy.get('#error-name').should('not.exist')
-    cy.get('[data-cy=input-name]').type(guild.name)
+    cy.get('[data-cy=input-name]').type(guildExample.name)
     cy.get('[data-cy=submit]').click()
     cy.location('pathname').should(
       'eq',
-      `/application/${guild.id}/${channel.id}`
+      `/application/${guildExample.id}/${channelExample.id}`
     )
   })
 
@@ -30,7 +37,7 @@ describe('Pages > /application/guilds/create', () => {
     )
     cy.visit('/application/guilds/create')
     cy.get('#error-name').should('not.exist')
-    cy.get('[data-cy=input-name]').type(guild.name)
+    cy.get('[data-cy=input-name]').type(guildExample.name)
     cy.get('[data-cy=submit]').click()
     cy.get('#message').should('have.text', 'Error: Internal Server Error.')
   })

cypress/integration/pages/application/guilds/join.spec.ts

@@ -1,45 +1,39 @@
+import { guildExample, guildExample2 } from '../../../../fixtures/guilds/guild'
 import {
   getGuildsPublicEmptyHandler,
   getGuildsPublicHandler,
   getGuildsPublicSearchHandler
 } from '../../../../fixtures/guilds/public/get'
 import { authenticationHandlers } from '../../../../fixtures/handler'
+import { API_URL } from '../../../../../tools/api'
 
 describe('Pages > /application/guilds/join', () => {
   beforeEach(() => {
     cy.task('stopMockServer')
   })
 
-  it('should shows no guild if there are no public guilds', () => {
-    cy.task('startMockServer', [
-      ...authenticationHandlers,
-      getGuildsPublicEmptyHandler
-    ]).setCookie('refreshToken', 'refresh-token')
-    cy.visit('/application/guilds/join')
-    cy.get('.guilds-list').children().should('have.length', 0)
-  })
-
-  it('should shows loader with internal api server error', () => {
-    cy.task('startMockServer', [...authenticationHandlers]).setCookie(
-      'refreshToken',
-      'refresh-token'
-    )
-    cy.visit('/application/guilds/join')
-    cy.get('.guilds-list').children().should('have.length', 1)
-    cy.get('[data-testid=progress-spinner]').should('be.visible')
-  })
-
   it('should shows all the guilds', () => {
     cy.task('startMockServer', [
       ...authenticationHandlers,
       getGuildsPublicHandler
     ]).setCookie('refreshToken', 'refresh-token')
-    cy.visit('/application/guilds/join')
-    cy.get('.guilds-list').children().should('have.length', 2)
-    cy.get('.guilds-list [data-cy=guild-name]:first').should(
-      'have.text',
-      'GuildExample'
+    cy.intercept(`${API_URL}${getGuildsPublicHandler.url}*`).as(
+      'getGuildsPublicHandler'
     )
+    cy.intercept(`/_next/*`).as('nextStaticAndImages')
+    cy.visit('/application/guilds/join')
+    cy.wait(['@getGuildsPublicHandler', '@nextStaticAndImages']).then(() => {
+      cy.get('[data-cy=application-title]').should('have.text', 'Join a Guild')
+      cy.get('.guilds-public-list').children().should('have.length', 2)
+      cy.get('.guilds-public-list [data-cy=guild-name]:first').should(
+        'have.text',
+        guildExample.name
+      )
+      cy.get('.guilds-public-list [data-cy=guild-name]:last').should(
+        'have.text',
+        guildExample2.name
+      )
+    })
   })
 
   it('should shows the searched guild', () => {
@@ -48,8 +42,41 @@ describe('Pages > /application/guilds/join', () => {
       getGuildsPublicSearchHandler
     ]).setCookie('refreshToken', 'refresh-token')
     cy.visit('/application/guilds/join')
-    cy.get('[data-cy=search-guild-input]').type('app')
-    cy.get('.guilds-list').children().should('have.length', 1)
-    cy.get('.guilds-list [data-cy=guild-name]:first').should('have.text', 'app')
+    cy.intercept(`${API_URL}${getGuildsPublicHandler.url}*`).as(
+      'getGuildsPublicHandler'
+    )
+    cy.intercept(`/_next/*`).as('nextStaticAndImages')
+    cy.wait(['@getGuildsPublicHandler', '@nextStaticAndImages']).then(() => {
+      cy.get('[data-cy=search-guild-input]').type(guildExample2.name)
+      cy.get('.guilds-public-list').children().should('have.length', 1)
+      cy.get('.guilds-public-list [data-cy=guild-name]:first').should(
+        'have.text',
+        guildExample2.name
+      )
+    })
+  })
+
+  it('should shows no guild if there are no public guilds', () => {
+    cy.task('startMockServer', [
+      ...authenticationHandlers,
+      getGuildsPublicEmptyHandler
+    ]).setCookie('refreshToken', 'refresh-token')
+    cy.intercept(`${API_URL}${getGuildsPublicEmptyHandler.url}*`).as(
+      'getGuildsPublicEmptyHandler'
+    )
+    cy.visit('/application/guilds/join')
+    cy.wait('@getGuildsPublicEmptyHandler').then(() => {
+      cy.get('.guilds-public-list').children().should('have.length', 0)
+    })
+  })
+
+  it('should shows loader with internal api server error', () => {
+    cy.task('startMockServer', [...authenticationHandlers]).setCookie(
+      'refreshToken',
+      'refresh-token'
+    )
+    cy.visit('/application/guilds/join')
+    cy.get('.guilds-public-list').children().should('have.length', 1)
+    cy.get('[data-testid=progress-spinner]').should('be.visible')
   })
 })

cypress/integration/pages/application/index.spec.ts

@@ -1,35 +1,32 @@
 import { authenticationHandlers } from '../../../fixtures/handler'
 
-const applicationPaths = [
-  '/application',
-  '/application/users/0',
-  '/application/guilds/create',
-  '/application/guilds/join',
-  '/application/0/0'
-]
-
 describe('Pages > /application', () => {
   beforeEach(() => {
     cy.task('stopMockServer')
   })
 
-  it('should redirect the user to `/authentication/signin` if not signed in', () => {
-    for (const applicationPath of applicationPaths) {
-      cy.visit(applicationPath)
-        .location('pathname')
-        .should('eq', '/authentication/signin')
-    }
-  })
-
-  it('should not redirect the user if signed in', () => {
-    cy.task('startMockServer', authenticationHandlers).setCookie(
+  it('should redirect user to `/application/guilds/create` on click on "Create a Guild"', () => {
+    cy.task('startMockServer', [...authenticationHandlers]).setCookie(
       'refreshToken',
       'refresh-token'
     )
-    for (const applicationPath of applicationPaths) {
-      cy.visit(applicationPath)
-        .location('pathname')
-        .should('eq', applicationPath)
-    }
+    cy.visit('/application')
+    cy.get('[data-cy=application-title]').should('have.text', 'Application')
+    cy.get('a[href="/application/guilds/create"]')
+      .click()
+      .location('pathname')
+      .should('eq', '/application/guilds/create')
+  })
+
+  it('should redirect user to `/application/guilds/join` on click on "Join a Guild"', () => {
+    cy.task('startMockServer', [...authenticationHandlers]).setCookie(
+      'refreshToken',
+      'refresh-token'
+    )
+    cy.visit('/application')
+    cy.get('a[href="/application/guilds/join"]')
+      .click()
+      .location('pathname')
+      .should('eq', '/application/guilds/join')
   })
 })

cypress/integration/pages/authentication/forgot-password.spec.ts

@@ -1,5 +1,5 @@
 import { postUsersResetPasswordHandler } from '../../../fixtures/users/reset-password/post'
-import { user } from '../../../fixtures/users/user'
+import { userExample } from '../../../fixtures/users/user'
 
 describe('Pages > /authentication/forgot-password', () => {
   beforeEach(() => {
@@ -10,7 +10,7 @@ describe('Pages > /authentication/forgot-password', () => {
   it('should succeeds and sends a password-reset request', () => {
     cy.task('startMockServer', [postUsersResetPasswordHandler])
     cy.get('#message').should('not.exist')
-    cy.get('[data-cy=input-email]').type(user.email)
+    cy.get('[data-cy=input-email]').type(userExample.email)
     cy.get('[data-cy=submit]').click()
     cy.get('#message').should(
       'have.text',
@@ -20,7 +20,7 @@ describe('Pages > /authentication/forgot-password', () => {
 
   it('should fails with unreachable api server', () => {
     cy.get('#message').should('not.exist')
-    cy.get('[data-cy=input-email]').type(user.email)
+    cy.get('[data-cy=input-email]').type(userExample.email)
     cy.get('[data-cy=submit]').click()
     cy.get('#message').should('have.text', 'Error: Internal Server Error.')
   })

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

@@ -3,7 +3,7 @@ import {
   postUsersSigninHandler,
   postUsersSigninInvalidCredentialsHandler
 } from 'cypress/fixtures/users/signin/post'
-import { user } from '../../../fixtures/users/user'
+import { userExample } from '../../../fixtures/users/user'
 
 describe('Pages > /authentication/signin', () => {
   beforeEach(() => {
@@ -18,7 +18,7 @@ describe('Pages > /authentication/signin', () => {
     ])
     cy.get('#error-email').should('not.exist')
     cy.get('#error-password').should('not.exist')
-    cy.get('[data-cy=input-email]').type(user.email)
+    cy.get('[data-cy=input-email]').type(userExample.email)
     cy.get('[data-cy=input-password]').type('randompassword')
     cy.get('[data-cy=submit]').click()
     cy.location('pathname').should('eq', '/application')
@@ -27,7 +27,7 @@ describe('Pages > /authentication/signin', () => {
   it('should fails with unreachable api server', () => {
     cy.get('#error-email').should('not.exist')
     cy.get('#error-password').should('not.exist')
-    cy.get('[data-cy=input-email]').type(user.email)
+    cy.get('[data-cy=input-email]').type(userExample.email)
     cy.get('[data-cy=input-password]').type('randompassword')
     cy.get('[data-cy=submit]').click()
     cy.get('#message').should('have.text', 'Error: Internal Server Error.')
@@ -42,7 +42,7 @@ describe('Pages > /authentication/signin', () => {
     ])
     cy.get('#error-email').should('not.exist')
     cy.get('#error-password').should('not.exist')
-    cy.get('[data-cy=input-email]').type(user.email)
+    cy.get('[data-cy=input-email]').type(userExample.email)
     cy.get('[data-cy=input-password]').type('randompassword')
     cy.get('[data-cy=submit]').click()
     cy.get('#message').should(

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

@@ -1,4 +1,4 @@
-import { user } from '../../../fixtures/users/user'
+import { userExample } from '../../../fixtures/users/user'
 import {
   postUsersSignupHandler,
   postUsersSignupAlreadyUsedHandler
@@ -15,8 +15,8 @@ describe('Pages > /authentication/signup', () => {
     cy.get('#error-name').should('not.exist')
     cy.get('#error-email').should('not.exist')
     cy.get('#error-password').should('not.exist')
-    cy.get('[data-cy=input-name]').type(user.name)
-    cy.get('[data-cy=input-email]').type(user.email)
+    cy.get('[data-cy=input-name]').type(userExample.name)
+    cy.get('[data-cy=input-email]').type(userExample.email)
     cy.get('[data-cy=input-password]').type('randompassword')
     cy.get('[data-cy=submit]').click()
     cy.get('#message').should(
@@ -30,8 +30,8 @@ describe('Pages > /authentication/signup', () => {
     cy.get('#error-name').should('not.exist')
     cy.get('#error-email').should('not.exist')
     cy.get('#error-password').should('not.exist')
-    cy.get('[data-cy=input-name]').type(user.name)
-    cy.get('[data-cy=input-email]').type(user.email)
+    cy.get('[data-cy=input-name]').type(userExample.name)
+    cy.get('[data-cy=input-email]').type(userExample.email)
     cy.get('[data-cy=input-password]').type('randompassword')
     cy.get('[data-cy=submit]').click()
     cy.get('#message').should('have.text', 'Error: Name or Email already used.')
@@ -44,8 +44,8 @@ describe('Pages > /authentication/signup', () => {
     cy.get('#error-name').should('not.exist')
     cy.get('#error-email').should('not.exist')
     cy.get('#error-password').should('not.exist')
-    cy.get('[data-cy=input-name]').type(user.name)
-    cy.get('[data-cy=input-email]').type(user.email)
+    cy.get('[data-cy=input-name]').type(userExample.name)
+    cy.get('[data-cy=input-email]').type(userExample.email)
     cy.get('[data-cy=input-password]').type('randompassword')
     cy.get('[data-cy=submit]').click()
     cy.get('#message').should('have.text', 'Error: Internal Server Error.')

cypress/plugins/index.js

@@ -1,5 +1,7 @@
 import { getLocal } from 'mockttp'
 
+import { API_DEFAULT_PORT } from '../../tools/api'
+
 /// <reference types="cypress" />
 
 /** @type {import('mockttp').Mockttp | null}  */
@@ -17,7 +19,7 @@ module.exports = (on, config) => {
       server = getLocal({
         cors: true
       })
-      await server.start(8080)
+      await server.start(API_DEFAULT_PORT)
       for (const handler of handlers) {
         await server[handler.method.toLowerCase()](handler.url).thenJson(
           handler.response.statusCode,