Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(testing): DISCOVERY-523 Add attributes to aid UI tests #463

Merged
merged 1 commit into from
Sep 27, 2024
Merged

refactor(testing): DISCOVERY-523 Add attributes to aid UI tests #463

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions config/cspell.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"mturley",
"nocolor",
"ouia",
"ouiaid",
"paramiko",
"patternfly",
"pbrun",
Expand All @@ -32,9 +33,11 @@
"runas",
"scanjob",
"srcset",
"sslv",
"tabindex",
"tbody",
"thead",
"tlsv",
"touchspin",
"vals",
"valuetext"
Expand Down
151 changes: 148 additions & 3 deletions src/components/simpleDropdown/__tests__/__snapshots__/simpleDropdown.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ exports[`SimpleDropdown should display items and allow selecting after toggle is
</button>
<div
class="pf-v5-c-menu"
data-ouia-component-id="OUIA-Generated-Dropdown-2"
data-ouia-component-id="OUIA-Generated-Dropdown-4"
data-ouia-component-type="PF5/Dropdown"
data-ouia-safe="true"
data-popper-escaped="true"
Expand All @@ -54,7 +54,7 @@ exports[`SimpleDropdown should display items and allow selecting after toggle is
>
<li
class="pf-v5-c-menu__list-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-1"
data-ouia-component-id="OUIA-Generated-DropdownItem-3"
data-ouia-component-type="PF5/DropdownItem"
data-ouia-safe="true"
role="none"
Expand All @@ -78,7 +78,7 @@ exports[`SimpleDropdown should display items and allow selecting after toggle is
</li>
<li
class="pf-v5-c-menu__list-item"
data-ouia-component-id="OUIA-Generated-DropdownItem-2"
data-ouia-component-id="OUIA-Generated-DropdownItem-4"
data-ouia-component-type="PF5/DropdownItem"
data-ouia-safe="true"
role="none"
Expand Down Expand Up @@ -122,6 +122,151 @@ exports[`SimpleDropdown should have a dropdown label: label 1`] = `
</span>
`;

exports[`SimpleDropdown should have a ouia id: button_ouiaid 1`] = `
<button
aria-expanded="false"
aria-label="Dropdown menu"
class="pf-v5-c-menu-toggle pf-m-disabled"
data-ouia-component-id="lorem_ipsum"
disabled=""
type="button"
>
<span
class="pf-v5-c-menu-toggle__text"
>
lorem ipsum
</span>
<span
class="pf-v5-c-menu-toggle__controls"
>
<span
class="pf-v5-c-menu-toggle__toggle-icon"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 320 512"
width="1em"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
</span>
</span>
</button>
`;

exports[`SimpleDropdown should have dropdown items with ouia id: expanded_ouiaid 1`] = `
<DocumentFragment>
<button
aria-expanded="true"
aria-label="Dropdown menu"
class="pf-v5-c-menu-toggle pf-m-expanded"
data-ouia-component-id="lorem_ipsum"
type="button"
>
<span
class="pf-v5-c-menu-toggle__text"
>
lorem ipsum
</span>
<span
class="pf-v5-c-menu-toggle__controls"
>
<span
class="pf-v5-c-menu-toggle__toggle-icon"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 320 512"
width="1em"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
</span>
</span>
</button>
<div
class="pf-v5-c-menu"
data-ouia-component-id="OUIA-Generated-Dropdown-3"
data-ouia-component-type="PF5/Dropdown"
data-ouia-safe="true"
data-popper-escaped="true"
data-popper-placement="bottom-start"
data-popper-reference-hidden="true"
style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
>
<div
class="pf-v5-c-menu__content"
>
<ul
class="pf-v5-c-menu__list"
role="menu"
>
<li
class="pf-v5-c-menu__list-item"
data-ouia-component-id="ouia-dolor"
data-ouia-component-type="PF5/DropdownItem"
data-ouia-safe="true"
role="none"
>
<button
class="pf-v5-c-menu__item"
role="menuitem"
tabindex="0"
type="button"
>
<span
class="pf-v5-c-menu__item-main"
>
<span
class="pf-v5-c-menu__item-text"
>
dolor
</span>
</span>
</button>
</li>
<li
class="pf-v5-c-menu__list-item"
data-ouia-component-id="ouia-sit"
data-ouia-component-type="PF5/DropdownItem"
data-ouia-safe="true"
role="none"
>
<button
class="pf-v5-c-menu__item"
role="menuitem"
tabindex="-1"
type="button"
>
<span
class="pf-v5-c-menu__item-main"
>
<span
class="pf-v5-c-menu__item-text"
>
sit
</span>
</span>
</button>
</li>
</ul>
</div>
</div>
</DocumentFragment>
`;

exports[`SimpleDropdown should render a basic component: basic 1`] = `
<Dropdown
isOpen={false}
Expand Down
29 changes: 28 additions & 1 deletion src/components/simpleDropdown/__tests__/simpleDropdown.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,41 @@ describe('SimpleDropdown', () => {
expect(component.querySelector('button > span')).toMatchSnapshot('label');
});

it('should have a ouia id', async () => {
const props = {
label: 'lorem ipsum',
menuToggleOuiaId: 'lorem_ipsum'
};
const component = await shallowComponent(<SimpleDropdown {...props} />);
expect(component.querySelector('button')).toMatchSnapshot('button_ouiaid');
});

it('should have dropdown items with ouia id', async () => {
const user = userEvent.setup();

const props = {
label: 'lorem ipsum',
menuToggleOuiaId: 'lorem_ipsum',
dropdownItems: [
{ item: 'dolor', ouiaId: 'ouia-dolor' },
{ item: 'sit', ouiaId: 'ouia-sit' }
]
};

const { asFragment } = render(<SimpleDropdown {...props} />);

await user.click(screen.getByText(props.label));
expect(asFragment()).toMatchSnapshot('expanded_ouiaid');
cdcabrera marked this conversation as resolved.
Show resolved Hide resolved
});

it('should display items and allow selecting after toggle is clicked', async () => {
const user = userEvent.setup();
const onMockSelect = jest.fn();

const props = {
label: 'Lorem ipsum',
onSelect: onMockSelect,
dropdownItems: ['dolor', 'sit']
dropdownItems: [{ item: 'dolor' }, { item: 'sit' }]
};

const { asFragment } = render(<SimpleDropdown {...props} />);
Expand Down
14 changes: 11 additions & 3 deletions src/components/simpleDropdown/simpleDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,15 @@ import {
type MenuToggleProps
} from '@patternfly/react-core';

interface SimpleDropdownItemProps {
item: string;
ouiaId?: number | string;
}

interface SimpleDropdownProps {
label: string;
dropdownItems?: string[];
menuToggleOuiaId?: number | string;
dropdownItems?: SimpleDropdownItemProps[];
ariaLabel?: string;
onSelect?: (item: string) => void;
variant?: MenuToggleProps['variant'];
Expand All @@ -26,6 +32,7 @@ interface SimpleDropdownProps {

const SimpleDropdown: React.FC<SimpleDropdownProps> = ({
label,
menuToggleOuiaId,
dropdownItems,
ariaLabel = 'Dropdown menu',
onSelect = Function.prototype,
Expand All @@ -50,15 +57,16 @@ const SimpleDropdown: React.FC<SimpleDropdownProps> = ({
variant={variant}
aria-label={ariaLabel}
isDisabled={!dropdownItems || dropdownItems.length === 0}
data-ouia-component-id={menuToggleOuiaId}
>
{label}
</MenuToggle>
)}
>
<DropdownList>
{Array.isArray(dropdownItems) &&
dropdownItems.map(item => (
<DropdownItem key={item} onClick={() => onSelect(item)}>
dropdownItems.map(({ item, ouiaId }) => (
<DropdownItem key={item} onClick={() => onSelect(item)} ouiaId={ouiaId}>
{item}
</DropdownItem>
))}
Expand Down
15 changes: 13 additions & 2 deletions src/components/typeAheadCheckboxes/typeaheadCheckboxes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,15 @@ interface TypeaheadCheckboxesProps {
options: { value: string; label: string }[];
selectedOptions?: string[];
placeholder?: string;
menuToggleOuiaId?: number | string;
}

const TypeaheadCheckboxes: React.FC<TypeaheadCheckboxesProps> = ({
onChange = Function.prototype,
options,
selectedOptions = [],
placeholder = '0 items selected'
placeholder = '0 items selected',
menuToggleOuiaId
}) => {
const [isOpen, setIsOpen] = useState(false);
const [inputValue, setInputValue] = useState<string>('');
Expand Down Expand Up @@ -156,7 +158,14 @@ const TypeaheadCheckboxes: React.FC<TypeaheadCheckboxesProps> = ({
}, [selected, placeholder]);

const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
<MenuToggle variant="typeahead" onClick={onToggleClick} innerRef={toggleRef} isExpanded={isOpen} isFullWidth>
<MenuToggle
variant="typeahead"
onClick={onToggleClick}
innerRef={toggleRef}
isExpanded={isOpen}
isFullWidth
data-ouia-component-id={menuToggleOuiaId}
>
<TextInputGroup isPlain>
<TextInputGroupMain
value={inputValue}
Expand All @@ -171,6 +180,7 @@ const TypeaheadCheckboxes: React.FC<TypeaheadCheckboxesProps> = ({
role="combobox"
isExpanded={isOpen}
aria-controls="select-multi-typeahead-checkbox-listbox"
data-ouia-component-id="credentials_list_input"
/>
<TextInputGroupUtilities>
{selected.length > 0 && (
Expand All @@ -182,6 +192,7 @@ const TypeaheadCheckboxes: React.FC<TypeaheadCheckboxesProps> = ({
textInputRef?.current?.focus();
}}
aria-label="Clear input value"
ouiaId="credentials_list_toggle_button"
>
<TimesIcon aria-hidden />
</Button>
Expand Down
4 changes: 2 additions & 2 deletions src/components/viewLayout/__tests__/__snapshots__/viewLayoutToolbar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,6 @@ exports[`ViewToolbar should render a basic component: basic 1`] = `
isPlain={true}
onOpenChange={[Function]}
onSelect={[Function]}
ouiaId="user_dropdown"
popperProps={
{
"position": "right",
Expand All @@ -116,6 +115,7 @@ exports[`ViewToolbar should render a basic component: basic 1`] = `
toggle={[Function]}
>
<DropdownItem
data-ouia-component-id="logout"
onClick={[Function]}
value="logout"
>
Expand All @@ -136,10 +136,10 @@ exports[`ViewToolbar should render a basic component: basic 1`] = `
isOpen={false}
onOpenChange={[Function]}
onSelect={[Function]}
ouiaId="user_dropdown"
toggle={[Function]}
>
<DropdownItem
data-ouia-component-id="logout"
onClick={[Function]}
value="logout"
>
Expand Down
Loading
Loading