feat(mission-crew): Refacto mission-crew with comment

frontend/package.json

@@ -40,7 +40,8 @@
     "type-fest": "^4.16.0",
     "unleash-proxy-client": "^3.3.1",
     "uuid": "^9.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@import-meta-env/cli": "^0.6.8",

frontend/src/apollo-client.ts

@@ -1,9 +1,12 @@
 import { ApolloClient, ApolloLink, createHttpLink, InMemoryCache } from '@apollo/client'
 import { loadDevMessages, loadErrorMessages } from '@apollo/client/dev'
-import AuthToken from './auth/token'
 import { setContext } from '@apollo/client/link/context'
-import { RetryLink } from '@apollo/client/link/retry'
 import { ErrorResponse, onError } from '@apollo/client/link/error'
+import { removeTypenameFromVariables } from '@apollo/client/link/remove-typename'
+import { RetryLink } from '@apollo/client/link/retry'
+import AuthToken from './auth/token'
+
+const removeTypenameLink = removeTypenameFromVariables()
 
 const authToken = new AuthToken()
 
@@ -63,7 +66,7 @@ export const apolloCache = new InMemoryCache({})
 
 const client = new ApolloClient({
   cache: apolloCache,
-  link: ApolloLink.from([authLink, errorLink, logTimeLink, retryLink, httpLink]),
+  link: ApolloLink.from([removeTypenameLink, authLink, errorLink, logTimeLink, retryLink, httpLink]),
   credentials: 'include',
   connectToDevTools: true
 })

frontend/src/pam/mission/crew/mission-crew-form.test.tsx

@@ -0,0 +1,140 @@
+import { vi } from 'vitest'
+import { fireEvent, mockQueryResult, render, screen, waitFor } from '../../../test-utils.tsx'
+import MissionCrewForm from './mission-crew-form.tsx'
+import useAgentRoles from './use-agent-roles'
+import useAgentsByUserService from './use-agents-by-user-service'
+
+const handleClose = vi.fn()
+const handleSubmitForm = vi.fn()
+
+vi.mock('./use-agent-roles', async importOriginal => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    default: vi.fn()
+  }
+})
+
+vi.mock('./use-agents-by-user-service', async importOriginal => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    default: vi.fn()
+  }
+})
+
+const crewList = [
+  {
+    id: '1',
+    agent: {
+      id: 'agent1',
+      firstName: 'Ivan',
+      lastName: 'Lapierre',
+      services: []
+    },
+    comment: 'My very very long comment',
+    role: {
+      id: '2',
+      title: 'Agent de pont'
+    }
+  },
+  {
+    id: '2',
+    agent: {
+      id: 'agent2',
+      firstName: 'Joseph',
+      lastName: 'Dupont',
+      services: []
+    },
+    comment: undefined,
+    role: {
+      id: '1',
+      title: 'second mecanicien'
+    }
+  }
+]
+
+const agents = [
+  {
+    id: 'agent1',
+    firstName: 'Ivan',
+    lastName: 'Lapierre',
+    services: []
+  },
+  {
+    id: 'agent2',
+    firstName: 'Joseph',
+    lastName: 'Dupont',
+    services: []
+  }
+]
+const agentRoles = [
+  {
+    id: '1',
+    title: 'second mecanicien'
+  },
+  { id: '2', title: 'Agent de pont' }
+]
+
+describe('MissionCrewForm', () => {
+  beforeEach(() => {
+    ;(useAgentRoles as any).mockReturnValue(mockQueryResult(agentRoles))
+    ;(useAgentsByUserService as any).mockReturnValue(mockQueryResult(agents))
+  })
+
+  it('should render ajout for adding new member', async () => {
+    render(<MissionCrewForm crewList={crewList} handleClose={handleClose} handleSubmitForm={handleSubmitForm} />)
+    expect(screen.getByText('Ajouter un membre')).toBeInTheDocument()
+    expect(screen.getByText('Ajout d’un membre d’équipage')).toBeInTheDocument()
+  })
+
+  it('should render update for modifying a member', async () => {
+    render(
+      <MissionCrewForm crewId={'1'} crewList={crewList} handleClose={handleClose} handleSubmitForm={handleSubmitForm} />
+    )
+    expect(screen.getByText('Mettre à jour un membre')).toBeInTheDocument()
+    expect(screen.getByText('Mise à jour d’un membre d’équipage')).toBeInTheDocument()
+  })
+
+  it('should render close icon and trigger handle close method', async () => {
+    const closeIcon = render(
+      <MissionCrewForm crewList={crewList} handleClose={handleClose} handleSubmitForm={handleSubmitForm} />
+    ).getByTestId('close-crew-form-icon')
+    fireEvent.click(closeIcon)
+    expect(handleClose).toHaveBeenCalledTimes(1)
+  })
+
+  it('should render submit button and trigger submit method', async () => {
+    const wrapper = render(
+      <MissionCrewForm crewId={'2'} crewList={crewList} handleClose={handleClose} handleSubmitForm={handleSubmitForm} />
+    )
+    const submitButton = wrapper.getByTestId('submit-crew-form-button')
+    fireEvent.click(submitButton)
+    await waitFor(() => {
+      expect(handleSubmitForm).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('should render error when not validated', async () => {
+    const wrapper = render(
+      <MissionCrewForm crewList={crewList} handleClose={handleClose} handleSubmitForm={handleSubmitForm} />
+    )
+    const submitButton = wrapper.getByTestId('submit-crew-form-button')
+    fireEvent.click(submitButton)
+    await waitFor(() => {
+      expect(wrapper.getAllByText('Fonction requise.').length).toEqual(1)
+      expect(wrapper.getAllByText('Identité requise.').length).toEqual(1)
+    })
+  })
+
+  it('should render error for a comment with more than 23', async () => {
+    const wrapper = render(
+      <MissionCrewForm crewId={'1'} crewList={crewList} handleClose={handleClose} handleSubmitForm={handleSubmitForm} />
+    )
+    const submitButton = wrapper.getByTestId('submit-crew-form-button')
+    fireEvent.click(submitButton)
+    await waitFor(() => {
+      expect(wrapper.getAllByText('Maximum 23 caractères.').length).toEqual(1)
+    })
+  })
+})