chore: remove jest -> cypress for unit tests

.eslintignore

@@ -1,7 +0,0 @@
-.next
-.lighthouseci
-coverage
-node_modules
-next-env.d.ts
-**/workbox-*.js
-**/sw.js

.eslintrc.json

@@ -6,8 +6,7 @@
   },
   "env": {
     "node": true,
-    "browser": true,
-    "jest": true
+    "browser": true
   },
   "rules": {
     "prettier/prettier": "error",

.lintstagedrc.json

@@ -1,10 +1,6 @@
 {
   "*": ["editorconfig-checker"],
-  "*.{js,jsx,ts,tsx}": [
-    "prettier --write",
-    "eslint --fix",
-    "jest --findRelatedTests"
-  ],
+  "*.{js,jsx,ts,tsx}": ["prettier --write", "eslint --fix"],
   "*.{css,scss,sass,json,jsonc,yml,yaml}": ["prettier --write"],
-  "*.md": ["prettier --write", "markdownlint --dot --fix"]
+  "*.{md,mdx}": ["prettier --write", "markdownlint-cli2 --fix"]
 }

.markdownlint-cli2.jsonc

@@ -0,0 +1,11 @@
+{
+  "config": {
+    "default": true,
+    "MD013": false,
+    "MD024": false,
+    "MD033": false,
+    "MD041": false
+  },
+  "globs": ["**/*.{md,mdx}"],
+  "ignores": ["**/node_modules"]
+}

.markdownlint.json

@@ -1,6 +0,0 @@
-{
-  "default": true,
-  "MD013": false,
-  "MD033": false,
-  "MD041": false
-}

Dockerfile

@@ -1,15 +1,15 @@
-FROM node:16.16.0 AS dependencies
+FROM node:16.17.0 AS dependencies
 WORKDIR /usr/src/app
 COPY ./package*.json ./
 RUN npm install
 
-FROM node:16.16.0 AS builder
+FROM node:16.17.0 AS builder
 WORKDIR /usr/src/app
 COPY ./ ./
 COPY --from=dependencies /usr/src/app/node_modules ./node_modules
 RUN npm run build
 
-FROM node:16.16.0 AS runner
+FROM node:16.17.0 AS runner
 WORKDIR /usr/src/app
 ENV NODE_ENV=production
 COPY --from=builder /usr/src/app/next.config.js ./next.config.js

components/Application/Channels/Channel.tsx

@@ -3,10 +3,10 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { CogIcon } from '@heroicons/react/solid'
 
-import { GuildsChannelsPath } from '../../Application'
-import { Channel as ChannelType } from '../../../../models/Channel'
-import { useGuildMember } from '../../../../contexts/GuildMember'
-import { IconButton } from '../../../design/IconButton'
+import { GuildsChannelsPath } from '../Application'
+import { Channel as ChannelType } from '../../../models/Channel'
+import { useGuildMember } from '../../../contexts/GuildMember'
+import { IconButton } from '../../design/IconButton'
 
 export interface ChannelProps {
   path: GuildsChannelsPath

components/Application/Channels/Channel/index.ts

@@ -1 +0,0 @@
-export * from './Channel'

components/Application/Guilds/Guild.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image'
 
-import { GuildWithDefaultChannelId } from '../../../../models/Guild'
-import { IconLink } from '../../../design/IconLink'
+import { GuildWithDefaultChannelId } from '../../../models/Guild'
+import { IconLink } from '../../design/IconLink'
 
 export interface GuildProps {
   guild: GuildWithDefaultChannelId

components/Application/Guilds/Guild/Guild.test.tsx

@@ -1,18 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Guild } from './Guild'
-import { guildExample } from '../../../../cypress/fixtures/guilds/guild'
-
-describe('<Guild />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <Guild
-        guild={{
-          ...guildExample,
-          defaultChannelId: 1
-        }}
-      />
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Application/Guilds/Guild/index.ts

@@ -1 +0,0 @@
-export * from './Guild'

components/Application/JoinGuildsPublic/GuildPublic.tsx

@@ -5,13 +5,13 @@ import useTranslation from 'next-translate/useTranslation'
 import classNames from 'classnames'
 import axios from 'axios'
 
-import { Emoji } from '../../../Emoji'
-import { ConfirmPopup } from '../../ConfirmPopup'
+import { Emoji } from '../../Emoji'
+import { ConfirmPopup } from '../ConfirmPopup'
 import {
   GuildPublic as GuildPublicType,
   GuildWithDefaultChannelId
-} from '../../../../models/Guild'
-import { useAuthentication } from '../../../../tools/authentication'
+} from '../../../models/Guild'
+import { useAuthentication } from '../../../tools/authentication'
 
 export interface GuildPublicProps {
   guild: GuildPublicType

components/Application/JoinGuildsPublic/GuildPublic/index.ts

@@ -1 +0,0 @@
-export * from './GuildPublic'

components/Application/Members/Member.tsx

@@ -1,8 +1,8 @@
 import Image from 'next/image'
 import Link from 'next/link'
 
-import { MemberWithPublicUser } from '../../../../models/Member'
-import { Emoji } from '../../../Emoji'
+import { MemberWithPublicUser } from '../../../models/Member'
+import { Emoji } from '../../Emoji'
 
 export interface MemberProps {
   member: MemberWithPublicUser

components/Application/Members/Member/index.ts

@@ -1 +0,0 @@
-export * from './Member'

components/Application/PopupGuild/PopupGuild.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { PopupGuild } from './PopupGuild'
-
-describe('<PopupGuild />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<PopupGuild />)
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Application/PopupGuild/PopupGuild.tsx

@@ -3,7 +3,8 @@ import { PlusSmIcon, ArrowDownIcon } from '@heroicons/react/solid'
 import classNames from 'classnames'
 import Image from 'next/image'
 
-import { PopupGuildCard } from './PopupGuildCard/PopupGuildCard'
+import { PopupGuildCard } from './PopupGuildCard'
+
 export interface PopupGuildProps {
   className?: string
 }

components/Application/PopupGuild/PopupGuildCard/PopupGuildCard.test.tsx

@@ -1,30 +0,0 @@
-import { render } from '@testing-library/react'
-import { PlusSmIcon } from '@heroicons/react/solid'
-import Image from 'next/image'
-
-import { PopupGuildCard } from './PopupGuildCard'
-
-describe('<PopupGuildCard />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <PopupGuildCard
-        image={
-          <Image
-            quality={100}
-            src='/images/svg/design/create-server.svg'
-            alt=''
-            width={230}
-            height={230}
-          />
-        }
-        description='Create your own guild and manage everything within a few clicks !'
-        link={{
-          icon: <PlusSmIcon className='mr-2 h-8 w-8' />,
-          text: 'Create a server',
-          href: '/application/guilds/create'
-        }}
-      />
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Application/PopupGuild/PopupGuildCard/index.ts

@@ -1 +0,0 @@
-export * from './PopupGuildCard'

components/Application/Sidebar/Sidebar.test.tsx

@@ -1,12 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Sidebar } from './Sidebar'
-
-describe('<Sidebar />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <Sidebar direction='left' visible={true} isMobile={false} />
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Application/UserProfile/UserProfile.test.tsx

@@ -1,23 +0,0 @@
-import { render } from '@testing-library/react'
-
-import {
-  guildExample,
-  guildExample2
-} from '../../../cypress/fixtures/guilds/guild'
-import {
-  userExample,
-  userSettingsExample
-} from '../../../cypress/fixtures/users/user'
-import { UserProfile } from './UserProfile'
-
-describe('<UserProfile />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <UserProfile
-        user={{ ...userExample, settings: userSettingsExample }}
-        guilds={[guildExample, guildExample2]}
-      />
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Emoji/isStringWithOnlyOneEmoji.test.ts

@@ -1,18 +0,0 @@
-import { isStringWithOnlyOneEmoji } from './isStringWithOnlyOneEmoji'
-
-describe('components/Emoji/isStringWithOnlyOneEmoji', () => {
-  it('returns true with a string with only one emoji', () => {
-    expect(isStringWithOnlyOneEmoji(':wave:')).toBeTruthy()
-    expect(isStringWithOnlyOneEmoji(':smile:')).toBeTruthy()
-  })
-
-  it('returns false with a string with multiple emoji or with text', () => {
-    expect(isStringWithOnlyOneEmoji(':wave: :smile:')).toBeFalsy()
-    expect(isStringWithOnlyOneEmoji(':wave: some text')).toBeFalsy()
-    expect(isStringWithOnlyOneEmoji('some text :wave:')).toBeFalsy()
-  })
-
-  it('returns false with a string without emoji', () => {
-    expect(isStringWithOnlyOneEmoji('some text')).toBeFalsy()
-  })
-})

components/ErrorPage/ErrorPage.test.tsx

@@ -1,15 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { ErrorPage } from '.'
-
-describe('<ErrorPage />', () => {
-  it('should render the message and statusCode', () => {
-    const messageContent = 'message content'
-    const statusCode = 404
-    const { getByText } = render(
-      <ErrorPage statusCode={statusCode} message={messageContent} />
-    )
-    expect(getByText(messageContent)).toBeInTheDocument()
-    expect(getByText(statusCode)).toBeInTheDocument()
-  })
-})

components/ErrorPage/index.ts

@@ -1 +0,0 @@
-export * from './ErrorPage'

components/Footer/Footer.test.tsx

@@ -1,16 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Footer } from '.'
-
-describe('<Footer />', () => {
-  it('should render with appropriate link tag version', () => {
-    const version = '1.0.0'
-    const { getByText } = render(<Footer version={version} />)
-    const versionLink = getByText(`website v${version}`) as HTMLAnchorElement
-    expect(getByText('Thream')).toBeInTheDocument()
-    expect(versionLink).toBeInTheDocument()
-    expect(versionLink.href).toEqual(
-      `https://github.com/Thream/website/releases/tag/v${version}`
-    )
-  })
-})

components/Footer/VersionLink.tsx

@@ -8,6 +8,7 @@ export const VersionLink: React.FC<VersionLinkProps> = (props) => {
 
   return (
     <a
+      data-cy={`version-link-${repository}`}
       className='text-green-800 hover:underline dark:text-green-400'
       href={`https://github.com/Thream/${repository}/releases/tag/v${version}`}
       target='_blank'

components/ScrollableBody/ScrollableBody.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { ScrollableBody } from './ScrollableBody'
-
-describe('<ScrollableBody />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<ScrollableBody />)
-    expect(baseElement).toBeTruthy()
-  })
-})

components/ScrollableBody/index.ts

@@ -1 +0,0 @@
-export * from './ScrollableBody'

components/design/Button/Button.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Button } from '.'
-
-describe('<Button />', () => {
-  it('should render', () => {
-    const { getByText } = render(<Button>Submit</Button>)
-    expect(getByText('Submit')).toBeInTheDocument()
-  })
-})

components/design/Checkbox/Checkbox.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Checkbox } from './Checkbox'
-
-describe('<Checkbox />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<Checkbox label='Checkbox' />)
-    expect(baseElement).toBeTruthy()
-  })
-})

