@moda/om 16.0.0 → 16.2.0

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');
   });
 });

package/src/hooks/useKeyboardListNavigation.spec.ts

@@ -1,5 +1,4 @@
-import { renderHook, act } from '@testing-library/react';
-import { fireEvent } from '@testing-library/react';
+import { renderHook, fireEvent } from '@testing-library/react';
 import { useKeyboardListNavigation } from './useKeyboardListNavigation';
 import { useRef } from 'react';
 
@@ -32,9 +31,7 @@ describe('useKeyboardListNavigation', () => {
     expect(result.current.index).toBe(0);
     expect(result.current.selected).toBe('first');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'ArrowDown' });
-    });
+    fireEvent.keyDown(window, { key: 'ArrowDown' });
 
     expect(result.current.cursor).toBe(1);
     expect(result.current.index).toBe(1);
@@ -48,10 +45,8 @@ describe('useKeyboardListNavigation', () => {
     expect(result.current.index).toBe(0);
     expect(result.current.selected).toBe('first');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'ArrowDown' });
-      fireEvent.keyDown(window, { key: 'ArrowDown' });
-    });
+    fireEvent.keyDown(window, { key: 'ArrowDown' });
+    fireEvent.keyDown(window, { key: 'ArrowDown' });
 
     expect(result.current.cursor).toBe(2);
     expect(result.current.index).toBe(2);
@@ -65,9 +60,7 @@ describe('useKeyboardListNavigation', () => {
     expect(result.current.index).toBe(0);
     expect(result.current.selected).toBe('first');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'ArrowUp' });
-    });
+    fireEvent.keyDown(window, { key: 'ArrowUp' });
 
     expect(result.current.cursor).toBe(-1);
     expect(result.current.index).toBe(3);
@@ -81,26 +74,20 @@ describe('useKeyboardListNavigation', () => {
     expect(result.current.index).toBe(0);
     expect(result.current.selected).toBe('first');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'End' });
-    });
+    fireEvent.keyDown(window, { key: 'End' });
 
     expect(result.current.cursor).toBe(3);
     expect(result.current.index).toBe(3);
     expect(result.current.selected).toBe('fourth');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'ArrowUp' });
-      fireEvent.keyDown(window, { key: 'ArrowUp' });
-    });
+    fireEvent.keyDown(window, { key: 'ArrowUp' });
+    fireEvent.keyDown(window, { key: 'ArrowUp' });
 
     expect(result.current.cursor).toBe(1);
     expect(result.current.index).toBe(1);
     expect(result.current.selected).toBe('second');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'End' });
-    });
+    fireEvent.keyDown(window, { key: 'End' });
 
     expect(result.current.cursor).toBe(3);
     expect(result.current.index).toBe(3);
@@ -120,26 +107,20 @@ describe('useKeyboardListNavigation', () => {
     expect(result.current.index).toBe(-1);
     expect(result.current.selected).toBeUndefined();
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'Home' });
-    });
+    fireEvent.keyDown(window, { key: 'Home' });
 
     expect(result.current.cursor).toBe(0);
     expect(result.current.index).toBe(0);
     expect(result.current.selected).toBe('first');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'ArrowUp' });
-      fireEvent.keyDown(window, { key: 'ArrowUp' });
-    });
+    fireEvent.keyDown(window, { key: 'ArrowUp' });
+    fireEvent.keyDown(window, { key: 'ArrowUp' });
 
     expect(result.current.cursor).toBe(-2);
     expect(result.current.index).toBe(2);
     expect(result.current.selected).toBe('third');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'Home' });
-    });
+    fireEvent.keyDown(window, { key: 'Home' });
 
     expect(result.current.cursor).toBe(0);
     expect(result.current.index).toBe(0);
@@ -158,9 +139,7 @@ describe('useKeyboardListNavigation', () => {
     expect(result.current.index).toBe(0);
     expect(result.current.selected).toBe('first');
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 't' });
-    });
+    fireEvent.keyDown(window, { key: 't' });
 
     expect(result.current.cursor).toBe(2);
     expect(result.current.index).toBe(2);
@@ -171,9 +150,7 @@ describe('useKeyboardListNavigation', () => {
     const onEnter = jest.fn();
     renderHook(() => useKeyboardListNavigation({ list, onEnter }));
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'Enter' });
-    });
+    fireEvent.keyDown(window, { key: 'Enter' });
 
     expect(onEnter).toBeCalledTimes(1);
     expect(onEnter).toHaveBeenCalledWith({
@@ -183,14 +160,10 @@ describe('useKeyboardListNavigation', () => {
       state: { cursor: 0, interactive: false, length: 4 }
     });
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'ArrowDown' });
-      fireEvent.keyDown(window, { key: 'ArrowDown' });
-    });
+    fireEvent.keyDown(window, { key: 'ArrowDown' });
+    fireEvent.keyDown(window, { key: 'ArrowDown' });
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'Enter' });
-    });
+    fireEvent.keyDown(window, { key: 'Enter' });
 
     expect(onEnter).toBeCalledTimes(2);
     expect(onEnter).toHaveBeenLastCalledWith({
@@ -210,15 +183,11 @@ describe('useKeyboardListNavigation', () => {
 
     expect(result.current.cursor).toBe(0);
 
-    act(() => {
-      fireEvent.keyDown(window, { key: 'ArrowDown' });
-    });
+    fireEvent.keyDown(window, { key: 'ArrowDown' });
 
     expect(result.current.cursor).toBe(0);
 
-    act(() => {
-      fireEvent.keyDown(div, { key: 'ArrowDown' });
-    });
+    fireEvent.keyDown(div, { key: 'ArrowDown' });
 
     expect(result.current.cursor).toBe(1);
   });
@@ -237,9 +206,7 @@ describe('useKeyboardListNavigation', () => {
       expect(result.current.index).toBe(-1);
       expect(result.current.selected).toBeUndefined();
 
-      act(() => {
-        fireEvent.keyDown(window, { key: 'ArrowDown' });
-      });
+      fireEvent.keyDown(window, { key: 'ArrowDown' });
 
       expect(result.current.cursor).toBe(0);
       expect(result.current.index).toBe(0);
@@ -250,19 +217,13 @@ describe('useKeyboardListNavigation', () => {
       const onEnter = jest.fn();
       renderHook(() => useKeyboardListNavigation({ list, onEnter, waitForInteractive: true }));
 
-      act(() => {
-        fireEvent.keyDown(window, { key: 'Enter' });
-      });
+      fireEvent.keyDown(window, { key: 'Enter' });
 
       expect(onEnter).toBeCalledTimes(0);
 
-      act(() => {
-        fireEvent.keyDown(window, { key: 'ArrowDown' });
-      });
+      fireEvent.keyDown(window, { key: 'ArrowDown' });
 
-      act(() => {
-        fireEvent.keyDown(window, { key: 'Enter' });
-      });
+      fireEvent.keyDown(window, { key: 'Enter' });
 
       expect(onEnter).toBeCalledTimes(1);
     });