@moda/om 16.1.1 → 16.3.0

package/src/components/Expandable/Expandable.test.tsx

@@ -1,13 +1,24 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Expandable } from './Expandable';
 
 describe('Expandable', () => {
-  it('expands when clicked', () => {
-    const component = mount(<Expandable name='Hello'>Goodbye</Expandable>);
-    expect(component.html()).not.toContain('expanded');
-    component.find('button').simulate('click');
-    expect(component.html()).toContain('expanded');
+  it('expands when clicked', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Expandable virtual name="Hello">
+        Goodbye
+      </Expandable>
+    );
+
+    expect(screen.getByText('Hello')).toBeVisible();
+    expect(screen.queryByText('Goodbye')).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('button'));
+
+    expect(screen.getByText('Goodbye')).toBeVisible();
   });
 });

package/src/components/Expandable/Expandable.tsx

@@ -21,6 +21,7 @@ export const Expandable: React.FC<ExpandableProps> = ({
   virtual = false,
   icon = 'plus-minus',
   'data-testid': dataTestId,
+  // eslint-disable-next-line @typescript-eslint/naming-convention
   expanded: __expanded__ = false,
   ...rest
 }) => {
@@ -43,14 +44,14 @@ export const Expandable: React.FC<ExpandableProps> = ({
         {name}
 
         {icon !== 'plus-minus' && (
-          <div className='Expandable__icon'>
+          <div className="Expandable__icon">
             {icon === 'chevron' && expanded && <ChevronUpIcon />}
             {icon === 'chevron' && !expanded && <ChevronDownIcon />}
           </div>
         )}
       </Clickable>
 
-      <div className='Expandable__contents'>{expanded || !virtual ? children : null}</div>
+      <div className="Expandable__contents">{expanded || !virtual ? children : null}</div>
     </div>
   );
 };

package/src/components/Field/Field.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { States } from 'storybook-states';
-import { Field, FieldProps } from './Field';
+import { action } from '@storybook/addon-actions';
 import { Textarea } from '../Textarea';
 import { Select } from '../Select';
-import { action } from '@storybook/addon-actions';
+import { Field, FieldProps } from './Field';
 
 export default { title: 'Components/Field' };
 
@@ -19,7 +19,7 @@ export const Default = () => (
       { label: 'Name of input', error: 'Something went wrong' }
     ]}
   >
-    <Field placeholder='An input' />
+    <Field placeholder="An input" />
   </States>
 );
 
@@ -36,7 +36,7 @@ export const AribitraryChildren = () => (
     ]}
   >
     <Field>
-      <Textarea placeholder='A textarea' />
+      <Textarea placeholder="A textarea" />
     </Field>
   </States>
 );

package/src/components/Field/Field.test.tsx

@@ -1,75 +1,66 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
-import { Field } from './Field';
 import { Select } from '../Select';
