feature/default_network_editable
Dan Miller
3 years ago
commit
d5c693d9db
@ -1,24 +1,71 @@ |
|||||||
.import-srp { |
.import-srp { |
||||||
|
&__container { |
||||||
|
display: grid; |
||||||
|
grid-template-areas: |
||||||
|
"title dropdown" |
||||||
|
"paste-tip paste-tip" |
||||||
|
"input input" |
||||||
|
"error error" |
||||||
|
"too-many-words-error too-many-words-error"; |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 767px) { |
||||||
|
&__container { |
||||||
|
grid-template-areas: |
||||||
|
"title" |
||||||
|
"dropdown" |
||||||
|
"paste-tip" |
||||||
|
"input" |
||||||
|
"error" |
||||||
|
"too-many-words-error"; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
&__srp-label { |
&__srp-label { |
||||||
|
grid-area: title; |
||||||
|
} |
||||||
|
|
||||||
|
&__number-of-words-dropdown { |
||||||
|
grid-area: dropdown; |
||||||
|
} |
||||||
|
|
||||||
|
&__paste-tip { |
||||||
margin-bottom: 8px; |
margin-bottom: 8px; |
||||||
|
grid-area: paste-tip; |
||||||
|
width: auto; |
||||||
|
margin-left: auto; |
||||||
|
margin-right: auto; |
||||||
} |
} |
||||||
|
|
||||||
&__srp-shown { |
&__srp { |
||||||
@include Paragraph; |
display: grid; |
||||||
|
grid-template-columns: 1fr 1fr 1fr; |
||||||
|
grid-area: input; |
||||||
|
} |
||||||
|
|
||||||
padding: 8px 16px; |
@media (max-width: 767px) { |
||||||
|
&__srp { |
||||||
|
grid-template-columns: 1fr; |
||||||
|
} |
||||||
} |
} |
||||||
|
|
||||||
&__srp-error { |
&__srp-word { |
||||||
margin-top: 4px; |
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin: 8px; |
||||||
} |
} |
||||||
|
|
||||||
&__show-srp { |
&__srp-word-label { |
||||||
margin-top: 16px; |
width: 2em; |
||||||
margin-bottom: 16px; |
|
||||||
} |
} |
||||||
|
|
||||||
&__show-srp-label { |
&__srp-error { |
||||||
margin-left: 8px; |
margin-top: 4px; |
||||||
|
grid-area: error; |
||||||
|
} |
||||||
|
|
||||||
|
&__srp-too-many-words-error { |
||||||
|
margin-top: 4px; |
||||||
|
grid-area: too-many-words-error; |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,43 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
|
||||||
|
const IconEyeSlash = ({ |
||||||
|
size = 24, |
||||||
|
color = 'currentColor', |
||||||
|
ariaLabel, |
||||||
|
className, |
||||||
|
}) => ( |
||||||
|
// This SVG is copied from `@fortawesome/fontawesome-free@5.13.0/regular/eye-slash.svg`.
|
||||||
|
<svg |
||||||
|
width={size} |
||||||
|
height={size} |
||||||
|
fill={color} |
||||||
|
className={className} |
||||||
|
aria-label={ariaLabel} |
||||||
|
xmlns="http://www.w3.org/2000/svg" |
||||||
|
viewBox="0 0 640 512" |
||||||
|
> |
||||||
|
<path d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z" /> |
||||||
|
</svg> |
||||||
|
); |
||||||
|
|
||||||
|
IconEyeSlash.propTypes = { |
||||||
|
/** |
||||||
|
* The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc |
||||||
|
*/ |
||||||
|
size: PropTypes.number, |
||||||
|
/** |
||||||
|
* The color of the icon accepts design token css variables |
||||||
|
*/ |
||||||
|
color: PropTypes.string, |
||||||
|
/** |
||||||
|
* An additional className to assign the Icon |
||||||
|
*/ |
||||||
|
className: PropTypes.string, |
||||||
|
/** |
||||||
|
* The aria-label of the icon for accessibility purposes |
||||||
|
*/ |
||||||
|
ariaLabel: PropTypes.string, |
||||||
|
}; |
||||||
|
|
||||||
|
export default IconEyeSlash; |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
|
||||||
|
const IconEye = ({ |
||||||
|
size = 24, |
||||||
|
color = 'currentColor', |
||||||
|
ariaLabel, |
||||||
|
className, |
||||||
|
}) => ( |
||||||
|
// This SVG copied from `@fortawesome/fontawesome-free@5.13.0/regular/eye.svg`.
|
||||||
|
<svg |
||||||
|
width={size} |
||||||
|
height={size} |
||||||
|
fill={color} |
||||||
|
className={className} |
||||||
|
aria-label={ariaLabel} |
||||||
|
xmlns="http://www.w3.org/2000/svg" |
||||||
|
viewBox="0 0 576 512" |
||||||
|
> |
||||||
|
<path d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z" /> |
||||||
|
</svg> |
||||||
|
); |
||||||
|
|
||||||
|
IconEye.propTypes = { |
||||||
|
/** |
||||||
|
* The size of the Icon follows an 8px grid 2 = 16px, 3 = 24px etc |
||||||
|
*/ |
||||||
|
size: PropTypes.number, |
||||||
|
/** |
||||||
|
* The color of the icon accepts design token css variables |
||||||
|
*/ |
||||||
|
color: PropTypes.string, |
||||||
|
/** |
||||||
|
* An additional className to assign the Icon |
||||||
|
*/ |
||||||
|
className: PropTypes.string, |
||||||
|
/** |
||||||
|
* The aria-label of the icon for accessibility purposes |
||||||
|
*/ |
||||||
|
ariaLabel: PropTypes.string, |
||||||
|
}; |
||||||
|
|
||||||
|
export default IconEye; |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './show-hide-toggle'; |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
.show-hide-toggle { |
||||||
|
position: relative; |
||||||
|
display: inline-flex; |
||||||
|
|
||||||
|
&__input { |
||||||
|
appearance: none; |
||||||
|
|
||||||
|
+ .show-hide-toggle__label { |
||||||
|
cursor: pointer; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* Focused when tabbing with keyboard */ |
||||||
|
&:focus, |
||||||
|
&:focus-visible { |
||||||
|
outline: none; |
||||||
|
|
||||||
|
+ .show-hide-toggle__label { |
||||||
|
outline: Highlight auto 1px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:disabled { |
||||||
|
+ label { |
||||||
|
opacity: 0.5; |
||||||
|
cursor: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&__icon { |
||||||
|
color: var(--color-icon-default); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,86 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import classnames from 'classnames'; |
||||||
|
|
||||||
|
import IconEye from '../icon/icon-eye'; |
||||||
|
import IconEyeSlash from '../icon/icon-eye-slash'; |
||||||
|
|
||||||
|
const ShowHideToggle = ({ |
||||||
|
id, |
||||||
|
shown, |
||||||
|
onChange, |
||||||
|
ariaLabelHidden, |
||||||
|
ariaLabelShown, |
||||||
|
className, |
||||||
|
'data-testid': dataTestId, |
||||||
|
disabled, |
||||||
|
title, |
||||||
|
}) => { |
||||||
|
return ( |
||||||
|
<div className={classnames('show-hide-toggle', className)}> |
||||||
|
<input |
||||||
|
className="show-hide-toggle__input" |
||||||
|
id={id} |
||||||
|
type="checkbox" |
||||||
|
checked={shown} |
||||||
|
onChange={onChange} |
||||||
|
data-testid={dataTestId} |
||||||
|
disabled={disabled} |
||||||
|
/> |
||||||
|
<label htmlFor={id} className="show-hide-toggle__label" title={title}> |
||||||
|
{shown ? ( |
||||||
|
<IconEye |
||||||
|
ariaLabel={ariaLabelShown} |
||||||
|
className="show-hide-toggle__icon" |
||||||
|
/> |
||||||
|
) : ( |
||||||
|
<IconEyeSlash |
||||||
|
ariaLabel={ariaLabelHidden} |
||||||
|
className="show-hide-toggle__icon" |
||||||
|
/> |
||||||
|
)} |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
ShowHideToggle.propTypes = { |
||||||
|
/** |
||||||
|
* The id of the ShowHideToggle for htmlFor |
||||||
|
*/ |
||||||
|
id: PropTypes.string.isRequired, |
||||||
|
/** |
||||||
|
* If the ShowHideToggle is in the "shown" state or not |
||||||
|
*/ |
||||||
|
shown: PropTypes.bool.isRequired, |
||||||
|
/** |
||||||
|
* The onChange handler of the ShowHideToggle |
||||||
|
*/ |
||||||
|
onChange: PropTypes.func.isRequired, |
||||||
|
/** |
||||||
|
* The aria-label of the icon representing the "hidden" state |
||||||
|
*/ |
||||||
|
ariaLabelHidden: PropTypes.string.isRequired, |
||||||
|
/** |
||||||
|
* The aria-label of the icon representing the "shown" state |
||||||
|
*/ |
||||||
|
ariaLabelShown: PropTypes.string.isRequired, |
||||||
|
/** |
||||||
|
* An additional className to give the ShowHideToggle |
||||||
|
*/ |
||||||
|
className: PropTypes.string, |
||||||
|
/** |
||||||
|
* The data test id of the input |
||||||
|
*/ |
||||||
|
'data-testid': PropTypes.string, |
||||||
|
/** |
||||||
|
* Whether the input is disabled or not |
||||||
|
*/ |
||||||
|
disabled: PropTypes.bool, |
||||||
|
/** |
||||||
|
* The title for the toggle. This is shown in a tooltip on hover. |
||||||
|
*/ |
||||||
|
title: PropTypes.string, |
||||||
|
}; |
||||||
|
|
||||||
|
export default ShowHideToggle; |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { useArgs } from '@storybook/client-api'; |
||||||
|
import ShowHideToggle from '.'; |
||||||
|
|
||||||
|
export default { |
||||||
|
title: 'Components/UI/ShowHideToggle', // title should follow the folder structure location of the component. Don't use spaces.
|
||||||
|
id: __filename, |
||||||
|
argTypes: { |
||||||
|
id: { |
||||||
|
control: 'text', |
||||||
|
}, |
||||||
|
ariaLabelHidden: { |
||||||
|
control: 'text', |
||||||
|
}, |
||||||
|
ariaLabelShown: { |
||||||
|
control: 'text', |
||||||
|
}, |
||||||
|
className: { |
||||||
|
control: 'text', |
||||||
|
}, |
||||||
|
dataTestId: { |
||||||
|
control: 'text', |
||||||
|
}, |
||||||
|
disabled: { |
||||||
|
control: 'boolean', |
||||||
|
}, |
||||||
|
onChange: { |
||||||
|
action: 'onChange', |
||||||
|
}, |
||||||
|
shown: { |
||||||
|
control: 'boolean', |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
export const DefaultStory = (args) => { |
||||||
|
const [{ shown }, updateArgs] = useArgs(); |
||||||
|
const handleOnToggle = () => { |
||||||
|
updateArgs({ shown: !shown }); |
||||||
|
}; |
||||||
|
return <ShowHideToggle {...args} shown={shown} onChange={handleOnToggle} />; |
||||||
|
}; |
||||||
|
|
||||||
|
DefaultStory.args = { |
||||||
|
id: 'showHideToggle', |
||||||
|
ariaLabelHidden: 'hidden', |
||||||
|
ariaLabelShown: 'shown', |
||||||
|
shown: false, |
||||||
|
}; |
||||||
|
|
||||||
|
DefaultStory.storyName = 'Default'; |
||||||
@ -0,0 +1,314 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { isInaccessible, render } from '@testing-library/react'; |
||||||
|
import userEvent from '@testing-library/user-event'; |
||||||
|
import ShowHideToggle from '.'; |
||||||
|
|
||||||
|
describe('ShowHideToggle', () => { |
||||||
|
beforeEach(() => { |
||||||
|
jest.resetAllMocks(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should set title', async () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByTitle } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown |
||||||
|
onChange={onChange} |
||||||
|
title="example-title" |
||||||
|
/>, |
||||||
|
); |
||||||
|
|
||||||
|
expect(queryByTitle('example-title')).toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should set test ID', async () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByTestId } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown |
||||||
|
onChange={onChange} |
||||||
|
data-testid="example-test-id" |
||||||
|
/>, |
||||||
|
); |
||||||
|
|
||||||
|
expect(queryByTestId('example-test-id')).toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should show correct aria-label when shown', () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByLabelText } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
|
||||||
|
expect(queryByLabelText('hidden')).not.toBeInTheDocument(); |
||||||
|
expect(queryByLabelText('shown')).toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should show correct aria-label when hidden', () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByLabelText } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown={false} |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
|
||||||
|
expect(queryByLabelText('hidden')).toBeInTheDocument(); |
||||||
|
expect(queryByLabelText('shown')).not.toBeInTheDocument(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should show correct checkbox state when shown', () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByRole } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
|
||||||
|
expect(queryByRole('checkbox')).toBeChecked(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should show correct checkbox state when hidden', () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByRole } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown={false} |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
|
||||||
|
expect(queryByRole('checkbox')).not.toBeChecked(); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('enabled', () => { |
||||||
|
it('should show checkbox as enabled', () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByRole } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
|
||||||
|
expect(queryByRole('checkbox')).toBeEnabled(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should be accessible', () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByRole } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
|
||||||
|
expect(isInaccessible(queryByRole('checkbox'))).toBeFalsy(); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('shown', () => { |
||||||
|
it('should call onChange when clicked', async () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByRole } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
await userEvent.click(queryByRole('checkbox')); |
||||||
|
|
||||||
|
expect(onChange).toHaveBeenCalledTimes(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should call onChange on space', async () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByRole } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
queryByRole('checkbox').focus(); |
||||||
|
await userEvent.keyboard('[Space]'); |
||||||
|
|
||||||
|
expect(onChange).toHaveBeenCalledTimes(1); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('hidden', () => { |
||||||
|
it('should call onChange when clicked', async () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByRole } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown={false} |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
await userEvent.click(queryByRole('checkbox')); |
||||||
|
|
||||||
|
expect(onChange).toHaveBeenCalledTimes(1); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should call onChange on space', async () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByRole } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown={false} |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
queryByRole('checkbox').focus(); |
||||||
|
await userEvent.keyboard('[Space]'); |
||||||
|
|
||||||
|
expect(onChange).toHaveBeenCalledTimes(1); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('disabled', () => { |
||||||
|
it('should show checkbox as disabled', () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByRole } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown |
||||||
|
disabled |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
|
||||||
|
expect(queryByRole('checkbox')).toBeDisabled(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should be accessible', () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByRole } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown |
||||||
|
disabled |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
|
||||||
|
expect(isInaccessible(queryByRole('checkbox'))).toBeFalsy(); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('shown', () => { |
||||||
|
it('should not call onChange when clicked', async () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByRole } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown |
||||||
|
disabled |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
await userEvent.click(queryByRole('checkbox')); |
||||||
|
|
||||||
|
expect(onChange).not.toHaveBeenCalled(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should not call onChange on space', async () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByRole } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown |
||||||
|
disabled |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
queryByRole('checkbox').focus(); |
||||||
|
await userEvent.keyboard('[Space]'); |
||||||
|
|
||||||
|
expect(onChange).not.toHaveBeenCalled(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
describe('hidden', () => { |
||||||
|
it('should not call onChange when clicked', async () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByRole } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown={false} |
||||||
|
disabled |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
await userEvent.click(queryByRole('checkbox')); |
||||||
|
|
||||||
|
expect(onChange).not.toHaveBeenCalled(); |
||||||
|
}); |
||||||
|
|
||||||
|
it('should not call onChange on space', async () => { |
||||||
|
const onChange = jest.fn(); |
||||||
|
const { queryByRole } = render( |
||||||
|
<ShowHideToggle |
||||||
|
id="example" |
||||||
|
ariaLabelHidden="hidden" |
||||||
|
ariaLabelShown="shown" |
||||||
|
shown={false} |
||||||
|
disabled |
||||||
|
onChange={onChange} |
||||||
|
/>, |
||||||
|
); |
||||||
|
queryByRole('checkbox').focus(); |
||||||
|
await userEvent.keyboard('[Space]'); |
||||||
|
|
||||||
|
expect(onChange).not.toHaveBeenCalled(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}); |
||||||
Loading…
Reference in new issue