components/design/Divider/Divider.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Divider } from '.'
-
-describe('<Divider />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<Divider />)
-    expect(baseElement).toBeTruthy()
-  })
-})

components/design/FormState/FormState.test.tsx

@@ -1,34 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { FormState } from '.'
-
-describe('<FormState />', () => {
-  it('should return nothing if the state is idle', () => {
-    const { container } = render(<FormState state='idle' />)
-    expect(container.innerHTML.length).toEqual(0)
-  })
-
-  it('should return nothing if the message is null', () => {
-    const { container } = render(<FormState state='error' />)
-    expect(container.innerHTML.length).toEqual(0)
-  })
-
-  it('should render the <Loader /> if state is loading', () => {
-    const { getByTestId } = render(<FormState state='loading' />)
-    expect(getByTestId('loader')).toBeInTheDocument()
-  })
-
-  it('should render the success message if state is success', () => {
-    const message = 'Success Message'
-    const { getByText } = render(
-      <FormState state='success' message={message} />
-    )
-    expect(getByText(message)).toBeInTheDocument()
-  })
-
-  it('should render the error message if state is error', () => {
-    const message = 'Error Message'
-    const { getByText } = render(<FormState state='error' message={message} />)
-    expect(getByText(message)).toBeInTheDocument()
-  })
-})

