E2E test for application placement preschool date validations

Author: reynders

frontend/src/e2e-test/pages/employee/placement-draft-page.ts

@@ -10,12 +10,23 @@ import { Combobox, DatePicker } from '../../utils/page'
 export class PlacementDraftPage {
   #restrictedDetailsWarning: Element
   startDate: DatePicker
+  endDate: DatePicker
+  preschoolDaycareStartDate: DatePicker | null = null
+  preschoolDaycareEndDate: DatePicker | null = null
   #addOtherUnitCombobox: Combobox
   constructor(private page: Page) {
     this.#restrictedDetailsWarning = page.findByDataQa(
       'restricted-details-warning'
     )
     this.startDate = new DatePicker(page.findByDataQa('start-date'))
+    this.endDate = new DatePicker(page.findByDataQa('end-date'))
+    this.preschoolDaycareStartDate = new DatePicker(
+      page.findByDataQa('preschool-daycare-start-date')
+    )
+    this.preschoolDaycareEndDate = new DatePicker(
+      page.findByDataQa('preschool-daycare-end-date')
+    )
+
     this.#addOtherUnitCombobox = new Combobox(
       page.findByDataQa('add-other-unit')
     )

frontend/src/e2e-test/specs/5_employee/application-transitions.spec.ts

@@ -382,7 +382,7 @@ describe('Application transitions', () => {
         testChild2,
         familyWithTwoGuardians.guardian,
         undefined,
-        'DAYCARE',
+        'PRESCHOOL',
         null,
         [testDaycare.id],
         true,
@@ -414,7 +414,6 @@ describe('Application transitions', () => {
 
     const planStartDate = preferredStartDate.addDays(1)
     await placementDraftPage.startDate.fill(planStartDate)
-
     await placementDraftPage.assertOccupancies(testDaycare.id, {
       max3Months: '14,3 %',
       max6Months: '14,3 %',
@@ -431,6 +430,36 @@ describe('Application transitions', () => {
     })
 
     await placementDraftPage.placeToUnit(testPreschool.id)
+
+    // TODO test placement dates here
+    const preschoolTermValidationWarning = page.findByDataQa(
+      'preschool-term-warning'
+    )
+    await preschoolTermValidationWarning
+      .findText('Sijoituksen tulee olla esiopetuskaudella')
+      .waitUntilVisible()
+
+    await placementDraftPage.preschoolDaycareEndDate?.fill(
+      preschoolTerm2021.extendedTerm.end
+    )
+    await preschoolTermValidationWarning
+      .findText('Sijoituksen tulee olla esiopetuskaudella')
+      .waitUntilHidden()
+
+    await placementDraftPage.endDate?.fill(
+      preschoolTerm2021.finnishPreschool.end.addDays(1)
+    )
+    await preschoolTermValidationWarning
+      .findText('Sijoituksen tulee olla esiopetuskaudella')
+      .waitUntilVisible()
+
+    await placementDraftPage.endDate?.fill(
+      preschoolTerm2021.finnishPreschool.end
+    )
+    await preschoolTermValidationWarning
+      .findText('Sijoituksen tulee olla esiopetuskaudella')
+      .waitUntilHidden()
+
     await placementDraftPage.submit()
 
     await applicationListView.filterByApplicationStatus('WAITING_DECISION')

frontend/src/employee-frontend/components/placement-draft/PlacementDraft.tsx

@@ -208,6 +208,46 @@ export default React.memo(function PlacementDraft() {
     )
   }, [applicationId, redirectToMainPage])
 
+  const validatePreschoolPeriods = useCallback(
+    (
+      placementType: PlacementType,
+      periodType: 'period' | 'preschoolDaycarePeriod',
+      period: FiniteDateRange
+    ) => {
+      if (preschoolTermsResult.isSuccess) {
+        if (
+          placementType === 'PRESCHOOL' ||
+          placementType === 'PREPARATORY' ||
+          placementType === 'PRESCHOOL_DAYCARE' ||
+          placementType === 'PRESCHOOL_DAYCARE_ONLY' ||
+          placementType === 'PREPARATORY_DAYCARE'
+        ) {
+          if (periodType === 'period') {
+            preschoolTermsResult.map((preschoolTerms) => {
+              const datesAreInsideSomePreschoolTerm = preschoolTerms.some(
+                (term) =>
+                  term.finnishPreschool.asDateRange().contains(period) ||
+                  term.swedishPreschool.asDateRange().contains(period)
+              )
+              setPreschoolDatesTermWarning(!datesAreInsideSomePreschoolTerm)
+            })
+          } else {
+            preschoolTermsResult.map((preschoolTerms) => {
+              const datesAreInsideSomeExtendedPreschoolTerm =
+                preschoolTerms.some((term) =>
+                  term.extendedTerm.asDateRange().contains(period)
+                )
+              setPreschoolDatesTermWarning(
+                !datesAreInsideSomeExtendedPreschoolTerm
+              )
+            })
+          }
+        }
+      }
+    },
+    [preschoolTermsResult, setPreschoolDatesTermWarning]
+  )
+
   useEffect(() => {
     if (placementDraft.isSuccess) {
       void getApplicationUnitsResult({
@@ -274,46 +314,6 @@ export default React.memo(function PlacementDraft() {
     return null
   }
 
-  const validatePreschoolPeriods = useCallback(
-    (
-      placementType: PlacementType,
-      periodType: 'period' | 'preschoolDaycarePeriod',
-      period: FiniteDateRange
-    ) => {
-      if (preschoolTermsResult.isSuccess) {
-        if (
-          placementType === 'PRESCHOOL' ||
-          placementType === 'PREPARATORY' ||
-          placementType === 'PRESCHOOL_DAYCARE' ||
-          placementType === 'PRESCHOOL_DAYCARE_ONLY' ||
-          placementType === 'PREPARATORY_DAYCARE'
-        ) {
-          if (periodType === 'period') {
-            preschoolTermsResult.map((preschoolTerms) => {
-              const datesAreInsideSomePreschoolTerm = preschoolTerms.some(
-                (term) =>
-                  term.finnishPreschool.asDateRange().contains(period) ||
-                  term.swedishPreschool.asDateRange().contains(period)
-              )
-              setPreschoolDatesTermWarning(!datesAreInsideSomePreschoolTerm)
-            })
-          } else {
-            preschoolTermsResult.map((preschoolTerms) => {
-              const datesAreInsideSomeExtendedPreschoolTerm =
-                preschoolTerms.some((term) =>
-                  term.extendedTerm.asDateRange().contains(period)
-                )
-              setPreschoolDatesTermWarning(
-                !datesAreInsideSomeExtendedPreschoolTerm
-              )
-            })
-          }
-        }
-      }
-    },
-    [preschoolTermsResult, setPreschoolDatesTermWarning]
-  )
-
   const updatePlacementDate =
     (
       periodType: 'period' | 'preschoolDaycarePeriod',
@@ -450,7 +450,7 @@ export default React.memo(function PlacementDraft() {
               )}
             />
             {preschoolDatesTermWarning && (
-              <div>
+              <div data-qa="preschool-term-warning">
                 <WarningContainer>
                   <InputWarning
                     text={

frontend/src/employee-frontend/components/placement-draft/PlacementDraftRow.tsx

@@ -136,6 +136,7 @@ export default React.memo(function PlacementDraftSection({
             onChange={updateEnd}
             minDate={formState.period?.start ?? today}
             locale="fi"
+            data-qa="end-date"
           />
         </DateRowItem>
         <DateRowItem>
@@ -159,13 +160,15 @@ export default React.memo(function PlacementDraftSection({
               onChange={updatePreschoolStart}
               minDate={today}
               locale="fi"
+              data-qa="preschool-daycare-start-date"
             />
             <DatePickerSpacer />
             <DatePicker
               date={formState.preschoolDaycarePeriod?.end ?? null}
               onChange={updatePreschoolEnd}
               minDate={formState.preschoolDaycarePeriod?.start ?? today}
               locale="fi"
+              data-qa="preschool-daycare-end-date"
             />
           </DateRowItem>
           {formState.preschoolDaycarePeriod !== null &&