@transferwise/components 0.0.0-experimental-03832a1 → 0.0.0-experimental-602fe37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-03832a1",
+  "version": "0.0.0-experimental-602fe37",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/calendarInput/CalendarInput.test.tsx

@@ -0,0 +1,140 @@
+import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
+import CalendarInput from './CalendarInput';
+
+mockMatchMedia();
+
+const user = userEvent.setup();
+
+const initialValue = new Date(2000, 0, 1);
+
+describe('CalendarInput', () => {
+  describe('in day view', () => {
+    it.each([
+      ['{ArrowLeft}', -1],
+      ['{ArrowRight}', +1],
+      ['{ArrowUp}', -7],
+      ['{ArrowDown}', +7],
+    ])("handles '%s' to step %d day(s)", async (text: string, step: number) => {
+      const handleChange = jest.fn();
+      render(<CalendarInput value={initialValue} onChange={handleChange} />);
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      await user.keyboard(text);
+
+      const expected = new Date(initialValue);
+      expected.setDate(initialValue.getDate() + step);
+      expect(handleChange).toHaveBeenCalledWith(expected);
+    });
+
+    it('selects a day on click', async () => {
+      const handleChange = jest.fn();
+      render(<CalendarInput value={initialValue} onChange={handleChange} />);
+
+      await user.click(screen.getByText('15'));
+
+      expect(handleChange).toHaveBeenCalledWith(new Date(2000, 0, 15));
+    });
+
+    it('calls onSelect instead of onChange when clicking a day', async () => {
+      const handleChange = jest.fn();
+      const handleSelect = jest.fn();
+      render(
+        <CalendarInput value={initialValue} onChange={handleChange} onSelect={handleSelect} />,
+      );
+
+      await user.click(screen.getByText('15'));
+
+      expect(handleSelect).toHaveBeenCalledWith(new Date(2000, 0, 15));
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('in year view', () => {
+    it.each([
+      ['{ArrowLeft}', -1],
+      ['{ArrowRight}', +1],
+      ['{ArrowUp}', -4],
+      ['{ArrowDown}', +4],
+    ])("handles '%s' to step %d year(s)", async (text: string, step: number) => {
+      const handleChange = jest.fn();
+      render(<CalendarInput value={initialValue} onChange={handleChange} />);
+
+      await user.click(screen.getByRole('button', { name: /year view/iu }));
+      await user.keyboard(text);
+
+      const expected = new Date(initialValue);
+      expected.setFullYear(initialValue.getFullYear() + step);
+      expect(handleChange).toHaveBeenCalledWith(expected);
+    });
+  });
+
+  describe('in month view', () => {
+    it.each([
+      ['{ArrowLeft}', -1],
+      ['{ArrowRight}', +1],
+      ['{ArrowUp}', -4],
+      ['{ArrowDown}', +4],
+    ])("handles '%s' to step %d month(s)", async (text: string, step: number) => {
+      const handleChange = jest.fn();
+      render(<CalendarInput value={initialValue} onChange={handleChange} />);
+
+      await user.click(screen.getByRole('button', { name: /year view/iu }));
+      await user.keyboard(' ');
+      await user.keyboard(text);
+
+      const expected = new Date(initialValue);
+      expected.setMonth(initialValue.getMonth() + step);
+      expect(handleChange).toHaveBeenCalledWith(expected);
+    });
+  });
+
+  describe('min/max clamping', () => {
+    it('limits navigation to min value', async () => {
+      const min = new Date(initialValue);
+      min.setDate(min.getDate() - 1);
+      const handleChange = jest.fn();
+      render(<CalendarInput value={initialValue} min={min} onChange={handleChange} />);
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      await user.keyboard('{ArrowLeft}{ArrowLeft}');
+
+      expect(handleChange).toHaveBeenLastCalledWith(min);
+    });
+
+    it('limits navigation to max value', async () => {
+      const max = new Date(initialValue);
+      max.setDate(max.getDate() + 1);
+      const handleChange = jest.fn();
+      render(<CalendarInput value={initialValue} max={max} onChange={handleChange} />);
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      await user.keyboard('{ArrowRight}{ArrowRight}');
+
+      expect(handleChange).toHaveBeenLastCalledWith(max);
+    });
+
+    it('clamps value to range when value is outside min/max', () => {
+      const min = new Date(2000, 0, 5);
+      const max = new Date(2000, 0, 20);
+      const handleChange = jest.fn();
+      render(<CalendarInput value={initialValue} min={min} max={max} onChange={handleChange} />);
+
+      expect(handleChange).toHaveBeenCalledWith(min);
+    });
+  });
+
+  describe('view switching', () => {
+    it('switches to year view and back to day view', async () => {
+      render(<CalendarInput value={initialValue} onChange={jest.fn()} />);
+
+      await user.click(screen.getByRole('button', { name: /year view/iu }));
+      expect(screen.getByRole('button', { name: /selected year/iu })).toBeInTheDocument();
+
+      await user.click(screen.getByRole('button', { name: /selected year/iu }));
+      expect(screen.getByRole('button', { name: /selected month/iu })).toBeInTheDocument();
+
+      await user.click(screen.getByRole('button', { name: /selected month/iu }));
+      expect(screen.getByRole('button', { name: /next month/iu })).toBeInTheDocument();
+    });
+  });
+});

package/src/dateLookup/DateLookup.test.tsx

@@ -198,28 +198,6 @@ describe('DateLookup', () => {
       expect(handleChange).toHaveBeenCalledWith(initialValue);
     });
   });
-
-  it('limits min value', async () => {
-    const min = new Date(initialValue);
-    min.setDate(min.getDate() - 1);
-    const handleChange = jest.fn();
-    await setupAndOpenWithMouse({ min, onChange: handleChange });
-
-    await user.keyboard('{ArrowLeft}{ArrowLeft}');
-
-    expect(handleChange).toHaveBeenCalledWith(min);
-  });
-
-  it('limits max value', async () => {
-    const max = new Date(initialValue);
-    max.setDate(max.getDate() + 1);
-    const handleChange = jest.fn();
-    await setupAndOpenWithMouse({ max, onChange: handleChange });
-
-    await user.keyboard('{ArrowRight}{ArrowRight}');
-
-    expect(handleChange).toHaveBeenCalledWith(max);
-  });
 });
 
 describe('DateLookup propTypes', () => {
@@ -296,75 +274,6 @@ describe('DateLookup (events)', () => {
       );
     };
 
-    it('switches to years', async () => {
-      const view = await setup();
-      await openDateLookup();
-      await clickDateButton();
-
-      expect(getActiveYearButton(view)).toHaveFocus();
-
-      await closeDateLookup(view);
-    });
-
-    it('has aria-label for 20 years', async () => {
-      const view = await setup();
-      await openDateLookup();
-      await clickDateButton();
-
-      expect(getButtonByAriaLabel('next 20 years')).toBeInTheDocument();
-      expect(getButtonByAriaLabel('previous 20 years')).toBeInTheDocument();
-
-      await closeDateLookup(view);
-    });
-
-    it('switches to months', async () => {
-      const view = await setup();
-      await openDateLookup();
-      await clickDateButton();
-      await userEvent.click(getActiveYearButton(view));
-
-      expect(getActiveMonthButton(view)).toHaveFocus();
-
-      await closeDateLookup(view);
-    });
-
-    it('has aria label for year', async () => {
-      const view = await setup();
-      await openDateLookup();
-      await clickDateButton();
-      await userEvent.click(getActiveYearButton(view));
-
-      expect(getButtonByAriaLabel('next year')).toBeInTheDocument();
-      expect(getButtonByAriaLabel('previous year')).toBeInTheDocument();
-
-      await closeDateLookup(view);
-    });
-
-    it('switches to days', async () => {
-      const view = await setup();
-      await openDateLookup();
-      await clickDateButton();
-      await userEvent.click(getActiveYearButton(view));
-      await userEvent.click(getActiveMonthButton(view));
-
-      expect(getActiveDayButton(view)).toHaveFocus();
-
-      await closeDateLookup(view);
-    });
-
-    it('has aria label for month', async () => {
-      const view = await setup();
-      await openDateLookup();
-      await clickDateButton();
-      await userEvent.click(getActiveYearButton(view));
-      await userEvent.click(getActiveMonthButton(view));
-
-      expect(getButtonByAriaLabel('next month')).toBeInTheDocument();
-      expect(getButtonByAriaLabel('previous month')).toBeInTheDocument();
-
-      await closeDateLookup(view);
-    });
-
     it('has aria label on selected date', async () => {
       const view = await setup();
       await openDateLookup();
@@ -440,44 +349,11 @@ describe('DateLookup (events)', () => {
     });
   };
 
-  const getDateButton = () => {
-    return screen.getByRole('button', {
-      name: /Go to 20 year view/i,
-    });
-  };
-
   const openDateLookup = async () => userEvent.click(getOpenButton(labelProp));
 
-  const clickDateButton = async () => userEvent.click(getDateButton());
-
   // Close dateLookup and removes events attached to documents.
   const closeDateLookup = async (view: RenderResult) => userEvent.click(view.container);
 
   // @ts-expect-error getClearButton returns node
   const clickClearButton = async (view: RenderResult) => userEvent.click(getClearButton(view));
-
-  const getActiveYearButton = (view: RenderResult) => {
-    return screen.getByRole('button', {
-      name: /selected year/i,
-      pressed: true,
-    });
-  };
-
-  const getActiveMonthButton = (view: RenderResult) => {
-    return screen.getByRole('button', {
-      name: /selected month/i,
-      pressed: true,
-    });
-  };
-
-  const getActiveDayButton = (view: RenderResult) => {
-    return screen.getByRole('button', {
-      name: /selected day/i,
-      pressed: true,
-    });
-  };
-
-  const getButtonByAriaLabel = (ariaLabel: string) => {
-    return screen.getByRole('button', { name: ariaLabel });
-  };
 });