components/design/FormState/FormState.tsx

@@ -16,7 +16,7 @@ export const FormState: React.FC<FormStateProps> = (props) => {
 
   if (state === 'loading') {
     return (
-      <div data-testid='loader' className='mt-8 flex justify-center'>
+      <div data-cy='loader' className='mt-8 flex justify-center'>
         <Loader />
       </div>
     )

components/design/IconButton/IconButton.test.tsx

@@ -1,15 +0,0 @@
-import { render } from '@testing-library/react'
-import { CogIcon } from '@heroicons/react/solid'
-
-import { IconButton } from './IconButton'
-
-describe('<IconButton />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <IconButton className='h-10 w-10'>
-        <CogIcon />
-      </IconButton>
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

components/design/IconLink/IconLink.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { IconLink } from './IconLink'
-
-describe('<IconLink />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<IconLink href='' />)
-    expect(baseElement).toBeTruthy()
-  })
-})

components/design/Input/Input.test.tsx

@@ -1,52 +0,0 @@
-import { render, fireEvent } from '@testing-library/react'
-
-import { Input, getInputType } from '.'
-
-describe('<Input />', () => {
-  it('should render the label', () => {
-    const labelContent = 'label content'
-    const { getByText } = render(<Input label={labelContent} />)
-    expect(getByText(labelContent)).toBeInTheDocument()
-  })
-
-  it('should not render forgot password link', () => {
-    const { queryByTestId } = render(
-      <Input type='text' label='content' showForgotPassword />
-    )
-    const forgotPasswordLink = queryByTestId('forgot-password-link')
-    expect(forgotPasswordLink).not.toBeInTheDocument()
-  })
-
-  it('should render forgot password link', () => {
-    const { queryByTestId } = render(
-      <Input type='password' label='content' showForgotPassword />
-    )
-    const forgotPasswordLink = queryByTestId('forgot-password-link')
-    expect(forgotPasswordLink).toBeInTheDocument()
-  })
-
-  it('should not render the eye icon if the input is not of type "password"', () => {
-    const { queryByTestId } = render(<Input type='text' label='content' />)
-    const passwordEye = queryByTestId('password-eye')
-    expect(passwordEye).not.toBeInTheDocument()
-  })
-
-  it('should handlePassword with eye icon', async () => {
-    const { findByTestId } = render(<Input type='password' label='content' />)
-    const passwordEye = await findByTestId('password-eye')
-    const input = await findByTestId('input')
-    expect(input).toHaveAttribute('type', 'password')
-    fireEvent.click(passwordEye)
-    expect(input).toHaveAttribute('type', 'text')
-  })
-})
-
-describe('getInputType', () => {
-  it('should return `text`', () => {
-    expect(getInputType('password')).toEqual('text')
-  })
-
-  it('should return `password`', () => {
-    expect(getInputType('text')).toEqual('password')
-  })
-})

components/design/Input/Input.tsx

