@transferwise/components 0.0.0-experimental-b684c07 → 0.0.0-experimental-fe1dc6d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-b684c07",
+  "version": "0.0.0-experimental-fe1dc6d",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
     "@transferwise/less-config": "3.1.0",
-    "@transferwise/neptune-css": "14.20.1",
-    "@wise/components-theming": "1.6.1"
+    "@wise/components-theming": "1.6.1",
+    "@transferwise/neptune-css": "14.20.1"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.13.1",

package/src/dateInput/DateInput.spec.tsx

@@ -1,15 +1,15 @@
-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.clearAllMocks);
 
@@ -176,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);
     });
   });