From cd2d418742f209149f17648c89b2f3732028f1c7 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 14 Apr 2020 11:38:21 +0200 Subject: [PATCH 01/10] to.have.focus -> toHaveFocus --- .../src/Autocomplete/Autocomplete.test.js | 40 +++---- .../src/TreeItem/TreeItem.test.js | 98 ++++++++--------- .../src/TreeView/TreeView.test.js | 8 +- .../src/ButtonBase/ButtonBase.test.js | 4 +- packages/material-ui/src/Chip/Chip.test.js | 2 +- .../ExpansionPanelSummary.test.js | 4 +- packages/material-ui/src/Modal/Modal.test.js | 8 +- .../material-ui/src/Select/Select.test.js | 12 +-- .../material-ui/test/integration/Menu.test.js | 34 +++--- .../test/integration/MenuList.test.js | 100 +++++++++--------- .../test/integration/NestedMenu.test.js | 8 +- .../test/integration/Select.test.js | 8 +- test/utils/init.d.ts | 2 +- test/utils/initMatchers.js | 3 +- 14 files changed, 165 insertions(+), 166 deletions(-) diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js index a2370f367739ed..268b38548afb22 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js @@ -595,7 +595,7 @@ describe('', () => { const combobox = getByRole('combobox'); expect(combobox).to.have.attribute('aria-expanded', 'true'); - expect(textbox).to.have.focus; + expect(textbox).toHaveFocus(); fireEvent.mouseDown(textbox); fireEvent.click(textbox); @@ -603,12 +603,12 @@ describe('', () => { document.activeElement.blur(); expect(combobox).to.have.attribute('aria-expanded', 'false'); - expect(textbox).to.not.have.focus; + expect(textbox).not.toHaveFocus(); fireEvent.mouseDown(textbox); fireEvent.click(textbox); expect(combobox).to.have.attribute('aria-expanded', 'true'); - expect(textbox).to.have.focus; + expect(textbox).toHaveFocus(); fireEvent.mouseDown(textbox); fireEvent.click(textbox); @@ -629,7 +629,7 @@ describe('', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); const options = getAllByRole('option'); - expect(document.activeElement).to.have.focus; + expect(document.activeElement).toHaveFocus(); expect(document.activeElement).to.have.attribute( 'aria-activedescendant', options[options.length - 1].getAttribute('id'), @@ -648,7 +648,7 @@ describe('', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); const options = getAllByRole('option'); - expect(document.activeElement).to.have.focus; + expect(document.activeElement).toHaveFocus(); expect(document.activeElement).to.have.attribute( 'aria-activedescendant', options[0].getAttribute('id'), @@ -668,7 +668,7 @@ describe('', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(document.activeElement).to.have.focus; + expect(document.activeElement).toHaveFocus(); expect(document.activeElement).not.to.have.attribute('aria-activedescendant'); }); @@ -684,7 +684,7 @@ describe('', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(document.activeElement).to.have.focus; + expect(document.activeElement).toHaveFocus(); expect(document.activeElement).not.to.have.attribute('aria-activedescendant'); }); }); @@ -702,7 +702,7 @@ describe('', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(document.activeElement).to.have.focus; + expect(document.activeElement).toHaveFocus(); expect(document.activeElement).to.have.attribute( 'aria-activedescendant', getAllByRole('option')[0].getAttribute('id'), @@ -723,7 +723,7 @@ describe('', () => { const textbox = getByRole('textbox'); const options = getAllByRole('option'); - expect(textbox).to.have.focus; + expect(textbox).toHaveFocus(); expect(textbox).to.have.attribute( 'aria-activedescendant', options[options.length - 1].getAttribute('id'), @@ -745,7 +745,7 @@ describe('', () => { const textbox = getByRole('textbox'); const options = getAllByRole('option'); - expect(textbox).to.have.focus; + expect(textbox).toHaveFocus(); expect(textbox).to.have.attribute( 'aria-activedescendant', options[options.length - 1].getAttribute('id'), @@ -1092,11 +1092,11 @@ describe('', () => { const textbox = getByRole('textbox'); fireEvent.click(textbox); - expect(textbox).to.have.focus; + expect(textbox).toHaveFocus(); textbox.blur(); fireEvent.click(queryByTitle('Open')); - expect(textbox).to.have.focus; + expect(textbox).toHaveFocus(); }); }); @@ -1422,16 +1422,16 @@ describe('', () => { ); const textbox = getByRole('textbox'); let firstOption = getByRole('option'); - expect(textbox).to.have.focus; + expect(textbox).toHaveFocus(); fireEvent.click(firstOption); - expect(textbox).to.not.have.focus; + expect(textbox).not.toHaveFocus(); fireEvent.click(queryByTitle('Open')); - expect(textbox).to.have.focus; + expect(textbox).toHaveFocus(); firstOption = getByRole('option'); fireEvent.touchStart(firstOption); fireEvent.click(firstOption); - expect(textbox).to.not.have.focus; + expect(textbox).not.toHaveFocus(); }); it('[blurOnSelect="touch"] should only blur the input when an option is touched', () => { @@ -1448,13 +1448,13 @@ describe('', () => { const textbox = getByRole('textbox'); let firstOption = getByRole('option'); fireEvent.click(firstOption); - expect(textbox).to.have.focus; + expect(textbox).toHaveFocus(); fireEvent.click(queryByTitle('Open')); firstOption = getByRole('option'); fireEvent.touchStart(firstOption); fireEvent.click(firstOption); - expect(textbox).to.not.have.focus; + expect(textbox).not.toHaveFocus(); }); it('[blurOnSelect="mouse"] should only blur the input when an option is clicked', () => { @@ -1472,12 +1472,12 @@ describe('', () => { let firstOption = getByRole('option'); fireEvent.touchStart(firstOption); fireEvent.click(firstOption); - expect(textbox).to.have.focus; + expect(textbox).toHaveFocus(); fireEvent.click(queryByTitle('Open')); firstOption = getByRole('option'); fireEvent.click(firstOption); - expect(textbox).to.not.have.focus; + expect(textbox).not.toHaveFocus(); }); }); diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js index 808943bc34dcfd..f52b1d32cf18f3 100644 --- a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js +++ b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js @@ -294,12 +294,12 @@ describe('', () => { ); getByTestId('start').focus(); - expect(getByTestId('start')).to.have.focus; + expect(getByTestId('start')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'Tab' }); getByTestId('one').focus(); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); }); it('should focus the selected node if a node is selected before the tree receives focus', () => { @@ -316,15 +316,15 @@ describe('', () => { ); fireEvent.click(getByText('two')); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); getByTestId('start').focus(); - expect(getByTestId('start')).to.have.focus; + expect(getByTestId('start')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'Tab' }); getByTestId('two').focus(); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); }); it('should work with programmatic focus', () => { @@ -363,7 +363,7 @@ describe('', () => { getByTestId('one').focus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowRight' }); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); }); it('should move focus to the first child if focus is on an open node', () => { @@ -378,7 +378,7 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); getByTestId('one').focus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowRight' }); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); }); it('should do nothing if focus is on an end node', () => { @@ -391,9 +391,9 @@ describe('', () => { ); fireEvent.click(getByText('two')); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowRight' }); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); }); }); @@ -412,7 +412,7 @@ describe('', () => { getByTestId('one').focus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowLeft' }); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false'); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); }); it("should move focus to the node's parent node if focus is on a child node that is an end node", () => { @@ -427,7 +427,7 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); fireEvent.click(getByText('two')); fireEvent.keyDown(document.activeElement, { key: 'ArrowLeft' }); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); }); @@ -449,7 +449,7 @@ describe('', () => { fireEvent.click(getByText('two')); expect(getByTestId('two')).to.have.attribute('aria-expanded', 'false'); fireEvent.keyDown(document.activeElement, { key: 'ArrowLeft' }); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); }); @@ -465,7 +465,7 @@ describe('', () => { getByTestId('one').focus(); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false'); fireEvent.keyDown(document.activeElement, { key: 'ArrowLeft' }); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); }); it('should do nothing if focus is on a root node that is an end node', () => { @@ -477,7 +477,7 @@ describe('', () => { getByTestId('one').focus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowLeft' }); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); }); }); @@ -492,7 +492,7 @@ describe('', () => { getByTestId('one').focus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); }); it('moves focus to a child node', () => { @@ -507,7 +507,7 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); getByTestId('one').focus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); }); it('moves focus to a child node works with a dynamic tree', () => { @@ -546,7 +546,7 @@ describe('', () => { getByTestId('one').focus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); }); it("moves focus to a parent's sibling", () => { @@ -561,9 +561,9 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); fireEvent.click(getByText('two')); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(getByTestId('three')).to.have.focus; + expect(getByTestId('three')).toHaveFocus(); }); }); @@ -577,9 +577,9 @@ describe('', () => { ); fireEvent.click(getByText('two')); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); }); it('moves focus to a parent', () => { @@ -593,9 +593,9 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); fireEvent.click(getByText('two')); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); }); it("moves focus to a sibling's child", () => { @@ -610,9 +610,9 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); fireEvent.click(getByText('three')); - expect(getByTestId('three')).to.have.focus; + expect(getByTestId('three')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); }); }); @@ -628,9 +628,9 @@ describe('', () => { ); fireEvent.click(getByText('four')); - expect(getByTestId('four')).to.have.focus; + expect(getByTestId('four')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'Home' }); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); }); }); @@ -646,9 +646,9 @@ describe('', () => { ); getByTestId('one').focus(); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'End' }); - expect(getByTestId('four')).to.have.focus; + expect(getByTestId('four')).toHaveFocus(); }); it('moves focus to the last node in the tree with expanded items', () => { @@ -666,9 +666,9 @@ describe('', () => { ); getByTestId('one').focus(); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'End' }); - expect(getByTestId('six')).to.have.focus; + expect(getByTestId('six')).toHaveFocus(); }); }); @@ -684,15 +684,15 @@ describe('', () => { ); getByTestId('one').focus(); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 't' }); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'f' }); - expect(getByTestId('four')).to.have.focus; + expect(getByTestId('four')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'o' }); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); }); it('moves focus to the next node with the same starting character', () => { @@ -706,15 +706,15 @@ describe('', () => { ); getByTestId('one').focus(); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 't' }); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 't' }); - expect(getByTestId('three')).to.have.focus; + expect(getByTestId('three')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 't' }); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); }); it('should not move focus when pressing a modifier key + letter', () => { @@ -728,15 +728,15 @@ describe('', () => { ); getByTestId('apple').focus(); - expect(getByTestId('apple')).to.have.focus; + expect(getByTestId('apple')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'v', ctrlKey: true }); - expect(getByTestId('apple')).to.have.focus; + expect(getByTestId('apple')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'v', metaKey: true }); - expect(getByTestId('apple')).to.have.focus; + expect(getByTestId('apple')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'v', shiftKey: true }); - expect(getByTestId('apple')).to.have.focus; + expect(getByTestId('apple')).toHaveFocus(); }); }); @@ -876,7 +876,7 @@ describe('', () => { fireEvent.click(getByText('three')); expect(getByTestId('three')).to.have.attribute('aria-selected', 'true'); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown', shiftKey: true }); - expect(getByTestId('four')).to.have.focus; + expect(getByTestId('four')).toHaveFocus(); expect(container.querySelectorAll('[aria-selected=true]').length).to.equal(2); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown', shiftKey: true }); expect(getByTestId('three')).to.have.attribute('aria-selected', 'true'); @@ -884,7 +884,7 @@ describe('', () => { expect(getByTestId('five')).to.have.attribute('aria-selected', 'true'); expect(container.querySelectorAll('[aria-selected=true]').length).to.equal(3); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp', shiftKey: true }); - expect(getByTestId('four')).to.have.focus; + expect(getByTestId('four')).toHaveFocus(); expect(container.querySelectorAll('[aria-selected=true]').length).to.equal(2); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp', shiftKey: true }); expect(container.querySelectorAll('[aria-selected=true]').length).to.equal(1); @@ -912,7 +912,7 @@ describe('', () => { fireEvent.click(getByText('three')); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown', shiftKey: true }); - expect(getByTestId('four')).to.have.focus; + expect(getByTestId('four')).toHaveFocus(); expect(container.querySelectorAll('[aria-selected=true]').length).to.equal(0); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp', shiftKey: true }); expect(container.querySelectorAll('[aria-selected=true]').length).to.equal(0); @@ -1242,11 +1242,11 @@ describe('', () => { fireEvent.click(getByText('two')); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); getByRole('button').focus(); - expect(getByRole('button')).to.have.focus; + expect(getByRole('button')).toHaveFocus(); act(() => { setActiveItemMounted(false); @@ -1255,6 +1255,6 @@ describe('', () => { setActiveItemMounted(true); }); - expect(getByRole('button')).to.have.focus; + expect(getByRole('button')).toHaveFocus(); }); }); diff --git a/packages/material-ui-lab/src/TreeView/TreeView.test.js b/packages/material-ui-lab/src/TreeView/TreeView.test.js index 3cb98ef5ed4c1e..42365869410300 100644 --- a/packages/material-ui-lab/src/TreeView/TreeView.test.js +++ b/packages/material-ui-lab/src/TreeView/TreeView.test.js @@ -165,13 +165,13 @@ describe('', () => { const { getByText, getByTestId } = render(); fireEvent.click(getByText('one')); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(getByTestId('one')).to.have.focus; + expect(getByTestId('one')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(getByTestId('two')).to.have.focus; + expect(getByTestId('two')).toHaveFocus(); }); it('should support conditional rendered tree items', () => { diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.test.js b/packages/material-ui/src/ButtonBase/ButtonBase.test.js index 08d6f2bd7c4a80..ab8dc0caef002a 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.test.js +++ b/packages/material-ui/src/ButtonBase/ButtonBase.test.js @@ -656,7 +656,7 @@ describe('', () => { // so we need to check if we're resilient against it const { getByText } = render(Hello); - expect(getByText('Hello')).to.have.focus; + expect(getByText('Hello')).toHaveFocus(); }); }); @@ -900,7 +900,7 @@ describe('', () => { expect(typeof buttonActionsRef.current.focusVisible).to.equal('function'); // @ts-ignore buttonActionsRef.current.focusVisible(); - expect(getByText('Hello')).to.have.focus; + expect(getByText('Hello')).toHaveFocus(); expect(getByText('Hello')).to.match('.focusVisible'); }); }); diff --git a/packages/material-ui/src/Chip/Chip.test.js b/packages/material-ui/src/Chip/Chip.test.js index 100548e8c1824e..d972d137a42827 100644 --- a/packages/material-ui/src/Chip/Chip.test.js +++ b/packages/material-ui/src/Chip/Chip.test.js @@ -333,7 +333,7 @@ describe('', () => { fireEvent.keyUp(document.activeElement, { key: 'Escape' }); expect(handleBlur.callCount).to.equal(1); - expect(chip).not.to.to.have.focus; + expect(chip).not.toHaveFocus(); }); it('should call onClick when `space` is released ', () => { diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js index ebfd554fa68275..f04d403fbf82e2 100644 --- a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js +++ b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js @@ -77,7 +77,7 @@ describe('', () => { fireEvent.keyDown(document.activeElement, { key: 'Tab' }); // not actually focusing (yet) button.focus(); - expect(button).to.have.focus; + expect(button).toHaveFocus(); expect(button).to.have.class(classes.focused); }); @@ -90,7 +90,7 @@ describe('', () => { button.blur(); - expect(button).not.to.have.focus; + expect(button).not.toHaveFocus(); expect(button).not.to.have.class(classes.focused); }); diff --git a/packages/material-ui/src/Modal/Modal.test.js b/packages/material-ui/src/Modal/Modal.test.js index c339106a522111..ceafd515811d1a 100644 --- a/packages/material-ui/src/Modal/Modal.test.js +++ b/packages/material-ui/src/Modal/Modal.test.js @@ -589,15 +589,15 @@ describe('', () => { const { getByRole, setProps } = render(); const dialog = getByRole('dialog'); const toggleButton = getByRole('button'); - expect(dialog).to.have.focus; + expect(dialog).toHaveFocus(); toggleButton.focus(); - expect(toggleButton).to.have.focus; + expect(toggleButton).toHaveFocus(); setProps({ hideButton: true }); - expect(dialog).not.to.have.focus; + expect(dialog).not.toHaveFocus(); clock.tick(500); // wait for the interval check to kick in. - expect(dialog).to.have.focus; + expect(dialog).toHaveFocus(); }); }); }); diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js index 48b77cfbc24407..4a6188fe25a5cf 100644 --- a/packages/material-ui/src/Select/Select.test.js +++ b/packages/material-ui/src/Select/Select.test.js @@ -197,7 +197,7 @@ describe('', () => { getByRole('listbox').focus(); - expect(getByRole('listbox')).to.have.focus; + expect(getByRole('listbox')).toHaveFocus(); }); it('identifies each selectable element containing an option', () => { @@ -646,11 +646,11 @@ describe('', () => { it('should focus select after Select did mount', () => { const { getByRole } = render(', () => { ref.current.focus(); }); - expect(getByRole('button')).to.have.focus; + expect(getByRole('button')).toHaveFocus(); }); }); diff --git a/packages/material-ui/test/integration/Menu.test.js b/packages/material-ui/test/integration/Menu.test.js index eb43878c8db072..57b727e6bd3f31 100644 --- a/packages/material-ui/test/integration/Menu.test.js +++ b/packages/material-ui/test/integration/Menu.test.js @@ -104,7 +104,7 @@ describe(' integration', () => { button.focus(); button.click(); - expect(getAllByRole('menuitem')[0]).to.have.focus; + expect(getAllByRole('menuitem')[0]).toHaveFocus(); }); it('changes focus according to keyboard navigation', () => { @@ -116,22 +116,22 @@ describe(' integration', () => { const menuitems = getAllByRole('menuitem'); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[0]).to.have.focus; + expect(menuitems[0]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[2]).to.have.focus; + expect(menuitems[2]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'Home' }); - expect(menuitems[0]).to.have.focus; + expect(menuitems[0]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'End' }); - expect(menuitems[2]).to.have.focus; + expect(menuitems[2]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowRight' }); - expect(menuitems[2], 'no change on unassociated keys').to.have.focus; + expect(menuitems[2], 'no change on unassociated keys').toHaveFocus(); }); it('focuses the selected item when opening', () => { @@ -141,7 +141,7 @@ describe(' integration', () => { button.focus(); button.click(); - expect(getAllByRole('menuitem')[2]).to.have.focus; + expect(getAllByRole('menuitem')[2]).toHaveFocus(); }); describe('Menu variant differences', () => { @@ -159,7 +159,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[0]).to.have.focus; + expect(menuitems[0]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -175,7 +175,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[0]).to.have.focus; + expect(menuitems[0]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', 0); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -192,7 +192,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[2]).to.have.focus; + expect(menuitems[2]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -208,7 +208,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[0]).to.have.focus; + expect(menuitems[0]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -224,7 +224,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 0); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -240,7 +240,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 2); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -262,7 +262,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 0); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -283,7 +283,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(getByTestId('Paper')).to.have.focus; + expect(getByTestId('Paper')).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 0); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -306,7 +306,7 @@ describe(' integration', () => { getByRole('button').click(); const menuitems = getAllByRole('menuitem'); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 0); expect(menuitems[2]).to.have.property('tabIndex', -1); diff --git a/packages/material-ui/test/integration/MenuList.test.js b/packages/material-ui/test/integration/MenuList.test.js index 6627f51fe146ce..fd765897629441 100644 --- a/packages/material-ui/test/integration/MenuList.test.js +++ b/packages/material-ui/test/integration/MenuList.test.js @@ -52,7 +52,7 @@ describe(' integration', () => { , ); - expect(getAllByRole('menuitem')[0]).to.have.focus; + expect(getAllByRole('menuitem')[0]).toHaveFocus(); }); it('should select the last item when pressing up if the first item is focused', () => { @@ -67,7 +67,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); const menuitems = getAllByRole('menuitem'); - expect(menuitems[2]).to.have.focus; + expect(menuitems[2]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', 0); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -85,7 +85,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); const menuitems = getAllByRole('menuitem'); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', 0); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -104,7 +104,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); const menuitems = getAllByRole('menuitem'); - expect(menuitems[0]).to.have.focus; + expect(menuitems[0]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', 0); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -128,9 +128,9 @@ describe(' integration', () => { expect(menuitems[0]).to.have.property('tabIndex', 0); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); - expect(menuitems[0]).not.to.have.focus; - expect(menuitems[1]).not.to.have.focus; - expect(menuitems[2]).not.to.have.focus; + expect(menuitems[0]).not.toHaveFocus(); + expect(menuitems[1]).not.toHaveFocus(); + expect(menuitems[2]).not.toHaveFocus(); }); it('can imperatively focus the first item', () => { @@ -145,7 +145,7 @@ describe(' integration', () => { menuitems[0].focus(); - expect(menuitems[0]).to.have.focus; + expect(menuitems[0]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', 0); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -163,14 +163,14 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', 0); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[2]).to.have.focus; + expect(menuitems[2]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', 0); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -190,7 +190,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 0); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -210,7 +210,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[2]).to.have.focus; + expect(menuitems[2]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 0); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -230,7 +230,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[0]).to.have.focus; + expect(menuitems[0]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 0); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -250,7 +250,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[2]).to.have.focus; + expect(menuitems[2]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 0); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -270,7 +270,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[2]).to.have.focus; + expect(menuitems[2]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', 0); @@ -290,7 +290,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[0]).to.have.focus; + expect(menuitems[0]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', 0); expect(menuitems[1]).to.have.property('tabIndex', -1); }); @@ -306,7 +306,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 0); }); @@ -325,23 +325,23 @@ describe(' integration', () => { const menuitems = getAllByRole('menuitem'); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[0]).to.have.focus; + expect(menuitems[0]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[3]).to.have.focus; + expect(menuitems[3]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[0]).to.have.focus; + expect(menuitems[0]).toHaveFocus(); // and ArrowUp again fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[3]).to.have.focus; + expect(menuitems[3]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[0]).to.have.focus; + expect(menuitems[0]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[3]).to.have.focus; + expect(menuitems[3]).toHaveFocus(); }); it('should stay on a single item if it is the only focusable one', () => { @@ -356,15 +356,15 @@ describe(' integration', () => { const menuitems = getAllByRole('menuitem'); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); }); it('should keep focus on the menu if all items are disabled', () => { @@ -379,15 +379,15 @@ describe(' integration', () => { const menu = getByRole('menu'); fireEvent.keyDown(document.activeElement, { key: 'Home' }); - expect(menu).to.have.focus; + expect(menu).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menu).to.have.focus; + expect(menu).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menu).to.have.focus; + expect(menu).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'End' }); - expect(menu).to.have.focus; + expect(menu).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menu).to.have.focus; + expect(menu).toHaveFocus(); }); it('should allow focus on disabled items when disabledItemsFocusable=true', () => { @@ -403,15 +403,15 @@ describe(' integration', () => { const menuitems = getAllByRole('menuitem'); fireEvent.keyDown(document.activeElement, { key: 'Home' }); - expect(menuitems[0]).to.have.focus; + expect(menuitems[0]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[1]).to.have.focus; + expect(menuitems[1]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[2]).to.have.focus; + expect(menuitems[2]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'End' }); - expect(menuitems[3]).to.have.focus; + expect(menuitems[3]).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[2]).to.have.focus; + expect(menuitems[2]).toHaveFocus(); }); describe('MenuList text-based keyboard controls', () => { @@ -434,7 +434,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'a' }); - expect(getByText('Arizona')).to.have.focus; + expect(getByText('Arizona')).toHaveFocus(); }); it('selects the next item starting with the typed character', () => { @@ -448,7 +448,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'a' }); - expect(getByText('Arcansas')).to.have.focus; + expect(getByText('Arcansas')).toHaveFocus(); }); it('should not get focusVisible class on click', () => { @@ -464,7 +464,7 @@ describe(' integration', () => { menuitem.focus(); fireEvent.click(menuitem); - expect(menuitem).to.have.focus; + expect(menuitem).toHaveFocus(); expect(menuitem).not.to.have.class('focus-visible'); }); @@ -478,7 +478,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'c' }); - expect(getByText('Arizona')).to.have.focus; + expect(getByText('Arizona')).toHaveFocus(); }); it('should not move focus when keys match current focus', () => { @@ -491,11 +491,11 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'A' }); - expect(getByText('Arizona')).to.have.focus; + expect(getByText('Arizona')).toHaveFocus(); fireEvent.keyDown(document.activeElement, { key: 'r' }); - expect(getByText('Arizona')).to.have.focus; + expect(getByText('Arizona')).toHaveFocus(); }); it('should not move focus if focus starts on descendant and the key doesnt match', () => { @@ -512,7 +512,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'z' }); - expect(button).to.have.focus; + expect(button).toHaveFocus(); }); it('matches rapidly typed text', () => { @@ -526,7 +526,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'W' }); fireEvent.keyDown(document.activeElement, { key: 'o' }); - expect(getByText('Worm')).to.have.focus; + expect(getByText('Worm')).toHaveFocus(); }); it('should reset the character buffer after 500ms', (done) => { @@ -541,7 +541,7 @@ describe(' integration', () => { setTimeout(() => { fireEvent.keyDown(document.activeElement, { key: 'o' }); - expect(getByText('Ordinary')).to.have.focus; + expect(getByText('Ordinary')).toHaveFocus(); done(); }, 500); }); @@ -564,7 +564,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'W' }); fireEvent.keyDown(document.activeElement, { key: 'o' }); - expect(getByText('Worm')).to.have.focus; + expect(getByText('Worm')).toHaveFocus(); }); }); }); diff --git a/packages/material-ui/test/integration/NestedMenu.test.js b/packages/material-ui/test/integration/NestedMenu.test.js index 363e4c64b44e6e..2b21651b39dbba 100644 --- a/packages/material-ui/test/integration/NestedMenu.test.js +++ b/packages/material-ui/test/integration/NestedMenu.test.js @@ -51,14 +51,14 @@ describe(' integration', () => { const { getByRole } = render(); expect(getByRole('menu')).to.have.id('first-menu'); - expect(within(getByRole('menu')).getAllByRole('menuitem')[0]).to.have.focus; + expect(within(getByRole('menu')).getAllByRole('menuitem')[0]).toHaveFocus(); }); it('should focus the first item of the second menu when nothing has been selected', () => { const { getByRole } = render(); expect(getByRole('menu')).to.have.id('second-menu'); - expect(within(getByRole('menu')).getAllByRole('menuitem')[0]).to.have.focus; + expect(within(getByRole('menu')).getAllByRole('menuitem')[0]).toHaveFocus(); }); it('should open the first menu after it was closed', () => { @@ -68,7 +68,7 @@ describe(' integration', () => { setProps({ firstMenuOpen: true }); expect(getByRole('menu')).to.have.id('first-menu'); - expect(within(getByRole('menu')).getAllByRole('menuitem')[0]).to.have.focus; + expect(within(getByRole('menu')).getAllByRole('menuitem')[0]).toHaveFocus(); }); it('should be able to open second menu again', () => { @@ -78,6 +78,6 @@ describe(' integration', () => { setProps({ secondMenuOpen: true }); expect(getByRole('menu')).to.have.id('second-menu'); - expect(within(getByRole('menu')).getAllByRole('menuitem')[0]).to.have.focus; + expect(within(getByRole('menu')).getAllByRole('menuitem')[0]).toHaveFocus(); }); }); diff --git a/packages/material-ui/test/integration/Select.test.js b/packages/material-ui/test/integration/Select.test.js index 4ede8e1418095b..a8652ed075832e 100644 --- a/packages/material-ui/test/integration/Select.test.js +++ b/packages/material-ui/test/integration/Select.test.js @@ -61,14 +61,14 @@ describe(' integration', () => { fireEvent.mouseDown(trigger); const options = getAllByRole('option'); - expect(options[1]).to.have.focus; + expect(options[1]).toHaveFocus(); // Now, let's close the select component options[2].click(); clock.tick(0); expect(queryByRole('listbox')).to.be.null; - expect(trigger).to.have.focus; + expect(trigger).toHaveFocus(); expect(trigger).to.have.text('Twenty'); }); }); diff --git a/test/utils/init.d.ts b/test/utils/init.d.ts index a83ccd15434d3e..f6ce35d9316a4e 100644 --- a/test/utils/init.d.ts +++ b/test/utils/init.d.ts @@ -22,6 +22,6 @@ declare namespace Chai { /** * checks if the element is focused */ - focus: Assertion; + toHaveFocus(): Assertion; } } diff --git a/test/utils/initMatchers.js b/test/utils/initMatchers.js index 6490c97250d6f1..7bb3bb5e35613a 100644 --- a/test/utils/initMatchers.js +++ b/test/utils/initMatchers.js @@ -7,8 +7,7 @@ import { computeAccessibleName } from 'dom-accessibility-api'; chai.use(chaiDom); chai.use((chaiAPI, utils) => { // better diff view for expect(element).to.equal(document.activeElement) - // use as `.to.have.focus` to match `toHaveFocus` from `jest-dom` - chai.Assertion.addProperty('focus', function elementIsFocused() { + chai.Assertion.addMethod('toHaveFocus', function elementIsFocused() { const element = utils.flag(this, 'object'); this.assert( From fef78141ac6974bb6ad6aefdfb5f490b24566e93 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 14 Apr 2020 11:39:48 +0200 Subject: [PATCH 02/10] to.have.accessibleName -> toHaveAccessibleName --- .../material-ui-lab/src/Autocomplete/Autocomplete.test.js | 8 ++++---- packages/material-ui/src/Chip/Chip.test.js | 2 +- packages/material-ui/src/TextField/TextField.test.js | 2 +- packages/material-ui/test/integration/Select.test.js | 4 ++-- test/utils/init.d.ts | 2 +- test/utils/initMatchers.js | 2 +- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js index 268b38548afb22..c1806f1e914a57 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js @@ -354,9 +354,9 @@ describe('', () => { const buttons = getAllByRole('button'); expect(buttons).to.have.length(2); - expect(buttons[0]).to.have.accessibleName('Clear'); + expect(buttons[0]).toHaveAccessibleName('Clear'); expect(buttons[0]).to.have.attribute('title', 'Clear'); - expect(buttons[1]).to.have.accessibleName('Open'); + expect(buttons[1]).toHaveAccessibleName('Open'); expect(buttons[1]).to.have.attribute('title', 'Open'); buttons.forEach((button) => { expect(button, 'button is not in tab order').to.have.property('tabIndex', -1); @@ -396,9 +396,9 @@ describe('', () => { const buttons = getAllByRole('button'); expect(buttons).to.have.length(2); - expect(buttons[0]).to.have.accessibleName('Clear'); + expect(buttons[0]).toHaveAccessibleName('Clear'); expect(buttons[0]).to.have.attribute('title', 'Clear'); - expect(buttons[1]).to.have.accessibleName('Close'); + expect(buttons[1]).toHaveAccessibleName('Close'); expect(buttons[1]).to.have.attribute('title', 'Close'); buttons.forEach((button) => { expect(button, 'button is not in tab order').to.have.property('tabIndex', -1); diff --git a/packages/material-ui/src/Chip/Chip.test.js b/packages/material-ui/src/Chip/Chip.test.js index d972d137a42827..7b203be49ef946 100644 --- a/packages/material-ui/src/Chip/Chip.test.js +++ b/packages/material-ui/src/Chip/Chip.test.js @@ -75,7 +75,7 @@ describe('', () => { const button = getByRole('button'); expect(button).to.have.property('tabIndex', 0); - expect(button).to.have.accessibleName('My Chip'); + expect(button).toHaveAccessibleName('My Chip'); }); it('should apply user value of tabIndex', () => { diff --git a/packages/material-ui/src/TextField/TextField.test.js b/packages/material-ui/src/TextField/TextField.test.js index 0841525d19c1ec..867ee710500d03 100644 --- a/packages/material-ui/src/TextField/TextField.test.js +++ b/packages/material-ui/src/TextField/TextField.test.js @@ -181,7 +181,7 @@ describe('', () => { , ); - expect(getByRole('button')).to.have.accessibleName('Release: Stable'); + expect(getByRole('button')).toHaveAccessibleName('Release: Stable'); }); it('creates an input[hidden] that has no accessible properties', () => { diff --git a/packages/material-ui/test/integration/Select.test.js b/packages/material-ui/test/integration/Select.test.js index a8652ed075832e..cc1ea76c1baa75 100644 --- a/packages/material-ui/test/integration/Select.test.js +++ b/packages/material-ui/test/integration/Select.test.js @@ -75,7 +75,7 @@ describe(' integration', () => { , ); - expect(getByRole('button')).to.have.accessibleName('Age Ten'); + expect(getByRole('button')).toHaveAccessibleName('Age Ten'); }); // we're somewhat abusing "focus" here. What we're actually interested in is diff --git a/test/utils/init.d.ts b/test/utils/init.d.ts index f6ce35d9316a4e..aea42dfb1072b7 100644 --- a/test/utils/init.d.ts +++ b/test/utils/init.d.ts @@ -8,7 +8,7 @@ declare namespace Chai { * @see https://www.w3.org/TR/accname-1.2/ * @param name */ - accessibleName(name: string): Assertion; + toHaveAccessibleName(name: string): Assertion; /** * checks if the element in question is considered aria-hidden * Does not replace accessibility check as that requires display/visibility/layout diff --git a/test/utils/initMatchers.js b/test/utils/initMatchers.js index 7bb3bb5e35613a..590269eae4b3eb 100644 --- a/test/utils/initMatchers.js +++ b/test/utils/initMatchers.js @@ -63,7 +63,7 @@ chai.use((chaiAPI, utils) => { ); }); - chai.Assertion.addMethod('accessibleName', function hasAccessibleName(expectedName) { + chai.Assertion.addMethod('toHaveAccessibleName', function hasAccessibleName(expectedName) { const root = utils.flag(this, 'object'); // make sure it's an Element new chai.Assertion(root.nodeType, `Expected an Element but got '${String(root)}'`).to.equal(1); From e485db52fb64ce775e34f734ca66778fc9d0587f Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 14 Apr 2020 11:44:54 +0200 Subject: [PATCH 03/10] to.be.inaccessible -> toBeInaccessible --- .../src/ExpansionPanelSummary/ExpansionPanelSummary.test.js | 2 +- packages/material-ui/src/Select/Select.test.js | 2 +- packages/material-ui/test/integration/Menu.test.js | 6 +++--- test/utils/init.d.ts | 2 +- test/utils/initMatchers.js | 2 +- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js index f04d403fbf82e2..2e0526243625a4 100644 --- a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js +++ b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js @@ -62,7 +62,7 @@ describe('', () => { const expandIcon = container.querySelector(`.${classes.expandIcon}`); expect(expandIcon).to.have.text('Icon'); - expect(expandIcon).to.be.inaccessible; + expect(expandIcon).toBeInaccessible(); }); it('focusing adds the `focused` class if focused visible', () => { diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js index 4a6188fe25a5cf..cb9a57b94faf36 100644 --- a/packages/material-ui/src/Select/Select.test.js +++ b/packages/material-ui/src/Select/Select.test.js @@ -681,7 +681,7 @@ describe('', () => { fireEvent.mouseDown(trigger); expect(handleBlur.callCount).to.equal(0); - expect(getByRole('listbox')).to.be.ok; + expect(getByRole('listbox')).not.to.equal(null); act(() => { const options = getAllByRole('option'); @@ -121,7 +121,7 @@ describe('', () => { getByRole('button').focus(); fireEvent.keyDown(document.activeElement, { key }); - expect(getByRole('listbox', { hidden: false })).to.be.ok; + expect(getByRole('listbox', { hidden: false })).not.to.equal(null); fireEvent.keyUp(document.activeElement, { key }); - expect(getByRole('listbox', { hidden: false })).to.be.ok; + expect(getByRole('listbox', { hidden: false })).not.to.equal(null); }); }); @@ -346,7 +346,7 @@ describe(', ); - expect(container.querySelector('svg')).to.be.null; + expect(container.querySelector('svg')).to.equal(null); }); it('should present an SVG icon', () => { @@ -514,10 +514,10 @@ describe('', () => { const { getByRole, queryByRole } = render(); fireEvent.mouseDown(getByRole('button')); - expect(getByRole('listbox')).to.be.ok; + expect(getByRole('listbox')).not.to.equal(null); act(() => { getByRole('option').click(); @@ -686,7 +686,7 @@ describe('', () => { , ); - expect(getByRole('listbox')).to.be.ok; + expect(getByRole('listbox')).not.to.equal(null); }); it('open only with the left mouse button click', () => { @@ -942,7 +942,7 @@ describe('', () => { const { container } = render( integration', () => { getByTestId('select-backdrop').click(); clock.tick(0); - expect(queryByRole('listbox')).to.be.null; + expect(queryByRole('listbox')).to.equal(null); expect(trigger).toHaveFocus(); }); @@ -87,7 +87,7 @@ describe('', () => { fireEvent.mouseDown(getByRole('button')); getAllByRole('option')[1].click(); - expect(onChangeHandler.calledOnce).to.be.true; + expect(onChangeHandler.calledOnce).to.equal(true); const selected = onChangeHandler.args[0][1]; expect(React.isValidElement(selected)).to.equal(true); }); @@ -717,10 +717,10 @@ describe('', () => { , ); - expect(container.querySelector('svg')).to.be.visible; + expect(container.querySelector('svg')).toBeVisible(); }); }); @@ -397,7 +397,7 @@ describe('); - expect(getByRole('listbox')).to.be.visible; + expect(getByRole('listbox')).toBeVisible(); }); specify('the listbox is focusable', () => { diff --git a/test/utils/init.d.ts b/test/utils/init.d.ts index d6874c388d2307..8d96da4255d1ab 100644 --- a/test/utils/init.d.ts +++ b/test/utils/init.d.ts @@ -8,6 +8,10 @@ declare namespace Chai { * @deprecated Use `inaccessible` + `visible` instead */ toBeAriaHidden(): Assertion; + /** + * Check if an element is not visually hidden + */ + toBeVisible(): Assertion; /** * checks if the element is inaccessible */ diff --git a/test/utils/initMatchers.js b/test/utils/initMatchers.js index d80a0659b11f0b..d5695aac698137 100644 --- a/test/utils/initMatchers.js +++ b/test/utils/initMatchers.js @@ -134,4 +134,12 @@ chai.use((chaiAPI, utils) => { `expected ${utils.elToString(root)} not to have accessible name '${expectedName}'.`, ); }); + + /** + * Correct name for `to.be.visible` + */ + chai.Assertion.addMethod('toBeVisible', function toBeVisible() { + // eslint-disable-next-line no-underscore-dangle, no-unused-expressions + new chai.Assertion(this._obj).to.be.visible; + }); }); From 6364d0fbe54c248ed8887cd2968773f7ec4ee5b1 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 14 Apr 2020 12:19:05 +0200 Subject: [PATCH 10/10] make it clear that these methods shouldn't be chained --- test/utils/init.d.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/test/utils/init.d.ts b/test/utils/init.d.ts index 8d96da4255d1ab..e9f646ef3f3f82 100644 --- a/test/utils/init.d.ts +++ b/test/utils/init.d.ts @@ -7,25 +7,25 @@ declare namespace Chai { * Does not replace accessibility check as that requires display/visibility/layout * @deprecated Use `inaccessible` + `visible` instead */ - toBeAriaHidden(): Assertion; + toBeAriaHidden(): void; /** * Check if an element is not visually hidden */ - toBeVisible(): Assertion; + toBeVisible(): void; /** * checks if the element is inaccessible */ - toBeInaccessible(): Assertion; + toBeInaccessible(): void; /** * checks if the accessible name computation (according to `accname` spec) * matches the expectation. * @see https://www.w3.org/TR/accname-1.2/ * @param name */ - toHaveAccessibleName(name: string): Assertion; + toHaveAccessibleName(name: string): void; /** * checks if the element is focused */ - toHaveFocus(): Assertion; + toHaveFocus(): void; } }