diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js index 1a1c9de579..7393dcaca9 100644 --- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js +++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js @@ -19,7 +19,7 @@ import userEvent from '@testing-library/user-event'; import { inputData, inputDataDynamicOptions } from './assets/sampleInput'; import { sampleDataStructure_sentence, - // sampleDataStructure_tree, + sampleDataStructure_tree, } from './assets/SampleData'; const blockClass = `${pkg.prefix}--condition-builder`; @@ -1249,4 +1249,386 @@ describe(componentName, () => { expect(selectedItem); }); + + // keyboard navigation tests + //for sentence variant + it('add and remove conditions using keyboard', async () => { + render( + + ); + + expect(screen.getByText('Add condition')); + await act(() => userEvent.keyboard('{Tab}')); + expect(screen.getByText('Add condition')).toHaveFocus(); + await act(() => userEvent.keyboard('{Enter}')); + + //adding first condition + + expect(screen.getByRole('searchbox')).toHaveFocus(); + await act(() => userEvent.keyboard('{Tab}')); + expect( + screen.getByRole('option', { + name: 'Continent', + }) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{Enter}')); + expect( + screen.getByRole('option', { + name: 'is', + }) + ).toHaveFocus(); + await act(() => userEvent.keyboard('{Enter}')); + + expect(screen.getByRole('searchbox')).toHaveFocus(); + + await act(() => userEvent.keyboard('{Tab}')); + expect( + screen.getByRole('option', { + name: 'Africa', + }) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{Enter}')); + + expect(screen.getByText('Continent')); + expect(screen.getByText('is')); + expect(screen.getByRole('button', { name: 'Africa' })).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowRight}')); + + expect( + document.querySelector(`.${blockClass}__close-condition`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowRight}')); + + expect(document.querySelector(`.${blockClass}__add-button`)).toHaveFocus(); + + //adding second condition + + await act(() => userEvent.keyboard('{Enter}')); + expect(screen.getByRole('searchbox')).toHaveFocus(); + await act(() => userEvent.keyboard('{Tab}')); + await act(() => userEvent.keyboard('{ArrowDown}')); + expect( + screen.getByRole('option', { + name: 'Region', + }) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{Enter}')); + await act(() => userEvent.keyboard('{ArrowDown}')); + + expect( + screen.getByRole('option', { + name: 'is one of', + }) + ).toHaveFocus(); + await act(() => userEvent.keyboard('{Enter}')); + + expect(screen.getByRole('searchbox')).toHaveFocus(); + + await act(() => userEvent.keyboard('{Tab}')); + await act(() => userEvent.keyboard('{Tab}')); + expect( + screen.getByRole('option', { + name: 'Afghanistan', + }) + ).toHaveFocus(); + + await act(() => userEvent.keyboard(' ')); + await act(() => userEvent.keyboard('{Escape}')); + + expect(screen.getByText('Region')); + expect(screen.getByText('is one of')); + expect(screen.getByRole('button', { name: 'Afghanistan' })).toHaveFocus(); + + //checking arrow up/down will select next row same cell + await act(() => userEvent.keyboard('{ArrowUp}')); + expect(screen.getByRole('button', { name: 'Africa' })).toHaveFocus(); + await act(() => userEvent.keyboard('{ArrowDown}')); + expect(screen.getByRole('button', { name: 'Afghanistan' })).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowRight}')); + + expect( + document.querySelectorAll(`.${blockClass}__close-condition`)[1] + ).toHaveFocus(); + await act(() => userEvent.keyboard('{Enter}')); + expect( + document.querySelectorAll(`.${blockClass}__close-condition`)[0] + ).toHaveFocus(); + await act(() => userEvent.keyboard('{ArrowLeft}')); + await act(() => userEvent.keyboard('{ArrowLeft}')); + + await act(() => userEvent.keyboard('{ArrowLeft}')); + expect(screen.getByRole('button', { name: 'Continent' })).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowRight}')); + await act(() => userEvent.keyboard('{ArrowRight}')); + await act(() => userEvent.keyboard('{ArrowRight}')); + expect( + document.querySelectorAll(`.${blockClass}__close-condition`)[0] + ).toHaveFocus(); + await act(() => userEvent.keyboard('{Enter}')); + await act(() => userEvent.keyboard('{Tab}')); + expect(screen.getByText('Add condition')).toHaveFocus(); + }); + + //for tree variant + it('add and remove conditions using keyboard', async () => { + render( + + ); + + //adding first condition + expect(screen.getByText('Add condition')); + await act(() => userEvent.keyboard('{Tab}')); + expect(screen.getByText('Add condition')).toHaveFocus(); + await act(() => userEvent.keyboard('{Enter}')); + + expect(screen.getByRole('searchbox')).toHaveFocus(); + await act(() => userEvent.keyboard('{Tab}')); + expect( + screen.getByRole('option', { + name: 'Continent', + }) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{Enter}')); + expect( + screen.getByRole('option', { + name: 'is', + }) + ).toHaveFocus(); + await act(() => userEvent.keyboard('{Enter}')); + + expect(screen.getByRole('searchbox')).toHaveFocus(); + + await act(() => userEvent.keyboard('{Tab}')); + expect( + screen.getByRole('option', { + name: 'Africa', + }) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowDown}')); + await act(() => userEvent.keyboard('{ArrowDown}')); + expect( + screen.getByRole('option', { + name: 'Asia', + }) + ).toHaveFocus(); + await act(() => userEvent.keyboard('{ArrowUp}')); + await act(() => userEvent.keyboard('{ArrowUp}')); + + await act(() => userEvent.keyboard('{Enter}')); + + expect(screen.getByText('Continent')); + expect(screen.getByText('is')); + expect(screen.getByRole('button', { name: 'Africa' })).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowRight}')); + + expect( + document.querySelector(`.${blockClass}__close-condition`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowRight}')); + + expect(document.querySelector(`.${blockClass}__add-button`)).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowRight}')); + expect( + document.querySelector(`.${blockClass}__add-condition-sub-group`) + ).toHaveFocus(); + + //adding second condition + + await act(() => userEvent.keyboard('{Enter}')); + expect(screen.getByRole('searchbox')).toHaveFocus(); + await act(() => userEvent.keyboard('{Tab}')); + await act(() => userEvent.keyboard('{ArrowDown}')); + expect( + screen.getByRole('option', { + name: 'Region', + }) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{Enter}')); + await act(() => userEvent.keyboard('{ArrowDown}')); + + expect( + screen.getByRole('option', { + name: 'is one of', + }) + ).toHaveFocus(); + await act(() => userEvent.keyboard('{Enter}')); + + expect(screen.getByRole('searchbox')).toHaveFocus(); + + await act(() => userEvent.keyboard('{Tab}')); + await act(() => userEvent.keyboard('{Tab}')); + expect( + screen.getByRole('option', { + name: 'Afghanistan', + }) + ).toHaveFocus(); + + await act(() => userEvent.keyboard(' ')); + await act(() => userEvent.keyboard('{Escape}')); + + expect(screen.getByText('Region')); + expect(screen.getByText('is one of')); + expect(screen.getByRole('button', { name: 'Afghanistan' })).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowRight}')); + + expect( + document.querySelectorAll(`.${blockClass}__close-condition`)[1] + ).toHaveFocus(); + await act(() => userEvent.keyboard('{Enter}')); + + expect( + document.querySelector(`[role="row"][aria-level="2"][aria-posinset="1"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowRight}')); + expect(screen.getByRole('button', { name: 'Continent' })).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowRight}')); + await act(() => userEvent.keyboard('{ArrowRight}')); + await act(() => userEvent.keyboard('{ArrowRight}')); + expect( + document.querySelectorAll(`.${blockClass}__close-condition`)[0] + ).toHaveFocus(); + await act(() => userEvent.keyboard('{Enter}')); + await act(() => userEvent.keyboard('{Tab}')); + expect(screen.getByText('Add condition')).toHaveFocus(); + }); + + it('row navigation using keyboard', async () => { + render( + + ); + + expect(screen.getByText('Add condition')); + await act(() => userEvent.keyboard('{Tab}')); + expect(screen.getByText('Add condition')).toHaveFocus(); + await act(() => userEvent.keyboard('{Enter}')); + await act(() => userEvent.keyboard('{Tab}')); + + expect( + document.querySelector(`[role="row"][aria-level="1"][aria-posinset="1"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowDown}')); + expect( + document.querySelector(`[role="row"][aria-level="2"][aria-posinset="1"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowDown}')); + expect( + document.querySelector(`[role="row"][aria-level="2"][aria-posinset="2"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowDown}')); + expect( + document.querySelector(`[role="row"][aria-level="2"][aria-posinset="3"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowDown}')); + expect( + document.querySelector(`[role="row"][aria-level="2"][aria-posinset="4"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowDown}')); + expect( + document.querySelector(`[role="row"][aria-level="2"][aria-posinset="5"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowDown}')); + expect( + document.querySelector(`[role="row"][aria-level="3"][aria-posinset="1"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowDown}')); + expect( + document.querySelector(`[role="row"][aria-level="3"][aria-posinset="2"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowDown}')); + expect( + document.querySelector(`[role="row"][aria-level="3"][aria-posinset="3"]`) + ).toHaveFocus(); + + //reverse row navigation + + await act(() => userEvent.keyboard('{ArrowUp}')); + expect( + document.querySelector(`[role="row"][aria-level="3"][aria-posinset="2"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowUp}')); + expect( + document.querySelector(`[role="row"][aria-level="3"][aria-posinset="1"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowUp}')); + expect( + document.querySelector(`[role="row"][aria-level="2"][aria-posinset="5"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowUp}')); + expect( + document.querySelector(`[role="row"][aria-level="2"][aria-posinset="4"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowUp}')); + expect( + document.querySelector(`[role="row"][aria-level="2"][aria-posinset="3"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowUp}')); + expect( + document.querySelector(`[role="row"][aria-level="2"][aria-posinset="2"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowUp}')); + expect( + document.querySelector(`[role="row"][aria-level="2"][aria-posinset="1"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowUp}')); + expect( + document.querySelector(`[role="row"][aria-level="1"][aria-posinset="1"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowRight}')); + expect( + document.querySelector(`[role="row"][aria-level="2"][aria-posinset="1"]`) + ).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowRight}')); + expect(screen.getAllByRole('button', { name: 'Region' })[0]).toHaveFocus(); + + await act(() => userEvent.keyboard('{ArrowLeft}')); + expect( + document.querySelector(`[role="row"][aria-level="2"][aria-posinset="1"]`) + ).toHaveFocus(); + }); });