@transferwise/components 0.0.0-experimental-2aa3886 → 0.0.0-experimental-7b99003

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-2aa3886",
+  "version": "0.0.0-experimental-7b99003",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -43,7 +43,6 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@cfaester/enzyme-adapter-react-18": "0.8.0",
     "@formatjs/cli": "^6.7.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
@@ -72,7 +71,6 @@
     "@tsconfig/recommended": "^1.0.8",
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.9",
-    "@types/enzyme": "^3.10.19",
     "@types/jest": "^29.5.14",
     "@types/lodash": "4.17.17",
     "@types/lodash.clamp": "^4.0.9",
@@ -83,7 +81,6 @@
     "@wise/art": "^2.21.1",
     "@wise/eslint-config": "^12.3.0",
     "babel-plugin-formatjs": "^10.5.38",
-    "enzyme": "^3.11.0",
     "eslint": "^9.27.0",
     "gulp": "^5.0.0",
     "jest": "^29.7.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/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/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/typeahead/Typeahead.rtl.spec.tsx

@@ -1,54 +0,0 @@
-import { Field } from '../field/Field';
-import { mockMatchMedia, render, screen } from '../test-utils';
-import Typeahead from './Typeahead';
-import { createIntl, createIntlCache } from 'react-intl';
-import messages from '../i18n';
-import { DEFAULT_LANG, DEFAULT_LOCALE } from '../common';
-
-mockMatchMedia();
-
-const cache = createIntlCache();
-const intl = createIntl({ locale: DEFAULT_LOCALE, messages: messages[DEFAULT_LANG] }, cache);
-
-describe('Typeahead', () => {
-  it('supports `Field` for labeling', () => {
-    render(
-      <Field id="test" label="Tags">
-        <Typeahead
-          id="test"
-          name="test"
-          options={[{ label: 'Test' }]}
-          intl={intl}
-          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={[]} intl={intl} 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={[]}
-            intl={intl}
-            footer={<p>hello</p>}
-            onChange={() => {}}
-          />
-        </Field>,
-      );
-      expect(screen.getByRole('menu')).toBeInTheDocument();
-    });
-  });
-});

package/src/typeahead/Typeahead.spec.js