@@ -47,7 +47,7 @@ export const Input: React.FC<InputProps> = (props) => {
             <Link href='/authentication/forgot-password'>
               <a
                 className='text-center font-headline text-xs text-green-800 hover:underline dark:text-green-400 sm:text-sm'
-                data-testid='forgot-password-link'
+                data-cy='forgot-password-link'
               >
                 {t('authentication:forgot-password')}
               </a>
@@ -56,7 +56,6 @@ export const Input: React.FC<InputProps> = (props) => {
         </div>
         <div className='relative mt-0'>
           <input
-            data-testid='input'
             data-cy={`input-${name ?? 'name'}`}
             className='h-11 w-full rounded-lg border border-transparent bg-[#f1f1f1] px-3 font-paragraph leading-10 text-[#2a2a2a] caret-green-600 focus:border focus:shadow-green focus:outline-none'
             {...rest}
@@ -66,7 +65,7 @@ export const Input: React.FC<InputProps> = (props) => {
           />
           {type === 'password' && (
             <div
-              data-testid='password-eye'
+              data-cy='password-eye'
               onClick={handlePassword}
               className='password-eye absolute cursor-pointer bg-[#f1f1f1] bg-cover'
             />

components/design/Loader/Loader.test.tsx

@@ -1,20 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Loader } from '.'
-
-describe('<Loader />', () => {
-  it('should render with correct width and height', async () => {
-    const size = 20
-    const { findByTestId } = render(<Loader width={size} height={size} />)
-    const progressSpinner = await findByTestId('progress-spinner')
-    expect(progressSpinner).toHaveStyle(`width: ${size}px`)
-    expect(progressSpinner).toHaveStyle(`height: ${size}px`)
-  })
-
-  it('should render with default width and height', async () => {
-    const { findByTestId } = render(<Loader />)
-    const progressSpinner = await findByTestId('progress-spinner')
-    expect(progressSpinner).toHaveStyle('width: 50px')
-    expect(progressSpinner).toHaveStyle('height: 50px')
-  })
-})

components/design/Loader/Loader.tsx

@@ -9,7 +9,7 @@ export const Loader: React.FC<LoaderProps> = (props) => {
 
   return (
     <div className={props.className}>
-      <div data-testid='progress-spinner' className='progress-spinner'>
+      <div data-cy='progress-spinner' className='progress-spinner'>
         <svg className='progress-spinner-svg' viewBox='25 25 50 50'>
           <circle
             className='progress-spinner-circle'

components/design/Main/Main.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Main } from '.'
-
-describe('<Main />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<Main />)
-    expect(baseElement).toBeTruthy()
-  })
-})

components/design/SocialMediaButton/SocialMediaButton.test.tsx

@@ -1,23 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { SocialMedia, SocialMediaButton } from '.'
-
-describe('<SocialMediaButton />', () => {
-  it('should render the social media', async () => {
-    const socialMedia: SocialMedia = 'Discord'
-    const { findByAltText } = render(
-      <SocialMediaButton socialMedia={socialMedia} />
-    )
-    const socialMediaButton = await findByAltText(socialMedia)
-    expect(socialMediaButton).toBeInTheDocument()
-  })
-
-  it('should render with a black text color with Google social media', async () => {
-    const socialMedia: SocialMedia = 'Google'
-    const { findByTestId } = render(
-      <SocialMediaButton socialMedia={socialMedia} />
-    )
-    const button = await findByTestId('social-media-button')
-    expect(button).toHaveStyle('color: #000')
-  })
-})

components/design/SocialMediaButton/SocialMediaButton.tsx

@@ -54,7 +54,6 @@ export const SocialMediaButton: React.FC<SocialMediaButtonProps> = (props) => {
   return (
     <>
       <button
-        data-testid='social-media-button'
         {...rest}
         className={classNames(className, 'button', givenClassName)}
       >

components/design/Textarea/Textarea.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { Textarea } from './Textarea'
-
-describe('<Textarea />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<Textarea label='Textarea' />)
-    expect(baseElement).toBeTruthy()
-  })
-})

cypress.config.ts

@@ -0,0 +1,72 @@
+import path from 'node:path'
+
+import { defineConfig } from 'cypress'
+import { getLocal } from 'mockttp'
+import type { Mockttp } from 'mockttp'
+
+import { API_DEFAULT_PORT } from './tools/api'
+import { Handlers, Method } from './cypress/fixtures/handler'
+
+const UPLOADS_FIXTURES_DIRECTORY = path.join(
+  process.cwd(),
+  'cypress',
+  'fixtures',
+  'uploads'
+)
+
+let server: Mockttp | null = null
+
+export default defineConfig({
+  fixturesFolder: false,
+  video: false,
+  downloadsFolder: undefined,
+  screenshotOnRunFailure: false,
+
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    supportFile: false,
+    setupNodeEvents(on, config) {
+      on('task', {
+        async startMockServer(handlers: Handlers): Promise<null> {
+          server = getLocal({
+            cors: true
+          })
+          await server.start(API_DEFAULT_PORT)
+          for (const handler of handlers) {
+            const { isFile = false } = handler.response
+            const method = handler.method.toLowerCase() as Lowercase<Method>
+            if (isFile) {
+              await server[method](handler.url).thenFromFile(
+                handler.response.statusCode,
+                path.join(UPLOADS_FIXTURES_DIRECTORY, ...handler.response.body)
+              )
+            } else {
+              await server[method](handler.url).thenJson(
+                handler.response.statusCode,
+                handler.response.body
+              )
+            }
+          }
+          return null
+        },
+
+        async stopMockServer(): Promise<null> {
+          if (server != null) {
+            await server.stop()
+            server = null
+          }
+          return null
+        }
+      })
+
+      return config
+    }
+  },
+
+  component: {
+    devServer: {
+      framework: 'next',
+      bundler: 'webpack'
+    }
+  }
+})

cypress.json

@@ -1,6 +0,0 @@
-{
-  "baseUrl": "http://localhost:3000",
-  "supportFile": false,
-  "video": false,
-  "screenshotOnRunFailure": false
-}

cypress/component/components/Emoji/isStringWithOnlyOneEmoji.cy.ts

@@ -0,0 +1,18 @@
+import { isStringWithOnlyOneEmoji } from '../../../../components/Emoji/isStringWithOnlyOneEmoji'
+
+describe('components/Emoji/isStringWithOnlyOneEmoji', () => {
+  it('returns true with a string with only one emoji', () => {
+    expect(isStringWithOnlyOneEmoji(':wave:')).equal(true)
+    expect(isStringWithOnlyOneEmoji(':smile:')).equal(true)
+  })
+
+  it('returns false with a string with multiple emoji or with text', () => {
+    expect(isStringWithOnlyOneEmoji(':wave: :smile:')).equal(false)
+    expect(isStringWithOnlyOneEmoji(':wave: some text')).equal(false)
+    expect(isStringWithOnlyOneEmoji('some text :wave:')).equal(false)
+  })
+
+  it('returns false with a string without emoji', () => {
+    expect(isStringWithOnlyOneEmoji('some text')).equal(false)
+  })
+})

cypress/component/components/Footer.cy.tsx

@@ -0,0 +1,16 @@
+import { Footer } from '../../../components/Footer'
+
+describe('<Footer />', () => {
+  it('should render with appropriate link tag version', () => {
+    const version = '1.0.0'
+    cy.mount(<Footer version={version} />)
+    cy.contains('Thream')
+      .get('[data-cy=version-link-website]')
+      .should('have.text', `website v${version}`)
+      .should(
+        'have.attr',
+        'href',
+        `https://github.com/Thream/website/releases/tag/v${version}`
+      )
+  })
+})

