19 Commits

Author SHA1 Message Date
7c01246028 chore(release): 1.1.1 [skip ci] 2022-08-24 15:28:48 +00:00
ad64f1c571 perf: optimize load of pagination items with caching 2022-08-24 17:22:55 +02:00
19fc29ad47 fix: link (<a>) in messages not styled 2022-08-23 22:01:43 +02:00
7ad3d226dc chore: remove jest -> cypress for unit tests 2022-08-23 21:51:20 +02:00
d8cedd7b77 chore: enable again html-w3c-validator 2022-07-12 20:47:22 +02:00
177676e180 chore(release): 1.1.0 [skip ci] 2022-06-29 04:58:08 +00:00
db4ab7cf6f test(e2e): remove usage of @nextStaticAndImages intercept 2022-06-29 06:50:35 +02:00
8f9ff8de07 build(deps): downgrade axios to 0.26.1 2022-06-29 06:33:11 +02:00
21ee6f1d66 fix: autoscroll the user when posting a message even if is not at bottom 2022-06-29 06:23:23 +02:00
10b1e568d2 feat: update API to v1.1.0 2022-06-29 06:18:23 +02:00
1882073973 build(deps): update latest 2022-06-29 06:01:15 +02:00
567829fa3a fix: user website should open link in a new tab 2022-05-12 20:54:50 +02:00
c0e2c547ef feat: add Syntax Highlighting for Messages
closes #18
2022-05-12 20:49:20 +02:00
f555e406ef build(deps): update latest 2022-05-12 20:35:46 +02:00
4cd817bb01 feat: add indicator for the owner of the guild (#29) 2022-04-10 18:47:21 +02:00
41e9162454 Merge branch 'master' into develop 2022-04-09 17:26:53 +02:00
ff2decc894 chore(release): 1.0.3 [skip ci] 2022-04-09 15:25:22 +00:00
d44a401348 fix: correctly set icon for Twitter metadata 2022-04-09 17:24:00 +02:00
cb2ddbf661 feat: confirm popup for guild/channel deletion (#27) 2022-04-09 13:48:48 +02:00
130 changed files with 9059 additions and 12134 deletions

View File

@ -1,5 +1,3 @@
version: '3.0'
services:
workspace:
build:

View File

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

View File

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

View File

@ -16,7 +16,7 @@ jobs:
language: ['javascript']
steps:
- uses: 'actions/checkout@v2.3.4'
- uses: 'actions/checkout@v3.0.0'
- name: 'Initialize CodeQL'
uses: 'github/codeql-action/init@v1'

View File

@ -10,10 +10,10 @@ jobs:
build:
runs-on: 'ubuntu-latest'
steps:
- uses: 'actions/checkout@v2'
- uses: 'actions/checkout@v3.0.0'
- name: 'Use Node.js'
uses: 'actions/setup-node@v2.4.1'
uses: 'actions/setup-node@v3.0.0'
with:
node-version: '16.x'
cache: 'npm'

View File

@ -10,10 +10,10 @@ jobs:
lint:
runs-on: 'ubuntu-latest'
steps:
- uses: 'actions/checkout@v2'
- uses: 'actions/checkout@v3.0.0'
- name: 'Use Node.js'
uses: 'actions/setup-node@v2.4.1'
uses: 'actions/setup-node@v3.0.0'
with:
node-version: '16.x'
cache: 'npm'

View File

@ -8,7 +8,7 @@ jobs:
release:
runs-on: 'ubuntu-latest'
steps:
- uses: 'actions/checkout@v2.3.4'
- uses: 'actions/checkout@v3.0.0'
with:
fetch-depth: 0
persist-credentials: false

View File

@ -10,10 +10,10 @@ jobs:
test-unit:
runs-on: 'ubuntu-latest'
steps:
- uses: 'actions/checkout@v2.3.4'
- uses: 'actions/checkout@v3.0.0'
- name: 'Use Node.js'
uses: 'actions/setup-node@v2.4.1'
uses: 'actions/setup-node@v3.0.0'
with:
node-version: '16.x'
cache: 'npm'
@ -27,10 +27,10 @@ jobs:
test-lighthouse:
runs-on: 'ubuntu-latest'
steps:
- uses: 'actions/checkout@v2.3.4'
- uses: 'actions/checkout@v3.0.0'
- name: 'Use Node.js'
uses: 'actions/setup-node@v2.4.0'
uses: 'actions/setup-node@v3.0.0'
with:
node-version: '16.x'
cache: 'npm'
@ -52,10 +52,10 @@ jobs:
test-e2e:
runs-on: 'ubuntu-latest'
steps:
- uses: 'actions/checkout@v2.3.4'
- uses: 'actions/checkout@v3.0.0'
- name: 'Use Node.js'
uses: 'actions/setup-node@v2.4.0'
uses: 'actions/setup-node@v3.0.0'
with:
node-version: '16.x'
cache: 'npm'

View File

@ -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"]
}

11
.markdownlint-cli2.jsonc Normal file
View File

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

View File

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

1
.npmrc
View File

@ -1 +1,2 @@
save-exact=true
legacy-peer-deps=true

View File

@ -1,15 +1,15 @@
FROM node:16.14.2 AS dependencies
FROM node:16.17.0 AS dependencies
WORKDIR /usr/src/app
COPY ./package*.json ./
RUN npm install
FROM node:16.14.2 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.14.2 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

View File

@ -18,7 +18,7 @@
Thream's website to stay close with your friends and communities.
It uses [Thream/api](https://github.com/Thream/api) [v1.0.1](https://github.com/Thream/api/releases/tag/v1.0.1).
It uses [Thream/api](https://github.com/Thream/api) [v1.1.0](https://github.com/Thream/api/releases/tag/v1.1.0).
## ⚙️ Getting Started
@ -56,7 +56,7 @@ npm run dev
```sh
# Setup and run all the services for you
docker-compose up --build
docker compose up --build
```
#### Services started

View File

@ -40,7 +40,9 @@ export interface ApplicationProps {
title: string
}
export const Application: React.FC<ApplicationProps> = (props) => {
export const Application: React.FC<
React.PropsWithChildren<ApplicationProps>
> = (props) => {
const { children, path, guildLeftSidebar, title } = props
const { user } = useAuthentication()
@ -110,7 +112,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
const swipeableHandlers = useSwipeable({
trackMouse: false,
trackTouch: true,
preventDefaultTouchmoveEvent: true,
preventScrollOnSwipe: true,
onSwipedRight: () => {
if (visibleSidebars.right) {
return setVisibleSidebars({ ...visibleSidebars, right: false })
@ -215,7 +217,7 @@ export const Application: React.FC<ApplicationProps> = (props) => {
id='application-page-content'
onClick={handleCloseSidebars}
className={classNames(
'h-full-without-header top-0 z-0 flex w-full flex-1 flex-col overflow-y-auto transition',
'h-full-without-header relative top-0 z-0 flex w-full flex-1 flex-col overflow-y-auto transition',
{
'absolute opacity-20':
isMobile && (visibleSidebars.left || visibleSidebars.right)

View File

@ -2,6 +2,7 @@ import { useRouter } from 'next/router'
import { useState } from 'react'
import { Form } from 'react-component-form'
import useTranslation from 'next-translate/useTranslation'
import classNames from 'classnames'
import axios from 'axios'
import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
@ -15,6 +16,7 @@ import {
channelSchema,
ChannelWithDefaultChannelId
} from '../../../models/Channel'
import { ConfirmPopup } from '../ConfirmPopup'
export interface ChannelSettingsProps {
channel: Channel
@ -32,6 +34,12 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
name: channel.name
})
const [confirmation, setConfirmation] = useState(false)
const handleConfirmation = (): void => {
return setConfirmation(!confirmation)
}
const {
fetchState,
message,
@ -91,6 +99,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
}
return (
<>
<Form
onSubmit={handleSubmit(onSubmit)}
className='my-auto flex flex-col items-center justify-center py-12'
@ -120,7 +129,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
<Button
type='button'
color='red'
onClick={handleDelete}
onClick={handleConfirmation}
data-cy='button-delete-channel-settings'
>
{t('application:delete')}
@ -129,5 +138,21 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
<FormState state={fetchState} message={message} />
</div>
</Form>
<div
className={classNames(
'pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all',
{ 'pointer-events-auto !visible !opacity-100': confirmation }
)}
>
<ConfirmPopup
className={classNames('relative top-8 transition-all', {
'!top-0': confirmation
})}
handleYes={handleDelete}
handleNo={handleConfirmation}
title={`${t('application:delete-the-channel')} ?`}
/>
</div>
</>
)
}

View File

@ -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

View File

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

View File

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

View File

@ -5,15 +5,14 @@ import classNames from 'classnames'
import { Loader } from '../../design/Loader'
export interface ConfirmGuildJoinProps {
export interface ConfirmPopupProps {
className?: string
title: string
handleYes: () => void | Promise<void>
handleNo: () => void | Promise<void>
}
export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
...props
}) => {
export const ConfirmPopup: React.FC<ConfirmPopupProps> = ({ ...props }) => {
const { t } = useTranslation()
const [isLoading, setIsLoading] = useState(false)
@ -25,9 +24,12 @@ export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
return (
<div className={props.className}>
<Loader
className={classNames('absolute scale-0 transition', {
className={classNames(
'absolute top-1/2 left-1/2 scale-0 transition-all',
{
'scale-100': isLoading
})}
}
)}
/>
<div
className={classNames(
@ -40,24 +42,24 @@ export const ConfirmGuildJoin: React.FC<ConfirmGuildJoinProps> = ({
<Image
quality={100}
src='/images/svg/design/join-guild.svg'
alt='Join Guild Illustration'
alt='Illustration'
height={150}
width={150}
/>
<div className='mt-8 flex flex-col'>
<h1 className='mb-6 text-center text-xl'>
{t('application:join-the-guild')} ?
</h1>
<h1 className='mb-6 text-center text-xl'>{props.title}</h1>
<div className='flex gap-7'>
<button
className='rounded-3xl bg-success px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
onClick={handleYesLoading}
data-cy='confirm-popup-yes-button'
>
{t('common:yes')}
</button>
<button
className='rounded-3xl bg-error px-8 py-2 text-white transition hover:brightness-125 dark:text-black hover:dark:brightness-75'
onClick={props.handleNo}
data-cy='confirm-popup-no-button'
>
{t('common:no')}
</button>

View File

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

View File

@ -5,6 +5,7 @@ import { Type } from '@sinclair/typebox'
import { PhotographIcon } from '@heroicons/react/solid'
import { Form } from 'react-component-form'
import useTranslation from 'next-translate/useTranslation'
import classNames from 'classnames'
import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
import { guildSchema } from '../../../models/Guild'
@ -14,6 +15,7 @@ import { Textarea } from '../../design/Textarea'
import { Input } from '../../design/Input'
import { Button } from '../../design/Button'
import { useAuthentication } from '../../../tools/authentication'
import { ConfirmPopup } from '../ConfirmPopup'
export const GuildSettings: React.FC = () => {
const { t } = useTranslation()
@ -26,6 +28,12 @@ export const GuildSettings: React.FC = () => {
description: guild.description
})
const [confirmation, setConfirmation] = useState(false)
const handleConfirmation = (): void => {
return setConfirmation(!confirmation)
}
const {
fetchState,
message,
@ -109,6 +117,7 @@ export const GuildSettings: React.FC = () => {
}
return (
<>
<Form
onSubmit={handleSubmit(onSubmit)}
className='my-auto flex flex-col items-center justify-center py-12'
@ -177,7 +186,7 @@ export const GuildSettings: React.FC = () => {
<Button
type='button'
color='red'
onClick={handleDelete}
onClick={handleConfirmation}
data-cy='button-delete-guild-settings'
>
{t('application:delete')}
@ -199,5 +208,21 @@ export const GuildSettings: React.FC = () => {
/>
</div>
</Form>
<div
className={classNames(
'pointer-events-none invisible absolute z-50 flex h-full w-full items-center justify-center bg-black bg-opacity-90 opacity-0 backdrop-blur-md transition-all',
{ 'pointer-events-auto !visible !opacity-100': confirmation }
)}
>
<ConfirmPopup
className={classNames('relative top-8 transition-all', {
'!top-0': confirmation
})}
handleYes={handleDelete}
handleNo={handleConfirmation}
title={`${t('application:delete-the-guild')} ?`}
/>
</div>
</>
)
}

View File

@ -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

View File

@ -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()
})
})

View File

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

View File

@ -5,13 +5,13 @@ import useTranslation from 'next-translate/useTranslation'
import classNames from 'classnames'
import axios from 'axios'
import { Emoji } from '../../../Emoji'
import { ConfirmGuildJoin } from '../../ConfirmGuildJoin'
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
@ -40,7 +40,7 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
if (
axios.isAxiosError(error) &&
error.response?.status === 400 &&
typeof error.response?.data.defaultChannelId === 'number'
typeof error?.response?.data.defaultChannelId === 'number'
) {
const defaultChannelId = error.response.data.defaultChannelId as number
await router.push(`/application/${guild.id}/${defaultChannelId}`)
@ -91,7 +91,8 @@ export const GuildPublic: React.FC<GuildPublicProps> = (props) => {
{guild.membersCount} {t('application:members')}
</p>
</div>
<ConfirmGuildJoin
<ConfirmPopup
title={`${t('application:join-the-guild')} ?`}
className={classNames(
'w-ful h-ful translate-x- absolute top-1/2 left-full flex h-full w-full -translate-y-1/2 flex-col items-center justify-center rounded-2xl transition-all',
{

View File

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

View File

@ -22,12 +22,15 @@ export const JoinGuildsPublic: React.FC = () => {
})
useEffect(() => {
authentication.socket.on('guilds', (data: SocketData<GuildPublicType>) => {
authentication?.socket?.on(
'guilds',
(data: SocketData<GuildPublicType>) => {
handleSocketData({ data, setItems })
})
}
)
return () => {
authentication.socket.off('guilds')
authentication?.socket?.off('guilds')
}
}, [authentication.socket, setItems])

View File

@ -1,7 +1,8 @@
import Image from 'next/image'
import Link from 'next/link'
import { MemberWithPublicUser } from '../../../../models/Member'
import { MemberWithPublicUser } from '../../../models/Member'
import { Emoji } from '../../Emoji'
export interface MemberProps {
member: MemberWithPublicUser
@ -29,8 +30,13 @@ export const Member: React.FC<MemberProps> = (props) => {
/>
</div>
<div className='ml-5'>
<p data-cy='member-user-name' className='truncate font-bold'>
<p data-cy='member-user-name' className='flex truncate font-bold'>
{member.user.name}
{member.isOwner && (
<span className='ml-4'>
<Emoji value=':crown:' size={18} />
</span>
)}
</p>
{member.user.status != null && member.user.status}
</div>

View File

@ -1,11 +0,0 @@
import { render } from '@testing-library/react'
import { Member } from './Member'
import { memberExampleComplete } from '../../../../cypress/fixtures/members/member'
describe('<Member />', () => {
it('should render successfully', () => {
const { baseElement } = render(<Member member={memberExampleComplete} />)
expect(baseElement).toBeTruthy()
})
})

View File

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

View File

@ -4,6 +4,8 @@ import gfm from 'remark-gfm'
import remarkBreaks from 'remark-breaks'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'
import 'katex/dist/katex.min.css'
@ -39,8 +41,34 @@ export const MessageText: React.FC<MessageContentProps> = (props) => {
rehypePlugins={[[emojiPlugin], [rehypeKatex]]}
linkTarget='_blank'
components={{
a: (props) => {
return (
<a
className='text-green-800 hover:underline dark:text-green-400'
{...props}
/>
)
},
emoji: (props) => {
return <Emoji value={props.value} size={20} />
},
code: (properties) => {
const { inline, className, children, ...props } = properties
const match = /language-(\w+)/.exec(className ?? '')
return !(inline as boolean) && match != null ? (
<SyntaxHighlighter
style={vscDarkPlus as any}
language={match[1]}
PreTag='div'
{...props}
>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
)
}
}}
>

View File

@ -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()
})
})

View File

@ -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
}

View File

@ -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()
})
})

View File

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

View File

@ -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()
})
})

View File

@ -11,7 +11,9 @@ export interface SidebarProps {
isMobile: boolean
}
export const Sidebar: React.FC<SidebarProps> = (props) => {
export const Sidebar: React.FC<React.PropsWithChildren<SidebarProps>> = (
props
) => {
const { direction, visible, children, path, isMobile } = props
return (

View File

@ -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()
})
})

View File

@ -71,6 +71,8 @@ export const UserProfile: React.FC<UserProfileProps> = (props) => {
<p className='font-bold'>
{t('application:website')}:{' '}
<a
target='_blank'
rel='noreferrer'
href={user.website}
className='relative ml-2 font-normal tracking-wide no-underline opacity-80 transition-all after:absolute after:left-0 after:bottom-[-2px] after:h-[1px] after:w-0 after:bg-black after:transition-all hover:opacity-100 hover:after:w-full dark:after:bg-white'
>

View File

@ -72,7 +72,7 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
} else {
try {
const { data } = await api.post<Tokens>('/users/signin', formData)
const authentication = new AuthenticationClass(data)
const authentication = new AuthenticationClass(data, true)
authentication.signin()
await router.push('/application')
return null

View File

@ -24,7 +24,7 @@ export const AuthenticationSocialMedia: React.FC = () => {
useEffect(() => {
const data = router.query
if (isTokens(data)) {
const authentication = new Authentication(data)
const authentication = new Authentication(data, true)
authentication.signin()
router.push('/application').catch(() => {})
}

View File

@ -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()
})
})

View File

@ -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()
})
})

View File

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

View File

@ -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}`
)
})
})

View File

@ -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'

View File

@ -13,7 +13,7 @@ export const Head: React.FC<HeadProps> = (props) => {
const {
title = 'Thream',
image = '/images/icons/96x96.png',
image = 'https://thream.divlo.fr/images/icons/128x128.png',
description = t('common:description'),
url = 'https://thream.divlo.fr/'
} = props
@ -42,7 +42,7 @@ export const Head: React.FC<HeadProps> = (props) => {
<meta name='twitter:card' content='summary' />
<meta name='twitter:description' content={description} />
<meta name='twitter:title' content={title} />
<meta name='twitter:image:src' content={image} />
<meta name='twitter:image' content={image} />
{/* PWA Data */}
<link rel='manifest' href='/manifest.json' />

View File

@ -1,4 +1,4 @@
import { useCallback, useEffect, useState } from 'react'
import { useCallback, useEffect, useState, useRef } from 'react'
import useTranslation from 'next-translate/useTranslation'
import setLanguage from 'next-translate/setLanguage'
import classNames from 'classnames'
@ -15,31 +15,37 @@ export const Language: React.FC<LanguageProps> = (props) => {
const { className } = props
const { lang: currentLanguage } = useTranslation()
const [hiddenMenu, setHiddenMenu] = useState(true)
const languageClickRef = useRef<HTMLDivElement | null>(null)
const handleHiddenMenu = useCallback(() => {
setHiddenMenu(!hiddenMenu)
}, [hiddenMenu])
setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu)
}, [])
useEffect(() => {
if (!hiddenMenu) {
window.document.addEventListener('click', handleHiddenMenu)
} else {
window.document.removeEventListener('click', handleHiddenMenu)
const handleClickEvent = (event: MouseEvent): void => {
if (languageClickRef.current == null || event.target == null) {
return
}
if (!languageClickRef.current.contains(event.target as Node)) {
setHiddenMenu(true)
}
}
window.document.addEventListener('click', handleClickEvent)
return () => {
window.document.removeEventListener('click', handleHiddenMenu)
return window.removeEventListener('click', handleClickEvent)
}
}, [hiddenMenu, handleHiddenMenu])
}, [])
const handleLanguage = async (language: string): Promise<void> => {
await setLanguage(language)
handleHiddenMenu()
}
return (
<div className='relative flex cursor-pointer flex-col items-center justify-center'>
<div
ref={languageClickRef}
data-cy='language-click'
className='mr-5 flex items-center'
onClick={handleHiddenMenu}

View File

@ -1,4 +1,6 @@
export const ScrollableBody: React.FC = (props) => {
export const ScrollableBody: React.FC<React.PropsWithChildren<{}>> = (
props
) => {
const { children } = props
return (

View File

@ -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()
})
})

View File

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

View File

@ -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()
})
})

View File

@ -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()
})
})

View File

@ -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()
})
})

View File

@ -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()
})
})

View File

@ -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>
)

View File

@ -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()
})
})

View File

@ -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()
})
})

View File

@ -8,7 +8,9 @@ export interface IconLinkProps {
className?: string
}
export const IconLink: React.FC<IconLinkProps> = (props) => {
export const IconLink: React.FC<React.PropsWithChildren<IconLinkProps>> = (
props
) => {
const { children, selected, href, title, className } = props
return (

View File

@ -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')
})
})

View File

@ -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'
/>

View File

@ -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')
})
})

View File

@ -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'

View File

@ -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()
})
})

View File

@ -4,7 +4,7 @@ export interface MainProps {
className?: string
}
export const Main: React.FC<MainProps> = (props) => {
export const Main: React.FC<React.PropsWithChildren<MainProps>> = (props) => {
const { children, className } = props
return (

View File

@ -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')
})
})

View File

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

View File

@ -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()
})
})

View File

@ -6,6 +6,7 @@ import { useAuthentication } from '../tools/authentication'
import { Channel, ChannelWithDefaultChannelId } from '../models/Channel'
import { GuildsChannelsPath } from '../components/Application'
import { handleSocketData, SocketData } from '../tools/handleSocketData'
import { CacheKey, CHANNELS_CACHE_KEY } from '../tools/cache'
export interface Channels {
channels: Channel[]
@ -20,11 +21,15 @@ export interface ChannelsProviderProps {
path: GuildsChannelsPath
}
export const ChannelsProvider: React.FC<ChannelsProviderProps> = (props) => {
export const ChannelsProvider: React.FC<
React.PropsWithChildren<ChannelsProviderProps>
> = (props) => {
const { path, children } = props
const router = useRouter()
const { authentication } = useAuthentication()
const cacheKey: CacheKey = `${path.guildId}-${CHANNELS_CACHE_KEY}`
const {
items: channels,
hasMore,
@ -33,14 +38,15 @@ export const ChannelsProvider: React.FC<ChannelsProviderProps> = (props) => {
setItems
} = usePagination<Channel>({
api: authentication.api,
url: `/guilds/${path.guildId}/channels`
url: `/guilds/${path.guildId}/channels`,
cacheKey
})
useEffect(() => {
authentication.socket.on(
authentication?.socket?.on(
'channels',
async (data: SocketData<ChannelWithDefaultChannelId>) => {
handleSocketData({ data, setItems })
handleSocketData({ data, setItems, cacheKey })
if (data.action === 'delete') {
await router.push(
`/application/${path.guildId}/${data.item.defaultChannelId}`
@ -50,9 +56,9 @@ export const ChannelsProvider: React.FC<ChannelsProviderProps> = (props) => {
)
return () => {
authentication.socket.off('channels')
authentication?.socket?.off('channels')
}
}, [authentication.socket, path.guildId, router, setItems])
}, [authentication.socket, path.guildId, router, setItems, cacheKey])
useEffect(() => {
resetPagination()

View File

@ -27,7 +27,9 @@ const GuildMemberContext = createContext<GuildMemberResult>(
defaultGuildMemberContext
)
export const GuildMemberProvider: React.FC<GuildMemberProps> = (props) => {
export const GuildMemberProvider: React.FC<
React.PropsWithChildren<GuildMemberProps>
> = (props) => {
const { path, children } = props
const router = useRouter()
const [guildMember, setGuildMember] = useState(props.guildMember)
@ -45,7 +47,7 @@ export const GuildMemberProvider: React.FC<GuildMemberProps> = (props) => {
}, [path, authentication.api])
useEffect(() => {
authentication.socket.on(
authentication?.socket?.on(
'guilds',
async (data: SocketData<GuildWithDefaultChannelId>) => {
if (data.item.id === path.guildId) {
@ -70,7 +72,7 @@ export const GuildMemberProvider: React.FC<GuildMemberProps> = (props) => {
)
return () => {
authentication.socket.off('guilds')
authentication?.socket?.off('guilds')
}
}, [authentication.socket, path.guildId, router])

View File

@ -4,6 +4,7 @@ import { NextPage, usePagination } from '../hooks/usePagination'
import { useAuthentication } from '../tools/authentication'
import { GuildWithDefaultChannelId } from '../models/Guild'
import { handleSocketData, SocketData } from '../tools/handleSocketData'
import { GUILDS_CACHE_KEY } from '../tools/cache'
export interface Guilds {
guilds: GuildWithDefaultChannelId[]
@ -14,7 +15,9 @@ export interface Guilds {
const defaultGuildsContext = {} as any
const GuildsContext = createContext<Guilds>(defaultGuildsContext)
export const GuildsProvider: React.FC = (props) => {
export const GuildsProvider: React.FC<React.PropsWithChildren<{}>> = (
props
) => {
const { children } = props
const { authentication } = useAuthentication()
@ -27,19 +30,20 @@ export const GuildsProvider: React.FC = (props) => {
setItems
} = usePagination<GuildWithDefaultChannelId>({
api: authentication.api,
url: '/guilds'
url: '/guilds',
cacheKey: GUILDS_CACHE_KEY
})
useEffect(() => {
authentication.socket.on(
authentication?.socket?.on(
'guilds',
(data: SocketData<GuildWithDefaultChannelId>) => {
handleSocketData({ data, setItems })
handleSocketData({ data, setItems, cacheKey: GUILDS_CACHE_KEY })
}
)
return () => {
authentication.socket.off('guilds')
authentication?.socket?.off('guilds')
}
}, [authentication.socket, setItems])

View File

@ -6,6 +6,7 @@ import { MemberWithPublicUser } from '../models/Member'
import { GuildsChannelsPath } from '../components/Application'
import { handleSocketData, SocketData } from '../tools/handleSocketData'
import { User } from '../models/User'
import { CacheKey, MEMBERS_CACHE_KEY } from '../tools/cache'
export interface Members {
members: MemberWithPublicUser[]
@ -20,11 +21,15 @@ export interface MembersProviderProps {
path: GuildsChannelsPath
}
export const MembersProviders: React.FC<MembersProviderProps> = (props) => {
export const MembersProviders: React.FC<
React.PropsWithChildren<MembersProviderProps>
> = (props) => {
const { children, path } = props
const { authentication } = useAuthentication()
const cacheKey: CacheKey = `${path.guildId}-${MEMBERS_CACHE_KEY}`
const {
items: members,
hasMore,
@ -33,18 +38,19 @@ export const MembersProviders: React.FC<MembersProviderProps> = (props) => {
setItems
} = usePagination<MemberWithPublicUser>({
api: authentication.api,
url: `/guilds/${path.guildId}/members`
url: `/guilds/${path.guildId}/members`,
cacheKey
})
useEffect(() => {
authentication.socket.on(
authentication?.socket?.on(
'members',
(data: SocketData<MemberWithPublicUser>) => {
handleSocketData({ data, setItems })
handleSocketData({ data, setItems, cacheKey })
}
)
authentication.socket.on('users', (data: SocketData<User>) => {
authentication?.socket?.on('users', (data: SocketData<User>) => {
setItems((oldItems) => {
const newItems = [...oldItems]
switch (data.action) {
@ -63,10 +69,10 @@ export const MembersProviders: React.FC<MembersProviderProps> = (props) => {
})
return () => {
authentication.socket.off('members')
authentication.socket.off('users')
authentication?.socket?.off('members')
authentication?.socket?.off('users')
}
}, [authentication.socket, setItems])
}, [authentication.socket, setItems, cacheKey])
useEffect(() => {
resetPagination()

View File

@ -5,6 +5,7 @@ import { useAuthentication } from '../tools/authentication'
import { MessageWithMember } from '../models/Message'
import { GuildsChannelsPath } from '../components/Application'
import { handleSocketData, SocketData } from '../tools/handleSocketData'
import { CacheKey, MESSAGES_CACHE_KEY } from '../tools/cache'
export interface Messages {
messages: MessageWithMember[]
@ -19,9 +20,13 @@ export interface MessagesProviderProps {
path: GuildsChannelsPath
}
export const MessagesProvider: React.FC<MessagesProviderProps> = (props) => {
export const MessagesProvider: React.FC<
React.PropsWithChildren<MessagesProviderProps>
> = (props) => {
const { path, children } = props
const { authentication } = useAuthentication()
const { authentication, user } = useAuthentication()
const cacheKey: CacheKey = `${path.channelId}-${MESSAGES_CACHE_KEY}`
const {
items: messages,
@ -32,11 +37,12 @@ export const MessagesProvider: React.FC<MessagesProviderProps> = (props) => {
} = usePagination<MessageWithMember>({
api: authentication.api,
url: `/channels/${path.channelId}/messages`,
inverse: true
inverse: true,
cacheKey
})
useEffect(() => {
authentication.socket.on(
authentication?.socket?.on(
'messages',
(data: SocketData<MessageWithMember>) => {
if (data.item.channelId === path.channelId) {
@ -46,8 +52,11 @@ export const MessagesProvider: React.FC<MessagesProviderProps> = (props) => {
const isAtBottom =
messagesDiv.scrollHeight - messagesDiv.scrollTop <=
messagesDiv.clientHeight
handleSocketData({ data, setItems })
if (data.action === 'create' && isAtBottom) {
handleSocketData({ data, setItems, cacheKey })
if (
data.action === 'create' &&
(isAtBottom || data.item.member.userId === user.id)
) {
messagesDiv.scrollTo(0, messagesDiv.scrollHeight)
}
}
@ -55,9 +64,9 @@ export const MessagesProvider: React.FC<MessagesProviderProps> = (props) => {
)
return () => {
authentication.socket.off('messages')
authentication?.socket?.off('messages')
}
}, [authentication.socket, setItems, path])
}, [authentication.socket, setItems, path, user.id, cacheKey])
useEffect(() => {
resetPagination()

72
cypress.config.ts Normal file
View File

@ -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'
}
}
})

View File

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

View File

@ -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)
})
})

View File

@ -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}`
)
})
})