@@ -1,404 +0,0 @@
-import { mount } from 'enzyme';
-import doTimes from 'lodash.times';
-import { mockMatchMedia } from '../test-utils';
-
-import { InlineAlert } from '..';
-import { Sentiment } from '../common';
-import { fakeEvent, fakeKeyDownEventForKey } from '../common/fakeEvents';
-
-import Typeahead from './Typeahead';
-
-mockMatchMedia();
-
-const defaultLocale = 'en-GB';
-jest.mock('react-intl', () => {
-  const mockedIntl = {
-    locale: defaultLocale,
-    formatMessage: (id) => String(id),
-  };
-  return {
-    injectIntl: (Component) => (props) => <Component {...props} intl={mockedIntl} />,
-    defineMessages: (translations) => translations,
-    useIntl: () => mockedIntl,
-  };
-});
-
-describe('Typeahead', () => {
-  let component;
-  let props;
-  const closeButton = () => component.find('.input-group-addon button');
-  const formGroup = () => component.find('.form-group');
-  const input = () => component.find('input');
-  const chip = () => component.find('.np-chip');
-  const option = () => component.find('.dropdown-item');
-  const menu = () => component.find('.dropdown');
-
-  beforeEach(() => {
-    props = {
-      id: 'test',
-      onChange: () => {},
-      name: 'test',
-      options: [
-        {
-          label: 'Test',
-        },
-        {
-          label: 'Test1',
-        },
-        {
-          label: 'Test2',
-        },
-        {
-          label: 'Test3',
-        },
-      ],
-    };
-
-    component = mount(<Typeahead {...props} />);
-  });
-
-  it('renders addon', () => {
-    expect(component.find('#test-addon')).toHaveLength(0);
-    component.setProps({ addon: <div id="test-addon" /> });
-    expect(component.find('#test-addon')).toHaveLength(1);
-  });
-
-  it('renders clear button', () => {
-    component.setProps({
-      clearable: true,
-    });
-    input().simulate('change', { target: { value: 'test' } });
-
-    expect(closeButton()).toHaveLength(1);
-  });
-
-  it('splits pasted value correctly', () => {
-    const chips = ['test', 'test2', 'test3'];
-    const event = {
-      preventDefault: jest.fn(),
-      clipboardData: {
-        getData: () => chips.join(', '),
-      },
-    };
-
-    component.setProps({
-      allowNew: true,
-      multiple: true,
-      chipSeparators: [',', ' '],
-    });
-
-    input().simulate('paste', event);
-    const renderedChips = chip().map((chipNode) => chipNode.text());
-
-    expect(renderedChips.every((label, idx) => chips[idx] === label)).toBe(true);
-    expect(renderedChips).toHaveLength(chips.length);
-    expect(event.preventDefault).toHaveBeenCalledTimes(1);
-  });
-
-  it('removes last selected value when backspace clicked on empty input', () => {
-    const event = {
-      key: 'Backspace',
-    };
-
-    component.setProps({
-      multiple: true,
-    });
-
-    expect(chip()).toHaveLength(0);
-
-    input().simulate('change', { target: { value: 'test' } });
-    option().at(0).simulate('click', fakeEvent());
-
-    expect(chip()).toHaveLength(1);
-
-    input().simulate('keyDown', event);
-
-    expect(chip()).toHaveLength(0);
-  });
-
-  it('does not remove last selected value when backspace clicked on non-empty input', () => {
-    const event = {
-      key: 'Backspace',
-    };
-
-    component.setProps({
-      multiple: true,
-    });
-
-    expect(chip()).toHaveLength(0);
-
-    input().simulate('change', { target: { value: 'test' } });
-    option().at(0).simulate('click', fakeEvent());
-
-    expect(chip()).toHaveLength(1);
-
-    input().simulate('change', { target: { value: 'test' } });
-    input().simulate('keyDown', event);
-
-    expect(chip()).toHaveLength(1);
-  });
-
-  it('adds new value as selected and clears the input when separator is entered', () => {
-    const event = {
-      key: ',',
-      preventDefault: jest.fn(),
-    };
-    const text = 'test';
-
-    component.setProps({
-      multiple: true,
-      allowNew: true,
-      showSuggestions: false,
-      chipSeparators: [','],
-    });
-
-    input().simulate('change', { target: { value: text } });
-    input().simulate('keyDown', event);
-
-    expect(chip().text()).toStrictEqual(text);
-    expect(event.preventDefault).toHaveBeenCalledTimes(1);
-  });
-
-  it('adds new value as selected and clears the input when Enter is pressed', () => {
-    const event = {
-      key: 'Enter',
-      preventDefault: jest.fn(),
-    };
-    const text = 'test';
-
-    component.setProps({
-      multiple: true,
-      allowNew: true,
-      showSuggestions: false,
-      chipSeparators: [','],
-    });
-
-    input().simulate('change', { target: { value: text } });
-    input().simulate('keyDown', event);
-
-    expect(chip().text()).toStrictEqual(text);
-    expect(event.preventDefault).toHaveBeenCalledTimes(1);
-  });
-
-  it('adds new value as selected and clears the input when Tab is pressed', () => {
-    const event = {
-      key: 'Tab',
-      preventDefault: jest.fn(),
-    };
-    const text = 'test';
-
-    component.setProps({
-      multiple: true,
-      allowNew: true,
-      showSuggestions: false,
-      chipSeparators: [','],
-    });
-
-    input().simulate('change', { target: { value: text } });
-    input().simulate('keyDown', event);
-
-    expect(chip().text()).toStrictEqual(text);
-    expect(event.preventDefault).toHaveBeenCalledTimes(1);
-  });
-
-  it('clears typeahead when clear button is clicked', () => {
-    const event = {
-      key: ',',
-      preventDefault: jest.fn(),
-    };
-
-    const query = 'test';
-
-    component.setProps({
-      multiple: true,
-      allowNew: true,
-      showSuggestions: false,
-      chipSeparators: [','],
-      clearable: true,
-    });
-
-    input().simulate('change', { target: { value: query } });
-    input().simulate('keyDown', event);
-    input().simulate('change', { target: { value: query } });
-
-    expect(chip()).toHaveLength(1);
-    expect(input().getDOMNode().value).toBe(query);
-
-    closeButton().simulate('click', fakeEvent());
-    expect(chip()).toHaveLength(0);
-    expect(input().getDOMNode().value).toBe('');
-  });
-
-  it('moves selected items when down and up keys pressed', () => {
-    doTimes(3, () => input().simulate('keyDown', fakeKeyDownEventForKey('ArrowDown')));
-
-    expect(option().at(2).parent().is('.tw-dropdown-item--focused')).toBe(true);
-
-    input().simulate('keyDown', fakeKeyDownEventForKey('ArrowUp'));
-    expect(option().at(1).parent().is('.tw-dropdown-item--focused')).toBe(true);
-
-    doTimes(5, () => input().simulate('keyDown', fakeKeyDownEventForKey('ArrowDown')));
-    expect(option().last().parent().is('.tw-dropdown-item--focused')).toBe(true);
-  });
-
-  it('adds new value as selected and clears the input when no option is highlighted and enter is pressed', () => {
-    const event = {
-      key: 'Enter',
-      preventDefault: jest.fn(),
-    };
-    const text = 'test';
-
-    component.setProps({
-      multiple: true,
-      allowNew: true,
-      chipSeparators: [','],
-    });
-
-    input().simulate('change', { target: { value: text } });
-    input().simulate('keyDown', event);
-
-    expect(chip().text()).toStrictEqual(text);
-    expect(event.preventDefault).toHaveBeenCalledTimes(1);
-  });
-
-  it('sets aria-activedescendant correctly based on focus', () => {
-    const inputElement = input().getDOMNode();
-
-    doTimes(3, () => input().simulate('keyDown', fakeKeyDownEventForKey('ArrowDown')));
-
-    expect(inputElement).toHaveAttribute('aria-activedescendant', 'menu-test option-Test2');
-  });
-
-  it('displays alert when alert is provided and chips are valid or alert type is error', () => {
-    const event = {
-      key: 'Enter',
-      preventDefault: jest.fn(),
-    };
-    const text = 'test';
-
-    expect(component.find(InlineAlert)).toHaveLength(0);
-    expect(formGroup().hasClass('has-error')).toBe(false);
-    component.setProps({
-      validateChip: () => {
-        return false;
-      },
-      allowNew: true,
-      alert: {
-        message: 'test',
-        type: Sentiment.ERROR,
-      },
-    });
-
-    expect(formGroup().hasClass('has-error')).toBe(true);
-    expect(component.find(InlineAlert)).toHaveLength(1);
-
-    input().simulate('change', { target: { value: text } });
-    input().simulate('keyDown', event);
-
-    expect(formGroup().hasClass('has-error')).toBe(true);
-    expect(component.find(InlineAlert)).toHaveLength(1);
-    component.setProps({
-      alert: {
-        message: 'test',
-        type: Sentiment.WARNING,
-      },
-    });
-
-    expect(formGroup().hasClass('has-error')).toBe(true);
-    expect(component.find(InlineAlert)).toHaveLength(0);
-
-    closeButton().simulate('click', fakeEvent());
-
-    expect(formGroup().hasClass('has-error')).toBe(false);
-    expect(formGroup().hasClass('has-warning')).toBe(true);
-    expect(component.find(InlineAlert)).toHaveLength(1);
-  });
-
-  it('allows supplying options with arbitrary data that will be included with the onChange callback', () => {
-    const text = 'test';
-    const options = [
-      {
-        label: 'label 1',
-        note: 'note-1',
-        secondary: 'secondary-1',
-        value: { id: 123, name: 'Neptune' },
-      },
-    ];
-    let selectedOption;
-
-    component.setProps({
-      onChange: (selections) => {
-        selectedOption = selections[0];
-      },
-      options,
-    });
-
-    input().simulate('change', { target: { value: text } });
-    option().at(0).simulate('click', fakeEvent());
-    expect(selectedOption).toStrictEqual({
-      label: 'label 1',
-      note: 'note-1',
-      secondary: 'secondary-1',
-      value: { id: 123, name: 'Neptune' },
-    });
-  });
-
-  describe('menu', () => {
-    it('should render footer', () => {
-      component.setProps({
-        footer: <div id="footer">footer</div>,
-      });
-
-      expect(component.find('#footer')).toHaveLength(1);
-    });
-
-    it('renders all options', () => {
-      const options = option().map((optNode) => optNode.text());
-      expect(options).toHaveLength(props.options.length);
-      expect(options.every((label, i) => label === props.options[i].label)).toBe(true);
-    });
-
-    it('renders dropdown-menu if has options', () => {
-      expect(component.find('.dropdown-menu')).toHaveLength(1);
-      component.setProps({ options: [] });
-      expect(component.find('.dropdown-menu')).toHaveLength(0);
-    });
-
-    it('does not render new option if showNewEntry is false', () => {
-      component.setProps({
-        allowNew: true,
-        showNewEntry: false,
-      });
-      input().simulate('change', { target: { value: 'check' } });
-
-      const options = option().map((optNode) => optNode.text());
-      expect(options).toHaveLength(props.options.length);
-    });
-
-    it('renders new option if showNewEntry is true', () => {
-      component.setProps({
-        allowNew: true,
-        showNewEntry: true,
-      });
-      input().simulate('change', { target: { value: 'check' } });
-
-      const options = option().map((optNode) => optNode.text());
-      expect(options).toHaveLength(props.options.length + 1);
-    });
-
-    it('does not show options if query is too short', () => {
-      expect(menu().is('.open')).toBe(false);
-      input().simulate('change', { target: { value: 'test' } });
-      expect(menu().is('.open')).toBe(true);
-    });
-
-    it('sets aria-expanded to true when options are shown', () => {
-      expect(input().prop('aria-expanded')).toBe(false);
-      // we don't want aria-expanded to be true on focus or before 3 characters are entered (that's when the menu is shown)
-      input().simulate('change', { target: { value: 'aa' } });
-      expect(input().prop('aria-expanded')).toBe(false);
-      input().simulate('change', { target: { value: 'aaa' } });
-      expect(input().prop('aria-expanded')).toBe(true);
-    });
-  });
-});

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