cypress/component/components/design/FormState.cy.tsx

@@ -0,0 +1,35 @@
+import { FormState } from '../../../../components/design/FormState'
+
+describe('<FormState />', () => {
+  it('should return nothing if the state is idle', () => {
+    cy.mount(<FormState state='idle' />)
+      .get('[data-cy-root]')
+      .should('be.empty')
+  })
+
+  it('should return nothing if the message is null', () => {
+    cy.mount(<FormState state='error' />)
+      .get('[data-cy-root]')
+      .should('be.empty')
+  })
+
+  it('should render the <Loader /> if state is loading', () => {
+    cy.mount(<FormState state='loading' />)
+      .get('[data-cy=loader]')
+      .should('be.visible')
+  })
+
+  it('should render the success message if state is success', () => {
+    const message = 'Success Message'
+    cy.mount(<FormState state='success' message={message} id='success' />)
+      .get('#success')
+      .contains(message)
+  })
+
+  it('should render the error message if state is error', () => {
+    const message = 'Error Message'
+    cy.mount(<FormState state='error' message={message} id='error' />)
+      .get('#error')
+      .contains(message)
+  })
+})

cypress/component/components/design/Input.cy.tsx

@@ -0,0 +1,48 @@
+import { Input, getInputType } from '../../../../components/design/Input'
+
+describe('<Input />', () => {
+  it('should render the label', () => {
+    const labelContent = 'label content'
+    cy.mount(<Input label={labelContent} />)
+      .get('label')
+      .should('have.text', labelContent)
+  })
+
+  it('should not render forgot password link', () => {
+    cy.mount(<Input type='text' label='content' showForgotPassword />)
+      .get('[data-cy=forgot-password-link]')
+      .should('not.exist')
+  })
+
+  it('should render forgot password link', () => {
+    cy.mount(<Input type='password' label='content' showForgotPassword />)
+      .get('[data-cy=forgot-password-link]')
+      .should('exist')
+  })
+
+  it('should not render the eye icon if the input is not of type "password"', () => {
+    cy.mount(<Input type='text' label='content' />)
+      .get('[data-cy=password-eye]')
+      .should('not.exist')
+  })
+
+  it('should handlePassword with eye icon', async () => {
+    cy.mount(<Input type='password' label='content' />)
+      .get('input')
+      .should('have.attr', 'type', 'password')
+      .get('[data-cy=password-eye]')
+      .click()
+      .get('input')
+      .should('have.attr', 'type', 'text')
+  })
+
+  describe('getInputType', () => {
+    it('should return `text`', () => {
+      expect(getInputType('password')).equal('text')
+    })
+
+    it('should return `password`', () => {
+      expect(getInputType('text')).equal('password')
+    })
+  })
+})

cypress/component/hooks/useForm/getErrorTranslationKey.cy.ts

@@ -1,6 +1,6 @@
 import type { ErrorObject } from 'ajv'
 
-import { getErrorTranslationKey } from './getErrorTranslationKey'
+import { getErrorTranslationKey } from '../../../../hooks/useForm/getErrorTranslationKey'
 
 const errorObject: ErrorObject = {
   instancePath: '/path',
@@ -16,7 +16,7 @@ describe('hooks/useForm/getErrorTranslationKey', () => {
         ...errorObject,
         keyword: 'unknownkeyword'
       })
-    ).toEqual('errors:invalid')
+    ).equal('errors:invalid')
   })
 
   it('returns `errors:invalid` with format != email', () => {
@@ -26,7 +26,7 @@ describe('hooks/useForm/getErrorTranslationKey', () => {
         keyword: 'format',
         params: { format: 'email' }
       })
-    ).toEqual('errors:email')
+    ).equal('errors:email')
   })
 
   it('returns `errors:email` with format = email', () => {
@@ -36,7 +36,7 @@ describe('hooks/useForm/getErrorTranslationKey', () => {
         keyword: 'format',
         params: { format: 'email' }
       })
-    ).toEqual('errors:email')
+    ).equal('errors:email')
   })
 
   it('returns `errors:required` with minLength and limit = 1', () => {
@@ -46,7 +46,7 @@ describe('hooks/useForm/getErrorTranslationKey', () => {
         keyword: 'minLength',
         params: { limit: 1 }
       })
-    ).toEqual('errors:required')
+    ).equal('errors:required')
   })
 
   it('returns `errors:minLength` with minLength and limit > 1', () => {
@@ -56,7 +56,7 @@ describe('hooks/useForm/getErrorTranslationKey', () => {
         keyword: 'minLength',
         params: { limit: 5 }
       })
-    ).toEqual('errors:minLength')
+    ).equal('errors:minLength')
   })
 
   it('returns `errors:maxLength` with maxLength', () => {
@@ -66,6 +66,6 @@ describe('hooks/useForm/getErrorTranslationKey', () => {
         keyword: 'maxLength',
         params: { limit: 5 }
       })
-    ).toEqual('errors:maxLength')
+    ).equal('errors:maxLength')
   })
 })

cypress/component/hooks/useForm/handleCheckboxBoolean.cy.ts

@@ -1,6 +1,6 @@
 import { Type } from '@sinclair/typebox'
 
