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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-cb1ee1c",
+  "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);
 
@@ -97,24 +97,11 @@ describe('Date Input Component', () => {
     });
 
     it('calls the onChange callback with null when changing the month but nothing else is filled out', async () => {
-      console.time("t1");
       render(<DateInput {...props} />);
       const monthSelect = screen.getByLabelText(/month/i);
-      console.log(monthSelect ? '>>> monthSelect' : '>>> no monthSelect');
-      console.log('----------------------');
       await userEvent.click(monthSelect);
-
-      const january = screen.getByRole('option', { name: /January/ });
-      console.log(january? '>>> january' : '>>> no january');
-      console.log('----------------------');
-      await userEvent.click(january);
-
-      // @ts-expect-error test
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      console.log(props.onChange?.mock?.calls);
+      await userEvent.click(screen.getByRole('option', { name: /January/ }));
       expect(props.onChange).toHaveBeenCalledWith(null);
-
-      console.timeEnd("t1");
     }, 10_000);
 
     it('calls the onChange callback with null when changing the year but nothing else is filled out', async () => {
@@ -132,23 +119,11 @@ describe('Date Input Component', () => {
     });
 
     it('calls the onChange callback with the correct value when changing the month', async () => {
-      console.time("t2");
       render(<DateInput {...props} value="2022-12-1" />);
       const monthSelect = screen.getByRole('combobox', { name: /month/i });
-      console.log(monthSelect ? '>>> monthSelect' : '>>> no monthSelect');
-      console.log('----------------------');
       await userEvent.click(monthSelect);
-
-      const january = screen.getByRole('option', { name: /January/ });
-      console.log(january? '>>> january' : '>>> no january');
-      console.log('----------------------');
-      await userEvent.click(january);
-
-      // @ts-expect-error test
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-      console.log(props.onChange.mock.calls);
+      await userEvent.click(screen.getByRole('option', { name: /January/ }));
       expect(props.onChange).toHaveBeenCalledWith('2022-01-01');
-      console.timeEnd("t2");
     }, 10_000);
 
     it('calls the onChange callback with the correct value when changing the year', async () => {
@@ -201,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);
     });
   });