@@ -1,74 +0,0 @@
-import { shallow } from 'enzyme';
-
-import { Input } from '../../inputs/Input';
-
-import TypeaheadInput from './TypeaheadInput';
-
-describe('Typeahead input', () => {
-  let component;
-  let props;
-
-  const inputWrapper = () => component.find('.typeahead__input-wrapper');
-  const input = () => component.find(Input);
-
-  beforeEach(() => {
-    props = {
-      name: 'test',
-      typeaheadId: 'test',
-      multiple: false,
-      value: '',
-      renderChip: jest.fn(),
-      onKeyDown: jest.fn(),
-      onFocus: jest.fn(),
-      onPaste: jest.fn(),
-      onChange: jest.fn(),
-      autoComplete: 'off',
-      selected: [],
-    };
-
-    component = shallow(<TypeaheadInput {...props} />);
-  });
-
-  it('renders single input when multiple is false', () => {
-    expect(component.children()).toHaveLength(0);
-    expect(component.is(Input)).toBe(true);
-  });
-
-  it('renders chips when provided', () => {
-    const selected = [{ label: 'test1' }, { label: 'test2' }];
-    component.setProps({
-      multiple: true,
-      selected,
-      renderChip: jest.fn(({ label }, idx) => <span key={idx}>{label}</span>),
-    });
-
-    expect(inputWrapper().find('span')).toHaveLength(selected.length);
-  });
-
-  it('adds aria-controls prop if dropdown is open', () => {
-    expect(component.prop('aria-controls')).toBeUndefined();
-    component.setProps({ dropdownOpen: true });
-    expect(component.prop('aria-controls')).toBe('menu-test');
-  });
-
-  it('passes all callbacks to input', () => {
-    const event = {};
-    const extraProps = {
-      multiple: true,
-      value: '',
-      onKeyDown: jest.fn(),
-      onBlur: jest.fn(),
-      onFocus: jest.fn(),
-      onPaste: jest.fn(),
-    };
-    component.setProps(extraProps);
-
-    input().simulate('focus', event);
-    input().simulate('paste', event);
-    input().simulate('keyDown', event);
-    const inputProps = input().props();
-    expect(inputProps.onKeyDown).toHaveBeenCalledWith(event);
-    expect(inputProps.onFocus).toHaveBeenCalledWith(event);
-    expect(inputProps.onPaste).toHaveBeenCalledWith(event);
-  });
-});

