diff --git a/src/Breadcrumb/Breadcrumb.test.jsx b/src/Breadcrumb/Breadcrumb.test.jsx index 9c0116a3e0..5072e64e44 100644 --- a/src/Breadcrumb/Breadcrumb.test.jsx +++ b/src/Breadcrumb/Breadcrumb.test.jsx @@ -90,7 +90,7 @@ describe('<Breadcrumb />', () => { it('passes down link props to link elements', () => { const linkProps = { label: 'Link 1', - url: '/link-1', + href: '/link-1', className: 'my-link', target: '_blank', }; diff --git a/src/ColorPicker/ColorPicker.test.jsx b/src/ColorPicker/ColorPicker.test.jsx index 60daa02323..88a5c1de97 100644 --- a/src/ColorPicker/ColorPicker.test.jsx +++ b/src/ColorPicker/ColorPicker.test.jsx @@ -20,10 +20,10 @@ describe('renders correctly', () => { it('renders with the passed variables ', () => { const className = 'testClassName'; const { container } = render( - <ColorPicker color={color} setColor={setColor} className={className} size="lg" />, + <ColorPicker color={color} setColor={setColor} className={className} size="sm" />, ); expect(container.firstChild.firstChild).toHaveClass(className); - expect(container.firstChild.firstChild).toHaveClass('pgn__color-picker-lg'); + expect(container.firstChild.firstChild).toHaveClass('pgn__color-picker-sm'); }); }); describe('picker works as expected', () => { diff --git a/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx b/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx index 1da8c89f85..1ced27ddfd 100644 --- a/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx +++ b/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx @@ -26,11 +26,13 @@ describe('<MultiSelectDropdownFilter />', () => { beforeEach(() => { jest.resetAllMocks(); }); - it('renders a list of checkboxes', () => { + it('renders a list of checkboxes', async () => { const wrapper = mount(<MultiSelectDropdownFilter {...props} />); wrapper.find('button').simulate('click'); - const checkbox = wrapper.find({ type: 'checkbox' }).find('input'); - expect(checkbox.length).toEqual(3); + await act(async () => { + const checkbox = wrapper.find({ type: 'checkbox' }).find('input'); + expect(checkbox.length).toEqual(3); + }); }); it('renders a title', () => { const wrapper = mount(<MultiSelectDropdownFilter {...props} />); @@ -63,25 +65,33 @@ describe('<MultiSelectDropdownFilter />', () => { }); expect(setFilterMock).toHaveBeenCalledWith([]); }); - it('renders checkbox label with filter name', () => { + it('renders checkbox label with filter name', async () => { const wrapper = mount(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />); wrapper.find('button').simulate('click'); - const label = wrapper.find('.form-check-label').at(0); - expect(label.text()).toContain(roan.name); + await act(async () => { + const label = wrapper.find('.form-check-label').at(0); + expect(label.text()).toContain(roan.name); + }); }); - it('renders checkbox label with number', () => { + it('renders checkbox label with number', async () => { const wrapper = mount(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />); wrapper.find('button').simulate('click'); - const label = wrapper.find('.pgn__checkbox-filter').at(0); - const badge = label.find(Badge); - expect(badge).toHaveLength(1); - expect(badge.text()).toEqual(String(roan.number)); + + await act(async () => { + const label = wrapper.find('.pgn__checkbox-filter').at(0); + const badge = label.find(Badge); + expect(badge).toHaveLength(1); + expect(badge.text()).toEqual(String(roan.number)); + }); }); - it('renders checkbox label with number', () => { + it('renders checkbox label with number', async () => { const wrapper = mount(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />); wrapper.find('button').simulate('click'); - const label = wrapper.find('.pgn__checkbox-filter').at(1); - const badge = label.find(Badge); - expect(badge).toHaveLength(0); + + await act(async () => { + const label = wrapper.find('.pgn__checkbox-filter').at(1); + const badge = label.find(Badge); + expect(badge).toHaveLength(0); + }); }); }); diff --git a/src/Dropdown/deprecated/index.jsx b/src/Dropdown/deprecated/index.jsx index b8c1fed8a7..2e6dace4a9 100644 --- a/src/Dropdown/deprecated/index.jsx +++ b/src/Dropdown/deprecated/index.jsx @@ -161,7 +161,7 @@ class Dropdown extends React.Component { } Dropdown.propTypes = { - children: PropTypes.node.isRequired, + children: PropTypes.node, }; Dropdown.Item = DropdownItem; diff --git a/src/Form/tests/FormGroup.test.jsx b/src/Form/tests/FormGroup.test.jsx index 39f1a3099f..65af690677 100644 --- a/src/Form/tests/FormGroup.test.jsx +++ b/src/Form/tests/FormGroup.test.jsx @@ -6,14 +6,16 @@ import FormControl from '../FormControl'; import FormLabel from '../FormLabel'; import FormControlFeedback from '../FormControlFeedback'; -/* eslint-disable react/prop-types */ -jest.mock('react-bootstrap/FormControl', () => function MockFormControl(props) { - const { children, ...otherProps } = props; - return ( - <form-control {...otherProps}> - {children} - </form-control> - ); +jest.mock('react-bootstrap/FormControl', () => { + const { forwardRef } = jest.requireActual('react'); + return forwardRef((props, ref) => { + const { children, ...otherProps } = props; + return ( + <form-control {...otherProps} ref={ref}> + {children} + </form-control> + ); + }); }); describe('FormGroup', () => { diff --git a/src/IconButton/IconButton.test.jsx b/src/IconButton/IconButton.test.jsx index 87b19847b8..3c3c96f067 100644 --- a/src/IconButton/IconButton.test.jsx +++ b/src/IconButton/IconButton.test.jsx @@ -16,9 +16,14 @@ describe('<IconButton />', () => { iconAs, variant, }; + const iconParams = { + prefix: 'pgn', + iconName: 'InfoOutlineIcon', + icon: [InfoOutline], + }; it('renders with required props', () => { const tree = renderer.create(( - <IconButton alt={alt} /> + <IconButton icon={iconParams} alt={alt} /> )).toJSON(); expect(tree).toMatchSnapshot(); }); diff --git a/src/IconButton/__snapshots__/IconButton.test.jsx.snap b/src/IconButton/__snapshots__/IconButton.test.jsx.snap index e61de8dfa8..f82a2df7ec 100644 --- a/src/IconButton/__snapshots__/IconButton.test.jsx.snap +++ b/src/IconButton/__snapshots__/IconButton.test.jsx.snap @@ -9,6 +9,35 @@ exports[`<IconButton /> renders with required props 1`] = ` > <span className="btn-icon__icon-container" - /> + > + <svg + aria-hidden="true" + className="svg-inline--fa fa-InfoOutlineIcon btn-icon__icon" + data-icon="InfoOutlineIcon" + data-prefix="pgn" + focusable="false" + role="img" + src={null} + style={Object {}} + viewBox="0 0 function SvgInfoOutline(props) { + return /*#__PURE__*/React.createElement(\\"svg\\", _extends({ + width: 24, + height: 24, + viewBox: \\"0 0 24 24\\", + fill: \\"none\\", + xmlns: \\"http://www.w3.org/2000/svg\\" + }, props), /*#__PURE__*/React.createElement(\\"path\\", { + d: \\"M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\\", + fill: \\"currentColor\\" + })); +} undefined" + xmlns="http://www.w3.org/2000/svg" + > + <path + fill="currentColor" + style={Object {}} + /> + </svg> + </span> </button> `; diff --git a/src/IconButtonToggle/IconButtonToggle.test.jsx b/src/IconButtonToggle/IconButtonToggle.test.jsx index c1e50aa225..b62fa4ebc6 100644 --- a/src/IconButtonToggle/IconButtonToggle.test.jsx +++ b/src/IconButtonToggle/IconButtonToggle.test.jsx @@ -43,11 +43,15 @@ describe('IconButtonToggle tests', () => { userEvent.click(btnDef); - waitFor(() => expect(btnDef).toHaveClass('btn-icon-primary-active')); - waitFor(() => expect(btnDef).toHaveAttribute('aria-selected', 'false')); - - waitFor(() => expect(btnAbc).toHaveClass('btn-icon-primary')); - waitFor(() => expect(btnAbc).toHaveAttribute('aria-selected', 'true')); + waitFor(() => { + expect(btnDef).toHaveClass('btn-icon-primary-active'); + expect(btnDef).toHaveAttribute('aria-selected', 'false'); + }); + + waitFor(() => { + expect(btnAbc).toHaveClass('btn-icon-primary'); + expect(btnAbc).toHaveAttribute('aria-selected', 'true'); + }); expect(spyChanger).toHaveBeenCalledWith('def'); }); diff --git a/src/Layout/Layout.test.jsx b/src/Layout/Layout.test.jsx index 4a301c3f28..ca32d11c1c 100644 --- a/src/Layout/Layout.test.jsx +++ b/src/Layout/Layout.test.jsx @@ -34,7 +34,9 @@ describe('<Layout />', () => { )).toEqual(true); }); it('renders although dimensions are incorrect', () => { - const wrapper = mount(<TestLayout lg={[{ span: 6, offset: 0 }, { span: 6, offset: 0 }]} />); + const wrapper = mount( + <TestLayout lg={[{ span: 6, offset: 0 }, { span: 6, offset: 0 }, { span: 6, offset: 0 }]} />, + ); const children = wrapper.find('.row div'); expect(children.length).not.toEqual(0); }); diff --git a/src/Menu/README.md b/src/Menu/README.md index a3587477ff..8b2516fe4b 100644 --- a/src/Menu/README.md +++ b/src/Menu/README.md @@ -28,7 +28,7 @@ A ``MenuItem`` is its own distinct component that is used by any kind of menu ov <MenuItem iconBefore={Check}>A Menu Item With an Icon Before</MenuItem> <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem> <MenuItem disabled>A Disabled Menu Item</MenuItem> - <MenuItem as={Hyperlink} href="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem> + <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem> <MenuItem as={Button} variant="tertiary" size="inline">A Button Menu Item</MenuItem> <MenuItem as={Form.Checkbox}>A Checkbox Menu Item</MenuItem> </Menu> diff --git a/src/Menu/SelectMenu.test.jsx b/src/Menu/SelectMenu.test.jsx index c9b5a954b8..f0d6e61b81 100644 --- a/src/Menu/SelectMenu.test.jsx +++ b/src/Menu/SelectMenu.test.jsx @@ -15,7 +15,7 @@ const selectMenu = mount( <MenuItem iconBefore={Add}>A Menu Item With an Icon Before</MenuItem> <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem> <MenuItem disabled>A Disabled Menu Item</MenuItem> - <MenuItem as={Hyperlink} href="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem> + <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem> <MenuItem>Falstaff</MenuItem> <MenuItem>Scipio</MenuItem> <MenuItem>Faustus</MenuItem> diff --git a/src/Menu/select-menu.md b/src/Menu/select-menu.md index ed90b22714..739aa40108 100644 --- a/src/Menu/select-menu.md +++ b/src/Menu/select-menu.md @@ -24,14 +24,14 @@ The ``Modal`` brings focus to the first menu element upon the click of the trigg <MenuItem iconBefore={Add}>A Menu Item With an Icon Before</MenuItem> <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem> <MenuItem disabled>A Disabled Menu Item</MenuItem> - <MenuItem as={Hyperlink} href="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem> + <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem> </SelectMenu> ``` #### Linked variant ```jsx live -<SelectMenu isLink={true} defaultMessage="Choose Your New Best Friend"> +<SelectMenu isLink defaultMessage="Choose Your New Best Friend"> <MenuItem>Falstaff</MenuItem> <MenuItem>Scipio</MenuItem> <MenuItem defaultSelected>Faustus</MenuItem> diff --git a/src/Modal/PopperElement.jsx b/src/Modal/PopperElement.jsx index 6a774720d2..f0e693e1fa 100644 --- a/src/Modal/PopperElement.jsx +++ b/src/Modal/PopperElement.jsx @@ -10,7 +10,7 @@ function PopperElement({ const { styles, attributes, - } = usePopper(target, popperElement, popperOptions); + } = usePopper(target?.current, popperElement, popperOptions); if (!target) { return null; @@ -30,7 +30,7 @@ PopperElement.defaultProps = { PopperElement.propTypes = { children: PropTypes.node, target: PropTypes.shape({ - current: PropTypes.node, + current: PropTypes.shape({}), }), strategy: PropTypes.oneOf(['absolute', 'fixed']), placement: PropTypes.oneOf([ diff --git a/src/Modal/PopperElement.test.jsx b/src/Modal/PopperElement.test.jsx index e1fd2366aa..d2c5e63525 100644 --- a/src/Modal/PopperElement.test.jsx +++ b/src/Modal/PopperElement.test.jsx @@ -45,7 +45,7 @@ describe('<PopperElement />', () => { </PopperElement> )); const popperEl = wrapper.find('[data-test="someValue"]'); - expect(usePopper).toHaveBeenCalledWith(targetRef, null, defaultPopperOptions); + expect(usePopper).toHaveBeenCalledWith(targetRef.current, null, defaultPopperOptions); expect(popperEl.length).toBe(1); expect(popperEl.props().style.someProperty).toBe('someValue'); }); diff --git a/src/Pagination/Pagination.test.jsx b/src/Pagination/Pagination.test.jsx index 78046cf4b5..d0614ab3b6 100644 --- a/src/Pagination/Pagination.test.jsx +++ b/src/Pagination/Pagination.test.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { mount } from 'enzyme'; import { Context as ResponsiveContext } from 'react-responsive'; +import { act } from 'react-dom/test-utils'; import breakpoints from '../utils/breakpoints'; import Pagination from './index'; import Dropdown from '../Dropdown'; @@ -290,7 +291,7 @@ describe('<Pagination />', () => { .toEqual(`${buttonLabels.page} 1, ${buttonLabels.currentPage}, ${buttonLabels.pageOfCount} 5`); }); - it('for the reduced variant shows dropdown button with the page count as label', () => { + it('for the reduced variant shows dropdown button with the page count as label', async () => { wrapper = mount(<Pagination variant="reduced" {...props} />); const dropdown = wrapper.find(Dropdown); @@ -298,12 +299,21 @@ describe('<Pagination />', () => { const dropdownButton = wrapper.find('button.dropdown-toggle'); dropdownButton.simulate('click'); - const dropdownChoices = wrapper.find(Dropdown.Item); - expect(dropdownChoices.length).toEqual(baseProps.pageCount); + await act(async () => { + const dropdownChoices = wrapper.find(Dropdown.Item); + expect(dropdownChoices.length).toEqual(baseProps.pageCount); + }); }); it('renders only previous and next buttons in minimal variant', () => { - wrapper = mount(<Pagination variant="minimal" />); + wrapper = mount( + <Pagination + variant="minimal" + onPageSelect={(pageNumber) => pageNumber} + pageCount={12} + paginationLabel="Label" + />, + ); const items = wrapper.find('li.page-item'); expect(items.length).toEqual(2); diff --git a/src/ProductTour/CheckpointBreadcrumbs.jsx b/src/ProductTour/CheckpointBreadcrumbs.jsx index 7dd367ed29..fd2bcf64e4 100644 --- a/src/ProductTour/CheckpointBreadcrumbs.jsx +++ b/src/ProductTour/CheckpointBreadcrumbs.jsx @@ -8,8 +8,23 @@ const CheckpointBreadcrumbs = React.forwardRef(({ currentIndex, totalCheckpoints return ( <span className="pgn__checkpoint-breadcrumb-container" ref={ref}> {new Array(totalCheckpoints).fill(0).map((v, i) => ( - i === currentIndex ? <span className="pgn__checkpoint-breadcrumb pgn__checkpoint-breadcrumb_active" data-testid="pgn__checkpoint-breadcrumb_active" /> - : <span className="pgn__checkpoint-breadcrumb pgn__checkpoint-breadcrumb_inactive" data-testid="pgn__checkpoint-breadcrumb_inactive" /> + i === currentIndex + ? ( + <span + /* eslint-disable-next-line react/no-array-index-key */ + key={i} + className="pgn__checkpoint-breadcrumb pgn__checkpoint-breadcrumb_active" + data-testid="pgn__checkpoint-breadcrumb_active" + /> + ) + : ( + <span + /* eslint-disable-next-line react/no-array-index-key */ + key={i} + className="pgn__checkpoint-breadcrumb pgn__checkpoint-breadcrumb_inactive" + data-testid="pgn__checkpoint-breadcrumb_inactive" + /> + ) ))} </span> ); diff --git a/src/ProductTour/index.jsx b/src/ProductTour/index.jsx index 9f04535e56..5b4754f395 100644 --- a/src/ProductTour/index.jsx +++ b/src/ProductTour/index.jsx @@ -10,7 +10,7 @@ const ProductTour = React.forwardRef(({ tours }, ref) => { advanceButtonText: tourAdvanceButtonText, dismissButtonText: tourDismissButtonText, endButtonText: tourEndButtonText, } = tourValue || {}; - const [currentCheckpointData, setCurrentCheckpointData] = useState([]); + const [currentCheckpointData, setCurrentCheckpointData] = useState(null); const [index, setIndex] = useState(0); const [isTourEnabled, setIsTourEnabled] = useState(false); const [prunedCheckpoints, setPrunedCheckpoints] = useState([]); @@ -170,7 +170,7 @@ ProductTour.propTypes = { onDismiss: PropTypes.func, /** A function that runs when triggering the `onClick` event of the advance * button if the given Checkpoint is the only or last Checkpoint in a tour. */ - onEnd: PropTypes.func.isRequired, + onEnd: PropTypes.func, /** A string that dictates the alignment of the Checkpoint around its target. */ placement: PropTypes.oneOf([ 'top', 'top-start', 'top-end', 'right-start', 'right', 'right-end', diff --git a/src/SelectableBox/tests/SelectableBox.test.jsx b/src/SelectableBox/tests/SelectableBox.test.jsx index 56b4ca8a6b..126fd9f719 100644 --- a/src/SelectableBox/tests/SelectableBox.test.jsx +++ b/src/SelectableBox/tests/SelectableBox.test.jsx @@ -28,9 +28,7 @@ describe('<SelectableBox />', () => { expect(tree).toMatchSnapshot(); }); it('correct render when type prop is changed', () => { - const boxWrapper = mount(<SelectableBox />); - expect(boxWrapper.find(Form.Radio).length).toBeGreaterThan(0); - boxWrapper.setProps({ type: 'anytype' }); + const boxWrapper = mount(<SelectableRadio />); expect(boxWrapper.find(Form.Radio).length).toBeGreaterThan(0); boxWrapper.setProps({ type: 'radio' }); expect(boxWrapper.find(Form.Radio).length).toBeGreaterThan(0); @@ -38,9 +36,15 @@ describe('<SelectableBox />', () => { expect(boxWrapper.find(Form.Checkbox).length).toBeGreaterThan(0); }); it('renders with radio input type if neither checkbox nor radio is passed', () => { - const wrapper = mount(<SelectableBox type="wrongType" />); + // Mock the `console.error` is intentional because an invalid `type` prop + // with `wrongType` specified for `ForwardRef` expects one of the ['radio','flag'] parameters. + // eslint-disable-next-line no-console + console.error = jest.fn(); + const wrapper = mount(<SelectableRadio type="wrongType" />); const selectableBox = wrapper.find('input'); expect(selectableBox.prop('type')).toEqual(radioType); + // eslint-disable-next-line no-console + console.error.mockRestore(); }); it('renders with checkbox input type', () => { const wrapper = mount(<SelectableCheckbox />); diff --git a/src/SelectableBox/tests/SelectableBoxSet.test.jsx b/src/SelectableBox/tests/SelectableBoxSet.test.jsx index a431528495..bfe16e0cef 100644 --- a/src/SelectableBox/tests/SelectableBoxSet.test.jsx +++ b/src/SelectableBox/tests/SelectableBoxSet.test.jsx @@ -34,15 +34,11 @@ function SelectableRadioSet(props) { describe('<SelectableBox.Set />', () => { describe('correct rendering', () => { it('renders without props', () => { - const tree = renderer.create(( - <SelectableBox.Set name="testName">SelectableBox</SelectableBox.Set> - )).toJSON(); + const tree = renderer.create((<SelectableRadioSet name="testName" />)).toJSON(); expect(tree).toMatchSnapshot(); }); it('correct render when type prop is changed', () => { - const setWrapper = mount(<SelectableBox.Set name="set" />); - expect(setWrapper.find(Form.RadioSet).length).toBeGreaterThan(0); - setWrapper.setProps({ type: 'anytype' }); + const setWrapper = mount(<SelectableRadioSet name="set" />); expect(setWrapper.find(Form.RadioSet).length).toBeGreaterThan(0); setWrapper.setProps({ type: 'radio' }); expect(setWrapper.find(Form.RadioSet).length).toBeGreaterThan(0); @@ -50,7 +46,9 @@ describe('<SelectableBox.Set />', () => { expect(setWrapper.find(Form.CheckboxSet).length).toBeGreaterThan(0); }); it('renders with children', () => { - const wrapper = mount(<SelectableBox.Set name="testName">{checkboxText(1)}</SelectableBox.Set>); + const wrapper = mount( + <SelectableCheckboxSet name="testName">{checkboxText(1)}</SelectableCheckboxSet>, + ); expect(wrapper.text()).toContain(checkboxText(1)); }); it('renders with on change event', () => { @@ -65,9 +63,15 @@ describe('<SelectableBox.Set />', () => { expect(selectableBoxSet.length).toEqual(1); }); it('renders with radio type if neither checkbox nor radio is passed', () => { + // Mock the `console.error` is intentional because an invalid `type` prop + // with type `text` specified for `ForwardRef` expects one of the ['radio','checkbox'] parameters. + // eslint-disable-next-line no-console + console.error = jest.fn(); const wrapper = mount(<SelectableCheckboxSet type="text" />); const selectableBoxSet = wrapper.find(Form.RadioSet); expect(selectableBoxSet.length).toEqual(1); + // eslint-disable-next-line no-console + console.error.mockRestore(); }); it('renders with radio type', () => { const wrapper = mount(<SelectableRadioSet type={radioType} />); diff --git a/src/SelectableBox/tests/__snapshots__/SelectableBoxSet.test.jsx.snap b/src/SelectableBox/tests/__snapshots__/SelectableBoxSet.test.jsx.snap index 3bfab4ec03..61d7de481c 100644 --- a/src/SelectableBox/tests/__snapshots__/SelectableBoxSet.test.jsx.snap +++ b/src/SelectableBox/tests/__snapshots__/SelectableBoxSet.test.jsx.snap @@ -5,6 +5,98 @@ exports[`<SelectableBox.Set /> correct rendering renders without props 1`] = ` className="pgn__selectable_box-set pgn__selectable_box-set--2 pgn__form-control-set" role="radiogroup" > - SelectableBox + <div + className="pgn__selectable_box" + onClick={[Function]} + onFocus={[Function]} + onKeyPress={[Function]} + role="button" + tabIndex={0} + > + <div + className="pgn__form-radio" + > + <input + className="pgn__form-radio-input" + defaultChecked={false} + hidden={true} + id="form-field1" + name="testName" + onChange={[Function]} + tabIndex={-1} + type="radio" + value={1} + /> + <div> + <label + className="pgn__form-label" + htmlFor="form-field1" + /> + </div> + </div> + SelectableRadio1 + </div> + <div + className="pgn__selectable_box" + onClick={[Function]} + onFocus={[Function]} + onKeyPress={[Function]} + role="button" + tabIndex={0} + > + <div + className="pgn__form-radio" + > + <input + className="pgn__form-radio-input" + defaultChecked={false} + hidden={true} + id="form-field2" + name="testName" + onChange={[Function]} + tabIndex={-1} + type="radio" + value={2} + /> + <div> + <label + className="pgn__form-label" + htmlFor="form-field2" + /> + </div> + </div> + SelectableRadio2 + </div> + <div + className="pgn__selectable_box" + onClick={[Function]} + onFocus={[Function]} + onKeyPress={[Function]} + role="button" + tabIndex={0} + > + <div + className="pgn__form-radio" + > + <input + className="pgn__form-radio-input" + defaultChecked={false} + hidden={true} + id="form-field3" + name="testName" + onChange={[Function]} + tabIndex={-1} + type="radio" + value={3} + /> + <div> + <label + className="pgn__form-label" + htmlFor="form-field3" + /> + </div> + </div> + SelectableRadio3 + </div> </div> `; diff --git a/src/Toast/Toast.test.jsx b/src/Toast/Toast.test.jsx index 079e8f1cf9..4cbfa56624 100644 --- a/src/Toast/Toast.test.jsx +++ b/src/Toast/Toast.test.jsx @@ -6,7 +6,7 @@ import Toast from './index'; /* eslint-disable-next-line react/prop-types */ function ToastWrapper({ children, ...props }) { return ( - <IntlProvider> + <IntlProvider locale="en"> <Toast {...props}> {children} </Toast>