-import { handleCheckboxBoolean } from './handleCheckboxBoolean'
+import { handleCheckboxBoolean } from '../../../../hooks/useForm/handleCheckboxBoolean'
 
 const schema = Type.Object({
   myBoolean: Type.Boolean(),
@@ -14,7 +14,7 @@ describe('hooks/useForm/handleCheckboxBoolean', () => {
       myString: 'on'
     }
     const result = handleCheckboxBoolean(object, schema)
-    expect(result).toEqual({
+    expect(result).deep.equal({
       myBoolean: true,
       myString: 'on'
     })

cypress/component/hooks/useForm/replaceEmptyStringInObjectToNull.cy.ts

@@ -1,6 +1,6 @@
-import { replaceEmptyStringInObjectToNull } from './replaceEmptyStringInObjectToNull'
+import { replaceEmptyStringInObjectToNull } from '../../../../hooks/useForm/replaceEmptyStringInObjectToNull'
 
-describe('tools/utils/replaceEmptyStringInObjectToNull', () => {
+describe('hooks/useForm/replaceEmptyStringInObjectToNull', () => {
   it('should replace empty string in object to null except for required properties', () => {
     expect(
       replaceEmptyStringInObjectToNull(
@@ -11,7 +11,7 @@ describe('tools/utils/replaceEmptyStringInObjectToNull', () => {
         },
         ['baz']
       )
-    ).toEqual({
+    ).deep.equal({
       foo: null,
       bar: 'bar',
       baz: ''

cypress/component/tools/utils/capitalize.cy.ts

@@ -0,0 +1,10 @@
+import { capitalize } from '../../../../tools/utils/capitalize'
+
+describe('tools/utils/capitalize', () => {
+  it('should capitalize the first letter of a string', () => {
+    expect(capitalize('hello')).equal('Hello')
+    expect(capitalize('HeLlo')).equal('HeLlo')
+    expect(capitalize('member(s)')).equal('Member(s)')
+    expect(capitalize('Member(s)')).equal('Member(s)')
+  })
+})

cypress/e2e/common/Header.cy.ts

@@ -49,3 +49,5 @@ describe('Common > Header', () => {
     })
   })
 })
+
+export {}

cypress/e2e/common/application/authentication.cy.ts

@@ -45,3 +45,5 @@ describe('Common > application/authentication', () => {
     }
   })
 })
+
+export {}

cypress/e2e/pages/400.cy.ts

@@ -7,3 +7,5 @@ describe('Page > /404', () => {
     cy.get('[data-cy=status-code]').contains('404')
   })
 })
+
+export {}

cypress/e2e/pages/500.cy.ts

@@ -7,3 +7,5 @@ describe('Page > /500', () => {
     cy.get('[data-cy=status-code]').contains('500')
   })
 })
+
+export {}

cypress/e2e/pages/application/[guildId]/[channelId]/index.cy.ts

@@ -267,3 +267,5 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
       .should('eq', '/404')
   })
 })
+
+export {}

cypress/e2e/pages/application/[guildId]/[channelId]/settings.cy.ts

@@ -132,3 +132,5 @@ describe('Pages > /application/[guildId]/[channelId]/settings', () => {
       .should('eq', '/404')
   })
 })
+
+export {}

cypress/e2e/pages/application/[guildId]/channels/create.cy.ts

@@ -72,3 +72,5 @@ describe('Pages > /application/[guildId]/channels/create', () => {
       .should('eq', '/404')
   })
 })
+
+export {}

cypress/e2e/pages/application/[guildId]/settings.cy.ts

@@ -102,3 +102,5 @@ describe('Pages > /application/[guildId]/settings', () => {
       .should('eq', '/404')
   })
 })
+
+export {}

cypress/e2e/pages/application/guilds/create.cy.ts

@@ -42,3 +42,5 @@ describe('Pages > /application/guilds/create', () => {
     cy.get('#message').should('have.text', 'Error: Internal Server Error.')
   })
 })
+
+export {}

cypress/e2e/pages/application/guilds/join.cy.ts

@@ -75,6 +75,8 @@ describe('Pages > /application/guilds/join', () => {
     )
     cy.visit('/application/guilds/join')
     cy.get('.guilds-public-list').children().should('have.length', 1)
-    cy.get('[data-testid=progress-spinner]').should('be.visible')
+    cy.get('[data-cy=progress-spinner]').should('be.visible')
   })
 })
+
+export {}

cypress/e2e/pages/application/index.cy.ts

@@ -30,3 +30,5 @@ describe('Pages > /application', () => {
       .should('eq', '/application/guilds/join')
   })
 })
+
+export {}

cypress/e2e/pages/application/users/[userId]/index.cy.ts

@@ -33,3 +33,5 @@ describe('Pages > /application/users/[userId]', () => {
       .should('eq', '/404')
   })
 })
+
+export {}

cypress/e2e/pages/authentication/forgot-password.cy.ts

@@ -35,3 +35,5 @@ describe('Pages > /authentication/forgot-password', () => {
     )
   })
 })
+
+export {}

cypress/e2e/pages/authentication/reset-password.cy.ts

@@ -46,3 +46,5 @@ describe('Pages > /authentication/reset-password', () => {
     )
   })
 })
+
+export {}

cypress/e2e/pages/authentication/signin.cy.ts

@@ -53,3 +53,5 @@ describe('Pages > /authentication/signin', () => {
     cy.get('#error-password').should('not.exist')
   })
 })
+
+export {}

cypress/e2e/pages/authentication/signup.cy.ts

@@ -83,3 +83,5 @@ describe('Pages > /authentication/signup', () => {
     )
   })
 })
+
+export {}

cypress/e2e/pages/index.cy.ts

@@ -10,3 +10,5 @@ describe('Page > /', () => {
       .should('eq', '/authentication/signup')
   })
 })
+
+export {}

cypress/plugins/index.js

