@moda/om 16.1.1 → 16.2.0

package/src/components/Modal/Modal.test.tsx

@@ -1,28 +1,27 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { shallow } from 'enzyme';
 
 import { Modal } from './Modal';
 
 describe('Modal', () => {
   it('renders correctly', () => {
-    const component = shallow(<Modal onClose={() => {}}>Hello</Modal>);
-    expect(component.text()).toEqual('Hello');
+    render(<Modal onClose={() => {}}>Hello</Modal>);
+    expect(screen.getByText('Hello')).toBeVisible();
   });
 
   it('should only close when the modal wrapper is clicked', async () => {
     const onClose = jest.fn();
     const onClickButton = jest.fn();
-    const { getByTestId } = render(
+    render(
       <Modal data-testid='modal' onClose={onClose}>
         <button data-testid='button' onClick={onClickButton}>
           Click Me
         </button>
       </Modal>
     );
-    const modal = getByTestId('modal');
-    const button = getByTestId('button');
+    const modal = screen.getByTestId('modal');
+    const button = screen.getByTestId('button');
 
     await userEvent.click(button);
     expect(onClose).toBeCalledTimes(0);

package/src/components/ModalOverlay/ModalOverlay.test.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { ModalOverlay } from './ModalOverlay';
@@ -20,23 +20,23 @@ const ModalComponent: React.FC = () => {
 
 describe('ModalOverlay', () => {
   it('renders correctly', () => {
-    const { queryByText } = render(<ModalOverlay onClose={() => {}}>Hello</ModalOverlay>);
+    render(<ModalOverlay onClose={() => {}}>Hello</ModalOverlay>);
 
-    expect(queryByText('Hello')).not.toBeNull();
+    expect(screen.getByText('Hello')).toBeInTheDocument();
   });
 
   it('should open and close the modal', async () => {
-    const { getByTestId, queryByText } = render(<ModalComponent />);
+    render(<ModalComponent />);
 
     // Should not show by default
-    expect(queryByText('Modal Content')).toBeNull();
+    expect(screen.queryByText('Modal Content')).not.toBeInTheDocument();
 
     // Should show after clicking button
-    userEvent.click(getByTestId('button'));
-    await waitFor(() => expect(queryByText('Modal Content')).not.toBeNull());
+    userEvent.click(screen.getByTestId('button'));
+    await screen.findByText('Modal Content');
 
     // Should hide after clicking wrapper
-    userEvent.click(getByTestId('modal'));
-    await waitFor(() => expect(queryByText('Modal Content')).toBeNull());
+    userEvent.click(screen.getByTestId('modal'));
+    await waitFor(() => expect(screen.queryByText('Modal Content')).not.toBeInTheDocument());
   });
 });

package/src/components/Overlay/Overlay.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Overlay } from './Overlay';
 
 describe('Overlay', () => {
   it('renders correctly', () => {
     const text = 'test-Text';
-    const component = shallow(<Overlay>{text}</Overlay>);
-    expect(component.text()).toEqual(text);
+    render(<Overlay>{text}</Overlay>);
+    expect(screen.getByText(text)).toBeVisible();
   });
 });

package/src/components/Popover/Popover.test.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Popover } from './Popover';
 
 describe('Popover', () => {
-  it('renders correctly', () => {
-    const component = mount(
+  it('renders correctly', async () => {
+    render(
       <Popover content={<div>Secret</div>}>
         <span>Hover</span>
       </Popover>
     );
 
-    expect(component.html()).not.toContain('Secret');
-    component.simulate('mouseenter');
-    expect(component.html()).toContain('Secret');
+    expect(screen.queryByText('Secret')).not.toBeInTheDocument();
+
+    await userEvent.hover(screen.getByText('Hover'));
+
+    expect(screen.getByText('Secret')).toBeVisible();
   });
 });

package/src/components/PromoBanner/PromoBanner.test.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { PromoBanner } from './PromoBanner';
 
 describe('PromoBanner', () => {
   it('renders correctly', () => {
-    const component = mount(
+    render(
       <PromoBanner>
         <span>Hello</span>
       </PromoBanner>
     );
-    expect(component.text()).toEqual('Hello');
+    expect(screen.getByText('Hello')).toBeVisible();
   });
 });

package/src/components/RadioButton/RadioButton.test.tsx

@@ -1,20 +1,16 @@
 import React from 'react';
-import { mount } from 'enzyme';
-
+import { render, screen } from '@testing-library/react';
 import { RadioButton } from './RadioButton';
 
 describe('RadioButton', () => {
   it('renders correctly', () => {
-    const component = mount(<RadioButton />);
-    expect(component.html()).toEqual(
-      '<label tabindex="0" class="RadioButton"><span tabindex="-1" class="RadioButton__indicator RadioButton__indicator--unchecked"></span><input tabindex="-1" class="RadioButton__input" type="radio" role="radio" value=""></label>'
-    );
+    render(<RadioButton />);
+    expect(screen.getByRole('radio')).toBeVisible();
   });
 
   it('supports checked', () => {
-    const component = mount(<RadioButton checked readOnly />);
-    const html = component.html();
-    expect(html).toContain('class="RadioButton RadioButton--checked"');
-    expect(html).toContain('readonly="" value="" checked=""');
+    render(<RadioButton checked readOnly />);
+    expect(screen.getByRole('radio')).toBeVisible();
+    expect(screen.getByRole('radio')).toBeChecked();
   });
 });

package/src/components/SearchInput/SearchInput.test.tsx

@@ -1,13 +1,17 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { SearchInput } from './SearchInput';
 
 describe('SearchInput', () => {
-  it('clears the input when the button is clicked', () => {
-    const component = mount(<SearchInput value='Hello' />);
-    expect(component.find('input').getElement().props.value).toEqual('Hello');
-    component.find('button').simulate('click');
-    expect(component.find('input').getElement().props.value).not.toEqual('Hello');
+  it('clears the input when the button is clicked', async () => {
+    render(<SearchInput value='Hello' />);
+
+    expect(screen.getByRole('textbox')).toHaveValue('Hello');
+
+    await userEvent.click(screen.getByRole('button'));
+
+    expect(screen.getByRole('textbox')).toHaveValue('');
   });
 });

package/src/components/Select/Select.stories.tsx

@@ -34,7 +34,8 @@ export const Default = () => (
       { disabled: true, idRef: '4', label: 'Sort' },
       { idRef: '5', label: '' },
       { idRef: '5', label: '', error: 'Error' },
-      { idRef: '6', label: '', dropDirection: 'up' }
+      { idRef: '6', label: '', dropDirection: 'up' },
+      { idRef: '7', label: undefined, placeholder: 'Placeholder' }
     ]}
   >
     <Select label='Sort by' options={OPTIONS} onChange={action('onChange')} />

package/src/components/Select/Select.test.tsx

@@ -24,7 +24,7 @@ describe('Select', () => {
     const { container } = render(
       <Select idRef='1' name='name-1' label='Sort by' options={options} />
     );
-    const button = container.querySelector('#Select__value--1')!;
+    const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
     expect(container.innerHTML).toEqual(
       '<div id="Select--1" class="Select"><input id="1" name="name-1" type="hidden" value=""><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button><div class="SelectOptions Select__options Select__options--down"><ul class="SelectOptions__list" tabindex="-1" role="listbox" aria-labelledby="Select__label--1" aria-activedescendant="SelectOption--foo-1"><li class="SelectOption SelectOption--active" aria-label="Foo" aria-selected="false" role="option">Foo</li><li class="SelectOption" aria-label="Bar" aria-selected="false" role="option">Bar</li><li class="SelectOption SelectOption--disabled" aria-label="Baz" aria-selected="false" role="option">Baz</li></ul></div></div>'
@@ -42,7 +42,7 @@ describe('Select', () => {
         options={options}
       />
     );
-    const button = container.querySelector('#Select__value--1')!;
+    const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
     expect(container.innerHTML).toEqual(
       '<div id="Select--1" class="Select Select--disabled"><input id="1" name="name-1" type="hidden" value=""><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Clickable--disabled Select__value" disabled=""><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button></div>'
@@ -51,7 +51,7 @@ describe('Select', () => {
 
   it('calls onChange when selecting an option', async () => {
     const onChange = jest.fn();
-    const { container } = render(
+    render(
       <Select
         defaultValue={undefined}
         idRef='1'
@@ -61,7 +61,7 @@ describe('Select', () => {
         onChange={onChange}
       />
     );
-    const button = container.querySelector('#Select__value--1')!;
+    const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
     const option = screen.getByLabelText('Bar');
     await userEvent.click(option);
@@ -70,7 +70,7 @@ describe('Select', () => {
 
   it('does not call onChange when selecting a disabled option', async () => {
     const onChange = jest.fn();
-    const { container } = render(
+    render(
       <Select
         defaultValue={undefined}
         idRef='1'
@@ -80,7 +80,7 @@ describe('Select', () => {
         onChange={onChange}
       />
     );
-    const button = container.querySelector('#Select__value--1')!;
+    const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
     const option = screen.getByLabelText('Baz');
     await userEvent.click(option);
@@ -91,7 +91,7 @@ describe('Select', () => {
     const { container } = render(
       <Select idRef='1' name='name-1' label='Sort by' options={options} />
     );
-    const button = container.querySelector('#Select__value--1')!;
+    const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
     const option = screen.getByLabelText('Bar');
     await userEvent.click(option);
@@ -102,7 +102,7 @@ describe('Select', () => {
 
   it('renders correctly when there is no label', async () => {
     const { container } = render(<Select idRef='1' name='name-1' options={options} />);
-    const button = container.querySelector('#Select__value--1')!;
+    const button = screen.getByRole('button', { name: 'Select' });
     await userEvent.click(button);
     const option = screen.getByLabelText('Bar');
     await userEvent.click(option);

package/src/components/Select/Select.tsx

@@ -44,6 +44,7 @@ export const Select: React.FC<SelectProps> = ({
   name,
   onChange,
   options,
+  placeholder,
   searchable,
   shiftIconLeftwards = false,
   value,
@@ -116,7 +117,11 @@ export const Select: React.FC<SelectProps> = ({
           type='button'
           title='Select'
         >
-          <SelectLabel idRef={idRef} label={label} hasValue={focused != null || selected != null} />
+          <SelectLabel
+            idRef={idRef}
+            label={label || (selected === undefined ? placeholder : undefined)}
+            hasValue={focused != null || selected != null}
+          />
 
           {(focused ?? selected)?.label}
 

package/src/components/SelectableButton/SelectableButton.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { SelectableButton } from './SelectableButton';
 
 describe('SelectableButton', () => {
   it('renders correctly', () => {
-    const component = mount(<SelectableButton>Click me</SelectableButton>);
-    expect(component.text()).toEqual('Click me');
+    render(<SelectableButton>Click me</SelectableButton>);
+    expect(screen.getByText('Click me')).toBeVisible();
   });
 });

package/src/components/Stack/Stack.test.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Stack } from './Stack';
 
 describe('Stack', () => {
   it('renders correctly', () => {
-    const component = shallow(
+    render(
       <Stack space={6} direction='horizontal'>
         <div>Hello</div>
         <div>World</div>
       </Stack>
     );
 
-    expect(component.html()).toContain('Stack--horizontal-6');
-    expect(component.text()).toContain('HelloWorld');
+    expect(screen.getByText('Hello')).toBeVisible();
+    expect(screen.getByText('World')).toBeVisible();
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('Hello').parentNode).toHaveClass('Stack--horizontal-6');
   });
 });

package/src/components/Tabs/Tabs.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Tabs } from './Tabs';
 
@@ -18,10 +18,9 @@ describe('Tabs', () => {
   ];
 
   it('renders correctly with first tab displayed', () => {
-    const component = render(<Tabs tabs={testList} />);
+    render(<Tabs tabs={testList} />);
 
-    expect(component.html()).toEqual(
-      '<div class="TabList"><button class="Clickable Tab Tab--active">Tab 1</button><button class="Clickable Tab ">Tab 2</button></div><div class="TabPanels"><div class="TabPanel"><div class="test">I am a panel</div></div></div>'
-    );
+    expect(screen.getByRole('button', { name: 'Tab 1' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Tab 2' })).toBeVisible();
   });
 });

package/src/components/Tag/Tag.test.tsx

@@ -8,7 +8,7 @@ describe('Tag', () => {
     const onRemove = jest.fn();
     render(<Tag onRemove={onRemove}>Hello</Tag>);
 
-    expect(screen.getByText('Hello')).toBeTruthy();
+    expect(screen.getByText('Hello')).toBeInTheDocument();
 
     await userEvent.click(screen.getByRole('button'));
     expect(onRemove).toBeCalled();

package/src/components/Text/Text.test.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Text } from './Text';
 
 describe('Text', () => {
   it('renders correctly', () => {
-    const component = shallow(
+    render(
       <Text treatment='body2' color='money-good' family='serif'>
         Hello
       </Text>
     );
-    expect(component.html()).toEqual(
-      '<span class="Text Text--body2 Text--serif" style="color:rgb(4, 108, 0)">Hello</span>'
-    );
+    expect(screen.getByText('Hello')).toBeVisible();
   });
 });

package/src/components/TextInput/TextInput.test.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { TextInput } from './TextInput';
 
 describe('TextInput', () => {
   it('renders correctly', () => {
-    const component = shallow(<TextInput placeholder='Hello' />);
-    expect(component.html()).toEqual(
-      '<input class="TextInput" placeholder="Hello" aria-label="Hello"/>'
-    );
+    render(<TextInput placeholder='Hello' />);
+    expect(screen.getByRole('textbox')).toHaveValue('');
+    expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Hello');
   });
 });

package/src/components/Textarea/Textarea.test.tsx

@@ -1,34 +1,29 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Textarea } from './Textarea';
 
 describe('Textarea', () => {
   it('renders correctly', () => {
-    const component = shallow(<Textarea placeholder='Placeholder' defaultValue='Hello' />);
+    render(<Textarea placeholder='Placeholder' defaultValue='Hello' />);
 
-    expect(component.html()).toEqual(
-      '<textarea class="Textarea" placeholder="Placeholder" aria-label="Placeholder">Hello</textarea>'
-    );
+    expect(screen.getByRole('textbox')).toHaveValue('Hello');
+    expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Placeholder');
   });
 
   it('renders with an error', () => {
-    const component = shallow(
-      <Textarea placeholder='Placeholder' defaultValue='Hello' label='Label' error='Error' />
-    );
+    render(<Textarea placeholder='Placeholder' defaultValue='Hello' label='Label' error='Error' />);
 
-    expect(component.html()).toEqual(
-      '<textarea class="Textarea Textarea--error" placeholder="Placeholder" aria-label="Label">Hello</textarea>'
-    );
+    expect(screen.getByRole('textbox')).toHaveValue('Hello');
+    expect(screen.getByRole('textbox')).toHaveClass('Textarea--error');
   });
 
   it('renders with a className', () => {
-    const component = shallow(
+    render(
       <Textarea className='Custom' placeholder='Placeholder' defaultValue='Hello' label='Label' />
     );
 
-    expect(component.html()).toEqual(
-      '<textarea class="Textarea Custom" placeholder="Placeholder" aria-label="Label">Hello</textarea>'
-    );
+    expect(screen.getByRole('textbox')).toHaveValue('Hello');
+    expect(screen.getByRole('textbox')).toHaveClass('Custom');
   });
 });

package/src/components/Toast/Toast.test.tsx

@@ -12,7 +12,7 @@ describe('Toast', () => {
       </Toast>
     );
 
-    expect(screen.getByText('Hello')).toBeTruthy();
+    expect(screen.getByText('Hello')).toBeInTheDocument();
 
     await userEvent.click(screen.getByRole('button', { name: 'Remove' }));
     expect(onRemove).toBeCalled();

package/src/components/VerticalDivider/VerticalDivider.test.tsx

@@ -1,20 +1,19 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { VerticalDivider } from './VerticalDivider';
 
 describe('VerticalDivider', () => {
   it('renders correctly', () => {
-    const component = shallow(<VerticalDivider />);
+    render(<VerticalDivider aria-label='Divider' />);
 
-    expect(component.html()).toContain('<div class="VerticalDivider"></div>');
+    expect(screen.getByLabelText('Divider')).toBeVisible();
   });
 
   it('renders correctly - double', () => {
-    const component = shallow(<VerticalDivider double />);
+    render(<VerticalDivider aria-label='Divider' double />);
 
-    expect(component.html()).toContain(
-      '<div class="VerticalDivider VerticalDivider--double"></div>'
-    );
+    expect(screen.getByLabelText('Divider')).toBeVisible();
+    expect(screen.getByLabelText('Divider')).toHaveClass('VerticalDivider--double');
   });
 });