Merge pull request #166 from jbrunton/improve-client-tests

test: improve client test coverage

client/package.json

@@ -37,7 +37,7 @@
     "react-router-dom": "6.6.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/jest-dom": "6.5.0",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/debug": "4.1.7",

client/src/features/auth/organisms/sign-in-button.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useAuth0 } from '@auth0/auth0-react'
 import { Button, Spinner } from '@chakra-ui/react'
 import { AiOutlineLogout } from 'react-icons/ai'
-import { DefaultUserIcon } from '../../room/atoms/DefaultUserIcon'
+import { DefaultUserIcon } from '../../room/atoms/default-user-icon'
 
 export const SignInButton = () => {
   const { user, isAuthenticated, isLoading, loginWithRedirect, logout } = useAuth0()

client/src/features/room/molecules/AuthorAvatar.tsx → client/src/features/room/molecules/author-avatar.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { User } from '../../../data/users'
-import { DefaultUserIcon } from '../atoms/DefaultUserIcon'
-import { SystemIcon } from '../atoms/SystemIcon'
-import { UserAvatar } from '../atoms/UserAvatar'
+import { DefaultUserIcon } from '../atoms/default-user-icon'
+import { SystemIcon } from '../atoms/system-icon'
+import { UserAvatar } from '../atoms/user-avatar'
 
 export type AuthorAvatarProps = {
   author: User | undefined

client/src/features/room/molecules/formatted-message.spec.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { FormattedMessage } from './formatted-message'
+import '@testing-library/jest-dom'
+
+describe('FormattedMessage', () => {
+  it('renders the content', () => {
+    render(<FormattedMessage content='Hello, World!' />)
+    expect(screen.getByText('Hello, World!'))
+  })
+
+  it('renders content as markdown', () => {
+    const content = '# Action Items\n* Item 1\n* Item 2'
+
+    render(<FormattedMessage content={content} />)
+
+    expect(screen.getByRole('heading')).toHaveTextContent('Action Items')
+    expect(screen.getAllByRole('list')).toMatchInlineSnapshot(`
+      [
+        <ul>
+          
+
+          <li>
+            Item 1
+          </li>
+          
+
+          <li>
+            Item 2
+          </li>
+          
+
+        </ul>,
+      ]
+    `)
+  })
+})

client/src/features/room/molecules/FormattedMessage.tsx → client/src/features/room/molecules/formatted-message.tsx

@@ -3,7 +3,7 @@ import DOMPurify from 'dompurify'
 import { marked } from 'marked'
 import { useEffect } from 'react'
 import hljs from 'highlight.js'
-import './FormattedMessage.css'
+import './formatted-message.css'
 
 export type FormattedMessageProps = {
   content: string

client/src/features/room/organisms/MessageGroup.tsx → client/src/features/room/organisms/messages-group.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { HStack, ListItem, VStack } from '@chakra-ui/react'
 import { Message } from '../../../data/messages'
 import { useUser } from '../../../data/users'
-import { AuthorAvatar } from '../molecules/AuthorAvatar'
-import { AuthorDetails } from '../molecules/AuthorDetails'
-import { FormattedMessage } from '../molecules/FormattedMessage'
+import { AuthorAvatar } from '../molecules/author-avatar'
+import { AuthorDetails } from '../molecules/author-details'
+import { FormattedMessage } from '../molecules/formatted-message'
 
 export type MessagesGroupProps = {
   authorId: string

client/src/features/room/organisms/MessagesList.tsx → client/src/features/room/organisms/messages-list.tsx

@@ -2,7 +2,7 @@ import { Button, Center, List, ListItem, Text, Icon } from '@chakra-ui/react'
 import React, { useEffect, useRef, useState } from 'react'
 import { AiOutlineArrowDown } from 'react-icons/ai'
 import { Message } from '../../../data/messages'
-import { MessagesGroup, MessagesGroupProps } from './MessageGroup'
+import { MessagesGroup, MessagesGroupProps } from './messages-group'
 
 export type MessagesListProps = {
   messages: Message[]

client/src/features/room/pages/Room.spec.tsx

@@ -1,28 +1,67 @@
 import React from 'react'
-import { screen, waitFor } from '@testing-library/react'
+import { screen, waitFor, within } from '@testing-library/react'
 import { RoomPage } from './Room'
 import { render } from '../../../test/fixtures'
 
 describe('RoomPage', () => {
   it('loads messages for the room', async () => {
     render(<RoomPage />, {
       path: '/room/:roomId',
-      initialEntry: '/room/room:123-can-manage',
+      initialEntry: '/room/room:100-can-manage',
     })
 
     await waitFor(() => {
       expect(screen.getByText('Hello, World!'))
     })
   })
 
-  it('shows a help message if the user can join the room', async () => {
+  it('shows a message if the user lacks permissions to read the room', async () => {
     render(<RoomPage />, {
       path: '/room/:roomId',
-      initialEntry: '/room/room:456-can-join',
+      initialEntry: '/room/room:200-can-join',
     })
 
     await waitFor(() => {
       expect(screen.getByText('You do not have permissions to view messages in this room'))
     })
   })
+
+  it('shows an alert if the user can join the room', async () => {
+    render(<RoomPage />, {
+      path: '/room/:roomId',
+      initialEntry: '/room/room:200-can-join',
+    })
+
+    await waitFor(() => {
+      const alert = screen.getByRole('alert')
+      expect(alert).toHaveTextContent('Join this room to chat.')
+      expect(within(alert).getByRole('button')).toHaveTextContent('Join')
+    })
+  })
+
+  it('shows an alert if the user can request to join', async () => {
+    render(<RoomPage />, {
+      path: '/room/:roomId',
+      initialEntry: '/room/room:300-can-request-approval',
+    })
+
+    await waitFor(() => {
+      const alert = screen.getByRole('alert')
+      expect(alert).toHaveTextContent('Join this room to chat.')
+      expect(within(alert).getByRole('button')).toHaveTextContent('Request to Join')
+    })
+  })
+
+  it('shows an alert if the user requires an invite to join', async () => {
+    render(<RoomPage />, {
+      path: '/room/:roomId',
+      initialEntry: '/room/room:400-requires-invite',
+    })
+
+    await waitFor(() => {
+      const alert = screen.getByRole('alert')
+      expect(alert).toHaveTextContent('You need an invite to join.')
+      expect(within(alert).queryByRole('button')).not.toBeInTheDocument()
+    })
+  })
 })

client/src/features/room/pages/Room.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { Box } from '@chakra-ui/react'
 import { useParams } from 'react-router-dom'
 import { LoadingIndicator } from '../../../shared/molecules/LoadingIndicator'
-import { ChatBox } from '../organisms/ChatBox'
+import { ChatBox } from '../organisms/chat-box'
 import { Message, useMessages, useMessagesSubscription } from '../../../data/messages'
-import { MessagesList } from '../organisms/MessagesList'
+import { MessagesList } from '../organisms/messages-list'
 import { useRoom } from '../../../data/rooms'
 import { can } from '../../../data/lib'
 

client/src/mocks/rooms/get/room:123-can-manage.json → client/src/mocks/rooms/get/room:100-can-manage.json

@@ -1,6 +1,6 @@
 {
   "room": {
-    "id": "room:123",
+    "id": "room:100",
     "name": "Test Room",
     "ownerId": "user:test-user",
     "contentPolicy": "private",

client/src/mocks/rooms/get/room:456-can-join.json → client/src/mocks/rooms/get/room:200-can-join.json

@@ -1,10 +1,10 @@
 {
   "room": {
-    "id": "room:456",
+    "id": "room:200",
     "name": "Test Room",
     "ownerId": "user:test-user",
     "contentPolicy": "private",
     "joinPolicy": "anyone"
   },
-  "roles": ["role"]
+  "roles": ["join"]
 }

client/src/mocks/rooms/get/room:300-can-request-approval.json

@@ -0,0 +1,10 @@
+{
+  "room": {
+    "id": "room:300",
+    "name": "Test Room",
+    "ownerId": "user:test-user",
+    "contentPolicy": "private",
+    "joinPolicy": "request"
+  },
+  "roles": ["join"]
+}

client/src/mocks/rooms/get/room:400-requires-invite.json

@@ -0,0 +1,10 @@
+{
+  "room": {
+    "id": "room:300",
+    "name": "Test Room",
+    "ownerId": "user:test-user",
+    "contentPolicy": "private",
+    "joinPolicy": "invite"
+  },
+  "roles": []
+}

client/src/test/setup-vitest.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'

client/tsconfig.json

@@ -15,7 +15,7 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "types": ["vitest/globals"]
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

client/vite.config.ts

@@ -12,6 +12,6 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     mockReset: true,
-    setupFiles: ['./src/test/setup-mocks.ts'],
+    setupFiles: ['./src/test/setup-vitest.ts', './src/test/setup-mocks.ts'],
   },
 })