diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js index aa9bc12b7e8fd1..d8039ce614a781 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js @@ -246,7 +246,7 @@ describe('', () => { const textbox = getByRole('textbox'); const options = getAllByRole('option'); - expect(textbox).to.be.focused; + expect(textbox).to.have.focus; expect(textbox).to.have.attribute( 'aria-activedescendant', options[options.length - 1].getAttribute('id'), @@ -266,7 +266,7 @@ describe('', () => { const options = getAllByRole('option'); const textbox = getByRole('textbox'); - expect(textbox).to.be.focused; + expect(textbox).to.have.focus; expect(textbox).to.have.attribute('aria-activedescendant', options[0].getAttribute('id')); }); @@ -284,7 +284,7 @@ describe('', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); const textbox = getByRole('textbox'); - expect(textbox).to.be.focused; + expect(textbox).to.have.focus; expect(textbox).not.to.have.attribute('aria-activedescendant'); }); @@ -301,7 +301,7 @@ describe('', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); const textbox = getByRole('textbox'); - expect(textbox).to.be.focused; + expect(textbox).to.have.focus; expect(textbox).not.to.have.attribute('aria-activedescendant'); }); }); @@ -320,7 +320,7 @@ describe('', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); const textbox = getByRole('textbox'); - expect(textbox).to.be.focused; + expect(textbox).to.have.focus; expect(textbox).to.have.attribute( 'aria-activedescendant', getAllByRole('option')[0].getAttribute('id'), @@ -340,7 +340,7 @@ describe('', () => { const textbox = getByRole('textbox'); const options = getAllByRole('option'); - expect(textbox).to.be.focused; + expect(textbox).to.have.focus; expect(textbox).to.have.attribute( 'aria-activedescendant', options[options.length - 1].getAttribute('id'), @@ -362,7 +362,7 @@ describe('', () => { const textbox = getByRole('textbox'); const options = getAllByRole('option'); - expect(textbox).to.be.focused; + expect(textbox).to.have.focus; expect(textbox).to.have.attribute( 'aria-activedescendant', options[options.length - 1].getAttribute('id'), diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js index 7cd21eaa0e4fd7..3710ea837fd28d 100644 --- a/packages/material-ui-lab/src/TreeItem/TreeItem.test.js +++ b/packages/material-ui-lab/src/TreeItem/TreeItem.test.js @@ -207,12 +207,12 @@ describe('', () => { ); getByTestId('start').focus(); - expect(getByTestId('start')).to.be.focused; + expect(getByTestId('start')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'Tab' }); getByTestId('one').focus(); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; }); it('should focus the selected node if a node is selected before the tree receives focus', () => { @@ -229,15 +229,15 @@ describe('', () => { ); fireEvent.click(getByText('two')); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; getByTestId('start').focus(); - expect(getByTestId('start')).to.be.focused; + expect(getByTestId('start')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'Tab' }); getByTestId('two').focus(); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; }); }); @@ -255,7 +255,7 @@ describe('', () => { getByTestId('one').focus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowRight' }); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; }); it('should move focus to the first child if focus is on an open node', () => { @@ -270,7 +270,7 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); getByTestId('one').focus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowRight' }); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; }); it('should do nothing if focus is on an end node', () => { @@ -283,9 +283,9 @@ describe('', () => { ); fireEvent.click(getByText('two')); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowRight' }); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; }); }); @@ -304,7 +304,7 @@ describe('', () => { getByTestId('one').focus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowLeft' }); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false'); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; }); it("should move focus to the node's parent node if focus is on a child node that is an end node", () => { @@ -319,7 +319,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.be.focused; + expect(getByTestId('one')).to.have.focus; expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); }); @@ -341,7 +341,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.be.focused; + expect(getByTestId('one')).to.have.focus; expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); }); @@ -357,7 +357,7 @@ describe('', () => { getByTestId('one').focus(); expect(getByTestId('one')).to.have.attribute('aria-expanded', 'false'); fireEvent.keyDown(document.activeElement, { key: 'ArrowLeft' }); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; }); it('should do nothing if focus is on a root node that is an end node', () => { @@ -369,7 +369,7 @@ describe('', () => { getByTestId('one').focus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowLeft' }); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; }); }); @@ -384,7 +384,7 @@ describe('', () => { getByTestId('one').focus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; }); it('moves focus to a nested node', () => { @@ -399,7 +399,7 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); getByTestId('one').focus(); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; }); it("moves focus to a parent's sibling", () => { @@ -414,9 +414,9 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); fireEvent.click(getByText('two')); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(getByTestId('three')).to.be.focused; + expect(getByTestId('three')).to.have.focus; }); }); @@ -430,9 +430,9 @@ describe('', () => { ); fireEvent.click(getByText('two')); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; }); it('moves focus to a parent', () => { @@ -446,9 +446,9 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); fireEvent.click(getByText('two')); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; }); it("moves focus to a sibling's child", () => { @@ -463,9 +463,9 @@ describe('', () => { expect(getByTestId('one')).to.have.attribute('aria-expanded', 'true'); fireEvent.click(getByText('three')); - expect(getByTestId('three')).to.be.focused; + expect(getByTestId('three')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; }); }); @@ -481,9 +481,9 @@ describe('', () => { ); fireEvent.click(getByText('four')); - expect(getByTestId('four')).to.be.focused; + expect(getByTestId('four')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'Home' }); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; }); }); @@ -499,9 +499,9 @@ describe('', () => { ); getByTestId('one').focus(); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'End' }); - expect(getByTestId('four')).to.be.focused; + expect(getByTestId('four')).to.have.focus; }); it('moves focus to the last node in the tree with expanded items', () => { @@ -519,9 +519,9 @@ describe('', () => { ); getByTestId('one').focus(); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'End' }); - expect(getByTestId('six')).to.be.focused; + expect(getByTestId('six')).to.have.focus; }); }); @@ -569,15 +569,15 @@ describe('', () => { ); getByTestId('one').focus(); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 't' }); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'f' }); - expect(getByTestId('four')).to.be.focused; + expect(getByTestId('four')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'o' }); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; }); it('moves focus to the next node with the same starting character', () => { @@ -591,15 +591,15 @@ describe('', () => { ); getByTestId('one').focus(); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 't' }); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 't' }); - expect(getByTestId('three')).to.be.focused; + expect(getByTestId('three')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 't' }); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; }); }); diff --git a/packages/material-ui-lab/src/TreeView/TreeView.test.js b/packages/material-ui-lab/src/TreeView/TreeView.test.js index 8da004813da548..e788328ad98b32 100644 --- a/packages/material-ui-lab/src/TreeView/TreeView.test.js +++ b/packages/material-ui-lab/src/TreeView/TreeView.test.js @@ -50,13 +50,13 @@ describe('', () => { const { getByText, getByTestId } = render(); fireEvent.click(getByText('one')); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(getByTestId('one')).to.be.focused; + expect(getByTestId('one')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(getByTestId('two')).to.be.focused; + expect(getByTestId('two')).to.have.focus; }); describe('onNodeToggle', () => { diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.test.js b/packages/material-ui/src/ButtonBase/ButtonBase.test.js index ec804840a8abeb..8bd4f0bd939692 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.test.js +++ b/packages/material-ui/src/ButtonBase/ButtonBase.test.js @@ -608,7 +608,7 @@ describe('', () => { // so we need to check if we're resilient against it const { getByText } = render(Hello); - expect(getByText('Hello')).to.be.focused; + expect(getByText('Hello')).to.have.focus; }); }); @@ -753,7 +753,7 @@ describe('', () => { expect(typeof buttonActionsRef.current.focusVisible).to.equal('function'); // @ts-ignore buttonActionsRef.current.focusVisible(); - expect(getByText('Hello')).to.be.focused; + expect(getByText('Hello')).to.have.focus; expect(getByText('Hello')).to.match('.focusVisible'); }); }); diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.test.js index 662a33c0fea77d..313c0744510607 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.be.focused; + expect(button).to.have.focus; expect(button).to.have.class(classes.focused); }); @@ -90,7 +90,7 @@ describe('', () => { button.blur(); - expect(button).not.to.be.focused; + expect(button).not.to.have.focus; 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 038fc6195d3ca3..71e8051dda4799 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.be.focused; + expect(dialog).to.have.focus; toggleButton.focus(); - expect(toggleButton).to.be.focused; + expect(toggleButton).to.have.focus; setProps({ hideButton: true }); - expect(dialog).to.not.be.focused; + expect(dialog).not.to.have.focus; clock.tick(500); // wait for the interval check to kick in. - expect(dialog).to.be.focused; + expect(dialog).to.have.focus; }); }); }); diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js index 607605a82b7e6c..d334fd739116f9 100644 --- a/packages/material-ui/src/Select/Select.test.js +++ b/packages/material-ui/src/Select/Select.test.js @@ -201,7 +201,7 @@ describe('', () => { getByRole('listbox').focus(); - expect(getByRole('listbox')).to.be.focused; + expect(getByRole('listbox')).to.have.focus; }); it('identifies each selectable element containing an option', () => { @@ -623,10 +623,9 @@ describe('', () => { it('should focus select after Select did mount', () => { const { getByRole } = render(', () => { ref.current.focus(); }); - expect(getByRole('button')).to.be.focused; + expect(getByRole('button')).to.have.focus; }); }); diff --git a/packages/material-ui/test/integration/Menu.test.js b/packages/material-ui/test/integration/Menu.test.js index 3037b2eec87ce0..b36b1eac715f9e 100644 --- a/packages/material-ui/test/integration/Menu.test.js +++ b/packages/material-ui/test/integration/Menu.test.js @@ -86,10 +86,9 @@ describe(' integration', () => { }); it('is part of the DOM by default but hidden', () => { - const { queryByRole } = render(); + const { getByRole } = render(); - // note: this will fail once testing-library ignores inaccessible roles :) - expect(queryByRole('menu')).to.be.null; + expect(getByRole('menu', { hidden: true })).to.be.inaccessible; }); it('does not gain any focus when mounted ', () => { @@ -105,7 +104,7 @@ describe(' integration', () => { button.focus(); button.click(); - expect(getAllByRole('menuitem')[0]).to.be.focused; + expect(getAllByRole('menuitem')[0]).to.have.focus; }); it('changes focus according to keyboard navigation', () => { @@ -117,22 +116,22 @@ describe(' integration', () => { const menuitems = getAllByRole('menuitem'); fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[1]).to.be.focused; + expect(menuitems[1]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[0]).to.be.focused; + expect(menuitems[0]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[2]).to.be.focused; + expect(menuitems[2]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'Home' }); - expect(menuitems[0]).to.be.focused; + expect(menuitems[0]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'End' }); - expect(menuitems[2]).to.be.focused; + expect(menuitems[2]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowRight' }); - expect(menuitems[2], 'no change on unassociated keys').to.be.focused; + expect(menuitems[2], 'no change on unassociated keys').to.have.focus; }); it('focuses the selected item when opening', () => { @@ -142,7 +141,7 @@ describe(' integration', () => { button.focus(); button.click(); - expect(getAllByRole('menuitem')[2]).to.be.focused; + expect(getAllByRole('menuitem')[2]).to.have.focus; }); describe('Menu variant differences', () => { @@ -160,7 +159,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[0]).to.be.focused; + expect(menuitems[0]).to.have.focus; expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -176,7 +175,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[0]).to.be.focused; + expect(menuitems[0]).to.have.focus; expect(menuitems[0]).to.have.property('tabIndex', 0); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -193,7 +192,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[2]).to.be.focused; + expect(menuitems[2]).to.have.focus; expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -209,7 +208,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[0]).to.be.focused; + expect(menuitems[0]).to.have.focus; expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', -1); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -225,7 +224,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[1]).to.be.focused; + expect(menuitems[1]).to.have.focus; expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 0); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -241,7 +240,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[1]).to.be.focused; + expect(menuitems[1]).to.have.focus; expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 2); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -263,7 +262,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(menuitems[1]).to.be.focused; + expect(menuitems[1]).to.have.focus; expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 0); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -284,7 +283,7 @@ describe(' integration', () => { ); const menuitems = getAllByRole('menuitem'); - expect(getByTestId('Paper')).to.be.focused; + expect(getByTestId('Paper')).to.have.focus; expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 0); expect(menuitems[2]).to.have.property('tabIndex', -1); @@ -307,7 +306,7 @@ describe(' integration', () => { getByRole('button').click(); const menuitems = getAllByRole('menuitem'); - expect(menuitems[1]).to.be.focused; + expect(menuitems[1]).to.have.focus; 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 4c1e0ec2c4228d..2db3185ccdb332 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.be.focused; + expect(getAllByRole('menuitem')[0]).to.have.focus; }); 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.be.focused; + expect(menuitems[2]).to.have.focus; 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.be.focused; + expect(menuitems[1]).to.have.focus; 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.be.focused; + expect(menuitems[0]).to.have.focus; 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.be.focused; - expect(menuitems[1]).not.to.be.focused; - expect(menuitems[2]).not.to.be.focused; + expect(menuitems[0]).not.to.have.focus; + expect(menuitems[1]).not.to.have.focus; + expect(menuitems[2]).not.to.have.focus; }); it('can imperatively focus the first item', () => { @@ -145,7 +145,7 @@ describe(' integration', () => { menuitems[0].focus(); - expect(menuitems[0]).to.be.focused; + expect(menuitems[0]).to.have.focus; 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.be.focused; + expect(menuitems[1]).to.have.focus; 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.be.focused; + expect(menuitems[2]).to.have.focus; 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.be.focused; + expect(menuitems[1]).to.have.focus; 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.be.focused; + expect(menuitems[2]).to.have.focus; 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.be.focused; + expect(menuitems[0]).to.have.focus; 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.be.focused; + expect(menuitems[2]).to.have.focus; 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.be.focused; + expect(menuitems[2]).to.have.focus; 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.be.focused; + expect(menuitems[0]).to.have.focus; 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.be.focused; + expect(menuitems[1]).to.have.focus; expect(menuitems[0]).to.have.property('tabIndex', -1); expect(menuitems[1]).to.have.property('tabIndex', 0); }); @@ -326,37 +326,37 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[0]).to.be.focused; + expect(menuitems[0]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[1]).to.be.focused; + expect(menuitems[1]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[3]).to.be.focused; + expect(menuitems[3]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[0]).to.be.focused; + expect(menuitems[0]).to.have.focus; // and ArrowUp again fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[3]).to.be.focused; + expect(menuitems[3]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[1]).to.be.focused; + expect(menuitems[1]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[0]).to.be.focused; + expect(menuitems[0]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[3]).to.be.focused; + expect(menuitems[3]).to.have.focus; }); it('should stay on a single item if it is the only focusable one', () => { @@ -372,23 +372,23 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[1]).to.be.focused; + expect(menuitems[1]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[1]).to.be.focused; + expect(menuitems[1]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menuitems[1]).to.be.focused; + expect(menuitems[1]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[1]).to.be.focused; + expect(menuitems[1]).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menuitems[1]).to.be.focused; + expect(menuitems[1]).to.have.focus; }); it('should keep focus on the menu if all items are disabled', () => { @@ -404,23 +404,23 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'Home' }); - expect(menu).to.be.focused; + expect(menu).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menu).to.be.focused; + expect(menu).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowDown' }); - expect(menu).to.be.focused; + expect(menu).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'End' }); - expect(menu).to.be.focused; + expect(menu).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'ArrowUp' }); - expect(menu).to.be.focused; + expect(menu).to.have.focus; }); describe('MenuList text-based keyboard controls', () => { @@ -443,7 +443,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'a' }); - expect(getByText('Arizona')).to.be.focused; + expect(getByText('Arizona')).to.have.focus; }); it('selects the next item starting with the typed character', () => { @@ -457,7 +457,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'a' }); - expect(getByText('Arcansas')).to.be.focused; + expect(getByText('Arcansas')).to.have.focus; }); it('should not get focusVisible class on click', () => { @@ -473,7 +473,7 @@ describe(' integration', () => { menuitem.focus(); fireEvent.click(menuitem); - expect(menuitem).to.be.focused; + expect(menuitem).to.have.focus; expect(menuitem).not.to.have.class('focus-visible'); }); @@ -487,7 +487,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'c' }); - expect(getByText('Arizona')).to.be.focused; + expect(getByText('Arizona')).to.have.focus; }); it('should not move focus when keys match current focus', () => { @@ -500,11 +500,11 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'A' }); - expect(getByText('Arizona')).to.be.focused; + expect(getByText('Arizona')).to.have.focus; fireEvent.keyDown(document.activeElement, { key: 'r' }); - expect(getByText('Arizona')).to.be.focused; + expect(getByText('Arizona')).to.have.focus; }); it('should not move focus if focus starts on descendant and the key doesnt match', () => { @@ -521,7 +521,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'z' }); - expect(button).to.be.focused; + expect(button).to.have.focus; }); it('matches rapidly typed text', () => { @@ -535,7 +535,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'W' }); fireEvent.keyDown(document.activeElement, { key: 'o' }); - expect(getByText('Worm')).to.be.focused; + expect(getByText('Worm')).to.have.focus; }); it('should reset the character buffer after 500ms', done => { @@ -550,7 +550,7 @@ describe(' integration', () => { setTimeout(() => { fireEvent.keyDown(document.activeElement, { key: 'o' }); - expect(getByText('Ordinary')).to.be.focused; + expect(getByText('Ordinary')).to.have.focus; done(); }, 500); }); @@ -573,7 +573,7 @@ describe(' integration', () => { fireEvent.keyDown(document.activeElement, { key: 'W' }); fireEvent.keyDown(document.activeElement, { key: 'o' }); - expect(getByText('Worm')).to.be.focused; + expect(getByText('Worm')).to.have.focus; }); }); }); diff --git a/packages/material-ui/test/integration/NestedMenu.test.js b/packages/material-ui/test/integration/NestedMenu.test.js index 592674b103e782..6349d2b9496dee 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.be.focused; + expect(within(getByRole('menu')).getAllByRole('menuitem')[0]).to.have.focus; }); 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.be.focused; + expect(within(getByRole('menu')).getAllByRole('menuitem')[0]).to.have.focus; }); 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.be.focused; + expect(within(getByRole('menu')).getAllByRole('menuitem')[0]).to.have.focus; }); 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.be.focused; + expect(within(getByRole('menu')).getAllByRole('menuitem')[0]).to.have.focus; }); }); diff --git a/packages/material-ui/test/integration/Select.test.js b/packages/material-ui/test/integration/Select.test.js index efa33d6f5d2e1d..085246a334aa95 100644 --- a/packages/material-ui/test/integration/Select.test.js +++ b/packages/material-ui/test/integration/Select.test.js @@ -62,14 +62,14 @@ describe(' integration', () => { trigger.click(); const options = getAllByRole('option'); - expect(options[1]).to.be.focused; + expect(options[1]).to.have.focus; // Now, let's close the select component options[2].click(); clock.tick(0); expect(queryByRole('listbox')).to.be.null; - expect(trigger).to.focused; + expect(trigger).to.have.focus; expect(trigger).to.have.text('Twenty'); }); }); diff --git a/test/utils/init.d.ts b/test/utils/init.d.ts index df15c7cbbeac0d..9db9ea9827ef5f 100644 --- a/test/utils/init.d.ts +++ b/test/utils/init.d.ts @@ -15,6 +15,6 @@ declare namespace Chai { /** * checks if the element is focused */ - focused: Assertion; + focus: Assertion; } } diff --git a/test/utils/initMatchers.js b/test/utils/initMatchers.js index b0784d04baa424..1ac2f5e8805a67 100644 --- a/test/utils/initMatchers.js +++ b/test/utils/initMatchers.js @@ -6,7 +6,8 @@ import { prettyDOM } from '@testing-library/react/pure'; chai.use(chaiDom); chai.use((chaiAPI, utils) => { // better diff view for expect(element).to.equal(document.activeElement) - chai.Assertion.addProperty('focused', function elementIsFocused() { + // use as `.to.have.focus` to match `toHaveFocus` from `jest-dom` + chai.Assertion.addProperty('focus', function elementIsFocused() { const element = utils.flag(this, 'object'); this.assert(