From 5bd89ac589cd213bc00c8989d414c69477722219 Mon Sep 17 00:00:00 2001 From: Ben Nappier Date: Thu, 28 Jul 2022 11:38:46 -0600 Subject: [PATCH 1/6] Export external/mds --- src/components/cell-control/autocompleter.md | 4 ++-- src/components/cell-control/date.md | 4 ++-- src/components/cell-control/input.md | 4 ++-- src/components/cell-control/money.md | 4 ++-- .../cell-control/multi-autocompleter.md | 4 ++-- src/components/cell-control/multi-select.md | 4 ++-- src/components/cell-control/number.md | 4 ++-- src/components/cell-control/select.md | 6 +++--- src/components/cell-control/textarea.md | 4 ++-- src/components/checkbox/checkbox.md | 18 +++++++++--------- src/components/checkbox/inline-checkbox.jsx | 2 +- src/components/control/icons.jsx | 2 +- src/components/control/multi-select.jsx | 12 ++++++------ src/components/control/select.jsx | 6 +++--- src/components/date/date.md | 10 +++++----- src/components/date/date.test.jsx | 5 ++++- .../duration-input/duration-input.md | 4 ++-- src/components/form/form.md | 4 ++-- src/components/help-icon/help-icon.jsx | 2 +- src/components/icon-button/icon-button.md | 4 ++-- src/components/icon-button/icon-button.md.css | 4 ++-- src/components/icon/icon.md | 2 +- src/components/listbox/listbox.md | 14 +++++++------- src/components/listbox/listbox.test.jsx | 10 +++++----- src/components/loader/loader.md | 4 ++-- src/components/money-input/money-input.md | 4 ++-- .../multi-autocompleter/multi-autocompleter.md | 6 +++--- src/components/multi-select/multi-select.md | 16 ++++++++-------- .../multi-select/multi-select.test.jsx | 8 +++++++- src/components/multi-select/test-queries.js | 10 +++++----- src/components/number/number.md | 2 +- src/components/percentage/percentage.md | 4 ++-- src/components/popover/popover.jsx | 2 +- src/components/popover/popover.md | 10 +++++----- src/components/section-row/section-row.md | 4 ++-- src/components/section/section.md | 6 +++--- src/components/select/select.md | 8 ++++---- src/components/table/table.md | 2 +- src/components/tag-list/tag-list.md | 8 ++++---- src/components/tag-list/tag-list.test.jsx | 3 +-- src/components/tag/tag.jsx | 2 +- src/components/tag/tag.md | 4 ++-- src/components/tooltip/tooltip.md | 2 +- src/hooks/use-dropdown-close.test.jsx | 8 +++++++- src/linters/spacing.js | 2 +- src/svgs/caret-down.svg | 2 +- src/utils/currencies.js | 3 ++- 47 files changed, 136 insertions(+), 121 deletions(-) diff --git a/src/components/cell-control/autocompleter.md b/src/components/cell-control/autocompleter.md index 30e11961a..1268252b0 100644 --- a/src/components/cell-control/autocompleter.md +++ b/src/components/cell-control/autocompleter.md @@ -1,8 +1,8 @@ A grid cell for autocomplete-able datum. ```jsx -import Autocompleter from '@mavenlink/design-system/src/components/cell-control/autocompleter.jsx'; -import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table'; +import Autocompleter from '../../components/cell-control/autocompleter.jsx'; +import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table'; const ids = { th: { diff --git a/src/components/cell-control/date.md b/src/components/cell-control/date.md index 1faafff2a..54faa347a 100644 --- a/src/components/cell-control/date.md +++ b/src/components/cell-control/date.md @@ -1,8 +1,8 @@ A grid cell for date field. ```jsx -import Date from '@mavenlink/design-system/src/components/cell-control/date.jsx'; -import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table'; +import Date from '../../components/cell-control/date.jsx'; +import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table'; const ids = { th: { diff --git a/src/components/cell-control/input.md b/src/components/cell-control/input.md index 781f26429..cdeac01b6 100644 --- a/src/components/cell-control/input.md +++ b/src/components/cell-control/input.md @@ -1,8 +1,8 @@ A grid cell for text datum. ```jsx -import Input from '@mavenlink/design-system/src/components/cell-control/input.jsx'; -import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table'; +import Input from '../../components/cell-control/input.jsx'; +import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table'; const ids = { th: { diff --git a/src/components/cell-control/money.md b/src/components/cell-control/money.md index 7e0783950..c0a22d81b 100644 --- a/src/components/cell-control/money.md +++ b/src/components/cell-control/money.md @@ -1,8 +1,8 @@ A grid cell for money. ```jsx -import Money from '@mavenlink/design-system/src/components/cell-control/money.jsx'; -import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table'; +import Money from '../../components/cell-control/money.jsx'; +import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table'; const ids = { th: { diff --git a/src/components/cell-control/multi-autocompleter.md b/src/components/cell-control/multi-autocompleter.md index bded41119..50fbed1ba 100644 --- a/src/components/cell-control/multi-autocompleter.md +++ b/src/components/cell-control/multi-autocompleter.md @@ -1,6 +1,6 @@ ```jsx -import MultiAutocompleter from '@mavenlink/design-system/src/components/cell-control/multi-autocompleter.jsx'; -import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table'; +import MultiAutocompleter from '../../components/cell-control/multi-autocompleter.jsx'; +import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table'; const ids = { th: { diff --git a/src/components/cell-control/multi-select.md b/src/components/cell-control/multi-select.md index 947f828e3..5e674f991 100644 --- a/src/components/cell-control/multi-select.md +++ b/src/components/cell-control/multi-select.md @@ -1,6 +1,6 @@ ```jsx -import MultiSelect from '@mavenlink/design-system/src/components/cell-control/multi-select.jsx'; -import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table'; +import MultiSelect from '../../components/cell-control/multi-select.jsx'; +import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table'; const ids = { th: { diff --git a/src/components/cell-control/number.md b/src/components/cell-control/number.md index 5356b7be0..104c1c438 100644 --- a/src/components/cell-control/number.md +++ b/src/components/cell-control/number.md @@ -1,8 +1,8 @@ A grid cell for number. ```jsx -import Number from '@mavenlink/design-system/src/components/cell-control/number.jsx'; -import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table'; +import Number from '../../components/cell-control/number.jsx'; +import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table'; const ids = { th: { diff --git a/src/components/cell-control/select.md b/src/components/cell-control/select.md index 699914fce..170955ca7 100644 --- a/src/components/cell-control/select.md +++ b/src/components/cell-control/select.md @@ -1,9 +1,9 @@ A grid cell for text datum. ```jsx -import ListOption from '@mavenlink/design-system/src/components/list-option/list-option.jsx'; -import Select from '@mavenlink/design-system/src/components/cell-control/select.jsx'; -import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table'; +import ListOption from '../../components/list-option/list-option.jsx'; +import Select from '../../components/cell-control/select.jsx'; +import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table'; const ids = { th: { diff --git a/src/components/cell-control/textarea.md b/src/components/cell-control/textarea.md index 5cddf44e6..b92b7a1b9 100644 --- a/src/components/cell-control/textarea.md +++ b/src/components/cell-control/textarea.md @@ -1,8 +1,8 @@ A grid cell for large text datum. ```jsx -import Textarea from '@mavenlink/design-system/src/components/cell-control/textarea.jsx'; -import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '@mavenlink/design-system/src/components/table'; +import Textarea from '../../components/cell-control/textarea.jsx'; +import { Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from '../../components/table'; const ids = { th: { diff --git a/src/components/checkbox/checkbox.md b/src/components/checkbox/checkbox.md index 81de1757e..a8532c805 100644 --- a/src/components/checkbox/checkbox.md +++ b/src/components/checkbox/checkbox.md @@ -5,7 +5,7 @@ For design and accessibility functionality, see [Form Controls > Checkbox docume Basic usage. ```jsx -import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.jsx'; +import Checkbox from '../../components/checkbox/checkbox.jsx'; ; ``` @@ -67,7 +67,7 @@ import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox. Inline Required example. The validation message only shows when the checkbox is dirty. ```jsx -import Checkbox from '@mavenlink/design-system/src/components/checkbox/checkbox.jsx'; +import Checkbox from '../../components/checkbox/checkbox.jsx'; - {() => (props.listboxChildren + {() => (props.listboxChildren // eslint-disable-line react/prop-types ? props.listboxChildren(visibleOptions, visibleOptionsRefs, onOptionSelect) : visibleOptions.map((option, index) => ( - {props.optionLabelGetter(option)} + {props.optionLabelGetter(option) /* eslint-disable-line react/prop-types */ } )) )} diff --git a/src/components/control/select.jsx b/src/components/control/select.jsx index b53c9a1fc..621116a88 100644 --- a/src/components/control/select.jsx +++ b/src/components/control/select.jsx @@ -1,16 +1,16 @@ import React, { forwardRef, useEffect, - useImperativeHandle, useLayoutEffect, + useImperativeHandle, useRef, useState, } from 'react'; import PropTypes from 'prop-types'; -import Icons from './icons.jsx'; -import IconButton from '../icon-button/icon-button.jsx'; import iconClear from '../../svgs/clear.svg'; import iconCaretDown from '../../svgs/caret-down.svg'; import iconCaretDownDisabled from '../../svgs/caret-down-disabled.svg'; +import Icons from './icons.jsx'; +import IconButton from '../icon-button/icon-button.jsx'; import Listbox from '../listbox/listbox.jsx'; import NoOptions from '../no-options/no-options.jsx'; import styles from './select.css'; diff --git a/src/components/date/date.md b/src/components/date/date.md index 6313ec9a5..0c1480595 100644 --- a/src/components/date/date.md +++ b/src/components/date/date.md @@ -3,19 +3,19 @@ For design and accessibility functionality, see [Form Controls > Date documentat ## Props API Examples ```jsx -import Date from '@mavenlink/design-system/src/components/date/date.jsx'; +import Date from '../../components/date/date.jsx'; ``` ```jsx -import Date from '@mavenlink/design-system/src/components/date/date.jsx'; +import Date from '../../components/date/date.jsx'; ``` ```jsx -import Date from '@mavenlink/design-system/src/components/date/date.jsx'; +import Date from '../../components/date/date.jsx'; ``` @@ -23,8 +23,8 @@ import Date from '@mavenlink/design-system/src/components/date/date.jsx'; ## Ref API Example ```jsx -import Date from '@mavenlink/design-system/src/components/date/date.jsx'; -import RefExample from '@mavenlink/design-system/src/components/__site__/ref-example/ref-example.jsx'; +import Date from '../../components/date/date.jsx'; +import RefExample from '../../components/__site__/ref-example/ref-example.jsx'; const ref = React.createRef(); diff --git a/src/components/date/date.test.jsx b/src/components/date/date.test.jsx index 376255eab..c98dfb93a 100644 --- a/src/components/date/date.test.jsx +++ b/src/components/date/date.test.jsx @@ -101,7 +101,10 @@ describe('src/components/date/date.test.jsx', () => { const onKeyDownSpy = jest.fn(event => event.persist()); render(( -
+
)); diff --git a/src/components/duration-input/duration-input.md b/src/components/duration-input/duration-input.md index 3dd23967d..e03b1cf32 100644 --- a/src/components/duration-input/duration-input.md +++ b/src/components/duration-input/duration-input.md @@ -25,8 +25,8 @@ Duration input is an html input that formats the users input into a consistent o ## Ref API Example ```jsx -import DurationInput from '@mavenlink/design-system/src/components/duration-input/duration-input.jsx'; -import RefExample from '@mavenlink/design-system/src/components/__site__/ref-example/ref-example.jsx'; +import DurationInput from '../../components/duration-input/duration-input.jsx'; +import RefExample from '../../components/__site__/ref-example/ref-example.jsx'; const ref = React.createRef(); diff --git a/src/components/form/form.md b/src/components/form/form.md index d53f80f98..7f131b2e2 100644 --- a/src/components/form/form.md +++ b/src/components/form/form.md @@ -19,7 +19,7 @@ The form component allows a parent component to listen to value changes with a ` ### Example with native inputs ```jsx -import Form from '@mavenlink/design-system/src/components/form/form.jsx'; +import Form from '../../components/form/form.jsx'; const refs = [ React.createRef(), @@ -49,7 +49,7 @@ If the parent component is create a new `props.onSubmit` callback on every rende In this case, the parent component _must_ memoize its own `onSubmit` callback against its appropriate dependencies. ```jsx -import Form from '@mavenlink/design-system/src/components/form/form.jsx'; +import Form from '../../components/form/form.jsx'; const refs = [ React.createRef(), diff --git a/src/components/help-icon/help-icon.jsx b/src/components/help-icon/help-icon.jsx index c11cdb9fc..1bf6f97b3 100644 --- a/src/components/help-icon/help-icon.jsx +++ b/src/components/help-icon/help-icon.jsx @@ -1,8 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; +import helpSvg from '../../svgs/help.svg'; import Tooltip from '../tooltip/tooltip.jsx'; import Icon from '../icon/icon.jsx'; -import helpSvg from '../../svgs/help.svg'; export default function HelpIcon({ classNames, direction, id, label, text }) { return ( diff --git a/src/components/icon-button/icon-button.md b/src/components/icon-button/icon-button.md index 2f258a803..323c78097 100644 --- a/src/components/icon-button/icon-button.md +++ b/src/components/icon-button/icon-button.md @@ -20,7 +20,7 @@ It is recommended to apply some padding to the icon as a means of increasing the ## Basic example ```jsx -import caretDown from '@mavenlink/design-system/src/svgs/caret-down.svg'; +import caretDown from '../../svgs/caret-down.svg'; import styles from './icon-button.md.css'; diff --git a/src/components/icon-button/icon-button.md.css b/src/components/icon-button/icon-button.md.css index bb7da6dc3..993946786 100644 --- a/src/components/icon-button/icon-button.md.css +++ b/src/components/icon-button/icon-button.md.css @@ -1,5 +1,5 @@ -@import '../../../src/styles/colors-v2.css'; -@import '../../../src/styles/spacing.css'; +@import '../../styles/colors-v2.css'; +@import '../../styles/spacing.css'; .button { composes: button from './icon-button.css'; diff --git a/src/components/icon/icon.md b/src/components/icon/icon.md index 3041c6fcc..3746a0173 100644 --- a/src/components/icon/icon.md +++ b/src/components/icon/icon.md @@ -15,7 +15,7 @@ For an interactive icon component, @see [``](#/Components/IconButton ## Example ```js -import arrowLeft from '@mavenlink/design-system/src/svgs/arrow-left.svg'; +import arrowLeft from '../../svgs/arrow-left.svg'; ``` diff --git a/src/components/listbox/listbox.md b/src/components/listbox/listbox.md index 4e54152d4..168613c07 100644 --- a/src/components/listbox/listbox.md +++ b/src/components/listbox/listbox.md @@ -26,10 +26,10 @@ Otherwise, the user does not know the context of the list. ### Examples ```js -import FormControl from '@mavenlink/design-system/src/components/form-control/form-control.jsx'; -import Listbox from '@mavenlink/design-system/src/components/listbox/listbox.jsx'; -import ListOption from '@mavenlink/design-system/src/components/list-option/list-option.jsx'; -import RefExample from '@mavenlink/design-system/src/components/__site__/ref-example/ref-example.jsx'; +import FormControl from '../../components/form-control/form-control.jsx'; +import Listbox from '../../components/listbox/listbox.jsx'; +import ListOption from '../../components/list-option/list-option.jsx'; +import RefExample from '../../components/__site__/ref-example/ref-example.jsx'; const ref = React.createRef(); const refs = [React.createRef(), React.createRef(), React.createRef(), React.createRef(), React.createRef()]; @@ -58,9 +58,9 @@ const refs = [React.createRef(), React.createRef(), React.createRef(), React.cre If the list needs to be a certain size or style, place the listbox into its own containing `div` and style that `div`: ```js -import FormControl from '@mavenlink/design-system/src/components/form-control/form-control.jsx'; -import Listbox from '@mavenlink/design-system/src/components/listbox/listbox.jsx'; -import ListOption from '@mavenlink/design-system/src/components/list-option/list-option.jsx'; +import FormControl from '../../components/form-control/form-control.jsx'; +import Listbox from '../../components/listbox/listbox.jsx'; +import ListOption from '../../components/list-option/list-option.jsx'; const container = { width: '150px', diff --git a/src/components/listbox/listbox.test.jsx b/src/components/listbox/listbox.test.jsx index b92b0cf65..59b23e90a 100644 --- a/src/components/listbox/listbox.test.jsx +++ b/src/components/listbox/listbox.test.jsx @@ -54,21 +54,21 @@ describe('src/components/listbox/listbox', () => { it('only has the one option in the page tab sequence', () => { expect(document.body).toHaveFocus(); - act(() => userEvent.tab()); + userEvent.tab(); expect(screen.getByText('Hello')).toHaveFocus(); - act(() => userEvent.tab()); + userEvent.tab(); expect(screen.getByText('Hello')).not.toHaveFocus(); expect(screen.getByText('Hey')).not.toHaveFocus(); - act(() => userEvent.tab({ shift: true })); + userEvent.tab({ shift: true }); expect(screen.getByText('Hello')).toHaveFocus(); }); it('moves focus with arrows keys', () => { expect(document.body).toHaveFocus(); - act(() => userEvent.tab()); + userEvent.tab(); expect(screen.getByText('Hello')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); @@ -87,7 +87,7 @@ describe('src/components/listbox/listbox', () => { it('moves focus with Home and End keys', () => { expect(document.body).toHaveFocus(); - act(() => userEvent.tab()); + userEvent.tab(); expect(screen.getByText('Hello')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'End' }); diff --git a/src/components/loader/loader.md b/src/components/loader/loader.md index 51ab25c8d..5234a63e6 100644 --- a/src/components/loader/loader.md +++ b/src/components/loader/loader.md @@ -1,13 +1,13 @@ Spinner loader ```js -import Loader from '@mavenlink/design-system/src/components/loader/loader.jsx'; +import Loader from '../../components/loader/loader.jsx'; ``` ```js -import Loader from '@mavenlink/design-system/src/components/loader/loader.jsx'; +import Loader from '../../components/loader/loader.jsx'; ``` diff --git a/src/components/money-input/money-input.md b/src/components/money-input/money-input.md index e8dad8e51..346c5b513 100644 --- a/src/components/money-input/money-input.md +++ b/src/components/money-input/money-input.md @@ -80,8 +80,8 @@ presented to it, responding with a specific message for the context of that spec ## Ref API Example ```jsx -import MoneyInput from '@mavenlink/design-system/src/components/money-input/money-input.jsx'; -import RefExample from '@mavenlink/design-system/src/components/__site__/ref-example/ref-example.jsx'; +import MoneyInput from '../../components/money-input/money-input.jsx'; +import RefExample from '../../components/__site__/ref-example/ref-example.jsx'; const ref = React.createRef(); diff --git a/src/components/multi-autocompleter/multi-autocompleter.md b/src/components/multi-autocompleter/multi-autocompleter.md index 486112471..3c309d916 100644 --- a/src/components/multi-autocompleter/multi-autocompleter.md +++ b/src/components/multi-autocompleter/multi-autocompleter.md @@ -1,6 +1,6 @@ ## Basic Usage ```jsx -import MultiAutocompleter from '@mavenlink/design-system/src/components/multi-autocompleter/multi-autocompleter.jsx'; +import MultiAutocompleter from '../../components/multi-autocompleter/multi-autocompleter.jsx'; { return ( @@ -119,8 +119,8 @@ const tagChildren = (selectedOptions, refs, onOptionRemove) => { ## Ref API Example ```jsx -import MultiSelect from '@mavenlink/design-system/src/components/multi-select/multi-select.jsx'; -import RefExample from '@mavenlink/design-system/src/components/__site__/ref-example/ref-example.jsx'; +import MultiSelect from '../../components/multi-select/multi-select.jsx'; +import RefExample from '../../components/__site__/ref-example/ref-example.jsx'; const ref = React.createRef(); diff --git a/src/components/multi-select/multi-select.test.jsx b/src/components/multi-select/multi-select.test.jsx index f2519bd24..7dfa40b6f 100644 --- a/src/components/multi-select/multi-select.test.jsx +++ b/src/components/multi-select/multi-select.test.jsx @@ -83,7 +83,13 @@ describe('', () => { return (
{options.map((option, index) => ( - { onSelect({ target: refs[index] }); }}>Override {option.label} + { onSelect({ target: refs[index] }); }} + > + Override {option.label} + ))}
); diff --git a/src/components/multi-select/test-queries.js b/src/components/multi-select/test-queries.js index 5432b9dac..611a1931a 100644 --- a/src/components/multi-select/test-queries.js +++ b/src/components/multi-select/test-queries.js @@ -12,7 +12,7 @@ export function findAutocompleter(fieldLabel) { export async function findAvailableOption(fieldLabel, optionLabel) { const listbox = await screen.findByRole('listbox', { name: fieldLabel }); - return findByRole(listbox, 'option', { name: optionLabel }); + return findByRole(listbox, 'option', { name: optionLabel }); // eslint-disable-line testing-library/prefer-screen-queries } export function findRemoveButton(optionLabel) { @@ -25,7 +25,7 @@ export function findRemoveButton(optionLabel) { export async function findSelectedOption(fieldLabel, optionLabel) { const taglist = await screen.findByRole('grid', { name: fieldLabel }); - return findByRole(taglist, 'gridcell', { name: optionLabel }); + return findByRole(taglist, 'gridcell', { name: optionLabel }); // eslint-disable-line testing-library/prefer-screen-queries } export async function openOptions(fieldName) { @@ -34,7 +34,7 @@ export async function openOptions(fieldName) { export async function queryAvailableOption(fieldLabel, optionLabel) { const listbox = await screen.findByRole('listbox', { name: fieldLabel }); - return queryByRole(listbox, 'option', { name: optionLabel }); + return queryByRole(listbox, 'option', { name: optionLabel }); // eslint-disable-line testing-library/prefer-screen-queries } export function queryRemoveButton(fieldLabel, optionLabel) { @@ -47,12 +47,12 @@ export function queryRemoveButton(fieldLabel, optionLabel) { export async function querySelectedOption(fieldLabel, optionLabel) { const taglist = await screen.findByRole('grid', { name: fieldLabel }); - return queryByRole(taglist, 'gridcell', { name: optionLabel }); + return queryByRole(taglist, 'gridcell', { name: optionLabel }); // eslint-disable-line testing-library/prefer-screen-queries } export async function waitForLoadingComplete(fieldLabel) { const listbox = await screen.findByRole('listbox', { name: fieldLabel }); - const loader = await queryByRole(listbox, 'progressbar'); + const loader = queryByRole(listbox, 'progressbar'); // eslint-disable-line testing-library/prefer-screen-queries if (!loader) { return Promise.resolve(); diff --git a/src/components/number/number.md b/src/components/number/number.md index 8a6504626..19063e17b 100644 --- a/src/components/number/number.md +++ b/src/components/number/number.md @@ -37,7 +37,7 @@ We want to provide an accessible, fully integrated input component that captures ## Ref API Example ```js -import Number from '@mavenlink/design-system/src/components/number/number.jsx'; +import Number from '../../components/number/number.jsx'; function TestComponent() { const ref = React.useRef(); diff --git a/src/components/percentage/percentage.md b/src/components/percentage/percentage.md index c96a4ebdd..6e465d374 100644 --- a/src/components/percentage/percentage.md +++ b/src/components/percentage/percentage.md @@ -19,8 +19,8 @@ The `Percentage` component allows for representing a percentage in the range of ## Ref API Example ```jsx -import Percentage from '@mavenlink/design-system/src/components/percentage/percentage.jsx'; -import RefExample from '@mavenlink/design-system/src/components/__site__/ref-example/ref-example.jsx'; +import Percentage from '../../components/percentage/percentage.jsx'; +import RefExample from '../../components/__site__/ref-example/ref-example.jsx'; const ref = React.createRef(); diff --git a/src/components/popover/popover.jsx b/src/components/popover/popover.jsx index 236712102..463fd648d 100644 --- a/src/components/popover/popover.jsx +++ b/src/components/popover/popover.jsx @@ -6,8 +6,8 @@ import React, { useRef, useState, } from 'react'; -import IconButton from '../icon-button/icon-button.jsx'; import iconClear from '../../svgs/clear.svg'; +import IconButton from '../icon-button/icon-button.jsx'; import styles from './popover.css'; import useFlush from '../../hooks/use-flush.js'; import useMountedEffect from '../../hooks/use-mounted-effect.js'; diff --git a/src/components/popover/popover.md b/src/components/popover/popover.md index 26aba755f..6eec31fb2 100644 --- a/src/components/popover/popover.md +++ b/src/components/popover/popover.md @@ -8,7 +8,7 @@ use the `shouldClose` callback to avoid closing the dialog; and/or use the `onClose` callback to return focus to correct element. ```js -import Popover from '@mavenlink/design-system/src/components/popover/popover.jsx'; +import Popover from '../../components/popover/popover.jsx'; const containerRef = React.createRef(); const popoverRef = React.createRef(); @@ -36,9 +36,9 @@ function shouldClose(event) { Interactive components should be in the user focus flow, usually by making sure they have a `tabIndex={0}`. ```js -import Popover from '@mavenlink/design-system/src/components/popover/popover.jsx'; -import SectionRow from '@mavenlink/design-system/src/components/section-row/section-row.jsx'; -import RefExample from '@mavenlink/design-system/src/components/__site__/ref-example/ref-example.jsx'; +import Popover from '../../components/popover/popover.jsx'; +import SectionRow from '../../components/section-row/section-row.jsx'; +import RefExample from '../../components/__site__/ref-example/ref-example.jsx'; const ref = React.createRef(); @@ -64,7 +64,7 @@ function onPopoverOpenButtonClick() { Example with no heading that looks more like 'fly-out menu' ```js -import Popover from '@mavenlink/design-system/src/components/popover/popover.jsx'; +import Popover from '../../components/popover/popover.jsx'; const popoverRef = React.createRef(); const containerRef = React.createRef(); diff --git a/src/components/section-row/section-row.md b/src/components/section-row/section-row.md index e526c58de..00d1e5e45 100644 --- a/src/components/section-row/section-row.md +++ b/src/components/section-row/section-row.md @@ -1,8 +1,8 @@ `SectionRow`s are designed to complement `Section`s, allowing a design-spec approach to a "table-like" to component layout. They use specific spacing between child components. They should only be used as containers, and within a `Section` component. ```js -import Section from '@mavenlink/design-system/src/components/section/section.jsx'; -import Input from '@mavenlink/design-system/src/components/input/input.jsx'; +import Section from '../../components/section/section.jsx'; +import Input from '../../components/input/input.jsx';
React.createRef()); ## Ref API Example ```jsx -import Select from '@mavenlink/design-system/src/components/select/select.jsx'; +import Select from '../../components/select/select.jsx'; import ListOption from '../list-option/list-option.jsx'; -import RefExample from '@mavenlink/design-system/src/components/__site__/ref-example/ref-example.jsx'; +import RefExample from '../../components/__site__/ref-example/ref-example.jsx'; const ref = React.createRef(); const listOptions = ['test', 'this', 'select', 'foo', 'bar', 'baz', 'This is a much longer test value that is super long because sometimes people like to put long values in there, you know? It can make sense sometimes. Maybe this is not the best way to convey longform data, but who I am I to say? Power to the people and all that.', '1', '2', '3', '4', '5', '6', '7']; diff --git a/src/components/table/table.md b/src/components/table/table.md index 3b0c63e2c..e7563d636 100644 --- a/src/components/table/table.md +++ b/src/components/table/table.md @@ -1,5 +1,5 @@ ```js -const { TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } = require('@mavenlink/design-system/src/components/table'); +const { TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } = require('../../components/table'); diff --git a/src/components/tag-list/tag-list.md b/src/components/tag-list/tag-list.md index 2100aa5cc..72f9aa317 100644 --- a/src/components/tag-list/tag-list.md +++ b/src/components/tag-list/tag-list.md @@ -36,8 +36,8 @@ This ensures screen readers can know: ### Example ```js -import FormControl from '@mavenlink/design-system/src/components/form-control/form-control.jsx'; -import Tag from '@mavenlink/design-system/src/components/tag/tag.jsx'; +import FormControl from '../../components/form-control/form-control.jsx'; +import Tag from '../../components/tag/tag.jsx'; const data = [ 'Molotov Solution', @@ -69,8 +69,8 @@ const tagListId = 'basic-example'; ### Wrapping example ```js -import FormControl from '@mavenlink/design-system/src/components/form-control/form-control.jsx'; -import Tag from '@mavenlink/design-system/src/components/tag/tag.jsx'; +import FormControl from '../../components/form-control/form-control.jsx'; +import Tag from '../../components/tag/tag.jsx'; const data = [ 'command (abstract role)', diff --git a/src/components/tag-list/tag-list.test.jsx b/src/components/tag-list/tag-list.test.jsx index d3db16c8d..3ecdea652 100644 --- a/src/components/tag-list/tag-list.test.jsx +++ b/src/components/tag-list/tag-list.test.jsx @@ -1,6 +1,5 @@ import React, { createRef } from 'react'; -import { waitFor } from '@testing-library/dom'; -import { fireEvent, render, screen } from '@testing-library/react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import TagList from './tag-list.jsx'; import Tag from '../tag/tag.jsx'; diff --git a/src/components/tag/tag.jsx b/src/components/tag/tag.jsx index d72d5f475..2eb0e97d3 100644 --- a/src/components/tag/tag.jsx +++ b/src/components/tag/tag.jsx @@ -6,8 +6,8 @@ import React, { useRef, useState, } from 'react'; -import styles from './tag.css'; import clear from '../../svgs/clear.svg'; +import styles from './tag.css'; import IconButton from '../icon-button/icon-button.jsx'; import useForwardedRef from '../../hooks/use-forwarded-ref.js'; diff --git a/src/components/tag/tag.md b/src/components/tag/tag.md index 1809087ef..dc10318fe 100644 --- a/src/components/tag/tag.md +++ b/src/components/tag/tag.md @@ -40,8 +40,8 @@ This component's accessibility was built using the [WAI ARIA Examples](https://w ``` ```js -import Icon from '@mavenlink/design-system/src/components/icon/icon.jsx'; -import iconTick from '@mavenlink/design-system/src/svgs/tick.svg'; +import Icon from '../../components/icon/icon.jsx'; +import iconTick from '../../svgs/tick.svg'; diff --git a/src/components/tooltip/tooltip.md b/src/components/tooltip/tooltip.md index 702191812..5ab6d7501 100644 --- a/src/components/tooltip/tooltip.md +++ b/src/components/tooltip/tooltip.md @@ -82,7 +82,7 @@ Tooltip with graphic ```jsx import Tooltip from './tooltip.jsx'; import Icon from '../icon/icon.jsx'; -import arrowLeft from '@mavenlink/design-system/src/svgs/arrow-left.svg'; +import arrowLeft from '../../svgs/arrow-left.svg'; { useDropdownClose(ref, opened, onClose); return ( -
{opened ? 'opened' : 'closed'}
+
+ {opened ? 'opened' : 'closed'} +
); } diff --git a/src/linters/spacing.js b/src/linters/spacing.js index 5119232b6..fb82e0061 100644 --- a/src/linters/spacing.js +++ b/src/linters/spacing.js @@ -141,7 +141,7 @@ module.exports = stylelint.createPlugin( } const importString = - "@import '@mavenlink/design-system/src/styles/spacing.css';"; + "@import '../../styles/spacing.css';"; if (!root.toString().includes(importString) && shouldImport) { root.prepend(importString); } diff --git a/src/svgs/caret-down.svg b/src/svgs/caret-down.svg index 54a2a38c9..00e847381 100644 --- a/src/svgs/caret-down.svg +++ b/src/svgs/caret-down.svg @@ -4,4 +4,4 @@ - \ No newline at end of file + diff --git a/src/utils/currencies.js b/src/utils/currencies.js index 757bd9bc7..bb2264807 100644 --- a/src/utils/currencies.js +++ b/src/utils/currencies.js @@ -1,5 +1,5 @@ /* Downloaded XML file from https://www.currency-iso.org/en/home/tables/table-a1.html and converted to javascript */ -export default { +const currencies = { ISO_4217: { Published: '2018-08-29', CcyTbl: { @@ -1976,3 +1976,4 @@ export default { }, }, }; +export default currencies; From f3d852dcb2e23f4251e2690950a8c41d3102f9b3 Mon Sep 17 00:00:00 2001 From: Ben Nappier Date: Thu, 28 Jul 2022 11:47:09 -0600 Subject: [PATCH 2/6] Export external/mds --- src/components/control/select.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/control/select.jsx b/src/components/control/select.jsx index 621116a88..1dc4841b4 100644 --- a/src/components/control/select.jsx +++ b/src/components/control/select.jsx @@ -2,6 +2,7 @@ import React, { forwardRef, useEffect, useImperativeHandle, + useLayoutEffect, useRef, useState, } from 'react'; From cba5d89bfa0d419e9778afb8c2159143c868c2b3 Mon Sep 17 00:00:00 2001 From: Ben Nappier Date: Thu, 28 Jul 2022 12:02:37 -0600 Subject: [PATCH 3/6] Refactor test helpers; skip eslint skips --- .../multi-select/multi-select.test.jsx | 96 +++++++++---------- src/components/multi-select/test-queries.js | 29 +++--- 2 files changed, 59 insertions(+), 66 deletions(-) diff --git a/src/components/multi-select/multi-select.test.jsx b/src/components/multi-select/multi-select.test.jsx index 7dfa40b6f..34d0ba708 100644 --- a/src/components/multi-select/multi-select.test.jsx +++ b/src/components/multi-select/multi-select.test.jsx @@ -64,7 +64,7 @@ describe('', () => { render(); expect(document.body).toMatchSnapshot(); - expect((await findSelectedOption('test label', 'Foo')).parentElement).toHaveAttribute('id', 'unique-id-option-1'); + expect((await findSelectedOption('Foo')).parentElement).toHaveAttribute('id', 'unique-id-option-1'); }); }); @@ -100,7 +100,7 @@ describe('', () => { await openOptions('test label'); expect(screen.getByText('Override Foo')).toBeInTheDocument(); userEvent.click(screen.getByText('Override Foo')); - expect(await findSelectedOption('test label', 'Foo')).toBeInTheDocument(); + expect(await findSelectedOption('Foo')).toBeInTheDocument(); }); }); @@ -123,7 +123,7 @@ describe('', () => { render(); await openOptions('test label'); - userEvent.click(await await findAvailableOption('test label', 'Foo')); + userEvent.click(await await findAvailableOption('Foo')); expect(onChangeMock).toHaveBeenCalled(); }); }); @@ -144,8 +144,8 @@ describe('', () => { render(); await openOptions('test label'); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); - expect(await findAvailableOption('test label', 'Bar')).toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); + expect(await findAvailableOption('Bar')).toBeInTheDocument(); }); }); @@ -169,17 +169,17 @@ describe('', () => { await openOptions('test label'); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); - expect(await findAvailableOption('test label', 'Bar')).toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); + expect(await findAvailableOption('Bar')).toBeInTheDocument(); userEvent.type(document.activeElement, 'F'); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); - expect(await queryAvailableOption('test label', 'Bar')).not.toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); + expect(await queryAvailableOption('Bar')).not.toBeInTheDocument(); - userEvent.click(await findAvailableOption('test label', 'Foo')); + userEvent.click(await findAvailableOption('Foo')); - expect(await findSelectedOption('test label', 'Foo')).toBeInTheDocument(); + expect(await findSelectedOption('Foo')).toBeInTheDocument(); }); }); @@ -211,7 +211,7 @@ describe('', () => { value={[requiredProps.options[0]]} />)); - expect(await findSelectedOption('test label', 'Foo')).toBeInTheDocument(); + expect(await findSelectedOption('Foo')).toBeInTheDocument(); expect(await findAutocompleter('test label')).not.toHaveAttribute('readOnly', ''); expect(screen.getByRole('button', { name: 'Remove Foo' })).toBeInTheDocument(); }); @@ -232,7 +232,7 @@ describe('', () => { expect(await findAutocompleter('test label')).toBeInvalid(); expect(screen.getByText('Constraints not satisfied', { selector: 'span' })).toBeInTheDocument(); userEvent.click(await findAutocompleter('test label')); - userEvent.click(await findAvailableOption('test label', 'Foo')); + userEvent.click(await findAvailableOption('Foo')); expect(await findAutocompleter('test label')).toBeValid(); expect(screen.getByText('Constraints not satisfied', { selector: 'span' })).toBeInTheDocument(); userEvent.click(document.body); @@ -246,7 +246,7 @@ describe('', () => { value={[requiredProps.options[0]]} />)); - expect(await findSelectedOption('test label', 'Foo')).toBeInTheDocument(); + expect(await findSelectedOption('Foo')).toBeInTheDocument(); expect(await findAutocompleter('test label')).not.toHaveAttribute('required'); expect(await findAutocompleter('test label')).toBeValid(); expect(await findAutocompleter('test label')).not.toHaveAccessibleDescription('Constraints not satisfied'); @@ -298,9 +298,9 @@ describe('', () => { render(); expect(screen.getByText('Override Foo')).toBeInTheDocument(); - expect(await findSelectedOption('test label', 'Foo')).toBeInTheDocument(); + expect(await findSelectedOption('Foo')).toBeInTheDocument(); userEvent.click(await findRemoveButton('Foo')); - expect(await querySelectedOption('test label', 'Foo')).not.toBeInTheDocument(); + expect(await querySelectedOption('Foo')).not.toBeInTheDocument(); }); }); @@ -318,20 +318,20 @@ describe('', () => { it('sets the value for the input and is responsive to changes', async () => { const { rerender } = render(); - expect(await findSelectedOption('test label', 'Foo')).toBeInTheDocument(); - expect(await querySelectedOption('test label', 'Bar')).not.toBeInTheDocument(); + expect(await findSelectedOption('Foo')).toBeInTheDocument(); + expect(await querySelectedOption('Bar')).not.toBeInTheDocument(); rerender(); - expect(await querySelectedOption('test label', 'Foo')).not.toBeInTheDocument(); - expect(await findSelectedOption('test label', 'Bar')).toBeInTheDocument(); + expect(await querySelectedOption('Foo')).not.toBeInTheDocument(); + expect(await findSelectedOption('Bar')).toBeInTheDocument(); rerender(); - expect(await querySelectedOption('test label', 'Foo')).not.toBeInTheDocument(); - expect(await querySelectedOption('test label', 'Bar')).not.toBeInTheDocument(); + expect(await querySelectedOption('Foo')).not.toBeInTheDocument(); + expect(await querySelectedOption('Bar')).not.toBeInTheDocument(); rerender(); - expect(await querySelectedOption('test label', 'Foo')).not.toBeInTheDocument(); - expect(await querySelectedOption('test label', 'Bar')).not.toBeInTheDocument(); + expect(await querySelectedOption('Foo')).not.toBeInTheDocument(); + expect(await querySelectedOption('Bar')).not.toBeInTheDocument(); }); }); @@ -345,30 +345,30 @@ describe('', () => { it('filters visible options on autocompleter value when props.filterOptions is true', async () => { render(); await openOptions('test label'); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); - expect(await findAvailableOption('test label', 'Bar')).toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); + expect(await findAvailableOption('Bar')).toBeInTheDocument(); userEvent.type(document.activeElement, 'F'); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); - expect(await queryAvailableOption('test label', 'Bar')).not.toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); + expect(await queryAvailableOption('Bar')).not.toBeInTheDocument(); }); it('does not filter options on autocompleter value when props.filterOptions is false', async () => { render(); await openOptions('test label'); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); - expect(await findAvailableOption('test label', 'Bar')).toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); + expect(await findAvailableOption('Bar')).toBeInTheDocument(); userEvent.type(document.activeElement, 'F'); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); - expect(await queryAvailableOption('test label', 'Bar')).toBeInTheDocument(); - userEvent.click(await findAvailableOption('test label', 'Foo')); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); + expect(await queryAvailableOption('Bar')).toBeInTheDocument(); + userEvent.click(await findAvailableOption('Foo')); await openOptions('test label'); - expect(await queryAvailableOption('test label', 'Foo')).not.toBeInTheDocument(); + expect(await queryAvailableOption('Foo')).not.toBeInTheDocument(); }); it('clears the autocompleter on selection', async () => { render(); userEvent.type(await findAutocompleter('test label'), 'F'); - userEvent.click(await findAvailableOption('test label', 'Foo')); + userEvent.click(await findAvailableOption('Foo')); expect(await findAutocompleter('test label')).toHaveValue(''); }); @@ -378,7 +378,7 @@ describe('', () => { expect(await findAutocompleter('test label')).toHaveFocus(); expect(await findAutocompleter('test label')).toHaveAttribute('aria-expanded', 'false'); await userEvent.type(await findAutocompleter('test label'), 'Fo', { skipClick: true }); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); }); it('closes on escape key', async () => { @@ -400,16 +400,16 @@ describe('', () => { it('removes the option value when pressing the remove button', async () => { render(); - expect(await findSelectedOption('test label', 'Foo')).toBeInTheDocument(); + expect(await findSelectedOption('Foo')).toBeInTheDocument(); userEvent.click(await findRemoveButton('Foo')); - expect(await querySelectedOption('test label', 'Foo')).not.toBeInTheDocument(); + expect(await querySelectedOption('Foo')).not.toBeInTheDocument(); }); it('does not expand the popup', async () => { render(); - expect(await findSelectedOption('test label', 'Foo')).toBeInTheDocument(); + expect(await findSelectedOption('Foo')).toBeInTheDocument(); expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); userEvent.click(await findRemoveButton('Foo')); expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); @@ -418,11 +418,11 @@ describe('', () => { it('removes all options when pressing the clear button and focuses the input', async () => { render(); - expect(await findSelectedOption('test label', 'Foo')).toBeInTheDocument(); - expect(await findSelectedOption('test label', 'Bar')).toBeInTheDocument(); + expect(await findSelectedOption('Foo')).toBeInTheDocument(); + expect(await findSelectedOption('Bar')).toBeInTheDocument(); userEvent.click(await findRemoveButton()); - expect(await querySelectedOption('test label', 'Foo')).not.toBeInTheDocument(); - expect(await querySelectedOption('test label', 'Bar')).not.toBeInTheDocument(); + expect(await querySelectedOption('Foo')).not.toBeInTheDocument(); + expect(await querySelectedOption('Bar')).not.toBeInTheDocument(); expect(await findAutocompleter('test label')).toHaveFocus(); }); }); @@ -460,7 +460,7 @@ describe('', () => { await openOptions('test label'); userEvent.click(await findAutocompleter('test label')); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); userEvent.click(screen.getByText('CLOSE')); await waitFor(() => { if (screen.queryByText('Foo')) throw new Error('Expected popup to be closed.'); @@ -478,7 +478,7 @@ describe('', () => { await openOptions('test label'); userEvent.click(await findAutocompleter('test label')); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); userEvent.tab(); userEvent.tab(); @@ -502,7 +502,7 @@ describe('', () => { expect(await findAutocompleter('test label')).toHaveValue(''); await userEvent.type(await findAutocompleter('test label'), 'F'); expect(await findAutocompleter('test label')).toHaveValue('F'); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); userEvent.click(screen.getByText('CLOSE')); await waitFor(async () => expect(await findAutocompleter('test label')).toHaveValue('')); @@ -531,7 +531,7 @@ describe('', () => { expect(ref.current.value).toContain(requiredProps.options[0]); await openOptions('test label'); - userEvent.click(await findAvailableOption('test label', 'Bar')); + userEvent.click(await findAvailableOption('Bar')); expect(ref.current.value).toContain(requiredProps.options[1]); }); @@ -542,7 +542,7 @@ describe('', () => { expect(ref.current.dirty).toBeFalsy(); await openOptions('test label'); - userEvent.click(await findAvailableOption('test label', 'Bar')); + userEvent.click(await findAvailableOption('Bar')); expect(ref.current.dirty).toBeTruthy(); }); }); diff --git a/src/components/multi-select/test-queries.js b/src/components/multi-select/test-queries.js index 611a1931a..4a041efd0 100644 --- a/src/components/multi-select/test-queries.js +++ b/src/components/multi-select/test-queries.js @@ -1,6 +1,4 @@ import { - findByRole, - queryByRole, screen, waitForElementToBeRemoved, } from '@testing-library/react'; @@ -10,9 +8,8 @@ export function findAutocompleter(fieldLabel) { return screen.findByRole('combobox', { name: fieldLabel }); } -export async function findAvailableOption(fieldLabel, optionLabel) { - const listbox = await screen.findByRole('listbox', { name: fieldLabel }); - return findByRole(listbox, 'option', { name: optionLabel }); // eslint-disable-line testing-library/prefer-screen-queries +export async function findAvailableOption(optionLabel) { + return screen.findByRole('option', { name: optionLabel }); } export function findRemoveButton(optionLabel) { @@ -23,21 +20,19 @@ export function findRemoveButton(optionLabel) { return screen.findByText('Remove all selected options'); } -export async function findSelectedOption(fieldLabel, optionLabel) { - const taglist = await screen.findByRole('grid', { name: fieldLabel }); - return findByRole(taglist, 'gridcell', { name: optionLabel }); // eslint-disable-line testing-library/prefer-screen-queries +export async function findSelectedOption(optionLabel) { + return screen.findByRole('gridcell', { name: optionLabel }); } export async function openOptions(fieldName) { userEvent.click(await screen.findByRole('combobox', { name: fieldName })); } -export async function queryAvailableOption(fieldLabel, optionLabel) { - const listbox = await screen.findByRole('listbox', { name: fieldLabel }); - return queryByRole(listbox, 'option', { name: optionLabel }); // eslint-disable-line testing-library/prefer-screen-queries +export async function queryAvailableOption(optionLabel) { + return screen.queryByRole('option', { name: optionLabel }); } -export function queryRemoveButton(fieldLabel, optionLabel) { +export function queryRemoveButton(optionLabel) { if (optionLabel) { return screen.queryByRole('button', { name: `Remove ${optionLabel}` }); } @@ -45,14 +40,12 @@ export function queryRemoveButton(fieldLabel, optionLabel) { return screen.queryByText('Remove all selected options'); } -export async function querySelectedOption(fieldLabel, optionLabel) { - const taglist = await screen.findByRole('grid', { name: fieldLabel }); - return queryByRole(taglist, 'gridcell', { name: optionLabel }); // eslint-disable-line testing-library/prefer-screen-queries +export async function querySelectedOption(optionLabel) { + return screen.queryByRole('gridcell', { name: optionLabel }); } -export async function waitForLoadingComplete(fieldLabel) { - const listbox = await screen.findByRole('listbox', { name: fieldLabel }); - const loader = queryByRole(listbox, 'progressbar'); // eslint-disable-line testing-library/prefer-screen-queries +export async function waitForLoadingComplete() { + const loader = screen.queryByRole('progressbar'); if (!loader) { return Promise.resolve(); From 002f5d251dc8fccd09a39e057c5ab9b230c3a99c Mon Sep 17 00:00:00 2001 From: Ben Nappier Date: Thu, 28 Jul 2022 12:30:53 -0600 Subject: [PATCH 4/6] Export external/mds --- .../multi-autocompleter.test.jsx | 70 +++++++++---------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/src/components/multi-autocompleter/multi-autocompleter.test.jsx b/src/components/multi-autocompleter/multi-autocompleter.test.jsx index 5a33654cc..0cb9234cf 100644 --- a/src/components/multi-autocompleter/multi-autocompleter.test.jsx +++ b/src/components/multi-autocompleter/multi-autocompleter.test.jsx @@ -73,7 +73,7 @@ describe('', () => { await openOptions('test label'); - expect(await findAvailableOption('test label', 'Test Option')).toBeInTheDocument(); + expect(await findAvailableOption('Test Option')).toBeInTheDocument(); }); }); @@ -93,7 +93,7 @@ describe('', () => { expect(onChangeMock).not.toHaveBeenCalled(); await openOptions('test label'); - userEvent.click(await await findAvailableOption('test label', 'Foo')); + userEvent.click(await await findAvailableOption('Foo')); expect(onChangeMock).toHaveBeenCalledWith({ target: { dirty: true, @@ -112,7 +112,7 @@ describe('', () => { userEvent.keyboard('Find'); - expect(await findAvailableOption('test label', 'Find-stub')).toBeInTheDocument(); + expect(await findAvailableOption('Find-stub')).toBeInTheDocument(); }); }); @@ -137,31 +137,31 @@ describe('', () => { render(); await openOptions('test label'); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); - expect(await findAvailableOption('test label', 'Option 6')).toBeInTheDocument(); - expect(await findAvailableOption('test label', 'Option 7')).toBeInTheDocument(); - expect(await findAvailableOption('test label', 'USD')).toBeInTheDocument(); - expect(await findAvailableOption('test label', 'Option 9')).toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); + expect(await findAvailableOption('Option 6')).toBeInTheDocument(); + expect(await findAvailableOption('Option 7')).toBeInTheDocument(); + expect(await findAvailableOption('USD')).toBeInTheDocument(); + expect(await findAvailableOption('Option 9')).toBeInTheDocument(); - userEvent.click(await findAvailableOption('test label', 'Foo')); + userEvent.click(await findAvailableOption('Foo')); await openOptions('test label'); - userEvent.click(await findAvailableOption('test label', 'Option 6')); + userEvent.click(await findAvailableOption('Option 6')); await openOptions('test label'); - userEvent.click(await findAvailableOption('test label', 'Option 7')); + userEvent.click(await findAvailableOption('Option 7')); await openOptions('test label'); - userEvent.click(await findAvailableOption('test label', 'USD')); + userEvent.click(await findAvailableOption('USD')); await openOptions('test label'); - userEvent.click(await findAvailableOption('test label', 'Option 9')); + userEvent.click(await findAvailableOption('Option 9')); - expect(await findSelectedOption('test label', 'Foo')).toBeInTheDocument(); - expect(await findSelectedOption('test label', 'Option 6')).toBeInTheDocument(); - expect(await findSelectedOption('test label', 'Option 7')).toBeInTheDocument(); - expect(await findSelectedOption('test label', 'USD')).toBeInTheDocument(); - expect(await findSelectedOption('test label', 'Option 9')).toBeInTheDocument(); + expect(await findSelectedOption('Foo')).toBeInTheDocument(); + expect(await findSelectedOption('Option 6')).toBeInTheDocument(); + expect(await findSelectedOption('Option 7')).toBeInTheDocument(); + expect(await findSelectedOption('USD')).toBeInTheDocument(); + expect(await findSelectedOption('Option 9')).toBeInTheDocument(); }); }); @@ -177,7 +177,7 @@ describe('', () => { expect(await screen.findByRole('progressbar')).toBeInTheDocument(); await waitForLoadingComplete('test label'); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); }); it('shows an error when option loading fails', async () => { @@ -191,13 +191,13 @@ describe('', () => { await openOptions('test label'); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); - expect(await findAvailableOption('test label', 'Bar')).toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); + expect(await findAvailableOption('Bar')).toBeInTheDocument(); userEvent.type(document.activeElement, 'Fo'); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); - expect(await queryAvailableOption('test label', 'Bar')).not.toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); + expect(await queryAvailableOption('Bar')).not.toBeInTheDocument(); }); it('resets the search value when an option is selected', async () => { @@ -205,17 +205,17 @@ describe('', () => { await openOptions('test label'); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); - expect(await findAvailableOption('test label', 'Bar')).toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); + expect(await findAvailableOption('Bar')).toBeInTheDocument(); userEvent.type(document.activeElement, 'Bar'); - expect(await queryAvailableOption('test label', 'Foo')).not.toBeInTheDocument(); - userEvent.click(await findAvailableOption('test label', 'Bar')); + expect(await queryAvailableOption('Foo')).not.toBeInTheDocument(); + userEvent.click(await findAvailableOption('Bar')); await openOptions('test label'); - expect(await findAvailableOption('test label', 'Foo')).toBeInTheDocument(); + expect(await findAvailableOption('Foo')).toBeInTheDocument(); }); }); @@ -223,7 +223,7 @@ describe('', () => { it('is responsive to prop changes', async () => { const { rerender } = render(); - expect(await querySelectedOption('test label', 'Foo')).not.toBeInTheDocument(); + expect(await querySelectedOption('Foo')).not.toBeInTheDocument(); rerender(', () => { }]} />); - const foo = await findSelectedOption('test label', 'Foo'); + const foo = await findSelectedOption('Foo'); expect(foo).toBeInTheDocument(); rerender(', () => { />); await waitForElementToBeRemoved(foo); - expect(await findSelectedOption('test label', 'Bar')).toBeInTheDocument(); + expect(await findSelectedOption('Bar')).toBeInTheDocument(); rerender(', () => { ]} />); - expect(await findSelectedOption('test label', 'Foo')).toBeInTheDocument(); - expect(await findSelectedOption('test label', 'Bar')).toBeInTheDocument(); + expect(await findSelectedOption('Foo')).toBeInTheDocument(); + expect(await findSelectedOption('Bar')).toBeInTheDocument(); }); it('accepts an array of ids', async () => { const { rerender } = render(); - expect(await querySelectedOption('test label', 'Foo')).not.toBeInTheDocument(); + expect(await querySelectedOption('Foo')).not.toBeInTheDocument(); rerender(); - const foo = await findSelectedOption('test label', 'Foo'); + const foo = await findSelectedOption('Foo'); expect(foo).toBeInTheDocument(); }); From f978c92e0486fb31b1b0b3786ab903385adcf33f Mon Sep 17 00:00:00 2001 From: Ben Nappier Date: Thu, 28 Jul 2022 13:36:11 -0600 Subject: [PATCH 5/6] Export external/mds --- .../autocompleter/autocompleter.test.jsx | 4 +-- .../multi-autocompleter.test.jsx | 4 +-- src/mocks/jest-server.js | 28 ++++++++++++++++++- src/mocks/jest-server.test.js | 26 ++++------------- 4 files changed, 35 insertions(+), 27 deletions(-) diff --git a/src/components/autocompleter/autocompleter.test.jsx b/src/components/autocompleter/autocompleter.test.jsx index 7eb841ecc..8d498cabf 100644 --- a/src/components/autocompleter/autocompleter.test.jsx +++ b/src/components/autocompleter/autocompleter.test.jsx @@ -10,9 +10,7 @@ import Autocompleter from './autocompleter.jsx'; import mockHandlers from './mock-handlers.js'; describe('src/components/autocompleter/autocompleter', () => { - beforeEach(() => { - jestServer.use(...mockHandlers()); - }); + jestServer.setup(mockHandlers()); const requiredProps = { id: 'test-id', diff --git a/src/components/multi-autocompleter/multi-autocompleter.test.jsx b/src/components/multi-autocompleter/multi-autocompleter.test.jsx index 0cb9234cf..6e1aa0ea4 100644 --- a/src/components/multi-autocompleter/multi-autocompleter.test.jsx +++ b/src/components/multi-autocompleter/multi-autocompleter.test.jsx @@ -27,9 +27,7 @@ describe('', () => { name: 'field-id', }; - beforeEach(() => { - jestServer.use(...mockHandlers()); - }); + jestServer.setup(mockHandlers()); it('has defaults', () => { const ref = createRef(); diff --git a/src/mocks/jest-server.js b/src/mocks/jest-server.js index d648b188d..00e877575 100644 --- a/src/mocks/jest-server.js +++ b/src/mocks/jest-server.js @@ -1,5 +1,31 @@ -import { setupServer } from 'msw/node'; // eslint-disable-line import/extensions +import { cleanup } from '@testing-library/react'; +import { setupServer } from 'msw/node'; const jestServer = setupServer(); +jestServer.setup = (handlers) => { + beforeAll(() => { + jestServer.listen({ + onUnhandledRequest(req) { + // Any non-mocked requests will throw on bad certs + // eslint-disable-next-line no-console + console.error(`Unhandled network request in tests. You must mock: ${req.method} ${req.url.toString()}`); + }, + }); + }); + + beforeEach(() => { + jestServer.use(...handlers); + }); + + afterEach(() => { + cleanup(); // Our components need to unmount as fast as possible to avoid any state changes due to async network requests. + jestServer.resetHandlers(); + }); + + afterAll(() => { + jestServer.close(); + }); +}; + export default jestServer; diff --git a/src/mocks/jest-server.test.js b/src/mocks/jest-server.test.js index 9d198c4f7..975683b01 100644 --- a/src/mocks/jest-server.test.js +++ b/src/mocks/jest-server.test.js @@ -3,30 +3,16 @@ import { API_ROOT } from './mock-constants.js'; import jestServer from './jest-server.js'; describe('src/mocks/jest-server', () => { - beforeEach(() => { - jestServer.use(rest.get(`${API_ROOT}/hello`, (request, response, context) => { - return response( - context.status(200), - context.text('Hello from MSW!'), - ); - })); - }); + jestServer.setup([rest.get(`${API_ROOT}/hello`, (request, response, context) => { + return response( + context.status(200), + context.text('Hello from MSW!'), + ); + })]); it('"serves" on http://localhost', async () => { const body = await (await fetch('http://localhost/api/v1/hello')).text(); expect(body).toEqual('Hello from MSW!'); }); - - it('errors on unhandled requests', async () => { - let expectedError; - - try { - await (await fetch('http://localhost/null')).text(); - } catch (error) { - expectedError = error; - } - - expect(expectedError.message).toContain('Error: captured a request without a matching request handler'); - }); }); From 317e2ffee949407c496c0f195d747cdf454042fa Mon Sep 17 00:00:00 2001 From: Ben Nappier Date: Thu, 28 Jul 2022 14:32:55 -0600 Subject: [PATCH 6/6] turn off import extensions; it was not working with import msw/node --- .eslintrc.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index bd34f75aa..32f4a3b31 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -8,9 +8,7 @@ module.exports = { 'prefer-arrow-callback': ['error', { allowNamedFunctions: true, }], - 'import/extensions': ['error', 'always', { - ignorePackages: true, - }], + 'import/extensions': 'off', 'no-mixed-operators': ['error', { allowSamePrecedence: true, }],