Skip to content

Commit

Permalink
[test] Use describeTreeView for keyboard navigation tests on disabl…
Browse files Browse the repository at this point in the history 
…ed items (#13184)
  • Loading branch information
@flaviendelangle
flaviendelangle authored May 24, 2024
1 parent 7d4e06d commit 426738c
Show file tree
Hide file tree
Showing 3 changed files with 329 additions and 293 deletions.
291 changes: 0 additions & 291 deletions packages/x-tree-view/src/TreeItem/TreeItem.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,297 +154,6 @@ describe('<TreeItem />', () => {
});

describe('prop: disabled', () => {
describe('selection', () => {
describe('keyboard', () => {
describe('`disabledItemsFocusable={true}`', () => {
it('should prevent selection by keyboard', () => {
const { getByTestId } = render(
<SimpleTreeView disabledItemsFocusable>
<TreeItem itemId="one" label="one" disabled data-testid="one" />
</SimpleTreeView>,
);

act(() => {
getByTestId('one').focus();
});
expect(getByTestId('one')).toHaveFocus();
fireEvent.keyDown(getByTestId('one'), { key: ' ' });
expect(getByTestId('one')).not.to.have.attribute('aria-selected');
});

it('should not prevent next item being range selected by keyboard', () => {
const { getByTestId } = render(
<SimpleTreeView multiSelect disabledItemsFocusable>
<TreeItem itemId="one" label="one" disabled data-testid="one" />
<TreeItem itemId="two" label="two" data-testid="two" />
<TreeItem itemId="three" label="three" data-testid="three" />
<TreeItem itemId="four" label="four" data-testid="four" />
</SimpleTreeView>,
);

act(() => {
getByTestId('one').focus();
});
expect(getByTestId('one')).toHaveFocus();
fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown', shiftKey: true });
expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
expect(getByTestId('two')).toHaveFocus();
});

it('should prevent range selection by keyboard + arrow down', () => {
const { getByTestId } = render(
<SimpleTreeView multiSelect disabledItemsFocusable>
<TreeItem itemId="one" label="one" data-testid="one" />
<TreeItem itemId="two" label="two" disabled data-testid="two" />
</SimpleTreeView>,
);

act(() => {
getByTestId('one').focus();
});
expect(getByTestId('one')).toHaveFocus();
fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown', shiftKey: true });
expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
expect(getByTestId('two')).toHaveFocus();
});
});

describe('`disabledItemsFocusable={false}`', () => {
it('should select the next non disabled item by keyboard + arrow down', () => {
const { getByTestId } = render(
<SimpleTreeView multiSelect>
<TreeItem itemId="one" label="one" data-testid="one" />
<TreeItem itemId="two" label="two" disabled data-testid="two" />
<TreeItem itemId="three" label="three" data-testid="three" />
</SimpleTreeView>,
);

act(() => {
getByTestId('one').focus();
});
expect(getByTestId('one')).toHaveFocus();
fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown', shiftKey: true });
expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
expect(getByTestId('three')).toHaveFocus();
expect(getByTestId('one')).to.have.attribute('aria-selected', 'false');
expect(getByTestId('two')).to.have.attribute('aria-selected', 'false');
expect(getByTestId('three')).to.have.attribute('aria-selected', 'true');
});
});

it('should prevent range selection by keyboard + space', () => {
const { getByTestId, getByText } = render(
<SimpleTreeView multiSelect>
<TreeItem itemId="one" label="one" data-testid="one" />
<TreeItem itemId="two" label="two" data-testid="two" />
<TreeItem itemId="three" label="three" disabled data-testid="three" />
<TreeItem itemId="four" label="four" data-testid="four" />
<TreeItem itemId="five" label="five" data-testid="five" />
</SimpleTreeView>,
);

fireEvent.click(getByText('one'));
act(() => {
getByTestId('one').focus();
});

fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown' });
fireEvent.keyDown(getByTestId('two'), { key: 'ArrowDown' });
fireEvent.keyDown(getByTestId('four'), { key: 'ArrowDown' });

fireEvent.keyDown(getByTestId('five'), { key: ' ', shiftKey: true });

expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
expect(getByTestId('three')).to.have.attribute('aria-selected', 'false');
expect(getByTestId('four')).to.have.attribute('aria-selected', 'true');
expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
});

it('should prevent selection by ctrl + a', () => {
const { getByTestId, queryAllByRole } = render(
<SimpleTreeView multiSelect>
<TreeItem itemId="one" label="one" data-testid="one" />
<TreeItem itemId="two" label="two" data-testid="two" />
<TreeItem itemId="three" label="three" disabled data-testid="three" />
<TreeItem itemId="four" label="four" data-testid="four" />
<TreeItem itemId="five" label="five" data-testid="five" />
</SimpleTreeView>,
);

act(() => {
getByTestId('one').focus();
});

fireEvent.keyDown(getByTestId('one'), { key: 'a', ctrlKey: true });
expect(queryAllByRole('treeitem', { selected: true })).to.have.length(4);
});

it('should prevent selection by keyboard end', () => {
const { getByTestId } = render(
<SimpleTreeView multiSelect>
<TreeItem itemId="one" label="one" data-testid="one" />
<TreeItem itemId="two" label="two" data-testid="two" />
<TreeItem itemId="three" label="three" disabled data-testid="three" />
<TreeItem itemId="four" label="four" data-testid="four" />
<TreeItem itemId="five" label="five" data-testid="five" />
</SimpleTreeView>,
);

act(() => {
getByTestId('one').focus();
});
expect(getByTestId('one')).toHaveFocus();
fireEvent.keyDown(getByTestId('one'), {
key: 'End',
shiftKey: true,
ctrlKey: true,
});

expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
expect(getByTestId('three')).to.have.attribute('aria-selected', 'false');
expect(getByTestId('four')).to.have.attribute('aria-selected', 'true');
expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
});

it('should prevent selection by keyboard home', () => {
const { getByTestId } = render(
<SimpleTreeView multiSelect>
<TreeItem itemId="one" label="one" data-testid="one" />
<TreeItem itemId="two" label="two" data-testid="two" />
<TreeItem itemId="three" label="three" disabled data-testid="three" />
<TreeItem itemId="four" label="four" data-testid="four" />
<TreeItem itemId="five" label="five" data-testid="five" />
</SimpleTreeView>,
);

act(() => {
getByTestId('five').focus();
});
expect(getByTestId('five')).toHaveFocus();
fireEvent.keyDown(getByTestId('five'), {
key: 'Home',
shiftKey: true,
ctrlKey: true,
});

expect(getByTestId('one')).to.have.attribute('aria-selected', 'true');
expect(getByTestId('two')).to.have.attribute('aria-selected', 'true');
expect(getByTestId('three')).to.have.attribute('aria-selected', 'false');
expect(getByTestId('four')).to.have.attribute('aria-selected', 'true');
expect(getByTestId('five')).to.have.attribute('aria-selected', 'true');
});
});
});

describe('focus', () => {
describe('`disabledItemsFocusable={true}`', () => {
it('should not prevent focus by arrow keys', () => {
const { getByTestId } = render(
<SimpleTreeView disabledItemsFocusable>
<TreeItem itemId="one" label="one" data-testid="one" />
<TreeItem itemId="two" label="two" disabled data-testid="two" />
</SimpleTreeView>,
);

act(() => {
getByTestId('one').focus();
});

expect(getByTestId('one')).toHaveFocus();

fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown' });
expect(getByTestId('two')).toHaveFocus();
});
});

describe('`disabledItemsFocusable=false`', () => {
it('should be skipped on navigation with arrow keys', () => {
const { getByTestId } = render(
<SimpleTreeView>
<TreeItem itemId="one" label="one" data-testid="one" />
<TreeItem itemId="two" label="two" disabled data-testid="two" />
<TreeItem itemId="three" label="three" data-testid="three" />
</SimpleTreeView>,
);

act(() => {
getByTestId('one').focus();
});

expect(getByTestId('one')).toHaveFocus();

fireEvent.keyDown(getByTestId('one'), { key: 'ArrowDown' });
expect(getByTestId('three')).toHaveFocus();
});
});
});

describe('expansion', () => {
describe('`disabledItemsFocusable={true}`', () => {
it('should prevent expansion on Enter', () => {
const { getByTestId } = render(
<SimpleTreeView disabledItemsFocusable>
<TreeItem itemId="one" label="one" />
<TreeItem itemId="two" label="two" disabled data-testid="two">
<TreeItem itemId="three" label="three" />
</TreeItem>
</SimpleTreeView>,
);

act(() => {
getByTestId('two').focus();
});
expect(getByTestId('two')).toHaveFocus();
expect(getByTestId('two')).to.have.attribute('aria-expanded', 'false');
fireEvent.keyDown(getByTestId('two'), { key: 'Enter' });
expect(getByTestId('two')).to.have.attribute('aria-expanded', 'false');
});

it('should prevent expansion on right arrow', () => {
const { getByTestId } = render(
<SimpleTreeView disabledItemsFocusable>
<TreeItem itemId="one" label="one" />
<TreeItem itemId="two" label="two" disabled data-testid="two">
<TreeItem itemId="three" label="three" />
</TreeItem>
</SimpleTreeView>,
);

act(() => {
getByTestId('two').focus();
});
expect(getByTestId('two')).toHaveFocus();
expect(getByTestId('two')).to.have.attribute('aria-expanded', 'false');
fireEvent.keyDown(getByTestId('two'), { key: 'ArrowRight' });
expect(getByTestId('two')).to.have.attribute('aria-expanded', 'false');
});

it('should prevent collapse on left arrow', () => {
const { getByTestId } = render(
<SimpleTreeView defaultExpandedItems={['two']} disabledItemsFocusable>
<TreeItem itemId="one" label="one" />
<TreeItem itemId="two" label="two" disabled data-testid="two">
<TreeItem itemId="three" label="three" />
</TreeItem>
</SimpleTreeView>,
);

act(() => {
getByTestId('two').focus();
});
expect(getByTestId('two')).toHaveFocus();
expect(getByTestId('two')).to.have.attribute('aria-expanded', 'true');
fireEvent.keyDown(getByTestId('two'), { key: 'ArrowLeft' });
expect(getByTestId('two')).to.have.attribute('aria-expanded', 'true');
});
});
});

describe('event bindings', () => {
it('should not prevent onClick being fired', () => {
const handleClick = spy();
Expand Down
Loading

0 comments on commit 426738c

Please sign in to comment.