@@ -1,66 +0,0 @@
-import path from 'node:path'
-
-import { getLocal } from 'mockttp'
-
-import { API_DEFAULT_PORT } from '../../tools/api'
-
-/// <reference types="cypress" />
-
-/**
- * @typedef {import('../fixtures/handler').Method} Method
- */
-
-/** @type {import('mockttp').Mockttp | null}  */
-let server = null
-
-const UPLOADS_FIXTURES_DIRECTORY = path.join(
-  process.cwd(),
-  'cypress',
-  'fixtures',
-  'uploads'
-)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-module.exports = (on, config) => {
-  on('task', {
-    /**
-     * @param {import('../fixtures/handler').Handlers} handlers
-     */
-    async startMockServer(handlers) {
-      server = getLocal({
-        cors: true
-      })
-      await server.start(API_DEFAULT_PORT)
-      for (const handler of handlers) {
-        const { isFile = false } = handler.response
-        const method = /** @type {Lowercase<Method>} */ (
-          handler.method.toLowerCase()
-        )
-        if (isFile) {
-          await server[method](handler.url).thenFromFile(
-            handler.response.statusCode,
-            path.join(UPLOADS_FIXTURES_DIRECTORY, ...handler.response.body)
-          )
-        } else {
-          await server[method](handler.url).thenJson(
-            handler.response.statusCode,
-            handler.response.body
-          )
-        }
-      }
-      return null
-    },
-
-    async stopMockServer() {
-      if (server != null) {
-        await server.stop()
-        server = null
-      }
-      return null
-    }
-  })
-
-  return config
-}

cypress/support/commands.ts

@@ -0,0 +1,3 @@
+/// <reference types="cypress" />
+
+export {}

cypress/support/component-index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Components App</title>
+    <!-- Used by Next.js to inject CSS. -->
+    <div id="__next_css__DO_NOT_USE__"></div>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/component.ts

@@ -0,0 +1,14 @@
+import { mount } from 'cypress/react'
+
+import './commands'
+import '../../styles/global.css'
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)

cypress/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "noEmit": true,
-    "types": ["cypress"],
-    "isolatedModules": false
-  },
-  "include": ["../node_modules/cypress", "./**/*.ts"]
-}

generators/component/Component.test.tsx.hbs

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { {{ properCase name }} } from './{{ properCase name }}'
-
-describe('<{{ properCase name }} />', () => {
-  it('should render', () => {
-    const { baseElement } = render(<{{ properCase name }} />)
-    expect(baseElement).toBeTruthy()
-  })
-})

generators/component/index.js

