Refactor Cypress tests to update selectors for date fields and transportation details

- Updated selectors for arrival and export date fields to use consolidated IDs instead of separate day, month, and year fields across multiple test files.
- Changed references from "#truck" to "#vehicle" in tests related to transportation methods.
- Adjusted assertions and interactions in tests for storage facility details and catch certificate functionalities to reflect the new structure.
- Ensured consistency in test cases by verifying the presence and values of updated elements.

Author: thefishman-fish

app/components/commonDatePicker.tsx

@@ -85,7 +85,10 @@ export const CommonDatePicker = ({
   }, [day, month, year]);
 
   return (
-    <div id={id} className={isEmpty(errors) ? "govuk-form-group" : "govuk-form-group govuk-form-group--error"}>
+    <div
+      id={`${id}-container`}
+      className={isEmpty(errors) ? "govuk-form-group" : "govuk-form-group govuk-form-group--error"}
+    >
       <fieldset className="govuk-fieldset" role="group" aria-describedby={errorMessageText(hintText, errors)}>
         <legend className="govuk-fieldset__legend govuk-fieldset__legend">
           {labelStyle === "bold" ? (

app/components/dateInputDay.tsx

@@ -24,7 +24,7 @@ export const DateInputDay = ({
   label,
 }: DateInputDayProps) => (
   <div className="govuk-form-group">
-    <label className="govuk-label govuk-date-input__label" htmlFor={`${id}-day`}>
+    <label className="govuk-label govuk-date-input__label" htmlFor={id}>
       {label}
     </label>
     {isHydrated ? (
@@ -34,7 +34,7 @@ export const DateInputDay = ({
             ? "govuk-input govuk-date-input__input govuk-input--width-2"
             : "govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error"
         }
-        id={`${id}-day`}
+        id={id}
         name={`${name}Day`}
         type="number"
         onChange={handleDayChange}
@@ -48,7 +48,7 @@ export const DateInputDay = ({
             ? "govuk-input govuk-date-input__input govuk-input--width-2"
             : "govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error"
         }
-        id={`${id}-day`}
+        id={id}
         name={`${name}Day`}
         type="number"
         defaultValue={daySelected}

app/components/errorSummary.tsx

@@ -1,3 +1,4 @@
+import { useRef, useEffect } from "react";
 import type { IError, IValidationError, LinkData } from "~/types";
 import { useTranslation } from "react-i18next";
 import { scrollToId } from "~/helpers";
@@ -14,6 +15,13 @@ export const ErrorSummary = ({
   linkData,
 }: React.PropsWithChildren<IErrorSummaryProps>) => {
   const { t } = useTranslation(["errorsText", "common"]);
+  const summaryRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (errors.length > 0) {
+      summaryRef.current?.focus();
+    }
+  }, [errors]);
 
   const onChangeHandler: (e: React.FormEvent<HTMLAnchorElement>) => void = (e: React.FormEvent<HTMLAnchorElement>) => {
     e.preventDefault();
@@ -25,10 +33,11 @@ export const ErrorSummary = ({
   return (
     <div
       id="errorIsland"
+      ref={summaryRef}
+      tabIndex={-1}
       className={`govuk-error-summary ${containerClassName}`}
       aria-labelledby="error-summary-title"
       role="alert"
-      data-disable-auto-focus="true"
       data-module="govuk-error-summary"
     >
       <h2 className="govuk-error-summary__title" id="error-summary-title">

app/composite-components/checkYourInformation.tsx

@@ -218,7 +218,7 @@ export const StorageDocumentTransportDisplay = ({
       label: t("sdCheckYourInformationDepartureDate", { ns: "sdCheckYourInformation" }),
       value: transport.exportDate,
       hasChangeLink: true,
-      backLinkId: "exportDate-day",
+      backLinkId: "exportDate",
     },
     {
       label: t(`sdCheckYourInformationVehicleDepartureFrom${capitalize(transport.vehicle)}`, {
@@ -246,7 +246,7 @@ export const StorageDocumentTransportDisplay = ({
       label: t("sdCheckYourInformationDepartureDate", { ns: "sdCheckYourInformation" }),
       value: transport.departureDate,
       hasChangeLink: true,
-      backLinkId: "departureDate-day",
+      backLinkId: "departureDate",
     },
   ];
 

app/composite-components/howDoesTransportTakesPlaceInTheUkForm.tsx

@@ -89,7 +89,7 @@ export const HowDoesTransportTakesPlaceInTheUkForm = ({
       <div className="govuk-grid-row">
         <div className="govuk-grid-column-full">
           <SecureForm method="post" csrf={csrf}>
-            <div className={!isEmpty(errors) ? "govuk-form-group govuk-form-group--error" : "govuk-form-group"}>
+            <div className={isEmpty(errors) ? "govuk-form-group" : "govuk-form-group govuk-form-group--error"}>
               <fieldset
                 className="govuk-fieldset"
                 aria-describedby={isEmpty(errors) ? "vehicle-hint" : "vehicle-hint vehicle-error"}
@@ -118,7 +118,7 @@ export const HowDoesTransportTakesPlaceInTheUkForm = ({
                       </div>
                     )}
                     {type === Page.StorageDocumentHowDoesTheExportLeaveTheUk && transportOption.value === "truck" && (
-                      <div id="truck-item-hint" className="govuk-hint govuk-radios__hint">
+                      <div id="vehicle-item-hint" className="govuk-hint govuk-radios__hint">
                         {t("transportSelectionTruckGuidance", { ns: "transportation" })}
                       </div>
                     )}

app/helpers/storageDocument.ts

@@ -1,14 +1,14 @@
-import type { DocIssuedInUkRadioSelectOptionType } from "~/types";
-
-export const confirmDocIssuedInUkRadioSelectTypeOptions: DocIssuedInUkRadioSelectOptionType[] = [
-  {
-    label: "commonThereIs",
-    value: "uk",
-    id: "docIssuedInUkRadioSelectYes",
-  },
-  {
-    label: "commonThereIsNot",
-    value: "non_uk",
-    id: "docIssuedInUkRadioSelectNo",
-  },
-];
+import type { DocIssuedInUkRadioSelectOptionType } from "~/types";
+
+export const confirmDocIssuedInUkRadioSelectTypeOptions: DocIssuedInUkRadioSelectOptionType[] = [
+  {
+    label: "commonThereIs",
+    value: "uk",
+    id: "",
+  },
+  {
+    label: "commonThereIsNot",
+    value: "non_uk",
+    id: "docIssuedInUkRadioSelectNo",
+  },
+];

app/helpers/transport.ts

@@ -72,7 +72,7 @@ export const transportOptions: TransportOptionType[] = [
   {
     label: "truck",
     value: "truck",
-    id: "truck",
+    id: "vehicle",
   },
   {
     label: "plane",

app/models/directLandings.server.ts

@@ -44,6 +44,15 @@ function instanceOfIError(data: IDirectLandings | IError[]): data is IError[] {
   return Array.isArray(data) && "key" in data[0];
 }
 
+// helper function to ensure form number is actually a number
+function isNumeric(str: string | number) {
+  return (
+    /^-?[\d.]+$/.test(str as string) && // ensure only numbers and dots(negative numbers will be caught later validation)
+    !Number.isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
+    !Number.isNaN(Number.parseFloat(str as string))
+  ); // ...and ensure strings of whitespace fail
+}
+
 const saveActionBase: any = async (values: any, landings: IDirectLandings, isNumeric: (i: any) => boolean) => {
   const filterWeights: { [key: string]: string } = Object.keys(values)
     .filter((key) => key.includes("weight"))
@@ -69,7 +78,7 @@ const saveActionBase: any = async (values: any, landings: IDirectLandings, isNum
   // This prevents invalid date errors from causing spurious vessel errors
   const isDateValid = isValidDate(date, ["YYYY-M-D", "YYYY-MM-DD"]);
   const dateForVesselLookup = isDateValid ? date : moment().format("YYYY-MM-DD");
-  const vessels: IVessel[] = !isEmpty(pln) ? await getVessels(pln.toString(), dateForVesselLookup) : [];
+  const vessels: IVessel[] = isEmpty(pln) ? [] : await getVessels(pln.toString(), dateForVesselLookup);
   const selectedVessel: IVessel | undefined = vessels.find((_: IVessel) => _.pln === pln);
   const previousVessel: (IVessel & { isListed?: boolean }) | undefined = {};
   let exclusiveEconomicZones: ICountry[] = [];
@@ -395,7 +404,7 @@ export const DirectLandingsLoader = async (params: Params, request: Request) =>
         (totals: number, weight: IDirectLandingsDetails) =>
           weight.exportWeight === undefined || weight.exportWeight === null || !isNumber(weight.exportWeight)
             ? totals
-            : totals + parseFloat(weight.exportWeight),
+            : totals + Number.parseFloat(weight.exportWeight),
         0
       )
     : 0;
@@ -434,7 +443,7 @@ export const DirectLandingsLoader = async (params: Params, request: Request) =>
       selectedRfmo: directLandings?.rfmo,
       availableExclusiveEconomicZones,
       selectedExclusiveEconomicZones: directLandings?.exclusiveEconomicZones,
-      maximumEezPerLanding: parseInt(maximumEezPerLanding, 10),
+      maximumEezPerLanding: Number.parseInt(maximumEezPerLanding, 10),
       isAddAnotherEEZButtonClicked: isAddAnotherEEZButtonClicked,
       faoArea: getSessionData(session, "selectedFaoArea"),
     }),
@@ -461,14 +470,6 @@ export const DirectLandingsAction = async (params: Params, request: Request): Pr
   const isValid = await validateCSRFToken(request, form);
   if (!isValid) return redirect("/forbidden");
   const saveToSession = (data: any) => Object.keys(data).forEach((k) => session.set(k, data[k]));
-  // helper function to ensure form number is actually a number
-  function isNumeric(str: string | number) {
-    return (
-      /^-?[\d.]+$/.test(str as string) && // ensure only numbers and dots(negative numbers will be caught later validation)
-      !isNaN(str as number) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
-      !isNaN(parseFloat(str as string))
-    ); // ...and ensure strings of whitespace fail
-  }
   const {
     dateLandedDay,
     dateLandedMonth,

app/routes/create-catch-certificate.$documentNumber.direct-landing.tsx

@@ -122,7 +122,7 @@ const DirectLanding = () => {
       ? directLandings?.weights.map((weight: IDirectLandingsDetails) => ({
           exportWeight: (() => {
             const val = weight.exportWeight;
-            const parsed = typeof val === "number" ? val : parseFloat(String(val));
+            const parsed = typeof val === "number" ? val : Number.parseFloat(String(val));
             return !Number.isNaN(parsed) && parsed !== null ? parsed : 0;
           })(),
         }))
@@ -209,9 +209,9 @@ const DirectLanding = () => {
   };
 
   const getTotalWeight = (weightDetail: WeightDetails) => {
-    const weightDetailIndex = parseInt(weightDetail?.id.split(".")[1]);
+    const weightDetailIndex = Number.parseInt(weightDetail?.id.split(".")[1]);
 
-    if (!isNaN(weightDetailIndex)) {
+    if (!Number.isNaN(weightDetailIndex)) {
       const totalWeights: { exportWeight: number }[] = Array.isArray(exportWeights)
         ? exportWeights.map((weight: { exportWeight: number }, index: number) => {
             if (index === weightDetailIndex) {
@@ -231,7 +231,8 @@ const DirectLanding = () => {
 
       setCalculatedWeight(
         totalWeights.reduce(
-          (curr: number, acc: { exportWeight: number }) => (isNaN(acc.exportWeight) ? curr : curr + acc.exportWeight),
+          (curr: number, acc: { exportWeight: number }) =>
+            Number.isNaN(acc.exportWeight) ? curr : curr + acc.exportWeight,
           0
         )
       );

app/routes/create-catch-certificate.$documentNumber.how-does-the-export-leave-the-uk.$.tsx

@@ -100,7 +100,7 @@ const HowDoesTheExportLeaveTheUk = () => {
                       <label htmlFor={option.id} className="govuk-label govuk-radios__label">
                         {t(option.label, { ns: "transportation" })}
                       </label>
-                      {option.id === "truck" && (
+                      {option.value === "truck" && (
                         <div id={`${option.id}-item-hint`} className="govuk-hint govuk-radios__hint">
                           {t("transportSelectionTruckGuidance", { ns: "transportation" })}
                         </div>