@moda/om 16.1.0 → 16.2.1

package/src/components/Button/Button.test.tsx

@@ -1,11 +1,22 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Button } from './Button';
 
 describe('Button', () => {
   it('renders correctly', () => {
-    const button = shallow(<Button>Click me</Button>);
-    expect(button.text()).toEqual('Click me');
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: 'Click me' })).toBeVisible();
+  });
+
+  it('calls onClick when clicked', async () => {
+    const user = userEvent.setup();
+    const onClick = jest.fn();
+
+    render(<Button onClick={onClick}>Click me</Button>);
+
+    await user.click(screen.getByRole('button', { name: 'Click me' }));
+    expect(onClick).toBeCalled();
   });
 });

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { States } from 'storybook-states';
 
 import { Text } from '../Text';
-import { Checkbox, CheckboxProps } from './Checkbox';
 import { Stack } from '../Stack';
 import { RadioButton } from '../RadioButton';
+import { Checkbox, CheckboxProps } from './Checkbox';
 
 export default { title: 'Components/Checkbox' };
 
@@ -18,9 +18,9 @@ export const Default = () => (
       { children: 'Remember me', checked: true },
       { children: 'Disabled', disabled: true },
       { children: 'Disabled', checked: true, disabled: true },
-      { children: 'Filtering/Circle', showCheckedUsing: 'circle' },
-      { children: 'Disabled', showCheckedUsing: 'circle', checked: true, disabled: true },
-      { children: <Text color='code-red'>Important!</Text> }
+      { children: 'Filtering/Circle', checkIcon: 'circle' },
+      { children: 'Disabled', checkIcon: 'circle', checked: true, disabled: true },
+      { children: <Text color="code-red">Important!</Text> }
     ]}
   >
     <Checkbox />