@@ -17,16 +17,6 @@ exports.componentGenerator = () => {
       }
     ],
     actions: [
-      {
-        type: 'add',
-        path: 'components/{{folder}}/{{properCase name}}/{{properCase name}}.stories.tsx',
-        templateFile: 'generators/component/Component.stories.tsx.hbs'
-      },
-      {
-        type: 'add',
-        path: 'components/{{folder}}/{{properCase name}}/{{properCase name}}.test.tsx',
-        templateFile: 'generators/component/Component.test.tsx.hbs'
-      },
       {
         type: 'add',
         path: 'components/{{folder}}/{{properCase name}}/{{properCase name}}.tsx',

jest.config.js

@@ -1,14 +0,0 @@
-const nextJest = require('next/jest')
-
-const createJestConfig = nextJest()
-const customJestConfig = {
-  moduleDirectories: ['node_modules', './'],
-  modulePathIgnorePatterns: ['<rootDir>/cypress'],
-  testEnvironment: 'jsdom',
-  setupFilesAfterEnv: [
-    '@testing-library/jest-dom/extend-expect',
-    '@testing-library/react'
-  ]
-}
-
-module.exports = createJestConfig(customJestConfig)

next.config.js

@@ -1,10 +1,13 @@
-const nextPWA = require('next-pwa')
+const nextPWA = require('next-pwa')({
+  disable: process.env.NODE_ENV !== 'production',
+  dest: 'public'
+})
 const nextTranslate = require('next-translate')
-const { createSecureHeaders } = require('next-secure-headers')
 
 /** @type {import("next").NextConfig} */
 module.exports = nextTranslate(
   nextPWA({
+    reactStrictMode: true,
     images: {
       domains: [
         'api.thream.divlo.fr',
@@ -12,38 +15,6 @@ module.exports = nextTranslate(
         'file-uploads-api.thream.divlo.fr',
         ...(process.env.NODE_ENV !== 'production' ? ['localhost'] : [])
       ]
-    },
-    reactStrictMode: true,
-    pwa: {
-      disable: process.env.NODE_ENV !== 'production',
-      dest: 'public'
-    },
-    headers() {
-      return [
-        {
-          source: '/:path*',
-          headers: createSecureHeaders({
-            contentSecurityPolicy: {
-              directives: {
-                defaultSrc: ["'self'"],
-                scriptSrc: [
-                  "'self'",
-                  'data:',
-                  "'unsafe-eval'",
-                  "'unsafe-inline'"
-                ],
-                styleSrc: ["'self'", "'unsafe-inline'"],
-                imgSrc: ['*', 'data:', 'blob:'],
-                mediaSrc: ['*', 'data:', 'blob:'],
-                connectSrc: '*',
-                objectSrc: "'none'",
-                fontSrc: "'self'",
-                baseURI: "'none'"
-              }
-            }
-          })
-        }
-      ]
     }
   })
 )

package.json

@@ -18,33 +18,33 @@
     "generate": "plop",
     "lint:commit": "commitlint",
     "lint:editorconfig": "editorconfig-checker",
-    "lint:markdown": "markdownlint \"**/*.md\" --dot --ignore-path \".gitignore\"",
-    "lint:typescript": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "lint:markdown": "markdownlint-cli2",
+    "lint:typescript": "eslint \"**/*.{js,jsx,ts,tsx}\" --ignore-path \".gitignore\"",
     "lint:prettier": "prettier \".\" --check",
     "lint:staged": "lint-staged",
-    "test:unit": "jest",
+    "test:unit": "cypress run --component",
     "test:html-w3c-validator": "start-server-and-test \"start\" \"http://localhost:3000\" \"html-w3c-validator\"",
     "test:lighthouse": "lhci autorun",
     "test:e2e": "start-server-and-test \"start\" \"http://localhost:3000\" \"cypress run\"",
-    "test:e2e:dev": "start-server-and-test \"dev\" \"http://localhost:3000\" \"cypress open\"",
+    "test:dev": "start-server-and-test \"dev\" \"http://localhost:3000\" \"cypress open\"",
     "release": "semantic-release",
     "deploy": "vercel",
     "postinstall": "husky install"
   },
   "dependencies": {
-    "@fontsource/montserrat": "4.5.11",
-    "@fontsource/roboto": "4.5.7",
+    "@fontsource/montserrat": "4.5.12",
+    "@fontsource/roboto": "4.5.8",
     "@heroicons/react": "1.0.6",
-    "@sinclair/typebox": "0.24.18",
+    "@sinclair/typebox": "0.24.28",
     "ajv": "8.11.0",
     "ajv-formats": "2.1.1",
     "axios": "0.26.1",
     "classnames": "2.3.1",
-    "date-and-time": "2.4.0",
+    "date-and-time": "2.4.1",
     "emoji-mart": "3.0.1",
     "katex": "0.16.0",
-    "next": "12.2.2",
-    "next-pwa": "5.5.4",
+    "next": "12.2.5",
+    "next-pwa": "5.6.0",
     "next-themes": "0.2.0",
     "next-translate": "1.5.0",
     "pretty-bytes": "6.0.0",
@@ -65,7 +65,7 @@
     "sharp": "0.30.7",
     "socket.io-client": "4.5.1",
     "unified": "10.1.2",
-    "unist-util-visit": "4.1.0",
+    "unist-util-visit": "4.1.1",
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
@@ -74,46 +74,41 @@
     "@lhci/cli": "0.9.0",
     "@saithodev/semantic-release-backmerge": "2.1.2",
     "@semantic-release/git": "10.0.1",
-    "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "13.3.0",
     "@types/emoji-mart": "3.0.9",
     "@types/hast": "2.3.4",
-    "@types/jest": "28.1.4",
     "@types/katex": "0.14.0",
-    "@types/node": "18.0.3",
-    "@types/react": "18.0.15",
+    "@types/node": "18.7.11",
+    "@types/react": "18.0.17",
     "@types/react-responsive": "8.0.5",
-    "@types/react-syntax-highlighter": "15.5.3",
+    "@types/react-syntax-highlighter": "15.5.4",
     "@types/unist": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "5.30.6",
-    "@typescript-eslint/parser": "5.30.6",
-    "autoprefixer": "10.4.7",
-    "cypress": "9.6.1",
+    "@typescript-eslint/eslint-plugin": "5.34.0",
+    "@typescript-eslint/parser": "5.34.0",
+    "autoprefixer": "10.4.8",
+    "cypress": "10.6.0",
     "editorconfig-checker": "4.0.2",
-    "eslint": "8.19.0",
+    "eslint": "8.22.0",
     "eslint-config-conventions": "3.0.0",
-    "eslint-config-next": "12.2.2",
+    "eslint-config-next": "12.2.5",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-promise": "6.0.0",
-    "eslint-plugin-unicorn": "43.0.1",
+    "eslint-plugin-unicorn": "43.0.2",
     "html-w3c-validator": "1.2.0",
     "husky": "8.0.1",
-    "jest": "27.5.1",
     "lint-staged": "13.0.3",
-    "markdownlint-cli": "0.31.1",
+    "markdownlint-cli2": "0.5.1",
     "mockttp": "2.7.0",
-    "next-secure-headers": "2.2.0",
     "plop": "3.1.1",
-    "postcss": "8.4.14",
+    "postcss": "8.4.16",
     "prettier": "2.7.1",
-    "prettier-plugin-tailwindcss": "0.1.12",
-    "semantic-release": "19.0.3",
-    "serve": "14.0.0",
+    "prettier-plugin-tailwindcss": "0.1.13",
+    "semantic-release": "19.0.5",
+    "serve": "14.0.1",
     "start-server-and-test": "1.14.0",
-    "tailwindcss": "3.1.6",
+    "tailwindcss": "3.1.8",
     "typescript": "4.7.4",
-    "vercel": "27.0.2"
+    "vercel": "28.1.2"
   }
 }

pages/authentication/reset-password.tsx

@@ -12,7 +12,7 @@ import { Input } from '../../components/design/Input'
 import { Button } from '../../components/design/Button'
 import { authenticationFromServerSide } from '../../tools/authentication'
 import { AuthenticationForm } from '../../components/Authentication'
-import { ScrollableBody } from '../../components/ScrollableBody/ScrollableBody'
+import { ScrollableBody } from '../../components/ScrollableBody'
 import { HandleSubmitCallback, useForm } from '../../hooks/useForm'
 import { api } from '../../tools/api'
 import { userSchema } from '../../models/User'

tools/utils/__test__/capitalize.test.ts

@@ -1,10 +0,0 @@
-import { capitalize } from '../capitalize'
-
-describe('tools/utils/capitalize', () => {
-  it('should capitalize the first letter of a string', () => {
-    expect(capitalize('hello')).toEqual('Hello')
-    expect(capitalize('HeLlo')).toEqual('HeLlo')
-    expect(capitalize('member(s)')).toEqual('Member(s)')
-    expect(capitalize('Member(s)')).toEqual('Member(s)')
-  })
-})

tsconfig.json

@@ -10,7 +10,7 @@
     "removeComments": true,
     "noEmit": true,
     "strict": true,
-    "types": ["jest", "@testing-library/jest-dom", "@testing-library/react"],
+    "types": ["cypress"],
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "lib": ["dom", "dom.iterable", "esnext"],