add tests for date picker field (#159)

Author: faiza-jahanzeb

Diff for: frontend/tests/components/__snapshots__/date-picker-field.test.tsx.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DatePickerField > should render date picker field component > expected html 1`] = `"<div id="date-picker-id"><fieldset class="space-y-2"><legend class="block" id="date-picker-id-legend"><span class="font-semibold">legend date picker field test</span></legend><div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2"><div id="date-picker-id-month" class="space-y-2"><label class="block" id="date-picker-id-month-label" for="date-picker-id-month-select"><span class="font-semibold">gcweb:date-picker.month.label</span></label><select aria-describedby="date-picker-id-legend" aria-invalid="false" aria-labelledby="date-picker-id-month-label" class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-blue-500 block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 w-full sm:w-auto" id="date-picker-id-month-select" name="month test"><option id="date-picker-id-month-option-unselected" value="" disabled="" hidden="" selected="">gcweb:date-picker.month.placeholder</option><option id="date-picker-id-month-option-1" value="01">January</option><option id="date-picker-id-month-option-2" value="02">February</option><option id="date-picker-id-month-option-3" value="03">March</option><option id="date-picker-id-month-option-4" value="04">April</option><option id="date-picker-id-month-option-5" value="05">May</option><option id="date-picker-id-month-option-6" value="06">June</option><option id="date-picker-id-month-option-7" value="07">July</option><option id="date-picker-id-month-option-8" value="08">August</option><option id="date-picker-id-month-option-9" value="09">September</option><option id="date-picker-id-month-option-10" value="10">October</option><option id="date-picker-id-month-option-11" value="11">November</option><option id="date-picker-id-month-option-12" value="12">December</option></select></div><div id="date-picker-id-day" class="space-y-2"><label class="block" id="date-picker-id-day-label" for="date-picker-id-day-input"><span class="font-semibold">gcweb:date-picker.day.label</span></label><input aria-describedby="date-picker-id-legend" aria-invalid="false" aria-labelledby="date-picker-id-day-label" class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-blue-500 block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 w-full sm:w-20" id="date-picker-id-day-input" max="31" min="1" inputmode="numeric" pattern="[0-9]*" maxlength="2" type="text" value="" name="day test"></div><div id="date-picker-id-year" class="space-y-2"><label class="block" id="date-picker-id-year-label" for="date-picker-id-year-input"><span class="font-semibold">gcweb:date-picker.year.label</span></label><input aria-describedby="date-picker-id-legend" aria-invalid="false" aria-labelledby="date-picker-id-year-label" class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-blue-500 block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 w-full sm:w-32" id="date-picker-id-year-input" min="1900" inputmode="numeric" pattern="[0-9]*" maxlength="4" type="text" value="" name="year test"></div></div></fieldset></div>"`;
+
+exports[`DatePickerField > should render date picker field component with default value > expected html 1`] = `"<div id="date-picker-id"><fieldset class="space-y-2"><legend class="block" id="date-picker-id-legend"><span class="font-semibold">legend date picker field test</span></legend><div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2"><div id="date-picker-id-month" class="space-y-2"><label class="block" id="date-picker-id-month-label" for="date-picker-id-month-select"><span class="font-semibold">gcweb:date-picker.month.label</span></label><select aria-describedby="date-picker-id-legend" aria-invalid="false" aria-labelledby="date-picker-id-month-label" class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-blue-500 block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 w-full sm:w-auto" id="date-picker-id-month-select" name="month test"><option id="date-picker-id-month-option-unselected" value="" disabled="" hidden="">gcweb:date-picker.month.placeholder</option><option id="date-picker-id-month-option-1" value="01" selected="">January</option><option id="date-picker-id-month-option-2" value="02">February</option><option id="date-picker-id-month-option-3" value="03">March</option><option id="date-picker-id-month-option-4" value="04">April</option><option id="date-picker-id-month-option-5" value="05">May</option><option id="date-picker-id-month-option-6" value="06">June</option><option id="date-picker-id-month-option-7" value="07">July</option><option id="date-picker-id-month-option-8" value="08">August</option><option id="date-picker-id-month-option-9" value="09">September</option><option id="date-picker-id-month-option-10" value="10">October</option><option id="date-picker-id-month-option-11" value="11">November</option><option id="date-picker-id-month-option-12" value="12">December</option></select></div><div id="date-picker-id-day" class="space-y-2"><label class="block" id="date-picker-id-day-label" for="date-picker-id-day-input"><span class="font-semibold">gcweb:date-picker.day.label</span></label><input aria-describedby="date-picker-id-legend" aria-invalid="false" aria-labelledby="date-picker-id-day-label" class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-blue-500 block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 w-full sm:w-20" id="date-picker-id-day-input" max="31" min="1" inputmode="numeric" pattern="[0-9]*" maxlength="2" type="text" value="01" name="day test"></div><div id="date-picker-id-year" class="space-y-2"><label class="block" id="date-picker-id-year-label" for="date-picker-id-year-input"><span class="font-semibold">gcweb:date-picker.year.label</span></label><input aria-describedby="date-picker-id-legend" aria-invalid="false" aria-labelledby="date-picker-id-year-label" class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-blue-500 block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 w-full sm:w-32" id="date-picker-id-year-input" min="1900" inputmode="numeric" pattern="[0-9]*" maxlength="4" type="text" value="2025" name="year test"></div></div></fieldset></div>"`;
+
+exports[`DatePickerField > should render date picker field component with error message > expected html 1`] = `"<div id="date-picker-id"><fieldset class="space-y-2"><legend class="block" id="date-picker-id-legend"><span class="font-semibold">legend date picker field test</span></legend><div class="space-y-2"><span class="inline-block max-w-prose border-l-2 border-red-600 bg-red-50 px-3 py-1" data-testid="input-error-test-id" role="alert" id="date-picker-id-error-all">test error all</span><p><span class="inline-block max-w-prose border-l-2 border-red-600 bg-red-50 px-3 py-1" data-testid="input-error-test-id" role="alert" id="date-picker-id-error-month">test error month</span></p><p><span class="inline-block max-w-prose border-l-2 border-red-600 bg-red-50 px-3 py-1" data-testid="input-error-test-id" role="alert" id="date-picker-id-error-day">test error day</span></p><p><span class="inline-block max-w-prose border-l-2 border-red-600 bg-red-50 px-3 py-1" data-testid="input-error-test-id" role="alert" id="date-picker-id-error-year">test error year</span></p></div><div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2"><div id="date-picker-id-month" class="space-y-2"><label class="block" id="date-picker-id-month-label" for="date-picker-id-month-select"><span class="font-semibold">gcweb:date-picker.month.label</span></label><select aria-describedby="date-picker-id-legend" aria-errormessage="date-picker-id-error-all date-picker-id-error-month" aria-invalid="true" aria-labelledby="date-picker-id-month-label" class="rounded-lg block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 border-red-500 focus:border-red-500 focus:ring-red-500 w-full sm:w-auto" id="date-picker-id-month-select" name="month test"><option id="date-picker-id-month-option-unselected" value="" disabled="" hidden="" selected="">gcweb:date-picker.month.placeholder</option><option id="date-picker-id-month-option-1" value="01">January</option><option id="date-picker-id-month-option-2" value="02">February</option><option id="date-picker-id-month-option-3" value="03">March</option><option id="date-picker-id-month-option-4" value="04">April</option><option id="date-picker-id-month-option-5" value="05">May</option><option id="date-picker-id-month-option-6" value="06">June</option><option id="date-picker-id-month-option-7" value="07">July</option><option id="date-picker-id-month-option-8" value="08">August</option><option id="date-picker-id-month-option-9" value="09">September</option><option id="date-picker-id-month-option-10" value="10">October</option><option id="date-picker-id-month-option-11" value="11">November</option><option id="date-picker-id-month-option-12" value="12">December</option></select></div><div id="date-picker-id-day" class="space-y-2"><label class="block" id="date-picker-id-day-label" for="date-picker-id-day-input"><span class="font-semibold">gcweb:date-picker.day.label</span></label><input aria-describedby="date-picker-id-legend" aria-errormessage="date-picker-id-error-all date-picker-id-error-day" aria-invalid="true" aria-labelledby="date-picker-id-day-label" class="rounded-lg block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 border-red-500 focus:border-red-500 focus:ring-red-500 w-full sm:w-20" id="date-picker-id-day-input" max="31" min="1" inputmode="numeric" pattern="[0-9]*" maxlength="2" type="text" value="" name="day test"></div><div id="date-picker-id-year" class="space-y-2"><label class="block" id="date-picker-id-year-label" for="date-picker-id-year-input"><span class="font-semibold">gcweb:date-picker.year.label</span></label><input aria-describedby="date-picker-id-legend" aria-errormessage="date-picker-id-error-all date-picker-id-error-year" aria-invalid="true" aria-labelledby="date-picker-id-year-label" class="rounded-lg block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 border-red-500 focus:border-red-500 focus:ring-red-500 w-full sm:w-32" id="date-picker-id-year-input" min="1900" inputmode="numeric" pattern="[0-9]*" maxlength="4" type="text" value="" name="year test"></div></div></fieldset></div>"`;
+
+exports[`DatePickerField > should render date picker field component with help message primary and help message secondary > expected html 1`] = `"<div id="date-picker-id"><fieldset class="space-y-2"><legend class="block" id="date-picker-id-legend"><span class="font-semibold">legend date picker field test</span></legend><span class="block max-w-prose text-gray-500" data-testid="input-help" id="date-picker-id-help-primary">help message primary</span><div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2"><div id="date-picker-id-month" class="space-y-2"><label class="block" id="date-picker-id-month-label" for="date-picker-id-month-select"><span class="font-semibold">gcweb:date-picker.month.label</span></label><select aria-describedby="date-picker-id-legend date-picker-id-help-primary date-picker-id-help-secondary" aria-invalid="false" aria-labelledby="date-picker-id-month-label" class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-blue-500 block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 w-full sm:w-auto" id="date-picker-id-month-select" name="month test"><option id="date-picker-id-month-option-unselected" value="" disabled="" hidden="" selected="">gcweb:date-picker.month.placeholder</option><option id="date-picker-id-month-option-1" value="01">January</option><option id="date-picker-id-month-option-2" value="02">February</option><option id="date-picker-id-month-option-3" value="03">March</option><option id="date-picker-id-month-option-4" value="04">April</option><option id="date-picker-id-month-option-5" value="05">May</option><option id="date-picker-id-month-option-6" value="06">June</option><option id="date-picker-id-month-option-7" value="07">July</option><option id="date-picker-id-month-option-8" value="08">August</option><option id="date-picker-id-month-option-9" value="09">September</option><option id="date-picker-id-month-option-10" value="10">October</option><option id="date-picker-id-month-option-11" value="11">November</option><option id="date-picker-id-month-option-12" value="12">December</option></select></div><div id="date-picker-id-day" class="space-y-2"><label class="block" id="date-picker-id-day-label" for="date-picker-id-day-input"><span class="font-semibold">gcweb:date-picker.day.label</span></label><input aria-describedby="date-picker-id-legend date-picker-id-help-primary date-picker-id-help-secondary" aria-invalid="false" aria-labelledby="date-picker-id-day-label" class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-blue-500 block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 w-full sm:w-20" id="date-picker-id-day-input" max="31" min="1" inputmode="numeric" pattern="[0-9]*" maxlength="2" type="text" value="" name="day test"></div><div id="date-picker-id-year" class="space-y-2"><label class="block" id="date-picker-id-year-label" for="date-picker-id-year-input"><span class="font-semibold">gcweb:date-picker.year.label</span></label><input aria-describedby="date-picker-id-legend date-picker-id-help-primary date-picker-id-help-secondary" aria-invalid="false" aria-labelledby="date-picker-id-year-label" class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-blue-500 block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 w-full sm:w-32" id="date-picker-id-year-input" min="1900" inputmode="numeric" pattern="[0-9]*" maxlength="4" type="text" value="" name="year test"></div></div><span class="block max-w-prose text-gray-500" data-testid="input-help" id="date-picker-id-help-secondary">help message secondary</span></fieldset></div>"`;
+
+exports[`DatePickerField > should render date picker field component with required > expected html 1`] = `"<div id="date-picker-id"><fieldset class="space-y-2"><legend class="block" id="date-picker-id-legend"><span class="font-semibold">legend date picker field test</span> <span aria-hidden="true">(input-legend.required)</span></legend><div class="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2"><div id="date-picker-id-month" class="space-y-2"><label class="block" id="date-picker-id-month-label" for="date-picker-id-month-select"><span class="font-semibold">gcweb:date-picker.month.label</span></label><select aria-describedby="date-picker-id-legend" aria-invalid="false" aria-labelledby="date-picker-id-month-label" aria-required="true" class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-blue-500 block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 w-full sm:w-auto" id="date-picker-id-month-select" name="month test" required=""><option id="date-picker-id-month-option-unselected" value="" disabled="" hidden="" selected="">gcweb:date-picker.month.placeholder</option><option id="date-picker-id-month-option-1" value="01">January</option><option id="date-picker-id-month-option-2" value="02">February</option><option id="date-picker-id-month-option-3" value="03">March</option><option id="date-picker-id-month-option-4" value="04">April</option><option id="date-picker-id-month-option-5" value="05">May</option><option id="date-picker-id-month-option-6" value="06">June</option><option id="date-picker-id-month-option-7" value="07">July</option><option id="date-picker-id-month-option-8" value="08">August</option><option id="date-picker-id-month-option-9" value="09">September</option><option id="date-picker-id-month-option-10" value="10">October</option><option id="date-picker-id-month-option-11" value="11">November</option><option id="date-picker-id-month-option-12" value="12">December</option></select></div><div id="date-picker-id-day" class="space-y-2"><label class="block" id="date-picker-id-day-label" for="date-picker-id-day-input"><span class="font-semibold">gcweb:date-picker.day.label</span></label><input aria-describedby="date-picker-id-legend" aria-invalid="false" aria-labelledby="date-picker-id-day-label" aria-required="true" class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-blue-500 block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 w-full sm:w-20" id="date-picker-id-day-input" max="31" min="1" required="" inputmode="numeric" pattern="[0-9]*" maxlength="2" type="text" value="" name="day test"></div><div id="date-picker-id-year" class="space-y-2"><label class="block" id="date-picker-id-year-label" for="date-picker-id-year-input"><span class="font-semibold">gcweb:date-picker.year.label</span></label><input aria-describedby="date-picker-id-legend" aria-invalid="false" aria-labelledby="date-picker-id-year-label" aria-required="true" class="rounded-lg border-gray-500 focus:border-blue-500 focus:ring-blue-500 block focus:ring focus:outline-none disabled:bg-gray-100 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70 w-full sm:w-32" id="date-picker-id-year-input" min="1900" required="" inputmode="numeric" pattern="[0-9]*" maxlength="4" type="text" value="" name="year test"></div></div></fieldset></div>"`;