Add cypress tests

MTES-MCT · Jan 24, 2025 · ed3a2b1 · ed3a2b1
1 parent 4ef8c9b
commit ed3a2b1
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 20 deletions.
diff --git a/frontend/cypress/e2e/main_window/vessel_sidebar/logbook.spec.ts b/frontend/cypress/e2e/main_window/vessel_sidebar/logbook.spec.ts
@@ -23,7 +23,6 @@ context('Vessel sidebar logbook tab', () => {
     cy.get('*[data-cy^="vessel-menu-fishing"]', { timeout: 10000 }).should('be.visible')
 
     // Then
-    cy.get('*[data-cy^="vessel-fishing-gears"]', { timeout: 10000 }).should('be.visible')
     // FAR messages are not acknowledged
     cy.get('*[data-cy="vessel-fishing-resume-title"]')
       .eq(1)
@@ -45,8 +44,10 @@ context('Vessel sidebar logbook tab', () => {
     cy.get('*[data-cy^="vessel-menu-fishing"]').click({ timeout: 10000 })
     cy.get('*[data-cy^="vessel-menu-fishing"]', { timeout: 10000 }).should('be.visible')
 
-    cy.get('*[data-cy^="vessel-fishing-gears"]', { timeout: 10000 }).should('be.visible')
-    cy.get('*[data-cy^="vessel-fishing-gears"]').contains('Trémails et filets maillants combinés (GTN)')
+    cy.get('*[data-cy="Zones de la marée"]').contains('27.8.b, 27.8.c')
+    cy.get('*[data-cy="Engins de la marée (FAR)"]').contains('Chaluts de fond à panneaux (OTB)')
+    cy.get('*[data-cy="Majorité d\'espèces à bord"]').contains('Pélagique')
+    cy.get('*[data-cy="Espèces cibles à bord"]').contains('NEP (≥ 20% du total des captures)')
 
     cy.get('*[data-cy="vessel-fishing-resume-title"]').eq(2).click({ timeout: 10000 })
     cy.get('*[data-cy="cps-message-resume"]').contains('DAUPHIN COMMUN (DCO)')

diff --git a/frontend/cypress/e2e/main_window/vessel_sidebar/resume.spec.ts b/frontend/cypress/e2e/main_window/vessel_sidebar/resume.spec.ts
@@ -12,31 +12,39 @@ context('Vessel sidebar resume tab', () => {
   it('Resume Should be opened When clicking on a vessel', () => {
     // When
     openVesselBySearch('Pheno')
-    cy.get('*[data-cy^="vessel-sidebar"]', { timeout: 10000 }).should('be.visible')
+    cy.get('*[data-cy^="vessel-sidebar"]').should('be.visible')
 
     // Then
-    cy.get('*[data-cy^="vessel-name"]').contains('PHENOMENE (FR)', { timeout: 10000 })
-    cy.get('*[data-cy^="global-risk-factor"]').contains('2.5', { timeout: 10000 })
-    cy.get('*[data-cy^="impact-risk-factor"]').contains('2.1', { timeout: 10000 })
-    cy.get('*[data-cy^="probability-risk-factor"]').contains('2.0', { timeout: 10000 })
-    cy.get('*[data-cy^="detectability-risk-factor"]').contains('3.0', { timeout: 10000 })
-    cy.wait(200)
-    cy.get('*[data-cy^="vessel-sidebar-beacon-malfunction"]').contains('NON-ÉMISSION VMS', { timeout: 10000 })
+    cy.get('*[data-cy^="vessel-name"]').contains('PHENOMENE (FR)')
+    cy.get('*[data-cy^="global-risk-factor"]').contains('2.5')
 
+    cy.get('*[data-cy^="impact-risk-factor"]').contains('2.1')
     cy.get('*[data-cy^="impact-risk-factor"]').click({ force: true, timeout: 10000 })
+    cy.get('*[data-cy="Zones de la marée"]').contains('27.8.b, 27.8.c')
+    cy.get('*[data-cy="Engins de la marée (FAR)"]').contains('Chaluts de fond à panneaux (OTB)')
+    cy.get('*[data-cy="Majorité d\'espèces à bord"]').contains('Pélagique')
+    cy.get('*[data-cy="Espèces cibles à bord"]').contains('NEP (≥ 20% du total des captures)')
+
+    cy.get('*[data-cy^="probability-risk-factor"]').contains('2.0')
     cy.get('*[data-cy^="probability-risk-factor"]').click({ force: true, timeout: 10000 })
+
+    cy.get('*[data-cy^="detectability-risk-factor"]').contains('3.0')
     cy.get('*[data-cy^="detectability-risk-factor"]').click({ force: true, timeout: 10000 })
-    cy.get('*[data-cy^="risk-factor-priority-level"]').contains('2.6 – élevée', { timeout: 10000 })
+
+    cy.wait(200)
+    cy.get('*[data-cy^="vessel-sidebar-beacon-malfunction"]').contains('NON-ÉMISSION VMS')
+
+    cy.get('*[data-cy^="risk-factor-priority-level"]').contains('2.6 – élevée')
 
     cy.get('*[data-cy^="show-risk-factor-explanation-modal"]').click({ force: true, timeout: 10000 })
   })
 
   it('An alert should be shown on the vessel sidebar', () => {
     // When
-    cy.get('*[data-cy^="vessel-search-input"]', { timeout: 10000 }).type('tempete couleur')
-    cy.get('*[data-cy^="vessel-search-item"]', { timeout: 10000 }).eq(0).click()
+    cy.get('*[data-cy^="vessel-search-input"]').type('tempete couleur')
+    cy.get('*[data-cy^="vessel-search-item"]').eq(0).click()
     cy.wait(200)
-    cy.get('*[data-cy^="vessel-sidebar"]', { timeout: 10000 }).should('be.visible')
+    cy.get('*[data-cy^="vessel-sidebar"]').should('be.visible')
 
     // Then
     cy.get('*[data-cy^="vessel-sidebar-alert"]').contains('Pêche en ZEE française par un navire tiers', {

diff --git a/frontend/src/features/Reporting/components/ReportingCard/index.tsx b/frontend/src/features/Reporting/components/ReportingCard/index.tsx
@@ -172,7 +172,7 @@ export function ReportingCard({
           {(!reporting.isArchived || (reporting.isArchived && willExpire)) && (
             <ExpirationDate>
               <Icon.Clock color={THEME.color.slateGray} />
-              <ExpirationDateText isEmpty={!willExpire}>{expirationDateText}</ExpirationDateText>
+              <ExpirationDateText $isEmpty={!willExpire}>{expirationDateText}</ExpirationDateText>
             </ExpirationDate>
           )}
         </Body>
@@ -358,10 +358,10 @@ const ExpirationDate = styled.div`
   margin-top: 14px;
 `
 
-const ExpirationDateText = styled.span<{ isEmpty: boolean }>`
-  color: ${p => (p.isEmpty ? p.theme.color.slateGray : p.theme.color.gunMetal)};
+const ExpirationDateText = styled.span<{ $isEmpty: boolean }>`
+  color: ${p => (p.$isEmpty ? p.theme.color.slateGray : p.theme.color.gunMetal)};
   font: normal normal normal 13px/18px Marianne;
-  font-style: ${p => (p.isEmpty ? 'italic' : 'none')};
+  font-style: ${p => (p.$isEmpty ? 'italic' : 'none')};
   vertical-align: super;
   margin-left: 6px;
 `
diff --git a/frontend/src/features/Vessel/components/VesselSidebar/common/FlatKeyValue.tsx b/frontend/src/features/Vessel/components/VesselSidebar/common/FlatKeyValue.tsx
@@ -1,4 +1,4 @@
-import { type ForwardedRef, forwardRef, ReactElement } from 'react'
+import { type ForwardedRef, forwardRef, type ReactElement } from 'react'
 import styled from 'styled-components'
 
 type KeyValue = {