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

chore: Enhance OUIA IDs for ConditionalFilter #1972

Merged
merged 6 commits into from
Feb 22, 2024
Merged

chore: Enhance OUIA IDs for ConditionalFilter #1972

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
23a7307
chore: Enhance OUIA IDs for ConditionalFilter
gkarat Feb 21, 2024
093d8af
chore: Cover more bulk select components with OUIA ID
gkarat Feb 22, 2024
d337a3a
chore: Add more OUIA IDs to primary toolbar actions
gkarat Feb 22, 2024
0be0531
chore: Add OUIA ID for bulk select dropdown
gkarat Feb 22, 2024
de5264a
chore: Update remaining snapshots
gkarat Feb 22, 2024
89c0374
chore: Update cypress tests
gkarat Feb 22, 2024
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
10 changes: 5 additions & 5 deletions packages/components/src/ConditionalFilter/ConditionalFilter.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,16 +131,16 @@ describe('ConditionalFilter', () => {
it('should open dropdown', async () => {
render(<ConditionalFilter {...initialProps} items={config} />);
await act(async () => {
await userEvent.click(screen.getByRole('button', { name: 'Conditional filter' }));
await userEvent.click(screen.getByRole('button', { name: 'Conditional filter toggle' }));
});
expect(screen.getByRole('menu', { name: 'Conditional filter' })).toBeDefined();
expect(screen.getByLabelText('Conditional filters list')).toBeDefined();
});

it('should call NOT call onChange when clicked on dropdown', async () => {
const onChange = jest.fn();
render(<ConditionalFilter {...initialProps} items={config} />);
act(() => {
userEvent.click(screen.getByRole('button', { name: 'Conditional filter' }));
userEvent.click(screen.getByRole('button', { name: 'Conditional filter toggle' }));
});
await act(async () => {
userEvent.click(screen.getByRole('menuitem', { name: 'Simple text 1' }));
Expand All @@ -152,7 +152,7 @@ describe('ConditionalFilter', () => {
const onChange = jest.fn();
render(<ConditionalFilter {...initialProps} items={config} onChange={onChange} />);
act(() => {
userEvent.click(screen.getByRole('button', { name: 'Conditional filter' }));
userEvent.click(screen.getByRole('button', { name: 'Conditional filter toggle' }));
});
await act(async () => {
await userEvent.click(screen.getByRole('menuitem', { name: 'Simple text 1' }));
Expand All @@ -163,7 +163,7 @@ describe('ConditionalFilter', () => {
it('should update state on select', async () => {
render(<ConditionalFilter {...initialProps} items={config} />);
act(() => {
userEvent.click(screen.getByRole('button', { name: 'Conditional filter' }));
userEvent.click(screen.getByRole('button', { name: 'Conditional filter toggle' }));
});

await act(async () => {
Expand Down
13 changes: 9 additions & 4 deletions packages/components/src/ConditionalFilter/ConditionalFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,18 +193,19 @@ const ConditionalFilter: React.FunctionComponent<ConditionalFilterProps> = ({
ref={innerRef}
onSelect={() => setIsOpen(false)}
isOpen={isOpen}
ouiaId="ConditionalFilter"
ouiaId="ConditionalFilterList"
onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
toggle={(toggleRef) => (
<MenuToggle
isDisabled={isDisabled}
className={
hideLabel ? 'ins-c-conditional-filter__group ins-c-conditional-filter__no-label' : 'ins-c-conditional-filter__group'
}
aria-label="Conditional filter"
aria-label="Conditional filter toggle"
ref={toggleRef}
onClick={() => setIsOpen((prev) => !prev)}
isExpanded={isOpen}
data-ouia-component-id="ConditionalFilterToggle"
>
<Icon size="md">
<FilterIcon />
Expand All @@ -215,7 +216,7 @@ const ConditionalFilter: React.FunctionComponent<ConditionalFilterProps> = ({
</MenuToggle>
)}
>
<DropdownList aria-label="Conditional filter">
<DropdownList aria-label="Conditional filters list">
{items.map((item, key) => (
<DropdownItem
key={item.id ? `${item.id}-dropdown` : key}
Expand All @@ -230,7 +231,11 @@ const ConditionalFilter: React.FunctionComponent<ConditionalFilterProps> = ({
</Dropdown>
</SplitItem>
)}
{ActiveComponent && <SplitItem isFilled>{getActiveComponent(activeItem)}</SplitItem>}
{ActiveComponent && (
<SplitItem isFilled data-ouia-component-id="ConditionalFilter">
{getActiveComponent(activeItem)}
</SplitItem>
)}
</Split>
)}
</Fragment>
Expand Down
37 changes: 28 additions & 9 deletions packages/components/src/ConditionalFilter/__snapshots__/ConditionalFilter.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ exports[`ConditionalFilter render should render correctly - isDisabled 1`] = `
>
<button
aria-expanded="false"
aria-label="Conditional filter"
aria-label="Conditional filter toggle"
class="pf-v5-c-menu-toggle pf-m-disabled ins-c-conditional-filter__group"
data-ouia-component-id="ConditionalFilterToggle"
disabled=""
type="button"
>
Expand Down Expand Up @@ -70,6 +71,7 @@ exports[`ConditionalFilter render should render correctly - isDisabled 1`] = `
</div>
<div
class="pf-v5-l-split__item pf-m-fill"
data-ouia-component-id="ConditionalFilter"
>
<span
class="pf-v5-c-form-control pf-m-icon ins-c-conditional-filter"
Expand Down Expand Up @@ -183,8 +185,9 @@ exports[`ConditionalFilter render should render correctly checkbox with value ch
>
<button
aria-expanded="false"
aria-label="Conditional filter"
aria-label="Conditional filter toggle"
class="pf-v5-c-menu-toggle ins-c-conditional-filter__group"
data-ouia-component-id="ConditionalFilterToggle"
type="button"
>
<span
Expand Down Expand Up @@ -242,6 +245,7 @@ exports[`ConditionalFilter render should render correctly checkbox with value ch
</div>
<div
class="pf-v5-l-split__item pf-m-fill"
data-ouia-component-id="ConditionalFilter"
>
<button
aria-expanded="false"
Expand Down Expand Up @@ -291,8 +295,9 @@ exports[`ConditionalFilter render should render correctly no value with value 1
>
<button
aria-expanded="false"
aria-label="Conditional filter"
aria-label="Conditional filter toggle"
class="pf-v5-c-menu-toggle ins-c-conditional-filter__group"
data-ouia-component-id="ConditionalFilterToggle"
type="button"
>
<span
Expand Down Expand Up @@ -350,6 +355,7 @@ exports[`ConditionalFilter render should render correctly no value with value 1
</div>
<div
class="pf-v5-l-split__item pf-m-fill"
data-ouia-component-id="ConditionalFilter"
>
<span
class="pf-v5-c-form-control pf-m-icon ins-c-conditional-filter"
Expand Down Expand Up @@ -410,8 +416,9 @@ exports[`ConditionalFilter render should render correctly radio filter with valu
>
<button
aria-expanded="false"
aria-label="Conditional filter"
aria-label="Conditional filter toggle"
class="pf-v5-c-menu-toggle ins-c-conditional-filter__group"
data-ouia-component-id="ConditionalFilterToggle"
type="button"
>
<span
Expand Down Expand Up @@ -469,6 +476,7 @@ exports[`ConditionalFilter render should render correctly radio filter with valu
</div>
<div
class="pf-v5-l-split__item pf-m-fill"
data-ouia-component-id="ConditionalFilter"
>
<button
aria-expanded="false"
Expand Down Expand Up @@ -518,8 +526,9 @@ exports[`ConditionalFilter render should render correctly simple text 1 with val
>
<button
aria-expanded="false"
aria-label="Conditional filter"
aria-label="Conditional filter toggle"
class="pf-v5-c-menu-toggle ins-c-conditional-filter__group"
data-ouia-component-id="ConditionalFilterToggle"
type="button"
>
<span
Expand Down Expand Up @@ -577,6 +586,7 @@ exports[`ConditionalFilter render should render correctly simple text 1 with val
</div>
<div
class="pf-v5-l-split__item pf-m-fill"
data-ouia-component-id="ConditionalFilter"
>
<span
class="pf-v5-c-form-control pf-m-icon ins-c-conditional-filter"
Expand Down Expand Up @@ -637,8 +647,9 @@ exports[`ConditionalFilter render should render correctly simple text 2 with val
>
<button
aria-expanded="false"
aria-label="Conditional filter"
aria-label="Conditional filter toggle"
class="pf-v5-c-menu-toggle ins-c-conditional-filter__group"
data-ouia-component-id="ConditionalFilterToggle"
type="button"
>
<span
Expand Down Expand Up @@ -696,6 +707,7 @@ exports[`ConditionalFilter render should render correctly simple text 2 with val
</div>
<div
class="pf-v5-l-split__item pf-m-fill"
data-ouia-component-id="ConditionalFilter"
>
<span
class="pf-v5-c-form-control pf-m-icon ins-c-conditional-filter"
Expand Down Expand Up @@ -756,8 +768,9 @@ exports[`ConditionalFilter render should render correctly with config - each ite
>
<button
aria-expanded="false"
aria-label="Conditional filter"
aria-label="Conditional filter toggle"
class="pf-v5-c-menu-toggle ins-c-conditional-filter__group"
data-ouia-component-id="ConditionalFilterToggle"
type="button"
>
<span
Expand Down Expand Up @@ -815,6 +828,7 @@ exports[`ConditionalFilter render should render correctly with config - each ite
</div>
<div
class="pf-v5-l-split__item pf-m-fill"
data-ouia-component-id="ConditionalFilter"
>
<span
class="pf-v5-c-form-control pf-m-disabled pf-m-icon ins-c-conditional-filter"
Expand Down Expand Up @@ -876,8 +890,9 @@ exports[`ConditionalFilter render should render correctly with config 1`] = `
>
<button
aria-expanded="false"
aria-label="Conditional filter"
aria-label="Conditional filter toggle"
class="pf-v5-c-menu-toggle ins-c-conditional-filter__group"
data-ouia-component-id="ConditionalFilterToggle"
type="button"
>
<span
Expand Down Expand Up @@ -935,6 +950,7 @@ exports[`ConditionalFilter render should render correctly with config 1`] = `
</div>
<div
class="pf-v5-l-split__item pf-m-fill"
data-ouia-component-id="ConditionalFilter"
>
<span
class="pf-v5-c-form-control pf-m-icon ins-c-conditional-filter"
Expand Down Expand Up @@ -992,6 +1008,7 @@ exports[`ConditionalFilter render should render correctly with one filter 1`] =
>
<div
class="pf-v5-l-split__item pf-m-fill"
data-ouia-component-id="ConditionalFilter"
>
<span
class="pf-v5-c-form-control pf-m-icon ins-c-conditional-filter"
Expand Down Expand Up @@ -1052,8 +1069,9 @@ exports[`ConditionalFilter render should render correctly with with the active l
>
<button
aria-expanded="false"
aria-label="Conditional filter"
aria-label="Conditional filter toggle"
class="pf-v5-c-menu-toggle ins-c-conditional-filter__group ins-c-conditional-filter__no-label"
data-ouia-component-id="ConditionalFilterToggle"
type="button"
>
<span
Expand Down Expand Up @@ -1106,6 +1124,7 @@ exports[`ConditionalFilter render should render correctly with with the active l
</div>
<div
class="pf-v5-l-split__item pf-m-fill"
data-ouia-component-id="ConditionalFilter"
>
<span
class="pf-v5-c-form-control pf-m-icon ins-c-conditional-filter"
Expand Down
Loading