@transferwise/components 46.97.4 → 46.98.0

package/src/test-utils/jest.setup.ts

@@ -1,14 +1,10 @@
 import util from 'node:util';
 import '@testing-library/jest-dom';
 
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-import Enzyme from 'enzyme';
 import fetchMock from 'jest-fetch-mock';
 
 global.fetch = fetchMock as unknown as typeof global.fetch;
 
-Enzyme.configure({ adapter: new Adapter() });
-
 global.requestAnimationFrame = (callback: (time: number) => void): number => {
   callback(performance.now());
   return 0;

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.spec.js

@@ -1,17 +1,18 @@
-import { shallow } from 'enzyme';
-
-import { TextArea } from '../inputs/TextArea';
-
+import { render, screen, userEvent } from '../test-utils';
 import TextareaWithDisplayFormat from '.';
 
 describe('TextareaWithDisplayFormat', () => {
   const props = { displayPattern: '**-**', onChange: jest.fn() };
 
   it('should render input with value prop', () => {
-    const view = shallow(<TextareaWithDisplayFormat {...props} />)
-      .find('WithDisplayFormat')
-      .renderProp('render')({ value: 'test' });
+    render(<TextareaWithDisplayFormat {...props} value="test" />);
+    expect(screen.getByRole('textbox')).toHaveValue('te-st');
+  });
 
-    expect(view.find(TextArea).props('value')).toStrictEqual({ value: 'test' });
+  it('should format as you type', async () => {
+    render(<TextareaWithDisplayFormat {...props} />);
+    await userEvent.tab();
+    await userEvent.keyboard('1234');
+    expect(screen.getByRole('textbox')).toHaveValue('12-34');
   });
 });

package/src/typeahead/Typeahead.spec.tsx

@@ -0,0 +1,182 @@
+import { Field } from '../field/Field';
+import { mockMatchMedia, render, screen, fireEvent } from '../test-utils';
+import { wait } from '../test-utils/wait';
+import Typeahead from './Typeahead';
+
+mockMatchMedia();
+
+describe('Typeahead', () => {
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field id="test" label="Tags">
+        <Typeahead id="test" name="test" options={[{ label: 'Test' }]} onChange={() => {}} />
+      </Field>,
+    );
+    expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Tags/);
+  });
+
+  describe('when no options are provided', () => {
+    it('does not render a dropdown when no options and no footer are provided', () => {
+      render(
+        <Field id="test" label="Tags">
+          <Typeahead id="test" name="test" options={[]} onChange={() => {}} />
+        </Field>,
+      );
+      expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+    });
+    it('does render a dropdown when only a footer is provided', () => {
+      render(
+        <Field id="test" label="Tags">
+          <Typeahead id="test" name="test" options={[]} footer={<p>hello</p>} onChange={() => {}} />
+        </Field>,
+      );
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+  });
+
+  it('renders input with placeholder', () => {
+    render(
+      <Typeahead id="test" name="test" options={[]} placeholder="Type here" onChange={() => {}} />,
+    );
+    expect(screen.getByPlaceholderText('Type here')).toBeInTheDocument();
+  });
+
+  it('renders chips when multiple is true and selected has items', () => {
+    const initialValue = [{ label: 'Chip 1' }, { label: 'Chip 2' }];
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[]}
+        multiple
+        initialValue={initialValue}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByText('Chip 1')).toBeInTheDocument();
+    expect(screen.getByText('Chip 2')).toBeInTheDocument();
+  });
+
+  it('calls onChange when selecting an option', () => {
+    const onChange = jest.fn();
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[{ label: 'Option 1' }, { label: 'Option 2' }]}
+        minQueryLength={0}
+        onChange={onChange}
+      />,
+    );
+    const input = screen.getByRole('combobox');
+    fireEvent.change(input, { target: { value: 'Option 1' } });
+    fireEvent.click(screen.getByText('Option 1'));
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('shows clear button when there is a value', () => {
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[]}
+        initialValue={[{ label: 'Chip' }]}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole('button', { name: /clear/i })).toBeInTheDocument();
+  });
+
+  it('clears value when clear button is clicked', () => {
+    const onChange = jest.fn();
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[]}
+        initialValue={[{ label: 'Chip' }]}
+        onChange={onChange}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: /clear/i }));
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+
+  it('shows InlineAlert when alert prop is provided', () => {
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[]}
+        alert={{ message: 'Something went wrong', type: 'error' }}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+  });
+
+  it('calls onFocus when input is focused', () => {
+    const onFocus = jest.fn();
+    render(<Typeahead id="test" name="test" options={[]} onChange={() => {}} onFocus={onFocus} />);
+    fireEvent.focus(screen.getByRole('combobox'));
+    expect(onFocus).toHaveBeenCalled();
+  });
+
+  it('calls onInputChange when input value changes', () => {
+    const onInputChange = jest.fn();
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[]}
+        minQueryLength={0}
+        onChange={() => {}}
+        onInputChange={onInputChange}
+      />,
+    );
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'abc' } });
+    expect(onInputChange).toHaveBeenCalledWith('abc');
+  });
+
+  it('calls onSearch when input value changes', async () => {
+    const onSearch = jest.fn();
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[]}
+        minQueryLength={0}
+        onChange={() => {}}
+        onSearch={onSearch}
+      />,
+    );
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'abc' } });
+    // wait for debounce
+    await wait(500);
+    expect(onSearch).toHaveBeenCalledWith('abc');
+  });
+
+  it('adds a new chip when allowNew and multiple are true and separator is pasted', () => {
+    const onChange = jest.fn();
+    render(
+      <Typeahead
+        id="test"
+        name="test"
+        options={[]}
+        allowNew
+        multiple
+        chipSeparators={[',']}
+        onChange={onChange}
+      />,
+    );
+    const input = screen.getByRole('combobox');
+    fireEvent.paste(input, {
+      clipboardData: {
+        getData: () => 'foo,bar',
+      },
+    });
+    expect(onChange).toHaveBeenCalledWith(
+      expect.arrayContaining([{ label: 'foo' }, { label: 'bar' }]),
+    );
+  });
+});

