make most changes (todo: update date validator so it can tell if its ISO format)

Author: radmorecameron

packages/web/src/components/gcds-date-input/gcds-date-input.tsx

@@ -557,6 +557,18 @@ export class GcdsDateInput {
     dayValue = dayValue?.replace(/[eE-]/g, '');
 
     if (format === 'iso') {
+      // Logic to make sure the month input is registered correctly
+      if (monthValue && monthValue.length === 1 && monthValue != '0') {
+        monthValue = '0' + monthValue;
+        this.monthValue = monthValue;
+      } else if (
+        monthValue &&
+        monthValue.length == 3 &&
+        monthValue[0] === '0'
+      ) {
+        monthValue = monthValue.substring(1);
+        this.monthValue = monthValue;
+      }
       monthValue = monthValue?.replace(/[eE-]/g, '');
     }
 

packages/web/src/components/gcds-date-input/stories/gcds-date-input.stories.tsx

@@ -22,7 +22,7 @@ export default {
     },
     format: {
       control: { type: 'select' },
-      options: ['full', 'compact', 'yyyy-MM-dd'],
+      options: ['full', 'compact', 'iso'],
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: '-' },

packages/web/src/components/gcds-date-input/test/gcds-date-input.e2e.ts

@@ -62,30 +62,37 @@ test.describe('gcds-date-input', () => {
     expect(value).toEqual('1234-03');
   });
 
-  test('Format: iso - value', async ({ page }) => {
-    const element = page.locator('gcds-date-input');
-
-    // Wait for element to attach and become visible, allowing up to 10s
-    await element.waitFor({ state: 'attached' });
-    await element.waitFor({ state: 'visible' });
-    await element.waitFor({ timeout: 10000 });
-
-    await element.evaluate(
-      (el: HTMLGcdsDateInputElement) => (el.format = 'iso'),
-    );
-
-    await page.waitForChanges();
-
-    await element.locator('input[name="year"]').fill('1234');
-    await element.locator('input[name="month"]').fill('03');
-    await element.locator('input[name="day"]').fill('11');
-
-    const value = await element.evaluate(
-      (el: HTMLGcdsDateInputElement) => el.value,
-    );
-
-    expect(value).toEqual('1234-03-11');
-  });
+  for (const { year, month, day, expected } of [
+    { year: '2023', month: '3', day: '1', expected: '2023-03-01' },
+    { year: '2021', month: '05', day: '2', expected: '2021-05-02' },
+    { year: '1600', month: '2', day: '11', expected: '1600-02-11' },
+    { year: '1234', month: '03', day: '11', expected: '1234-03-11' },
+  ]) {
+    test(`Format: iso - value - ${year}-${month}-${day}`, async ({ page }) => {
+      const element = page.locator('gcds-date-input');
+
+      // Wait for element to attach and become visible, allowing up to 10s
+      await element.waitFor({ state: 'attached' });
+      await element.waitFor({ state: 'visible' });
+      await element.waitFor({ timeout: 10000 });
+
+      await element.evaluate(
+        (el: HTMLGcdsDateInputElement) => (el.format = 'iso'),
+      );
+
+      await page.waitForChanges();
+
+      await element.locator('input[name="year"]').fill(year);
+      await element.locator('input[name="month"]').fill(month);
+      await element.locator('input[name="day"]').fill(day);
+
+      const value = await element.evaluate(
+        (el: HTMLGcdsDateInputElement) => el.value,
+      );
+
+      expect(value).toEqual(expected);
+    });
+  }
   /**
    * Invalid value
    */
@@ -471,7 +478,7 @@ test.describe('gcds-date-input', () => {
       el => (el as HTMLGcdsDateInputElement).errorMessage,
     );
 
-    expect(errorMessage).toEqual(dateInputErrorMessage.en.invalidday);
+    expect(errorMessage).toEqual(dateInputErrorMessage.en.missingmonthinput);
   });
   test('Validation - Custom validation', async ({ page }) => {
     const element = page.locator('gcds-date-input');
@@ -770,6 +777,19 @@ test.describe('gcds-date-input a11y tests', () => {
    * ISO format
    */
   test('ISO format', async ({ page }) => {
+    const element = page.locator('gcds-date-input');
+
+    // Wait for element to attach and become visible, allowing up to 10s
+    await element.waitFor({ state: 'attached' });
+    await element.waitFor({ state: 'visible' });
+    await element.waitFor({ timeout: 10000 });
+
+    await element.evaluate(
+      (el: HTMLGcdsDateInputElement) => (el.format = 'iso'),
+    );
+
+    await page.waitForChanges();
+
     const results = await new AxeBuilder({ page })
       .include('gcds-date-input')
       .analyze();

packages/web/src/validators/input-validators/input-validators.ts

@@ -61,23 +61,29 @@ export const requiredSelectField: Validator<string> = {
 export const dateInputErrorMessage = {
   en: {
     all: 'Enter the date.',
+    missingmonthinput: 'Enter the month.',
     missingmonth: 'Select the month.',
     missingyear: 'Enter the year.',
     missingday: 'Enter the day.',
     missingmonthday: 'Select the month and enter the day.',
     missingmonthyear: 'Select the month and enter the year.',
+    missingmonthinputday: 'Enter the month and day.',
+    missingmonthinputyear: 'Enter the year and month.',
     missingdayyear: 'Enter the day and year.',
     invalidyearlength: 'Year must be 4 digits.',
     invalidyear: 'Enter a valid year.',
     invalidday: 'Enter a valid day.',
   },
   fr: {
     all: 'Saisissez la date.',
+    missingmonthinput: 'Saisissez le mois.',
     missingmonth: 'Sélectionnez un mois.',
     missingyear: "Saisissez l'année.",
     missingday: 'Saisissez le jour.',
     missingmonthday: 'Saisissez le jour et sélectionnez un mois.',
     missingmonthyear: "Sélectionnez un mois et saisissez l'année.",
+    missingmonthinputday: 'Saisissez le mois et le jour.',
+    missingmonthinputyear: "Saisissez l'année et le mois.",
     missingdayyear: "Saisissez le jour et l'année.",
     invalidyearlength: "L'année doit inclure 4 chiffres.",
     invalidyear: 'Entrez une année valide.',