From f376acbddcae4edb4569b8c32aa2007ab81f412a Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Thu, 13 Oct 2022 13:27:26 +0300 Subject: [PATCH] ESLint: Fix jest-dom/prefer-to-have-attribute rule violations --- packages/a11y/src/test/add-container.test.js | 27 ++++++++++--------- .../test/index.js | 2 +- .../src/components/link-control/test/index.js | 2 +- .../components/src/disabled/test/index.tsx | 10 +++---- .../components/src/dropdown/test/index.js | 7 ++--- .../src/input-control/test/index.js | 2 +- packages/components/src/panel/test/body.js | 4 +-- packages/components/src/sandbox/test/index.js | 6 +++-- .../src/toolbar-group/test/index.js | 12 +++------ .../components/src/ui/shortcut/test/index.js | 3 ++- .../src/hooks/use-disabled/test/index.js | 8 +++--- 11 files changed, 43 insertions(+), 40 deletions(-) diff --git a/packages/a11y/src/test/add-container.test.js b/packages/a11y/src/test/add-container.test.js index c7e351dd38ef28..20af3cbb82ef0a 100644 --- a/packages/a11y/src/test/add-container.test.js +++ b/packages/a11y/src/test/add-container.test.js @@ -11,12 +11,13 @@ describe( 'addContainer', () => { expect( container ).not.toBeNull(); expect( container.className ).toBe( 'a11y-speak-region' ); expect( container.id ).toBe( 'a11y-speak-polite' ); - expect( container.getAttribute( 'style' ) ).not.toBeNull(); - expect( container.getAttribute( 'aria-live' ) ).toBe( 'polite' ); - expect( container.getAttribute( 'aria-relevant' ) ).toBe( + expect( container ).toHaveAttribute( 'style' ); + expect( container ).toHaveAttribute( 'aria-live', 'polite' ); + expect( container ).toHaveAttribute( + 'aria-relevant', 'additions text' ); - expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' ); + expect( container ).toHaveAttribute( 'aria-atomic', 'true' ); } ); } ); @@ -27,12 +28,13 @@ describe( 'addContainer', () => { expect( container ).not.toBeNull(); expect( container.className ).toBe( 'a11y-speak-region' ); expect( container.id ).toBe( 'a11y-speak-assertive' ); - expect( container.getAttribute( 'style' ) ).not.toBeNull(); - expect( container.getAttribute( 'aria-live' ) ).toBe( 'assertive' ); - expect( container.getAttribute( 'aria-relevant' ) ).toBe( + expect( container ).toHaveAttribute( 'style' ); + expect( container ).toHaveAttribute( 'aria-live', 'assertive' ); + expect( container ).toHaveAttribute( + 'aria-relevant', 'additions text' ); - expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' ); + expect( container ).toHaveAttribute( 'aria-atomic', 'true' ); } ); } ); @@ -43,12 +45,13 @@ describe( 'addContainer', () => { expect( container ).not.toBeNull(); expect( container.className ).toBe( 'a11y-speak-region' ); expect( container.id ).toBe( 'a11y-speak-polite' ); - expect( container.getAttribute( 'style' ) ).not.toBeNull(); - expect( container.getAttribute( 'aria-live' ) ).toBe( 'polite' ); - expect( container.getAttribute( 'aria-relevant' ) ).toBe( + expect( container ).toHaveAttribute( 'style' ); + expect( container ).toHaveAttribute( 'aria-live', 'polite' ); + expect( container ).toHaveAttribute( + 'aria-relevant', 'additions text' ); - expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' ); + expect( container ).toHaveAttribute( 'aria-atomic', 'true' ); } ); } ); } ); diff --git a/packages/block-directory/src/components/downloadable-block-list-item/test/index.js b/packages/block-directory/src/components/downloadable-block-list-item/test/index.js index e8b9ea59921d84..dca64e4920a8c8 100644 --- a/packages/block-directory/src/components/downloadable-block-list-item/test/index.js +++ b/packages/block-directory/src/components/downloadable-block-list-item/test/index.js @@ -62,7 +62,7 @@ describe( 'DownloadableBlockListItem', () => { const button = screen.getByRole( 'option' ); // Keeping it false to avoid focus loss and disable it using aria-disabled. expect( button.disabled ).toBe( false ); - expect( button.getAttribute( 'aria-disabled' ) ).toBe( 'true' ); + expect( button ).toHaveAttribute( 'aria-disabled', 'true' ); } ); it( 'should try to install the block plugin', async () => { diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index aa5630d4c77b5c..c8651cb207ec1e 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -392,7 +392,7 @@ describe( 'Searching for a link', () => { fauxEntitySuggestions.length ); - expect( searchInput.getAttribute( 'aria-expanded' ) ).toBe( 'true' ); + expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' ); // Sanity check that a search suggestion shows up corresponding to the data. expect( searchResultElements[ 0 ] ).toHaveTextContent( diff --git a/packages/components/src/disabled/test/index.tsx b/packages/components/src/disabled/test/index.tsx index 4d11bcd77d0e9d..98ad10e202737a 100644 --- a/packages/components/src/disabled/test/index.tsx +++ b/packages/components/src/disabled/test/index.tsx @@ -25,7 +25,7 @@ describe( 'Disabled', () => { ); // @ts-ignore - expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( true ); + expect( container.firstChild ).toHaveAttribute( 'inert' ); } ); it( 'should cleanly un-disable via reconciliation', () => { @@ -41,12 +41,12 @@ describe( 'Disabled', () => { const { container, rerender } = render( ); // @ts-ignore - expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( true ); + expect( container.firstChild ).toHaveAttribute( 'inert' ); rerender( ); // @ts-ignore - expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( false ); + expect( container.firstChild ).not.toHaveAttribute( 'inert' ); } ); it( 'will disable or enable descendant fields based on the isDisabled prop value', () => { @@ -59,12 +59,12 @@ describe( 'Disabled', () => { const { rerender, container } = render( ); // @ts-ignore - expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( true ); + expect( container.firstChild ).toHaveAttribute( 'inert' ); rerender( ); // @ts-ignore - expect( container.firstChild.hasAttribute( 'inert' ) ).toBe( false ); + expect( container.firstChild ).not.toHaveAttribute( 'inert' ); } ); it( 'should preserve input values when toggling the isDisabled prop', async () => { diff --git a/packages/components/src/dropdown/test/index.js b/packages/components/src/dropdown/test/index.js index a18e2479d37e8f..96947aca5b1282 100644 --- a/packages/components/src/dropdown/test/index.js +++ b/packages/components/src/dropdown/test/index.js @@ -28,9 +28,10 @@ describe( 'Dropdown', () => { it( 'should toggle the dropdown properly', () => { const expectButtonExpanded = ( container, expanded ) => { expect( container.querySelectorAll( 'button' ) ).toHaveLength( 1 ); - expect( - getButtonElement( container ).getAttribute( 'aria-expanded' ) - ).toBe( expanded.toString() ); + expect( getButtonElement( container ) ).toHaveAttribute( + 'aria-expanded', + expanded.toString() + ); }; const { diff --git a/packages/components/src/input-control/test/index.js b/packages/components/src/input-control/test/index.js index 301d5759c0664d..699facdbbc27c7 100644 --- a/packages/components/src/input-control/test/index.js +++ b/packages/components/src/input-control/test/index.js @@ -40,7 +40,7 @@ describe( 'InputControl', () => { const input = getInput(); - expect( input.getAttribute( 'type' ) ).toBe( 'number' ); + expect( input ).toHaveAttribute( 'type', 'number' ); } ); it( 'should render label', () => { diff --git a/packages/components/src/panel/test/body.js b/packages/components/src/panel/test/body.js index 596714274ff74a..3b8bb3e553a62a 100644 --- a/packages/components/src/panel/test/body.js +++ b/packages/components/src/panel/test/body.js @@ -67,7 +67,7 @@ describe( 'PanelBody', () => { let panelContent = getPanelBodyContent( container ); expect( panelContent ).toBeTruthy(); - expect( panelContent.getAttribute( 'hidden' ) ).toBe( '' ); + expect( panelContent ).toHaveAttribute( 'hidden', '' ); rerender( @@ -77,7 +77,7 @@ describe( 'PanelBody', () => { panelContent = getPanelBodyContent( container ); expect( panelContent ).toBeTruthy(); - expect( panelContent.getAttribute( 'hidden' ) ).toBeNull(); + expect( panelContent ).not.toHaveAttribute( 'hidden' ); } ); } ); diff --git a/packages/components/src/sandbox/test/index.js b/packages/components/src/sandbox/test/index.js index 26865007b434a8..c1c096e0df5262 100644 --- a/packages/components/src/sandbox/test/index.js +++ b/packages/components/src/sandbox/test/index.js @@ -49,7 +49,8 @@ describe( 'Sandbox', () => { let sandboxedIframe = iframe.contentWindow.document.body.querySelector( '.mock-iframe' ); - expect( sandboxedIframe.getAttribute( 'src' ) ).toBe( + expect( sandboxedIframe ).toHaveAttribute( + 'src', 'https://super.embed' ); @@ -60,7 +61,8 @@ describe( 'Sandbox', () => { sandboxedIframe = iframe.contentWindow.document.body.querySelector( '.mock-iframe' ); - expect( sandboxedIframe.getAttribute( 'src' ) ).toBe( + expect( sandboxedIframe ).toHaveAttribute( + 'src', 'https://another.super.embed' ); } ); diff --git a/packages/components/src/toolbar-group/test/index.js b/packages/components/src/toolbar-group/test/index.js index 77c4aefa759dac..e3fd756665905d 100644 --- a/packages/components/src/toolbar-group/test/index.js +++ b/packages/components/src/toolbar-group/test/index.js @@ -36,10 +36,8 @@ describe( 'ToolbarGroup', () => { render( ); const toolbarButton = screen.getByLabelText( 'WordPress' ); - expect( toolbarButton.getAttribute( 'aria-pressed' ) ).toBe( - 'false' - ); - expect( toolbarButton.getAttribute( 'type' ) ).toBe( 'button' ); + expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'false' ); + expect( toolbarButton ).toHaveAttribute( 'type', 'button' ); } ); it( 'should render a list of controls with buttons and active control', () => { @@ -56,10 +54,8 @@ describe( 'ToolbarGroup', () => { render( ); const toolbarButton = screen.getByLabelText( 'WordPress' ); - expect( toolbarButton.getAttribute( 'aria-pressed' ) ).toBe( - 'true' - ); - expect( toolbarButton.getAttribute( 'type' ) ).toBe( 'button' ); + expect( toolbarButton ).toHaveAttribute( 'aria-pressed', 'true' ); + expect( toolbarButton ).toHaveAttribute( 'type', 'button' ); } ); it( 'should render a nested list of controls with separator between', () => { diff --git a/packages/components/src/ui/shortcut/test/index.js b/packages/components/src/ui/shortcut/test/index.js index 56f6ac73e4907b..09329cfdf34cf9 100644 --- a/packages/components/src/ui/shortcut/test/index.js +++ b/packages/components/src/ui/shortcut/test/index.js @@ -28,7 +28,8 @@ describe( 'Shortcut', () => { }; render( ); const shortcut = screen.getByText( shortcutObject.display ); - expect( shortcut.getAttribute( 'aria-label' ) ).toBe( + expect( shortcut ).toHaveAttribute( + 'aria-label', shortcutObject.ariaLabel ); } ); diff --git a/packages/compose/src/hooks/use-disabled/test/index.js b/packages/compose/src/hooks/use-disabled/test/index.js index edf01c3ee602cc..12e976a2439012 100644 --- a/packages/compose/src/hooks/use-disabled/test/index.js +++ b/packages/compose/src/hooks/use-disabled/test/index.js @@ -39,9 +39,9 @@ describe( 'useDisabled', () => { const link = screen.getByRole( 'link' ); const p = container.querySelector( 'p' ); - expect( input.hasAttribute( 'inert' ) ).toBe( true ); - expect( link.hasAttribute( 'inert' ) ).toBe( true ); - expect( p.hasAttribute( 'inert' ) ).toBe( true ); + expect( input ).toHaveAttribute( 'inert', 'true' ); + expect( link ).toHaveAttribute( 'inert', 'true' ); + expect( p ).toHaveAttribute( 'inert', 'true' ); } ); it( 'will disable an element rendered in an update to the component', async () => { @@ -54,7 +54,7 @@ describe( 'useDisabled', () => { const button = screen.getByText( 'Button' ); await waitFor( () => { - expect( button.hasAttribute( 'inert' ) ).toBe( true ); + expect( button ).toHaveAttribute( 'inert', 'true' ); } ); } ); } );