package/src/typeahead/Typeahead.story.tsx

@@ -22,7 +22,7 @@ const validateOptionAsEmail = (option: TypeaheadOption) => {
   );
 };
 
-export default {
+const meta: Meta<typeof Typeahead> = {
   component: Typeahead,
   title: 'Forms/Typeahead',
   args: {
@@ -54,7 +54,8 @@ export default {
       options: [Size.MEDIUM, Size.LARGE],
     },
   },
-} satisfies Meta<typeof Typeahead>;
+};
+export default meta;
 
 export const Basic: Story = {
   render: function Render(args) {

package/src/typeahead/typeaheadInput/TypeaheadInput.spec.tsx

@@ -0,0 +1,103 @@
+import { render, fireEvent, screen } from '../../test-utils';
+import TypeaheadInput, { TypeaheadInputProps } from './TypeaheadInput';
+import { TypeaheadOption } from '../Typeahead';
+
+const defaultProps: TypeaheadInputProps<number> = {
+  id: 'test-id',
+  name: 'test-name',
+  typeaheadId: 'test-id',
+  value: '',
+  selected: [],
+  onChange: jest.fn(),
+  onKeyDown: jest.fn(),
+  onFocus: jest.fn(),
+  onPaste: jest.fn(),
+  autoComplete: 'off',
+  placeholder: 'Search...',
+  renderChip: jest.fn(),
+};
+
+describe('TypeaheadInput', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders input with placeholder', () => {
+    render(<TypeaheadInput {...defaultProps} />);
+    expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+  });
+
+  it('renders with given value', () => {
+    render(<TypeaheadInput {...defaultProps} value="hello" />);
+    expect(screen.getByDisplayValue('hello')).toBeInTheDocument();
+  });
+
+  it('calls onChange when input value changes', () => {
+    const onChange = jest.fn();
+    render(<TypeaheadInput {...defaultProps} onChange={onChange} />);
+    const input = screen.getByPlaceholderText('Search...');
+    fireEvent.change(input, { target: { value: 'test' } });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it('calls onFocus when input is focused', () => {
+    const onFocus = jest.fn();
+    render(<TypeaheadInput {...defaultProps} onFocus={onFocus} />);
+    const input = screen.getByPlaceholderText('Search...');
+    fireEvent.focus(input);
+    expect(onFocus).toHaveBeenCalled();
+  });
+
+  it('calls onPaste when input is pasted into', () => {
+    const onPaste = jest.fn();
+    render(<TypeaheadInput {...defaultProps} onPaste={onPaste} />);
+    const input = screen.getByPlaceholderText('Search...');
+    fireEvent.paste(input, { clipboardData: { getData: () => 'pasted' } });
+    expect(onPaste).toHaveBeenCalled();
+  });
+
+  it('calls onKeyDown when key is pressed', () => {
+    const onKeyDown = jest.fn();
+    render(<TypeaheadInput {...defaultProps} onKeyDown={onKeyDown} />);
+    const input = screen.getByPlaceholderText('Search...');
+    fireEvent.keyDown(input, { key: 'ArrowDown', code: 'ArrowDown' });
+    expect(onKeyDown).toHaveBeenCalled();
+  });
+
+  it('renders chips when multiple is true and selected has items', () => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+    const renderChip = jest.fn((chip, idx) => <span key={idx}>{chip.label}</span>);
+    const selected = [
+      { label: 'Chip 1', value: 1 },
+      { label: 'Chip 2', value: 2 },
+    ];
+    render(
+      <TypeaheadInput {...defaultProps} multiple selected={selected} renderChip={renderChip} />,
+    );
+    expect(screen.getByText('Chip 1')).toBeInTheDocument();
+    expect(screen.getByText('Chip 2')).toBeInTheDocument();
+  });
+
+  it('does not show placeholder if multiple is true and selected has items', () => {
+    const selected: TypeaheadOption<number>[] = [{ label: 'Chip', value: 1 }];
+    render(<TypeaheadInput<number> {...defaultProps} multiple selected={selected} />);
+    expect(screen.queryByPlaceholderText('Search...')).not.toBeInTheDocument();
+  });
+
+  it('applies input width style when multiple and selected has items', () => {
+    const selected = [{ label: 'Chip', value: 1 }];
+    const { container } = render(
+      <TypeaheadInput {...defaultProps} multiple selected={selected} value="test" />,
+    );
+    const input = container.querySelector('input');
+    expect(input?.style.width).not.toBe('');
+  });
+
+  it('sets aria attributes correctly', () => {
+    render(<TypeaheadInput {...defaultProps} dropdownOpen ariaActivedescendant="option-1" />);
+    const input = screen.getByRole('combobox');
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(input).toHaveAttribute('aria-haspopup', 'listbox');
+    expect(input).toHaveAttribute('aria-activedescendant', expect.stringContaining('option-1'));
+  });
+});