+import { Field } from './Field';
 
 describe('Field', () => {
   it('renders correctly', () => {
-    const component = shallow(<Field placeholder='Placeholder' defaultValue='Hello' />);
+    render(<Field placeholder="Placeholder" defaultValue="Hello" />);
 
-    expect(component.html()).toEqual(
-      '<label class="Field"><span class="Field__context"><input class="TextInput" placeholder="Placeholder" aria-label="Placeholder" value="Hello"/></span></label>'
-    );
+    expect(screen.getByRole('textbox')).toBeVisible();
+    expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Placeholder');
   });
 
   it('renders with a label', () => {
-    const component = shallow(
-      <Field placeholder='Placeholder' defaultValue='Hello' label='Label' />
-    );
+    render(<Field placeholder="Placeholder" defaultValue="Hello" label="Label" />);
 
-    expect(component.html()).toEqual(
-      '<label class="Field"><span class="Field__label">Label</span><span class="Field__context"><input class="TextInput" placeholder="Placeholder" aria-label="Label" value="Hello"/></span></label>'
-    );
+    expect(screen.getByRole('textbox')).toBeVisible();
+    expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Placeholder');
+    expect(screen.getByText('Label')).toBeVisible();
   });
 
   it('renders with an error', () => {
-    const component = shallow(
-      <Field placeholder='Placeholder' defaultValue='Hello' label='Label' error='Error' />
-    );
+    render(<Field placeholder="Placeholder" defaultValue="Hello" label="Label" error="Error" />);
 
-    expect(component.html()).toEqual(
-      '<label class="Field"><span class="Field__label">Label</span><span class="Field__context"><input class="TextInput TextInput--error" placeholder="Placeholder" aria-label="Label" value="Hello"/><span class="Field__icon"></span></span><span class="Field__error">Error</span></label>'
-    );
+    expect(screen.getByRole('textbox')).toBeVisible();
+    expect(screen.getByRole('textbox')).toHaveClass('TextInput--error');
+    expect(screen.getByText('Error')).toBeVisible();
   });
 
-  it('renders with an error when children is <Select/>', () => {
+  it('renders with <Select/> child', () => {
     const options = [
       { value: 'foo', label: 'Foo' },
       { value: 'bar', label: 'Bar' },
       { value: 'baz', label: 'Baz', disabled: true }
     ];
 
-    const component = shallow(
+    render(
       <Field>
-        <Select idRef='1' name='name-1' label='Sort by' options={options} />
+        <Select idRef="1" name="name-1" label="Sort by" options={options} />
       </Field>
     );
 
-    expect(component.html()).toEqual(
-      '<label class="Field"><span class="Field__context"><div id="Select--1" class="Select"><input id="1" name="name-1" type="hidden"/><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 Select__value"><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button></div></span></label>'
-    );
+    expect(screen.getByRole('button', { name: /Sort by/ })).toBeVisible();
   });
 
   it('renders with a className', () => {
-    const component = shallow(
-      <Field className='Custom' placeholder='Placeholder' defaultValue='Hello' label='Label' />
+    render(
+      <Field className="Custom" placeholder="Placeholder" defaultValue="Hello" label="Label" />
     );
 
-    expect(component.html()).toEqual(
-      '<label class="Field Custom"><span class="Field__label">Label</span><span class="Field__context"><input class="TextInput" placeholder="Placeholder" aria-label="Label" value="Hello"/></span></label>'
-    );
+    expect(screen.getByRole('textbox')).toBeVisible();
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByRole('textbox').parentNode?.parentNode).toHaveClass('Custom');
   });
 
   it('supports custom children', () => {
-    const component = shallow(
-      <Field placeholder='Placeholder' defaultValue='Hello' label='Label'>
+    render(
+      <Field placeholder="Placeholder" defaultValue="Hello" label="Label">
         <textarea />
       </Field>
     );
 
-    expect(component.html()).toEqual(
-      '<label class="Field"><span class="Field__label">Label</span><span class="Field__context"><textarea placeholder="Placeholder" label="Label">Hello</textarea></span></label>'
-    );
+    expect(screen.getByRole('textbox')).toBeVisible();
   });
 });

package/src/components/Field/Field.tsx

@@ -17,10 +17,10 @@ export const Field = React.forwardRef(
   ) => {
     return (
       <label className={classNames('Field', className)}>
-        {label && <span className='Field__label'>{label}</span>}
+        {label && <span className="Field__label">{label}</span>}
 
         {/* TODO: Codify some kind of IconWrapper component */}
-        <span className='Field__context'>
+        <span className="Field__context">
           {children ? (
             <>
               {React.cloneElement(children, {
@@ -34,7 +34,7 @@ export const Field = React.forwardRef(
               })}
 
               {error && (
-                <span className='Field__icon'>
+                <span className="Field__icon">
                   <WarningIcon />
                 </span>
               )}
@@ -49,7 +49,7 @@ export const Field = React.forwardRef(
                 {...rest}
               />
               {error && (
-                <span className='Field__icon'>
+                <span className="Field__icon">
                   <WarningIcon />
                 </span>
               )}
@@ -57,7 +57,7 @@ export const Field = React.forwardRef(
           )}
         </span>
 
-        {error && <span className='Field__error'>{error}</span>}
+        {error && <span className="Field__error">{error}</span>}
       </label>
     );
   }

package/src/components/Field/index.ts

@@ -1,3 +1,4 @@
 import { Field } from './Field';
+
 export { Field as Input };
 export * from './Field';

package/src/components/Label/Label.test.tsx

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

package/src/components/Loading/Loading.test.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 import { Loading } from './Loading';
 
 describe('Loading', () => {
   it('renders correctly', () => {
-    const component = shallow(<Loading />);
-    expect(component.html()).toEqual(
-      '<div class="Loading"><svg class="Triangle" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9986 0L0 24H24L11.9986 0Z" fill="#D56B27"></path></svg></div>'
-    );
+    render(<Loading aria-label="Loading" />);
+    expect(screen.getByLabelText('Loading')).toBeVisible();
   });
 });

package/src/components/Loading/Loading.tsx

@@ -11,9 +11,10 @@ const FRAMES = [Triangle, Diamond, ArcWindow, Circle];
 
 export const Loading: React.FC<LoadingProps> = ({ className, ...rest }) => {
   const { index, handleNext } = useCursor({ max: FRAMES.length });
+  const ONE_SECOND_INTERVAL = 1000;
 
   useEffect(() => {
-    const interval = setInterval(handleNext, 1000);
+    const interval = setInterval(handleNext, ONE_SECOND_INTERVAL);
     return () => clearInterval(interval);
   }, [handleNext]);
 

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(
-      <Modal data-testid='modal' onClose={onClose}>
-        <button data-testid='button' onClick={onClickButton}>
+    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';
@@ -8,11 +8,11 @@ const ModalComponent: React.FC = () => {
   const [showModal, setShowModal] = useState(false);
 
   return showModal ? (
-    <ModalOverlay data-testid='modal' onClose={() => setShowModal(false)}>
+    <ModalOverlay data-testid="modal" onClose={() => setShowModal(false)}>
       Modal Content
     </ModalOverlay>
   ) : (
-    <button data-testid='button' onClick={() => setShowModal(true)}>
+    <button data-testid="button" onClick={() => setShowModal(true)}>
       Click Me
     </button>
   );
@@ -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/ModalOverlay/ModalOverlay.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useMemo } from 'react';
-import { Modal, ModalProps } from '../Modal';
-import { OverlayProps, Overlay } from '../Overlay';
 import classNames from 'classnames';
 import { createPortal } from 'react-dom';
+import { Modal, ModalProps } from '../Modal';
+import { OverlayProps, Overlay } from '../Overlay';
 
 import './ModalOverlay.scss';
 

package/src/components/Overlay/Overlay.stories.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 
 import { States } from 'storybook-states';
-import { Overlay } from './Overlay';
 import { Button } from '../Button';
+import { Overlay } from './Overlay';
 
 export default { title: 'Components/Overlay' };
 

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/Paginator/Paginator.tsx

@@ -66,7 +66,7 @@ export const Paginator: React.FC<Props> = ({
   const prevPage = (page: number) => onGoToPage(page - 1);
 
   return (
-    <section className={classNames('Paginator', className)} aria-label='Pagination'>
+    <section className={classNames('Paginator', className)} aria-label="Pagination">
       <button
         disabled={!canDoPrev(selectedPage)}
         onClick={() => {
@@ -75,7 +75,7 @@ export const Paginator: React.FC<Props> = ({
         }}
         className={classNames('Paginator__button', 'Paginator__button--previous')}
       >
-        <ChevronLeftIcon className='Paginator__previous-chevron' /> Previous
+        <ChevronLeftIcon className="Paginator__previous-chevron" /> Previous
       </button>
 
       {pages.map((page, index) => (
@@ -108,7 +108,7 @@ export const Paginator: React.FC<Props> = ({
         }}
         className={classNames('Paginator__button', 'Paginator__button--next')}
       >
-        Next <ChevronRightIcon className='Paginator__next-chevron' />
+        Next <ChevronRightIcon className="Paginator__next-chevron" />
       </button>
     </section>
   );

package/src/components/PasswordInput/PasswordInput.stories.tsx

@@ -6,6 +6,6 @@ export default { title: 'Components/PasswordInput' };
 
 export const Default = () => (
   <States<Partial<PasswordInputProps>> states={[{}, { error: 'Password cannot be empty.' }]}>
-    <PasswordInput id='signInPassword' placeholder='Password' />
+    <PasswordInput id="signInPassword" placeholder="Password" />
   </States>
 );

package/src/components/PasswordInput/PasswordInput.tsx

@@ -15,23 +15,23 @@ export const PasswordInput = forwardRef(
     };
 
     return (
-      <div className='PasswordInput'>
+      <div className="PasswordInput">
         <Input
-          className='PasswordInput__editor'
+          className="PasswordInput__editor"
           ref={ref}
           type={passwordShown ? 'text' : 'password'}
           {...rest}
         />
 
         <Clickable
-          className='PasswordInput__password-action'
+          className="PasswordInput__password-action"
           onClick={togglePasswordVisiblity}
-          type='button'
+          type="button"
         >
           {passwordShown ? (
-            <Text treatment='eyebrow'>HIDE</Text>
+            <Text treatment="eyebrow">HIDE</Text>
           ) : (
-            <Text treatment='eyebrow'>SHOW</Text>
+            <Text treatment="eyebrow">SHOW</Text>
           )}
         </Clickable>
       </div>

package/src/components/Popover/Popover.stories.tsx

@@ -33,7 +33,7 @@ export const Default = () => (
     >
       <Popover content={Content} style={{ display: 'inline-block' }}>
         <Text>
-          <ControlLink href='https://www.modaoperandi.com/women'>Hover on Link</ControlLink>
+          <ControlLink href="https://www.modaoperandi.com/women">Hover on Link</ControlLink>
         </Text>
       </Popover>
     </States>

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/Popover/Popover.tsx

@@ -13,6 +13,9 @@ export type PopoverProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 
 export const POPOVER_MOUSEOUT_DELAY_MS = 200;
+const THREE_QUARTER_SECOND_DELAY = 750;
+const ONE_SECOND_DELAY = 1000;
+const FIVE_SECOND_DELAY = 5000;
 
 enum Mode {
   Opening = 'opening',
@@ -80,7 +83,7 @@ export const Popover: React.FC<PopoverProps> = ({
   useEffect(() => {
     if (mode !== Mode.Closing) return;
 
-    const closingTimeout = setTimeout(() => setMode(Mode.Closed), 750);
+    const closingTimeout = setTimeout(() => setMode(Mode.Closed), THREE_QUARTER_SECOND_DELAY);
 
     return () => clearTimeout(closingTimeout);
   }, [mode]);
@@ -88,7 +91,7 @@ export const Popover: React.FC<PopoverProps> = ({
   useEffect(() => {
     if (mode !== Mode.AutoOpening) return;
 
-    const openingTimeout = setTimeout(() => setMode(Mode.AutoOpen), 1000);
+    const openingTimeout = setTimeout(() => setMode(Mode.AutoOpen), ONE_SECOND_DELAY);
 
     return () => clearTimeout(openingTimeout);
   }, [mode]);
@@ -96,7 +99,7 @@ export const Popover: React.FC<PopoverProps> = ({
   useEffect(() => {
     if (mode !== Mode.Opening) return;
 
-    const openingTimeout = setTimeout(() => setMode(Mode.Open), 750);
+    const openingTimeout = setTimeout(() => setMode(Mode.Open), THREE_QUARTER_SECOND_DELAY);
 
     return () => clearTimeout(openingTimeout);
   }, [mode]);
@@ -104,7 +107,7 @@ export const Popover: React.FC<PopoverProps> = ({
   useEffect(() => {
     if (mode !== Mode.AutoOpen) return;
 
-    const stayingTimeout = setTimeout(handleClose, 5000);
+    const stayingTimeout = setTimeout(handleClose, FIVE_SECOND_DELAY);
 
     return () => clearTimeout(stayingTimeout);
   }, [handleClose, mode, smoothTransitioning]);
@@ -125,7 +128,7 @@ export const Popover: React.FC<PopoverProps> = ({
       onMouseLeave={handleMouseLeave}
       {...rest}
     >
-      <span className='Popover__trigger'>
+      <span className="Popover__trigger">
         {isOpen && (
           <div
             className={classNames('Popover__box', {
@@ -134,11 +137,11 @@ export const Popover: React.FC<PopoverProps> = ({
             })}
           >
             <div
-              className='Popover__caret'
+              className="Popover__caret"
               style={{ zIndex: zIndex != null ? zIndex + 1 : undefined }}
             />
 
-            <div className='Popover__content' style={{ zIndex }}>
+            <div className="Popover__content" style={{ zIndex }}>
               {content}
             </div>
           </div>

package/src/components/PromoBanner/PromoBanner.stories.tsx

@@ -9,22 +9,22 @@ export const Default = () => (
     states={[
       { children: <span>Center</span> },
       {
-        children: [<span key='left'>Left</span>, <span key='right'>Right</span>]
+        children: [<span key="left">Left</span>, <span key="right">Right</span>]
       },
       {
         children: [
-          <span key='left'>Left</span>,
-          <span key='center'>Center</span>,
-          <span key='right'>Right</span>
+          <span key="left">Left</span>,
+          <span key="center">Center</span>,
+          <span key="right">Right</span>
         ]
       },
       {
         children: [
-          <span key='left'>Currency: USA (USD $)</span>,
-          <span key='center' className='FOO'>
-            Order by Dec. 12 for delivery by Dec. 25 — <a href='#'>LEARN MORE</a>
+          <span key="left">Currency: USA (USD $)</span>,
+          <span key="center" className="FOO">
+            Order by Dec. 12 for delivery by Dec. 25 — <a href="#">LEARN MORE</a>
           </span>,
-          <span key='right'>Hi, Friend</span>
+          <span key="right">Hi, Friend</span>
         ]
       }
     ]}
@@ -38,7 +38,7 @@ export const Mobile = () => (
     <PromoBanner>
       <span>Currency: USA (USD $)</span>
       <span>
-        Order by Dec. 12 for delivery by Dec. 25 — <a href='#'>LEARN MORE</a>
+        Order by Dec. 12 for delivery by Dec. 25 — <a href="#">LEARN MORE</a>
       </span>
       <span>Hi, Friend</span>
     </PromoBanner>