@transferwise/components 46.40.0 → 46.41.1

package/src/dateInput/DateInput.spec.tsx

@@ -0,0 +1,220 @@
+import { screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DateInput, DateInputProps, Field } from '..';
+import { mockMatchMedia, mockResizeObserver, render } from '../test-utils';
+
+describe('Date Input Component', () => {
+  const props: DateInputProps = { onChange: jest.fn() };
+
+  beforeEach(() => {
+    mockMatchMedia();
+    mockResizeObserver();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe('when initialised without a model', () => {
+    it('sets day field to empty', () => {
+      render(<DateInput {...props} />);
+      const dayInput = screen.getByRole('textbox', { name: /day/i });
+      expect(dayInput).toHaveValue('');
+    });
+
+    it('sets month field to empty', () => {
+      render(<DateInput {...props} />);
+      const monthSelect = screen.getByRole('button', { name: /month/i });
+      expect(monthSelect).toHaveValue('');
+    });
+
+    it('sets year field to empty', () => {
+      render(<DateInput {...props} />);
+      const yearInput = screen.getByRole('textbox', { name: /year/i });
+      expect(yearInput).toHaveValue('');
+    });
+  });
+
+  describe('when initialised with a model', () => {
+    it('sets values correctly with a valid Date instance', () => {
+      render(<DateInput {...props} value="1971-08-01" />);
+      expect(screen.getByRole('textbox', { name: /day/i })).toHaveValue('1');
+      expect(screen.getByRole('button', { name: /month/i })).toHaveTextContent('August');
+      expect(screen.getByRole('textbox', { name: /year/i })).toHaveValue('1971');
+    });
+
+    it('sets values correctly with a valid short ISO8601 string', () => {
+      render(<DateInput {...props} value="1990-08-22" />);
+      expect(screen.getByRole('textbox', { name: /day/i })).toHaveValue('22');
+      expect(screen.getByRole('button', { name: /month/i })).toHaveTextContent('August');
+      expect(screen.getByRole('textbox', { name: /year/i })).toHaveValue('1990');
+    });
+
+    it('sets values correctly with a valid short ISO8601 string with year and month only', () => {
+      render(<DateInput {...props} value="1990-08" />);
+      expect(screen.getByRole('textbox', { name: /day/i })).toHaveValue('');
+      expect(screen.getByRole('button', { name: /month/i })).toHaveTextContent('August');
+      expect(screen.getByRole('textbox', { name: /year/i })).toHaveValue('1990');
+    });
+
+    it('sets values correctly with a valid long ISO8601 string', () => {
+      render(<DateInput {...props} value="1990-02-28T00:00:00.000Z" />);
+      expect(screen.getByRole('textbox', { name: /day/i })).toHaveValue('28');
+      expect(screen.getByRole('button', { name: /month/i })).toHaveTextContent('February');
+      expect(screen.getByRole('textbox', { name: /year/i })).toHaveValue('1990');
+    });
+
+    it('sets values to disabled when disabled is set to true', () => {
+      render(<DateInput {...props} disabled />);
+      expect(screen.getByRole('textbox', { name: /day/i })).toBeDisabled();
+      expect(screen.getByRole('button', { name: /month/i })).toBeDisabled();
+      expect(screen.getByRole('textbox', { name: /year/i })).toBeDisabled();
+    });
+
+    it("doesn't set values to disabled when disabled is set to false", () => {
+      render(<DateInput {...props} />);
+      expect(screen.getByRole('textbox', { name: /day/i })).toBeEnabled();
+      expect(screen.getByRole('button', { name: /month/i })).toBeEnabled();
+      expect(screen.getByRole('textbox', { name: /year/i })).toBeEnabled();
+    });
+  });
+
+  describe('when initialised', () => {
+    it(`doesn't call the onChange callback without an initial value`, () => {
+      render(<DateInput {...props} />);
+      expect(props.onChange).not.toHaveBeenCalled();
+    });
+
+    it(`doesn't call the onChange callback with an initial value`, () => {
+      render(<DateInput {...props} value="1990-08-08" />);
+      expect(props.onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when interacting', () => {
+    it('calls the onChange callback with null when changing the day but nothing else is filled out', async () => {
+      render(<DateInput {...props} />);
+      await userEvent.type(screen.getByRole('textbox', { name: /day/i }), '4');
+      expect(props.onChange).toHaveBeenCalledWith(null);
+    });
+
+    it('calls the onChange callback with null when changing the month but nothing else is filled out', async () => {
+      render(<DateInput {...props} />);
+      const monthSelect = screen.getByLabelText(/month/i);
+      await userEvent.click(monthSelect);
+      await userEvent.click(screen.getByRole('option', { name: /January/ }));
+      expect(props.onChange).toHaveBeenCalledWith(null);
+    });
+
+    it('calls the onChange callback with null when changing the year but nothing else is filled out', async () => {
+      render(<DateInput {...props} />);
+      await userEvent.type(screen.getByRole('textbox', { name: /day/i }), '4444');
+      expect(props.onChange).toHaveBeenCalledWith(null);
+    });
+
+    it('calls the onChange callback with the correct value when changing the day', async () => {
+      render(<DateInput {...props} value="2022-12-1" />);
+      const dayInput = screen.getByRole('textbox', { name: /day/i });
+      // add 8 to the 1 that's already there
+      await userEvent.type(dayInput, '8');
+      expect(props.onChange).toHaveBeenCalledWith('2022-12-18');
+    });
+
+    it('calls the onChange callback with the correct value when changing the month', async () => {
+      render(<DateInput {...props} value="2022-12-1" />);
+      const monthSelect = screen.getByRole('button', { name: /month/i });
+      await userEvent.click(monthSelect);
+      await userEvent.click(screen.getByRole('option', { name: /January/ }));
+      expect(props.onChange).toHaveBeenCalledWith('2022-01-01');
+    });
+
+    it('calls the onChange callback with the correct value when changing the year', async () => {
+      render(<DateInput {...props} value="0122-12-1" />);
+      const yearInput = screen.getByRole('textbox', { name: /year/i });
+      // 0122 ends up being 122 in the box when it's supplied as the starting value
+      await userEvent.type(yearInput, '2');
+      expect(props.onChange).toHaveBeenCalledWith('1222-12-01');
+    });
+
+    it('calls the onChange callback with the null when not having a 4 digit year', async () => {
+      render(<DateInput {...props} />);
+      const yearInput = screen.getByRole('textbox', { name: /year/i });
+      await userEvent.type(yearInput, '123');
+      expect(props.onChange).toHaveBeenCalledWith(null);
+    });
+
+    it('calls the onChange callback with the null when changing the day to a day that is higher than max value', async () => {
+      render(<DateInput {...props} value="2022-11-3" />);
+      const dayInput = screen.getByRole('textbox', { name: /day/i });
+      // add 1 to the 3 that's already there
+      await userEvent.type(dayInput, '1');
+      expect(props.onChange).toHaveBeenCalledWith(null);
+    });
+
+    it('does not overflow very high day values to the next month', async () => {
+      render(<DateInput {...props} value="2022-11-6" />);
+      const dayInput = screen.getByRole('textbox', { name: /day/i });
+      // add 6 to the 6 that's already there
+      await userEvent.type(dayInput, '6');
+      expect(props.onChange).toHaveBeenCalledWith(null);
+    });
+
+    it('only pastes in first 6 digits of a long number for year', async () => {
+      render(<DateInput {...props} value="2010-01-01" />);
+      const yearInput = screen.getByRole('textbox', { name: /year/i });
+      yearInput.focus();
+      await userEvent.type(yearInput, '{backspace}{backspace}{backspace}{backspace}');
+      await userEvent.paste('12345678');
+      expect(props.onChange).toHaveBeenCalledWith('123456-01-01');
+    });
+
+    it('only pastes in first 2 digits of a long number for day', async () => {
+      render(<DateInput {...props} value="2010-01-01" />);
+      const yearInput = screen.getByRole('textbox', { name: /day/i });
+      yearInput.focus();
+      await userEvent.type(yearInput, '{backspace}{backspace}');
+      await userEvent.paste('123456');
+      expect(props.onChange).toHaveBeenCalledWith('2010-01-12');
+    });
+  });
+
+  describe('when switching from day input to year input', () => {
+    it('does not call onBlur nor onFocus', () => {
+      const onFocus = jest.fn();
+      const onBlur = jest.fn();
+
+      render(<DateInput {...props} />);
+      const dayInput = screen.getByRole('textbox', { name: /day/i });
+      const yearInput = screen.getByRole('textbox', { name: /year/i });
+      fireEvent.focus(dayInput);
+      fireEvent.blur(dayInput);
+      fireEvent.focus(yearInput);
+      expect(onFocus).not.toHaveBeenCalled();
+      expect(onBlur).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when selectProps is provided', () => {
+    it('renders Select component with expected props', () => {
+      render(
+        <DateInput
+          selectProps={{
+            id: 'mock-id',
+          }}
+          {...props}
+        />,
+      );
+      const monthSelect = screen.getByRole('button', { name: /month/i });
+      expect(monthSelect).toHaveAttribute('id', 'mock-id');
+    });
+  });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Date of birth">
+        <DateInput onChange={() => {}} />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Date of birth/);
+  });
+});

package/src/dateInput/DateInput.story.tsx

@@ -1,19 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import { fn } from '@storybook/test';
 
-import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
-import { lorem10, storyConfig } from '../test-utils';
+import { DateInput } from '..';
 
 const meta = {
   component: DateInput,
   title: 'Forms/DateInput',
-  args: {
-    dayLabel: 'Day input',
-    dayAutoComplete: 'bday-day',
-    monthLabel: 'Month select',
-    yearLabel: 'Year input',
-    yearAutoComplete: 'bday-year',
-  },
   tags: ['autodocs'],
 } satisfies Meta<typeof DateInput>;
 
@@ -23,71 +15,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic = {
   args: {
-    onChange: () => {},
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-  },
-} satisfies Story;
-
-export const WithLabel = {
-  args: {
-    onChange: () => {},
-  },
-  render: (args) => {
-    const id1 = 'date-input-group-label-1';
-    const label = 'Date of Birth';
-    return (
-      <>
-        <Title type={Typography.TITLE_SUBSECTION}>
-          label (as <code>div</code> element) is linked with <code>DateInput</code> via{' '}
-          <code>aria-labelledby</code> prop
-        </Title>
-        <div className="control-label" id={id1}>
-          Date of Delivery
-        </div>
-        <DateInput {...args} aria-labelledby={id1} />
-
-        <br />
-
-        <Title type={Typography.TITLE_SUBSECTION}>
-          label (as <code>div</code> element) is detached but <code>DateInput</code> has same label
-          via <code>aria-label</code> attribute
-        </Title>
-        <div className="control-label">
-          {label}{' '}
-          <Info aria-label="Fast transfer hint" title="Fast transfer hint" content={lorem10} />
-        </div>
-        <DateInput {...args} aria-label={label} />
-
-        <br />
-
-        <Title type={Typography.TITLE_SUBSECTION}>
-          <code>DateInput</code> wrapped in <code>fieldset</code> + using <code>legend</code> as
-          label (rare use case)
-        </Title>
-        <fieldset>
-          <legend className="control-label">
-            Expiry Date for Credit Card (example of MONTH_YEAR mode)
-          </legend>
-          <DateInput {...args} mode={DateMode.MONTH_YEAR} />
-        </fieldset>
-      </>
-    );
+    onChange: fn(),
   },
 } satisfies Story;
-
-export const BasicMobile = storyConfig(Basic, { variants: ['mobile'] });
-
-export const InputError = {
-  ...Basic,
-  render: (args) => (
-    <div className="form-group has-error">
-      <DateInput {...args} />
-      <InlineAlert type="error">{lorem10}</InlineAlert>
-    </div>
-  ),
-} satisfies Story;
-
-export const InputErrorMobile = storyConfig(InputError, { variants: ['mobile'] });

package/src/dateInput/DateInput.tests.story.tsx

@@ -0,0 +1,238 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within, fn } from '@storybook/test';
+
+import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
+import { lorem10, storyConfig } from '../test-utils';
+
+import Provider from '../provider/Provider';
+import translations from '../i18n';
+
+const meta = {
+  component: DateInput,
+  title: 'Forms/DateInput/Tests',
+  args: {
+    dayLabel: 'Day input',
+    dayAutoComplete: 'bday-day',
+    monthLabel: 'Month select',
+    yearLabel: 'Year input',
+    yearAutoComplete: 'bday-year',
+  },
+} satisfies Meta<typeof DateInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const Basic = {
+  args: {
+    onChange: fn(),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+  },
+} satisfies Story;
+
+export const WithLabel = {
+  args: {
+    onChange: fn(),
+  },
+  render: (args) => {
+    const id1 = 'date-input-group-label-1';
+    const label = 'Date of Birth';
+
+    return (
+      <>
+        <Title type={Typography.TITLE_SUBSECTION}>
+          label (as <code>div</code> element) is linked with <code>DateInput</code> via{' '}
+          <code>aria-labelledby</code> prop
+        </Title>
+        <div className="control-label" id={id1}>
+          Date of Delivery
+        </div>
+        <DateInput {...args} aria-labelledby={id1} />
+
+        <br />
+
+        <Title type={Typography.TITLE_SUBSECTION}>
+          label (as <code>div</code> element) is detached but <code>DateInput</code> has same label
+          via <code>aria-label</code> attribute
+        </Title>
+        <div className="control-label">
+          {label}{' '}
+          <Info aria-label="Fast transfer hint" title="Fast transfer hint" content={lorem10} />
+        </div>
+        <DateInput {...args} aria-label={label} />
+
+        <br />
+
+        <Title type={Typography.TITLE_SUBSECTION}>
+          <code>DateInput</code> wrapped in <code>fieldset</code> + using <code>legend</code> as
+          label (rare use case)
+        </Title>
+        <fieldset>
+          <legend className="control-label">
+            Expiry Date for Credit Card (example of MONTH_YEAR mode)
+          </legend>
+          <DateInput {...args} mode={DateMode.MONTH_YEAR} />
+        </fieldset>
+      </>
+    );
+  },
+} satisfies Story;
+
+export const InputError = {
+  ...Basic,
+  render: (args) => (
+    <div className="form-group has-error">
+      <DateInput {...args} value={new Date('2010-04-05')} />
+      <InlineAlert type="error">{lorem10}</InlineAlert>
+    </div>
+  ),
+} satisfies Story;
+
+export const CustomPlaceholders = {
+  ...Basic,
+  args: {
+    placeholders: {
+      day: 'D',
+      month: 'M',
+      year: 'YY',
+    },
+  },
+};
+
+export const SingleZero = storyConfig(Basic, {});
+SingleZero.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can enter leading zero on day field', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, '0');
+  });
+  await step('can enter 1 leading zero on year field', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, '0');
+  });
+};
+
+export const ZeroesAsValue = storyConfig(Basic, {});
+ZeroesAsValue.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can enter 2 leading zeroes on day field', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, '00');
+  });
+  await step('can enter 4 leading zeroes on year field', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, '0000');
+  });
+};
+
+export const ZeroesBeforeValue = storyConfig(Basic, {});
+ZeroesBeforeValue.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can enter leading zeroes on day followed by day', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, '01');
+  });
+  await step('can enter leading zeroes on year followed by year', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, '0001');
+  });
+};
+
+export const MaxLengthRespected = storyConfig(Basic, {});
+MaxLengthRespected.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can only enter 4 digits in the year field', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, '11111111');
+  });
+  await step('can only enter 2 digits in the day field', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, '11111111');
+  });
+};
+
+export const LocalizationWorks: Story = {
+  ...Basic,
+  decorators: [
+    (Story) => {
+      const locale = 'zh-HK';
+      return (
+        <Provider i18n={{ locale, messages: translations[locale] }}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
+};
+
+export const YearFirst: Story = {
+  ...Basic,
+  decorators: [
+    (Story) => {
+      const locale = 'ja';
+      return (
+        <Provider i18n={{ locale, messages: translations[locale] }}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
+};
+
+export const MonthFirst: Story = {
+  ...Basic,
+  decorators: [
+    (Story) => {
+      const locale = 'en-US';
+      return (
+        <Provider i18n={{ locale, messages: translations[locale] }}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
+};
+
+export const DayFirst: Story = {
+  ...Basic,
+  decorators: [
+    (Story) => {
+      const locale = 'en';
+      return (
+        <Provider i18n={{ locale, messages: translations[locale] }}>
+          <Story />
+        </Provider>
+      );
+    },
+  ],
+};
+
+export const NoNonDigitsAllowed = storyConfig(Basic, {});
+NoNonDigitsAllowed.play = async ({ canvasElement, step }) => {
+  const canvas = within(canvasElement);
+  await step('can only enter digits in the day field', async () => {
+    const dayInput = await canvas.findByRole('textbox', { name: /day/i });
+    await userEvent.click(dayInput);
+    await userEvent.type(dayInput, 'abcd1');
+  });
+  await step('can only enter digits in the year field', async () => {
+    const yearInput = await canvas.findByRole('textbox', { name: /year/i });
+    await userEvent.click(yearInput);
+    await userEvent.type(yearInput, 'abcd2');
+  });
+};
+
+export const BasicMobile = storyConfig(Basic, { variants: ['mobile'] });
+
+export const InputErrorMobile = storyConfig(InputError, { variants: ['mobile'] });