package/src/typeahead/util/highlight.spec.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '../../test-utils';
+import Highlight from './highlight';
+
+describe('Highlight', () => {
+  it('renders value with highlighted query (case-insensitive)', () => {
+    render(<Highlight value="Hello World" query="world" />);
+    expect(screen.getByText('World')).toBeInTheDocument();
+    expect(screen.getByText('World').tagName).toBe('STRONG');
+    expect(screen.getByText('Hello', { exact: false })).toBeInTheDocument();
+  });
+
+  it('renders value with highlighted query (case-sensitive in output)', () => {
+    render(<Highlight value="Hello World" query="HELLO" />);
+    expect(screen.getByText('Hello').tagName).toBe('STRONG');
+    expect(screen.getByText('World', { exact: false })).toBeInTheDocument();
+  });
+
+  it('renders value without highlight if query not found', () => {
+    render(<Highlight value="Hello World" query="foo" />);
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+    expect(screen.queryByRole('strong')).not.toBeInTheDocument();
+  });
+
+  it('renders value as is if query is empty', () => {
+    render(<Highlight value="Hello World" query="" />);
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+    expect(screen.queryByRole('strong')).not.toBeInTheDocument();
+  });
+
+  it('renders value as is if value is empty', () => {
+    render(<Highlight value="" query="test" />);
+    expect(screen.queryByText(/./)).not.toBeInTheDocument();
+    expect(screen.queryByRole('strong')).not.toBeInTheDocument();
+  });
+
+  it('wraps content in span if className is provided', () => {
+    const { container } = render(
+      <Highlight value="Hello World" query="world" className="highlighted" />,
+    );
+    expect(container.querySelector('span.highlighted')).toBeInTheDocument();
+    expect(container.querySelector('strong')).toBeInTheDocument();
+  });
+});

