Skip to content

Commit

Permalink
Update cypress tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@louptheron
louptheron committed Mar 4, 2024
1 parent 2340ef1 commit 2ecfa00
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 81 deletions.
7 changes: 3 additions & 4 deletions frontend/cypress/e2e/side_window/reporting_list.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,10 +182,9 @@ context('Reportings', () => {

function modifyReportingToObservation(rowNumber, numberOfReportings) {
cy.get('[data-cy="side-window-edit-reporting"]').eq(rowNumber).click()
cy.get('[data-cy="new-reporting-select-observation-reporting-type"]').click()
cy.get('[data-cy="new-reporting-author-trigram"]').type('{backspace}{backspace}{backspace}LTH')
cy.wait(500)
cy.get('[data-cy="new-reporting-create-button"]').click()
cy.fill('Type', 'Observation')
cy.fill('Saisi par', '{backspace}{backspace}{backspace}LTH')
cy.clickButton('Valider')

// Then
cy.wait('@updateReporting').then(({ request, response }) => {
Expand Down
51 changes: 23 additions & 28 deletions frontend/cypress/e2e/vessel_sidebar/reporting.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,27 +63,23 @@ context('Vessel sidebar reporting tab', () => {
cy.wait(100)

// Create an new Observation
cy.get('*[data-cy="vessel-sidebar-open-reporting"]').click()
cy.get('[data-cy="new-reporting-select-observation-reporting-type"]').click()
cy.get('*[data-cy="new-reporting-reporting-actor-UNIT"]').click()
cy.get('*[data-cy="new-reporting-select-unit"]').click()
cy.get('[data-key="10338"] > .rs-picker-select-menu-item').click({ force: true })
cy.get('*[data-cy="new-reporting-author-contact"]').type('Jean Bon (0612365896)')
cy.get('*[data-cy="new-reporting-title"]').type('Observation: Sortie non autorisée')
cy.get('*[data-cy="new-reporting-description"]').type(
'Ce navire ne devrait pas être en mer, mais ceci est une observation.'
)
cy.get('*[data-cy="new-reporting-author-trigram"]').type('NTP')
cy.clickButton('Ouvrir un signalement')
cy.fill('Type', 'Observation')
cy.fill('Origine', 'Unité')
cy.fill("Choisir l'unité", 'OFB SD 56 (Office Français de la Biodiversité)')
cy.fill('Nom et contact (numéro, mail…) de l’émetteur', 'Jean Bon (0612365896)')
cy.fill('Titre', 'Observation: Sortie non autorisée')
cy.fill('Description', 'Ce navire ne devrait pas être en mer, mais ceci est une observation.')
cy.fill('Saisi par', 'NTP')
cy.intercept('*reporting*').as('createReporting')
cy.get('*[data-cy="new-reporting-create-button"]').scrollIntoView().click()
cy.clickButton('Valider')
cy.wait('@createReporting')

cy.intercept('*update*').as('updateReporting')
cy.get('*[data-cy^="edit-reporting-card"]').first().click({ timeout: 10000 })
cy.get('*[data-cy="new-reporting-select-infraction-reporting-type"]').click({ timeout: 10000 })
cy.get('*[data-cy="new-reporting-select-natinf"]').click()
cy.get('[data-key="7059"] > .rs-picker-select-menu-item').click({ force: true })
cy.get('*[data-cy="new-reporting-create-button"]').scrollIntoView().click()
cy.fill('Natinf', '7059')
cy.clickButton('Valider')
cy.wait('@updateReporting')
cy.wait(50)

Expand Down Expand Up @@ -158,20 +154,19 @@ context('Vessel sidebar reporting tab', () => {
})

function createReporting() {
cy.get('*[data-cy="vessel-sidebar-open-reporting"]').click()
cy.get('*[data-cy="new-reporting-reporting-actor-UNIT"]').click()
cy.get('*[data-cy="new-reporting-select-unit"]').click()
cy.get('[data-key="10338"] > .rs-picker-select-menu-item').click({ force: true })
cy.get('*[data-cy="new-reporting-author-contact"]').type('Jean Bon (0612365896)')
cy.get('*[data-cy="new-reporting-title"]').type('Sortie non autorisée')
cy.get('*[data-cy="new-reporting-description"]').type(
"Ce navire ne devrait pas être en mer, il n'a plus de points sur son permis"
)
cy.get('*[data-cy="new-reporting-author-trigram"]').type('LTH')
cy.get('*[data-cy="new-reporting-select-natinf"]').click()
cy.get('[data-key="2608"] > .rs-picker-select-menu-item').click({ force: true })
cy.intercept('*reporting*').as('createReporting')
cy.get('*[data-cy="new-reporting-create-button"]').scrollIntoView().click()

cy.clickButton('Ouvrir un signalement')

cy.fill('Origine', 'Unité')
cy.fill("Choisir l'unité", 'OFB SD 56 (Office Français de la Biodiversité)')
cy.fill('Nom et contact (numéro, mail…) de l’émetteur', 'Jean Bon (0612365896)')
cy.fill('Titre', 'Sortie non autorisée')
cy.fill('Description', "Ce navire ne devrait pas être en mer, il n'a plus de points sur son permis")
cy.fill('Natinf', '2608')
cy.fill('Saisi par', 'LTH')

cy.clickButton('Valider')
cy.wait('@createReporting')
}
})
98 changes: 49 additions & 49 deletions frontend/src/features/Reporting/components/ReportingForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
} from '@features/Reporting/components/ReportingForm/utils'
import { useMainAppDispatch } from '@hooks/useMainAppDispatch'
import { useMainAppSelector } from '@hooks/useMainAppSelector'
import { Accent, Button, FormikSelect, FormikTextarea, FormikTextInput, THEME } from '@mtes-mct/monitor-ui'
import { Accent, Button, FormikSelect, FormikTextarea, FormikTextInput, Legend, Fieldset } from '@mtes-mct/monitor-ui'
import { Form, Formik } from 'formik'
import { useCallback, useMemo, useRef } from 'react'
import { Radio, RadioGroup } from 'rsuite'
Expand Down Expand Up @@ -119,46 +119,51 @@ export function ReportingForm({
return (
<>
<StyledForm $hasWhiteBackground={hasWhiteBackground}>
<Label>Type</Label>
<RadioGroup
appearance="picker"
defaultValue={ReportingTypeCharacteristics.INFRACTION_SUSPICION.code}
inline
onChange={value => setFieldValue('type', value as ReportingType)}
value={values.type}
>
<Radio
key={ReportingTypeCharacteristics.INFRACTION_SUSPICION.code}
data-cy="new-reporting-select-infraction-reporting-type"
value={ReportingTypeCharacteristics.INFRACTION_SUSPICION.code}
<Fieldset className="Field-MultiRadio">
<StyledLabel for="type">Type</StyledLabel>
<RadioGroup
appearance="picker"
defaultValue={ReportingTypeCharacteristics.INFRACTION_SUSPICION.code}
id="type"
inline
onChange={value => setFieldValue('type', value as ReportingType)}
value={values.type}
>
{ReportingTypeCharacteristics.INFRACTION_SUSPICION.inputName}
</Radio>
<Radio
key={ReportingTypeCharacteristics.OBSERVATION.code}
data-cy="new-reporting-select-observation-reporting-type"
value={ReportingTypeCharacteristics.OBSERVATION.code}
>
{ReportingTypeCharacteristics.OBSERVATION.inputName}
</Radio>
</RadioGroup>
<Label>Origine</Label>
<RadioGroup
appearance="picker"
defaultValue={ReportingOriginActor.OPS.code}
inline
onChange={value => updateActor(value)}
value={values.reportingActor ?? ''}
>
{Object.entries(ReportingOriginActor).map(([key, val]) => (
<Radio key={key} data-cy={`new-reporting-reporting-actor-${key}`} value={key}>
{val.name}
<Radio
key={ReportingTypeCharacteristics.INFRACTION_SUSPICION.code}
data-cy="new-reporting-select-infraction-reporting-type"
value={ReportingTypeCharacteristics.INFRACTION_SUSPICION.code}
>
{ReportingTypeCharacteristics.INFRACTION_SUSPICION.inputName}
</Radio>
<Radio
key={ReportingTypeCharacteristics.OBSERVATION.code}
data-cy="new-reporting-select-observation-reporting-type"
value={ReportingTypeCharacteristics.OBSERVATION.code}
>
{ReportingTypeCharacteristics.OBSERVATION.inputName}
</Radio>
))}
</RadioGroup>
</RadioGroup>
</Fieldset>
<Fieldset className="Field-MultiRadio">
<StyledLabel for="reportingActor">Origine</StyledLabel>
<RadioGroup
appearance="picker"
defaultValue={ReportingOriginActor.OPS.code}
id="reportingActor"
inline
onChange={value => updateActor(value)}
value={values.reportingActor ?? ''}
>
{Object.entries(ReportingOriginActor).map(([key, val]) => (
<Radio key={key} data-cy={`new-reporting-reporting-actor-${key}`} value={key}>
{val.name}
</Radio>
))}
</RadioGroup>
</Fieldset>
{values.reportingActor === ReportingOriginActor.UNIT.code && (
<StyledFormikSelect
data-cy="new-reporting-select-unit"
isLight={!hasWhiteBackground}
label="Choisir l'unité"
name="controlUnitId"
Expand All @@ -171,15 +176,13 @@ export function ReportingForm({
values.reportingActor === ReportingOriginActor.DIRM.code ||
values.reportingActor === ReportingOriginActor.OTHER.code) && (
<StyledFormikTextInput
data-cy="new-reporting-author-contact"
isLight={!hasWhiteBackground}
label="Nom et contact (numéro, mail…) de l’émetteur"
name="authorContact"
placeholder="Ex: Yannick Attal (06 24 25 01 91)"
/>
)}
<StyledFormikTextInput
data-cy="new-reporting-title"
isLight={!hasWhiteBackground}
label="Titre"
name="title"
Expand All @@ -190,7 +193,6 @@ export function ReportingForm({
}
/>
<StyledFormikTextarea
data-cy="new-reporting-description"
isLight={!hasWhiteBackground}
label="Description"
name="description"
Expand All @@ -202,7 +204,6 @@ export function ReportingForm({
/>
{values.type === ReportingTypeCharacteristics.INFRACTION_SUSPICION.code && (
<StyledFormikSelect
data-cy="new-reporting-select-natinf"
isLight={!hasWhiteBackground}
label="Natinf"
name="natinfCode"
Expand All @@ -214,13 +215,12 @@ export function ReportingForm({
/>
)}
<StyledFormikTextInput
data-cy="new-reporting-author-trigram"
isLight={!hasWhiteBackground}
label="Saisi par"
name="authorTrigram"
placeholder="Ex: LTH"
/>
<ValidateButton accent={Accent.PRIMARY} data-cy="new-reporting-create-button" type="submit">
<ValidateButton accent={Accent.PRIMARY} type="submit">
Valider
</ValidateButton>
<CancelButton accent={Accent.SECONDARY} onClick={closeForm}>
Expand Down Expand Up @@ -258,10 +258,10 @@ const CancelButton = styled(Button)`
margin: 24px 0px 0px 0px;
`

const Label = styled.div`
margin-top: 10px;
color: ${THEME.color.slateGray};
font-size: 13px;
const StyledLabel = styled(Legend)<{
for: string | undefined
}>`
margin-top: 12px;
`

const StyledForm = styled(Form)<{
Expand All @@ -271,13 +271,13 @@ const StyledForm = styled(Form)<{
box-sizing: border-box !important;
}
margin: 16px;
margin: 0px 16px 16px 16px;
.rs-picker-toggle {
background: ${p => (p.$hasWhiteBackground ? COLORS.gainsboro : COLORS.white)} !important;
}
.rs-radio-group {
margin-top: 5px;
margin-top: 1px;
margin-bottom: 5px;
background: ${p => (p.$hasWhiteBackground ? COLORS.gainsboro : COLORS.white)} !important;
}
Expand Down

0 comments on commit 2ecfa00

Please sign in to comment.