package/src/typeahead/typeaheadOption/TypeaheadOption.spec.js

@@ -1,75 +0,0 @@
-import { shallow, mount } from 'enzyme';
-
-import { fakeEvent } from '../../common/fakeEvents';
-
-import TypeaheadOption from './TypeaheadOption';
-import Highlight from '../util/highlight';
-
-describe('Typeahead Option', () => {
-  let props;
-  let component;
-
-  const labelHighlight = () => component.find(Highlight);
-  const noteSpan = () => component.find('.np-text-body-default.m-l-1');
-  const secondaryTextHighlight = () => component.find('.np-text-body-default.text-ellipsis > span');
-  const dropdownItem = () => component.find('.dropdown-item');
-
-  beforeEach(() => {
-    props = {
-      option: {
-        label: 'test',
-      },
-    };
-
-    component = mount(<TypeaheadOption {...props} />);
-  });
-
-  it('renders a label', () => {
-    const label = 'test';
-    component.setProps({ option: { label } });
-    expect(labelHighlight().text()).toStrictEqual(label);
-  });
-
-  it('renders a note', () => {
-    const label = 'test';
-    const note = 'test note';
-    component.setProps({ option: { label, note } });
-    expect(noteSpan().text()).toStrictEqual(note);
-  });
-
-  it('renders a seconday text', () => {
-    const label = 'test';
-    const secondary = 'test note';
-    component.setProps({ option: { label, secondary } });
-    expect(secondaryTextHighlight().text()).toStrictEqual(secondary);
-  });
-
-  it('highlights when selected', () => {
-    component = shallow(<TypeaheadOption {...props} />);
-    component.setProps({
-      selected: true,
-    });
-
-    expect(component.is('.tw-dropdown-item--focused')).toBe(true);
-  });
-
-  it('expect aria-selected to be true', () => {
-    component = shallow(<TypeaheadOption {...props} />);
-    component.setProps({
-      selected: true,
-    });
-
-    expect(component.prop('aria-selected')).toBe('true');
-  });
-
-  it('calls onClick when clicked', () => {
-    const onClick = jest.fn();
-    component.setProps({
-      onClick,
-    });
-
-    dropdownItem().simulate('click', fakeEvent);
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-});

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

@@ -1,34 +0,0 @@
-import { mount } from 'enzyme';
-
-import Highlight from './highlight';
-
-describe('Typeahead input', () => {
-  const highlighted = (node) => node.find('strong');
-  const getTextFromNodes = (nodes) => nodes.reduce((value, node) => value + node.text(), '');
-
-  it('highlights part of label that matches the query', () => {
-    const query = 'test';
-    const label = `this is a ${query} label`;
-    const result = mount(<Highlight value={label} query={query} />);
-
-    expect(highlighted(result).text()).toStrictEqual(query);
-
-    expect(getTextFromNodes(result)).toBe(label);
-  });
-
-  it('does not change text if query is not present in it', () => {
-    const query = 'test';
-    const label = `this is a label`;
-    const result = mount(<Highlight value={label} query={query} />);
-
-    expect(result.text()).toBe(label);
-  });
-
-  it('highlights whole label that matches the query', () => {
-    const query = 'test';
-    const label = query;
-    const result = mount(<Highlight value={label} query={query} />);
-
-    expect(highlighted(result).text()).toStrictEqual(query);
-  });
-});