package/src/upload/Upload.css

@@ -29,3 +29,6 @@
 .upload-error-message .alert {
   min-width: 100px;
 }
+.np-theme-personal .droppable-dropping .droppable-complete-card {
+  display: none;
+}

package/src/upload/Upload.less

@@ -35,4 +35,10 @@
   .alert {
     min-width: 100px;
   }
-}
+}
+
+.np-theme-personal {
+  .droppable-dropping .droppable-complete-card  {
+    display: none;
+  }
+} 

package/src/upload/Upload.spec.tsx

@@ -6,6 +6,14 @@ import { postData } from './utils/postData';
 
 jest.mock('./utils/asyncFileRead');
 jest.mock('./utils/postData');
+jest.mock('commonmark', () => ({
+  Parser: jest.fn().mockImplementation(() => ({
+    parse: jest.fn(() => ({})),
+  })),
+  HtmlRenderer: jest.fn().mockImplementation(() => ({
+    render: jest.fn(() => ''),
+  })),
+}));
 
 const TEST_FILE = new File(['test content'], 'test.png', { type: 'image/png' });
 const INVALID_FILE = new File(['invalid content'], 'invalid.txt', { type: 'text/plain' });
@@ -76,6 +84,11 @@ describe('Upload Component', () => {
         dispatchEvent: jest.fn(),
       })),
     });
+    props.onStart.mockReset();
+    props.onSuccess.mockReset();
+    props.onFailure.mockReset();
+    props.onCancel.mockReset();
+    props.onChange.mockReset();
   });
 
   afterEach(async () => {
@@ -292,4 +305,54 @@ describe('Upload Component', () => {
     const errorIcon = await screen.findByLabelText(/Custom error label/i);
     expect(errorIcon).toBeInTheDocument();
   });
+
+  function runAnimationDelayTest(label: string, delay: number) {
+    test(`should respect a ${label} animationDelay`, async () => {
+      (asyncFileRead as jest.Mock).mockResolvedValue('mockBase64Image');
+      (postData as jest.Mock).mockResolvedValue('mockSuccessResponse');
+
+      const { container, unmount } = render(<Upload {...props} animationDelay={delay} />);
+
+      await act(async () => {
+        const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(TEST_FILE);
+        fireEvent.drop(droppableElement!, { dataTransfer });
+      });
+
+      // Advance half the delay, should still be processing
+      await act(async () => {
+        jest.advanceTimersByTime(delay / 2);
+      });
+      expect(container.querySelector('.droppable-processing')).toBeInTheDocument();
+      expect(container.querySelector('.droppable-complete')).not.toBeInTheDocument();
+
+      // Advance the rest of the delay
+      await act(async () => {
+        jest.advanceTimersByTime(delay / 2 + 10);
+      });
+      expect(container.querySelector('.droppable-complete')).toBeInTheDocument();
+      expect(container.querySelector('.droppable-processing')).not.toBeInTheDocument();
+
+      unmount();
+    });
+  }
+
+  runAnimationDelayTest('short', 50);
+  runAnimationDelayTest('long', 500);
+
+  test('should handle disabled state correctly', async () => {
+    const { container } = render(<Upload {...props} usDisabled />);
+    const droppableElement = await waitFor(() => container.querySelector('.droppable-area'));
+
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(TEST_FILE);
+
+    await act(async () => {
+      fireEvent.drop(droppableElement!, { dataTransfer });
+    });
+
+    expect(container.querySelector('.droppable-processing')).not.toBeInTheDocument();
+    expect(props.onStart).not.toHaveBeenCalled();
+  });
 });

