@transferwise/components 0.0.0-experimental-4394f5b → 0.0.0-experimental-4530892

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-4394f5b",
+  "version": "0.0.0-experimental-4530892",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/dateInput/DateInput.spec.tsx

@@ -1,19 +1,17 @@
-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';
+import { mockMatchMedia, mockResizeObserver, render, userEvent, screen } from '../test-utils';
 
-describe('Date Input Component', () => {
-  const props: DateInputProps = { onChange: jest.fn() };
+mockMatchMedia();
+mockResizeObserver();
 
-  beforeEach(() => {
-    mockMatchMedia();
-    mockResizeObserver();
-  });
+describe('Date Input Component', () => {
+  const props: DateInputProps = {
+    onChange: jest.fn(),
+    onFocus: jest.fn(),
+    onBlur: jest.fn(),
+  };
 
-  afterEach(() => {
-    jest.resetAllMocks();
-  });
+  afterEach(jest.clearAllMocks);
 
   describe('when initialised without a model', () => {
     it('sets day field to empty', () => {
@@ -104,7 +102,7 @@ describe('Date Input Component', () => {
       await userEvent.click(monthSelect);
       await userEvent.click(screen.getByRole('option', { name: /January/ }));
       expect(props.onChange).toHaveBeenCalledWith(null);
-    });
+    }, 10_000);
 
     it('calls the onChange callback with null when changing the year but nothing else is filled out', async () => {
       render(<DateInput {...props} />);
@@ -126,7 +124,7 @@ describe('Date Input Component', () => {
       await userEvent.click(monthSelect);
       await userEvent.click(screen.getByRole('option', { name: /January/ }));
       expect(props.onChange).toHaveBeenCalledWith('2022-01-01');
-    });
+    }, 10_000);
 
     it('calls the onChange callback with the correct value when changing the year', async () => {
       render(<DateInput {...props} value="0122-12-1" />);
@@ -178,19 +176,40 @@ describe('Date Input Component', () => {
     });
   });
 
-  describe('when switching from day input to year input', () => {
-    it('does not call onBlur nor onFocus', () => {
-      const onFocus = jest.fn();
-      const onBlur = jest.fn();
+  describe('propagating focus and blur callbacks', () => {
+    it('should propagate if focusing from or blurring to external component', async () => {
+      render(
+        <>
+          <button type="button">starting point</button>
+          <DateInput {...props} />
+        </>,
+      );
+      await userEvent.tab();
+      await userEvent.tab();
+      await userEvent.tab({ shift: true });
+      expect(props.onFocus).toHaveBeenCalledTimes(1);
+      expect(props.onBlur).toHaveBeenCalledTimes(1);
+    });
 
-      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();
+    it('should not propagate if switching between internals', async () => {
+      render(
+        <>
+          <button type="button">external button</button>
+          <DateInput {...props} />
+        </>,
+      );
+      const externalButton = screen.getByRole('button', { name: 'external button' });
+
+      await userEvent.click(externalButton);
+      await userEvent.click(screen.getByRole('textbox', { name: /day/i }));
+      await userEvent.click(screen.getByRole('textbox', { name: /year/i }));
+      await userEvent.click(externalButton);
+
+      // 1 call is caused by the initial switch to the component,
+      // as reflected in `should propagate if focusing from or
+      // blurring to external component` test
+      expect(props.onFocus).toHaveBeenCalledTimes(1);
+      expect(props.onBlur).toHaveBeenCalledTimes(1);
     });
   });