View File

@ -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)
})
})

View File

@ -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')
})
})
})

View File

@ -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')
})
})

View File

@ -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'
})

View File

@ -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: ''

View File

@ -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)')
})
})

View File

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

View File

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

View File

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

View File

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

View File

@ -41,9 +41,8 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
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.wait(['@getGuildsHandler']).then(() => {
cy.get('[data-cy=application-title]').should(
'have.text',
`# ${channelExample.name}`
@ -74,9 +73,8 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
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.wait(['@getGuildsHandler']).then(() => {
cy.get('[data-cy=application-title]').should(
'have.text',
`# ${channelExample.name}`
@ -103,10 +101,8 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
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.wait(['@getChannelsWithGuildIdHandler']).then(() => {
cy.get('.channels-list').children().should('have.length', 2)
cy.get('.channels-list [data-cy=channel-name]:first').should(
'have.text',
@ -116,8 +112,7 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
'have.text',
`# ${channelExample2.name}`
)
}
)
})
})
it('should succeeds and display the messages correctly', () => {
@ -146,11 +141,9 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
cy.intercept(`${API_URL}${getMessagesUploadsDownloadHandler.url}`).as(
'getMessagesUploadsDownloadHandler'
)
cy.intercept(`/_next/*`).as('nextStaticAndImages')
cy.visit(`/application/${guildExample.id}/${channelExample.id}`)
cy.wait([
'@getMessagesWithChannelIdHandler',
'@nextStaticAndImages',
'@getMessagesUploadsImageHandler',
'@getMessagesUploadsAudioHandler',
'@getMessagesUploadsVideoHandler',
@ -226,10 +219,8 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
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.wait(['@getMembersWithGuildIdHandler']).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')
@ -239,8 +230,7 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
'have.text',
memberExampleComplete.user.name
)
}
)
})
})
it('should redirect the user to `/404` if `guildId` or `channelId` are not numbers', () => {
@ -277,3 +267,5 @@ describe('Pages > /application/[guildId]/[channelId]', () => {
.should('eq', '/404')
})
})
export {}