@@ -33,11 +33,11 @@ export const Check = () => {
   return (
     <States>
       <Stack space={2}>
-        <Text color='burnt-orange'>{checked ? 'Remembering' : 'Forgetting'}</Text>
+        <Text color="burnt-orange">{checked ? 'Remembering' : 'Forgetting'}</Text>
 
         <Checkbox
-          id='rememberMe'
-          name='rememberMe'
+          id="rememberMe"
+          name="rememberMe"
           checked={checked}
           onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
             check(event.target.checked);

package/src/components/Checkbox/Checkbox.test.tsx

@@ -1,5 +1,5 @@
 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 { Checkbox } from './Checkbox';
@@ -7,33 +7,31 @@ import { Checkbox } from './Checkbox';
 describe('Checkbox', () => {
   it('works correctly with checked attribute (controlled)', async () => {
     const handleChange = jest.fn();
-    const { getByRole, getByTestId, rerender } = render(
-      <Checkbox data-testid='checkbox' checked onChange={handleChange} />
+    const { rerender } = render(
+      <Checkbox data-testid="checkbox" checked onChange={handleChange} />
     );
 
-    expect((getByRole('checkbox') as HTMLInputElement).checked).toBe(true);
+    expect(screen.getByRole('checkbox') as HTMLInputElement).toBeChecked();
 
-    await userEvent.click(getByTestId('checkbox'));
+    await userEvent.click(screen.getByTestId('checkbox'));
 
     expect(handleChange).toBeCalled();
-    expect((getByRole('checkbox') as HTMLInputElement).checked).toBe(true);
+    expect(screen.getByRole('checkbox') as HTMLInputElement).toBeChecked();
 
-    rerender(<Checkbox data-testid='checkbox' checked={false} onChange={handleChange} />);
+    rerender(<Checkbox data-testid="checkbox" checked={false} onChange={handleChange} />);
 
-    expect((getByRole('checkbox') as HTMLInputElement).checked).toBe(false);
+    expect(screen.getByRole('checkbox') as HTMLInputElement).not.toBeChecked();
   });
 
   it('works correctly with defaultChecked attribute (uncontrolled)', async () => {
     const handleChange = jest.fn();
-    const { getByRole, getByTestId } = render(
-      <Checkbox data-testid='checkbox' defaultChecked={false} onChange={handleChange} />
-    );
+    render(<Checkbox data-testid="checkbox" defaultChecked={false} onChange={handleChange} />);
 
-    expect((getByRole('checkbox') as HTMLInputElement).checked).toBe(false);
+    expect(screen.getByRole('checkbox') as HTMLInputElement).not.toBeChecked();
 
-    await userEvent.click(getByTestId('checkbox'));
+    await userEvent.click(screen.getByTestId('checkbox'));
 
     expect(handleChange).toBeCalled();
-    expect((getByRole('checkbox') as HTMLInputElement).checked).toBe(true);
+    expect(screen.getByRole('checkbox') as HTMLInputElement).toBeChecked();
   });
 });

package/src/components/Checkbox/Checkbox.tsx

@@ -15,7 +15,7 @@ export type ShowCheckedUsing = 'checkmark' | 'circle';
 
 export type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
   children?: JSX.Element | string;
-  showCheckedUsing?: ShowCheckedUsing;
+  checkIcon?: ShowCheckedUsing;
 };
 
 export const Checkbox: React.FC<CheckboxProps> = ({
@@ -26,7 +26,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   value,
   onChange,
   disabled,
-  showCheckedUsing = 'checkmark',
+  checkIcon = 'checkmark',
   ...rest
 }) => {
   const [isChecked, setIsChecked] = useState(checked ?? defaultChecked ?? false);
@@ -45,7 +45,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
 
   return (
     <label
-      role='button'
+      role="button"
       tabIndex={0}
       className={classNames('Checkbox', className, {
         'Checkbox--disabled': disabled
@@ -59,17 +59,17 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       >
         {isChecked && (
           <>
-            {showCheckedUsing === 'checkmark' && <CheckmarkIcon {...CHECKED_ITEM_PROPS} />}
+            {checkIcon === 'checkmark' && <CheckmarkIcon {...CHECKED_ITEM_PROPS} />}
 
-            {showCheckedUsing === 'circle' && <CircleIcon {...CHECKED_ITEM_PROPS} />}
+            {checkIcon === 'circle' && <CircleIcon {...CHECKED_ITEM_PROPS} />}
           </>
         )}
       </span>
 
       <input
         tabIndex={-1}
-        className='Checkbox__input'
-        type='checkbox'
+        className="Checkbox__input"
+        type="checkbox"
         checked={isChecked}
         value={value}
         onChange={handleChange}
@@ -77,7 +77,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         {...rest}
       />
 
-      {children && <span className='Checkbox__label'>{children}</span>}
+      {children && <span className="Checkbox__label">{children}</span>}
     </label>
   );
 };

package/src/components/Clickable/Clickable.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { States } from 'storybook-states';
-import { Clickable, ClickableProps } from './Clickable';
 import { BrowserRouter } from 'react-router-dom';
+import { Clickable, ClickableProps } from './Clickable';
 
 export default { title: 'Components/Clickable' };
 
@@ -16,14 +16,14 @@ export const Button = () => (
 
 export const Anchor = () => (
   <States<ClickableProps>>
-    <Clickable href={'#'}>Useful to extend in place of &lt;a/&gt;. Click me.</Clickable>
+    <Clickable href="#">Useful to extend in place of &lt;a/&gt;. Click me.</Clickable>
   </States>
 );
 
 export const Link = () => (
   <BrowserRouter>
     <States<ClickableProps>>
-      <Clickable to='#href'>Useful to extend in place of &lt;Link/&gt;. Click me.</Clickable>
+      <Clickable to="#href">Useful to extend in place of &lt;Link/&gt;. Click me.</Clickable>
     </States>
   </BrowserRouter>
 );

package/src/components/Clickable/Clickable.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Clickable } from './Clickable';
 
 describe('Clickable', () => {
   it('renders correctly', () => {
-    const component = shallow(<Clickable>Hello</Clickable>);
-    expect(component.text()).toEqual('Hello');
+    render(<Clickable>Hello</Clickable>);
+    expect(screen.getByRole('button', { name: 'Hello' })).toBeVisible();
   });
 });

package/src/components/ColorSwatch/ColorSwatch.stories.tsx

@@ -20,33 +20,33 @@ const STATES = [
 
 export const Default = () => (
   <States<Partial<ColorSwatchProps>> states={STATES}>
-    <ColorSwatch color='yellow' onClick={action('onClick')} />
+    <ColorSwatch color="yellow" onClick={action('onClick')} />
   </States>
 );
 
 export const Small = () => (
   <States<Partial<ColorSwatchProps>> states={STATES}>
-    <ColorSwatch size='small' color='yellow' onClick={action('onClick')} />
+    <ColorSwatch size="small" color="yellow" onClick={action('onClick')} />
   </States>
 );
 
 export const White = () => (
   <States<Partial<ColorSwatchProps>> states={STATES}>
-    <ColorSwatch size='small' color='white' onClick={action('onClick')} />
+    <ColorSwatch size="small" color="white" onClick={action('onClick')} />
   </States>
 );
 
 export const Swatches = () => (
   <States<ColorSwatchProps>>
-    <Stack space={1} direction='horizontal'>
-      <ColorSwatch onClick={action('onClick')} color='red' />
-      <ColorSwatch onClick={action('onClick')} color='white' />
-      <ColorSwatch onClick={action('onClick')} color='bronze' soldOut disabled />
-      <ColorSwatch onClick={action('onClick')} color='nude' onSale />
+    <Stack space={1} direction="horizontal">
+      <ColorSwatch onClick={action('onClick')} color="red" />
+      <ColorSwatch onClick={action('onClick')} color="white" />
+      <ColorSwatch onClick={action('onClick')} color="bronze" soldOut disabled />
+      <ColorSwatch onClick={action('onClick')} color="nude" onSale />
       <ColorSwatch
         onClick={action('onClick')}
-        backgroundUrl='https://www.modaoperandi.com/assets/images/products/730581/340267/sw/prada-animal-leopard-print-shell-shoulder-bag.jpg?_v=1581323237'
-        color='nude'
+        backgroundUrl="https://www.modaoperandi.com/assets/images/products/730581/340267/sw/prada-animal-leopard-print-shell-shoulder-bag.jpg?_v=1581323237"
+        color="nude"
         onSale
         onMouseEnter={action('onMouseEnter')}
         onMouseLeave={action('onMouseLeave')}
@@ -56,7 +56,7 @@ export const Swatches = () => (
 );
 
 export const Constrained = () => (
-  <Stack direction='horizontal' space={3}>
+  <Stack direction="horizontal" space={3}>
     {Object.keys(SKU_COLORS).map(color => (
       <ColorSwatch key={color} onClick={action('onClick')} color={color} />
     ))}

package/src/components/ColorSwatch/ColorSwatch.test.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { ColorSwatch } from './ColorSwatch';
 
 describe('ColorSwatch', () => {
   it('renders correctly', () => {
-    const component = shallow(<ColorSwatch color='nude' />);
-    expect(component.html()).toEqual(
-      '<button class="Clickable ColorSwatch"><div class="ColorSwatch__chip" style="background-color:#eee4d7"></div></button>'
-    );
+    render(<ColorSwatch color="nude" />);
+    expect(screen.getByRole('button')).toBeVisible();
   });
 });

package/src/components/ColorSwatch/ColorSwatch.tsx

@@ -83,7 +83,7 @@ export const ColorSwatch: React.FC<ColorSwatchProps> = ({
       disabled={disabled}
       {...rest}
     >
-      <div className='ColorSwatch__chip' style={styles} />
+      <div className="ColorSwatch__chip" style={styles} />
     </Clickable>
   );
 };

package/src/components/Constrain/Constrain.stories.tsx

@@ -26,7 +26,7 @@ const Constrained = () => {
   return (
     <Constrain>
       <div ref={ref} style={{ backgroundColor: 'black', color: 'white', padding: '1rem' }}>
-        <Text color='snow'>
+        <Text color="snow">
           window: {windowWidth}px
           <br />
           constrained: {constrainWidth}px

package/src/components/Constrain/Constrain.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Constrain } from './Constrain';
 
 describe('Constrain', () => {
-  xit('renders correctly', () => {
-    const component = shallow(<Constrain>Hello</Constrain>);
-    expect(component.text()).toContain('Hello');
+  it('renders correctly', () => {
+    render(<Constrain>Hello</Constrain>);
+    expect(screen.getByText('Hello')).toBeVisible();
   });
 });

package/src/components/Constrain/ExceedConstrain.stories.tsx

@@ -10,10 +10,10 @@ const Constrained = () => {
   return (
     <Constrain>
       <div style={{ backgroundColor: 'black', color: 'white', padding: '1rem' }}>
-        <Text color='snow'>This div is constrained.</Text>
+        <Text color="snow">This div is constrained.</Text>
       </div>
       <ExceedConstrain style={{ backgroundColor: 'gray', color: 'white', padding: '1rem' }}>
-        <Text color='snow'>This exceeds the constrain.</Text>
+        <Text color="snow">This exceeds the constrain.</Text>
       </ExceedConstrain>
     </Constrain>
   );

package/src/components/ControlLink/ControlLink.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { States } from 'storybook-states';
-import { ControlLink, ControlLinkProps } from './ControlLink';
 import { BrowserRouter } from 'react-router-dom';
+import { ControlLink, ControlLinkProps } from './ControlLink';
 
 export default { title: 'Components/ControlLink' };
 

package/src/components/ControlLink/ControlLink.test.tsx

@@ -1,27 +1,25 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { ControlLink } from './ControlLink';
 
 describe('ControlLink', () => {
   it('renders correctly', () => {
-    const component = shallow(<ControlLink> click me! </ControlLink>);
-    expect(component.html()).toEqual(
-      '<button class="Clickable ControlLink ControlLink--underlined"> click me! </button>'
-    );
+    render(<ControlLink> click me! </ControlLink>);
+    expect(screen.getByRole('button', { name: 'click me!' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'click me!' })).toBeEnabled();
   });
 
   it('renders correctly while disabled', () => {
-    const component = shallow(<ControlLink disabled> do not click me! </ControlLink>);
-    expect(component.html()).toEqual(
-      '<button class="Clickable Clickable--disabled ControlLink ControlLink--underlined ControlLink--disabled" disabled=""> do not click me! </button>'
-    );
+    render(<ControlLink disabled> do not click me! </ControlLink>);
+    expect(screen.getByRole('button', { name: 'do not click me!' })).toBeDisabled();
   });
 
   it('renders correctly while underlined', () => {
-    const component = shallow(<ControlLink underlined> click me! </ControlLink>);
-    expect(component.html()).toEqual(
-      '<button class="Clickable ControlLink ControlLink--underlined"> click me! </button>'
+    render(<ControlLink underlined> click me! </ControlLink>);
+    expect(screen.getByRole('button', { name: 'click me!' })).toBeVisible();
+    expect(screen.getByRole('button', { name: 'click me!' })).toHaveClass(
+      'ControlLink--underlined'
     );
   });
 });

package/src/components/ControlLink/index.ts

@@ -1 +1 @@
-export * from './ControlLink';
+export * from './ControlLink';

package/src/components/CreditCardNumberInput/CreditCardNumberInput.stories.tsx

@@ -13,6 +13,6 @@ export const Default = () => (
       { maskChar: '' }
     ]}
   >
-    <CreditCardNumberInput label='Card Number' />
+    <CreditCardNumberInput label="Card Number" />
   </States>
 );

package/src/components/CreditCardNumberInput/CreditCardNumberInput.test.tsx

@@ -1,41 +1,41 @@
 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 { CreditCardNumberInput } from './CreditCardNumberInput';
 
 describe('credit card number input', () => {
   it('renders without errors', () => {
-    const { getByLabelText } = render(<CreditCardNumberInput label='Card Number' />);
-    const input = getByLabelText('Card Number');
-    expect(input).toBeTruthy();
+    render(<CreditCardNumberInput label="Card Number" />);
+    const input = screen.getByLabelText('Card Number');
+    expect(input).toBeInTheDocument();
   });
 
   // TODO: userEvent.type does not work here for some reason
-  xit('does not allow non-numeric characters', () => {
-    const { getByLabelText } = render(<CreditCardNumberInput label='Card Number' />);
-    const input = getByLabelText('Card Number') as HTMLInputElement;
+  xit('does not allow non-numeric characters', async () => {
+    render(<CreditCardNumberInput label="Card Number" />);
+    const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
-    userEvent.type(input, 'foo1234');
+    await userEvent.type(input, 'foo1234');
 
     expect(input.value).toBe('1234 ____ ____ ____');
   });
 
   // TODO: userEvent.type does not work here for some reason
-  xit('puts spaces between the numbers', () => {
-    const { getByLabelText } = render(<CreditCardNumberInput label='Card Number' />);
-    const input = getByLabelText('Card Number') as HTMLInputElement;
+  xit('puts spaces between the numbers', async () => {
+    render(<CreditCardNumberInput label="Card Number" />);
+    const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
-    userEvent.type(input, '5510000000000000');
+    await userEvent.type(input, '5510000000000000');
 
     expect(input.value).toBe('5510 0000 0000 0000');
   });
 
   // TODO: userEvent.type does not work here for some reason
-  xit('does not allow more characters than required', () => {
-    const { getByLabelText } = render(<CreditCardNumberInput label='Card Number' />);
-    const input = getByLabelText('Card Number') as HTMLInputElement;
+  xit('does not allow more characters than required', async () => {
+    render(<CreditCardNumberInput label="Card Number" />);
+    const input = screen.getByLabelText('Card Number') as HTMLInputElement;
 
-    userEvent.type(input, '5510000000000000251');
+    await userEvent.type(input, '5510000000000000251');
 
     expect(input.value).toBe('5510 0000 0000 0000');
   });

package/src/components/CreditCardNumberInput/CreditCardNumberInput.tsx

@@ -62,6 +62,7 @@ export const CreditCardNumberInput: React.FC<CreditCardNumberInputProps> = ({
   );
 
   // TODO: get rid of the any, the types of react-input-mask are incorrect here, it should expect a function as a child, but it expects a ReactNode
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const renderInputField: any = (inputProps: CreditCardNumberInputFieldProps) => (
     <CreditCardNumberInputField {...rest} {...inputProps} />
   );

package/src/components/DefinitionList/DefinitionList.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { States } from 'storybook-states';
-import { DefinitionList, DefinitionListProps } from './DefinitionList';
 import { Text } from '../Text';
+import { DefinitionList, DefinitionListProps } from './DefinitionList';
 
 export default { title: 'Components/DefinitionList' };
 
@@ -14,13 +14,13 @@ export const Default = () => (
         term: 'Size',
         children: (
           <>
-            US 2 — <Text color='code-red'>Only 2 Left</Text>
+            US 2 — <Text color="code-red">Only 2 Left</Text>
           </>
         )
       },
       {
         term: 'Supports',
-        children: <a href='#link'>Links</a>
+        children: <a href="#link">Links</a>
       }
     ]}
   >

package/src/components/DefinitionList/DefinitionList.test.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { DefinitionList } from './DefinitionList';
 
 describe('DefinitionList', () => {
   it('renders correctly', () => {
-    const component = shallow(<DefinitionList term='Foo'>Bar</DefinitionList>);
-    expect(component.text()).toEqual('FooBar');
+    render(<DefinitionList term="Foo">Bar</DefinitionList>);
+    expect(screen.getByText('Foo')).toBeVisible();
+    expect(screen.getByText('Bar')).toBeVisible();
   });
 });

package/src/components/Divider/Divider.stories.tsx

@@ -1,25 +1,25 @@
 import React from 'react';
 import { States } from 'storybook-states';
-import { Divider, NoLineDivider, TwoLineDivider } from './';
 import { DividerProps } from './Divider';
+import { Divider, NoLineDivider, TwoLineDivider } from './';
 
 export default { title: 'Components/Divider' };
 
 export const Default = () => (
   <States<Partial<DividerProps>> states={[{}, { type: 'no-line' }, { type: 'two-line' }]}>
-    <Divider text='Moda Operandi' />
+    <Divider text="Moda Operandi" />
   </States>
 );
 
 export const WithNoLine = () => (
   <States>
-    <NoLineDivider text='Divider with No Line' />
+    <NoLineDivider text="Divider with No Line" />
   </States>
 );
 
 export const WithDoubleLine = () => (
   <States>
-    <TwoLineDivider text='Divider with Double Line' />
+    <TwoLineDivider text="Divider with Double Line" />
   </States>
 );
 

package/src/components/Divider/Divider.test.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Divider } from './Divider';
 
 describe('Divider', () => {
   it('renders correctly', () => {
-    const component = mount(<Divider style={{ padding: '30px 0' }} text='Hello' />);
-    expect(component.text()).toEqual('Hello');
-    expect(component.html()).toContain('style="padding: 30px 0px;"');
+    render(<Divider style={{ padding: '30px 0' }} text="Hello" />);
+    expect(screen.getByText('Hello')).toBeVisible();
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByText('Hello').parentNode).toHaveStyle('padding: 30px 0px;');
   });
 });

package/src/components/Divider/Divider.tsx

@@ -29,7 +29,7 @@ export const Divider: React.FC<DividerProps> = ({
     <div className={classNames('Divider', type ? `Divider--${type}` : '', className)} {...rest}>
       {text && (
         <Text
-          className='Divider__text'
+          className="Divider__text"
           treatment={treatment ?? defaultTreatment}
           color={color}
           family={family ?? defaultFamily}

package/src/components/Divider/NoLineDivider.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { Divider, DividerProps } from './Divider';
 
 export const NoLineDivider: React.FC<DividerProps> = props => {
-  return <Divider {...props} type={'no-line'} />;
+  return <Divider {...props} type="no-line" />;
 };

package/src/components/Divider/TwoLineDivider.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { Divider, DividerProps } from './Divider';
 
 export const TwoLineDivider: React.FC<DividerProps> = props => {
-  return <Divider {...props} type={'two-line'} />;
+  return <Divider {...props} type="two-line" />;
 };