package/src/upload/Upload.story.tsx

@@ -22,7 +22,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Basic = {
+export const Basic: Story = {
   args: {
     maxSize: MAX_SIZE_DEFAULT,
     usAccept: 'image/*',
@@ -38,54 +38,3 @@ export const Basic = {
     onCancel: fn(),
   },
 } satisfies Story;
-
-export const MaxSizes = () => {
-  const bKB = 1024;
-  const bMB = 1024 * bKB;
-
-  const dKB = 1000;
-  const dMB = 1000 * dKB;
-
-  const binarySizes = [
-    10 * bMB,
-    5 * bMB,
-    1 * bMB,
-    500 * bKB,
-    100 * bKB,
-    50 * bKB,
-    10 * bKB,
-    5 * bKB,
-    1 * bKB,
-  ];
-
-  const decimalSizes = [
-    10 * dMB,
-    5 * dMB,
-    1 * dMB,
-    500 * dKB,
-    100 * dKB,
-    50 * dKB,
-    10 * dKB,
-    5 * dKB,
-    1 * dKB,
-  ];
-
-  return (
-    <div style={{ display: 'flex', gap: '1rem' }}>
-      <div style={{ flex: 1 }}>
-        {binarySizes.map((maxSize) => (
-          <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
-            <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
-          </Field>
-        ))}
-      </div>
-      <div style={{ flex: 1 }}>
-        {decimalSizes.map((maxSize) => (
-          <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
-            <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
-          </Field>
-        ))}
-      </div>
-    </div>
-  );
-};

package/src/upload/Upload.tests.story.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import Upload from '.';
+import { MAX_SIZE_DEFAULT } from './Upload';
+import { Field } from '../field/Field';
+
+const meta = {
+  component: Upload,
+  title: 'Forms/Upload/Tests',
+  argTypes: {
+    maxSize: {
+      control: {
+        type: 'number',
+        min: 0,
+      },
+    },
+  },
+} satisfies Meta<typeof Upload>;
+
+export default meta;
+
+export const MaxSizes = () => {
+  const bKB = 1024;
+  const bMB = 1024 * bKB;
+
+  const dKB = 1000;
+  const dMB = 1000 * dKB;
+
+  const binarySizes = [
+    10 * bMB,
+    5 * bMB,
+    1 * bMB,
+    500 * bKB,
+    100 * bKB,
+    50 * bKB,
+    10 * bKB,
+    5 * bKB,
+    1 * bKB,
+  ];
+
+  const decimalSizes = [
+    10 * dMB,
+    5 * dMB,
+    1 * dMB,
+    500 * dKB,
+    100 * dKB,
+    50 * dKB,
+    10 * dKB,
+    5 * dKB,
+    1 * dKB,
+  ];
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <div style={{ flex: 1 }}>
+        {binarySizes.map((maxSize) => (
+          <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
+            <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
+          </Field>
+        ))}
+      </div>
+      <div style={{ flex: 1 }}>
+        {decimalSizes.map((maxSize) => (
+          <Field key={maxSize} label={`Max size: ${maxSize} bytes`}>
+            <Upload usLabel="Pick a file, any file" maxSize={maxSize} />
+          </Field>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export const AllVariants = () => {
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      <div style={{ flex: 1 }}>
+        <Field key="small" label="Small Upload">
+          <Upload usLabel="Pick a file, any file" size="sm" />
+        </Field>
+        <Field key="medium" label="Medium Upload">
+          <Upload usLabel="Pick a file, any file" size="md" />
+        </Field>
+        <Field key="large" label="Large Upload">
+          <Upload usLabel="Pick a file, any file" size="lg" />
+        </Field>
+        <Field key="disabled" label="Disabled Upload">
+          <Upload usLabel="Pick a file, any file" usDisabled />
+        </Field>
+      </div>
+    </div>
+  );
+};