View File

@ -57,6 +57,7 @@ describe('Pages > /application/[guildId]/[channelId]/settings', () => {
)
cy.visit(`/application/${guildExample.id}/${channelExample.id}/settings`)
cy.get('[data-cy=button-delete-channel-settings]').click()
cy.get('[data-cy=confirm-popup-yes-button]').click()
cy.wait('@deleteChannelWithChannelIdHandler').then(() => {
cy.location('pathname').should(
'eq',
@ -131,3 +132,5 @@ describe('Pages > /application/[guildId]/[channelId]/settings', () => {
.should('eq', '/404')
})
})
export {}

View File

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

View File

@ -69,6 +69,7 @@ describe('Pages > /application/[guildId]/settings', () => {
)
cy.visit(`/application/${guildExample.id}/settings`)
cy.get('[data-cy=button-delete-guild-settings]').click()
cy.get('[data-cy=confirm-popup-yes-button]').click()
cy.wait('@deleteGuildWithGuildIdHandler').then((interception) => {
expect(interception.response).to.not.be.eql(undefined)
if (interception.response !== undefined) {
@ -101,3 +102,5 @@ describe('Pages > /application/[guildId]/settings', () => {
.should('eq', '/404')
})
})
export {}

View File

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

View File

@ -20,9 +20,8 @@ describe('Pages > /application/guilds/join', () => {
cy.intercept(`${API_URL}${getGuildsPublicHandler.url}*`).as(
'getGuildsPublicHandler'
)
cy.intercept(`/_next/*`).as('nextStaticAndImages')
cy.visit('/application/guilds/join')
cy.wait(['@getGuildsPublicHandler', '@nextStaticAndImages']).then(() => {
cy.wait(['@getGuildsPublicHandler']).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(
@ -45,8 +44,7 @@ describe('Pages > /application/guilds/join', () => {
cy.intercept(`${API_URL}${getGuildsPublicHandler.url}*`).as(
'getGuildsPublicHandler'
)
cy.intercept(`/_next/*`).as('nextStaticAndImages')
cy.wait(['@getGuildsPublicHandler', '@nextStaticAndImages']).then(() => {
cy.wait(['@getGuildsPublicHandler']).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(
@ -77,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 {}

View File

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

View File

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

View File

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

View File

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

Some files were not shown because too many files have changed in this diff Show More