From f27e6eba42ed371ba957707141ab91071e575391 Mon Sep 17 00:00:00 2001 From: atomiks Date: Tue, 13 Aug 2024 15:43:10 +1000 Subject: [PATCH] Fix test linting --- .../src/Composite/Root/CompositeRoot.test.tsx | 64 +++++++++---------- .../RadioGroup/Root/RadioGroupRoot.test.tsx | 21 +++--- 2 files changed, 39 insertions(+), 46 deletions(-) diff --git a/packages/mui-base/src/Composite/Root/CompositeRoot.test.tsx b/packages/mui-base/src/Composite/Root/CompositeRoot.test.tsx index e7fad1fab2..61b32c2386 100644 --- a/packages/mui-base/src/Composite/Root/CompositeRoot.test.tsx +++ b/packages/mui-base/src/Composite/Root/CompositeRoot.test.tsx @@ -1,15 +1,11 @@ import * as React from 'react'; import { expect } from 'chai'; import { test } from 'mocha'; -import { createRenderer, act, screen, fireEvent } from '@mui/internal-test-utils'; +import { createRenderer, act, screen, fireEvent, flushMicrotasks } from '@mui/internal-test-utils'; import { describeConformance } from '../../../test/describeConformance'; import { CompositeRoot } from './CompositeRoot'; import { CompositeItem } from '../Item/CompositeItem'; -function microtask() { - return act(async () => {}); -} - describe('', () => { const { render } = createRenderer(); @@ -38,25 +34,25 @@ describe('', () => { expect(screen.getByTestId('1')).to.have.attribute('data-active'); fireEvent.keyDown(screen.getByTestId('1'), { key: 'ArrowDown' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('2')).to.have.attribute('data-active'); expect(screen.getByTestId('2')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('2')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('2'), { key: 'ArrowDown' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('3')).to.have.attribute('data-active'); expect(screen.getByTestId('3')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('3')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('3'), { key: 'ArrowUp' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('2')).to.have.attribute('data-active'); expect(screen.getByTestId('2')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('2')).toHaveFocus(); act(() => screen.getByTestId('1').focus()); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('1')).to.have.attribute('data-active'); expect(screen.getByTestId('1')).to.have.attribute('tabindex', '0'); }); @@ -74,25 +70,25 @@ describe('', () => { expect(screen.getByTestId('1')).to.have.attribute('data-active'); fireEvent.keyDown(screen.getByTestId('1'), { key: 'ArrowDown' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('2')).to.have.attribute('data-active'); expect(screen.getByTestId('2')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('2')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('2'), { key: 'ArrowDown' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('3')).to.have.attribute('data-active'); expect(screen.getByTestId('3')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('3')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('3'), { key: 'ArrowUp' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('2')).to.have.attribute('data-active'); expect(screen.getByTestId('2')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('2')).toHaveFocus(); act(() => screen.getByTestId('1').focus()); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('1')).to.have.attribute('data-active'); expect(screen.getByTestId('1')).to.have.attribute('tabindex', '0'); }); @@ -119,37 +115,37 @@ describe('', () => { expect(screen.getByTestId('1')).to.have.attribute('data-active'); fireEvent.keyDown(screen.getByTestId('1'), { key: 'ArrowDown' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('4')).to.have.attribute('data-active'); expect(screen.getByTestId('4')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('4')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('4'), { key: 'ArrowRight' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('5')).to.have.attribute('data-active'); expect(screen.getByTestId('5')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('5')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('5'), { key: 'ArrowDown' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('8')).to.have.attribute('data-active'); expect(screen.getByTestId('8')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('8')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('8'), { key: 'ArrowLeft' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('7')).to.have.attribute('data-active'); expect(screen.getByTestId('7')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('7')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('7'), { key: 'ArrowUp' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('4')).to.have.attribute('data-active'); expect(screen.getByTestId('4')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('4')).toHaveFocus(); act(() => screen.getByTestId('9').focus()); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('9')).to.have.attribute('data-active'); expect(screen.getByTestId('9')).to.have.attribute('tabindex', '0'); }); @@ -185,37 +181,37 @@ describe('', () => { expect(screen.getByTestId('1')).to.have.attribute('data-active'); fireEvent.keyDown(screen.getByTestId('1'), { key: 'ArrowDown' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('456')).to.have.attribute('data-active'); expect(screen.getByTestId('456')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('456')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('456'), { key: 'ArrowDown' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('7')).to.have.attribute('data-active'); expect(screen.getByTestId('7')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('7')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('7'), { key: 'ArrowRight' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('8')).to.have.attribute('data-active'); expect(screen.getByTestId('8')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('8')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('8'), { key: 'ArrowUp' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('456')).to.have.attribute('data-active'); expect(screen.getByTestId('456')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('456')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('456'), { key: 'ArrowUp' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('1')).to.have.attribute('data-active'); expect(screen.getByTestId('1')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('1')).toHaveFocus(); act(() => screen.getByTestId('9').focus()); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('9')).to.have.attribute('data-active'); expect(screen.getByTestId('9')).to.have.attribute('tabindex', '0'); }); @@ -250,37 +246,37 @@ describe('', () => { expect(screen.getByTestId('1')).to.have.attribute('data-active'); fireEvent.keyDown(screen.getByTestId('1'), { key: 'ArrowDown' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('4578')).to.have.attribute('data-active'); expect(screen.getByTestId('4578')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('4578')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('4578'), { key: 'ArrowRight' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('6')).to.have.attribute('data-active'); expect(screen.getByTestId('6')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('6')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('6'), { key: 'ArrowDown' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('9')).to.have.attribute('data-active'); expect(screen.getByTestId('9')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('9')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('9'), { key: 'ArrowLeft' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('4578')).to.have.attribute('data-active'); expect(screen.getByTestId('4578')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('4578')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('4578'), { key: 'ArrowUp' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('1')).to.have.attribute('data-active'); expect(screen.getByTestId('1')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('1')).toHaveFocus(); act(() => screen.getByTestId('9').focus()); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('9')).to.have.attribute('data-active'); expect(screen.getByTestId('9')).to.have.attribute('tabindex', '0'); }); @@ -314,7 +310,7 @@ describe('', () => { expect(screen.getByTestId('1')).to.have.attribute('data-active'); fireEvent.keyDown(screen.getByTestId('1'), { key: 'ArrowDown' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('78')).to.have.attribute('data-active'); expect(screen.getByTestId('78')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('78')).toHaveFocus(); @@ -350,13 +346,13 @@ describe('', () => { expect(screen.getByTestId('1')).to.have.attribute('data-active'); fireEvent.keyDown(screen.getByTestId('1'), { key: 'ArrowDown' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('4')).to.have.attribute('data-active'); expect(screen.getByTestId('4')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('4')).toHaveFocus(); fireEvent.keyDown(screen.getByTestId('4'), { key: 'ArrowDown' }); - await microtask(); + await flushMicrotasks(); expect(screen.getByTestId('78')).to.have.attribute('data-active'); expect(screen.getByTestId('78')).to.have.attribute('tabindex', '0'); expect(screen.getByTestId('78')).toHaveFocus(); diff --git a/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx b/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx index ca2381c591..e141c83a43 100644 --- a/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx +++ b/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.test.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; +import * as RadioGroup from '@base_ui/react/RadioGroup'; +import * as Radio from '@base_ui/react/Radio'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { createRenderer, act, screen } from '@mui/internal-test-utils'; +import { createRenderer, act, screen, fireEvent } from '@mui/internal-test-utils'; import userEvent from '@testing-library/user-event'; -import * as RadioGroup from '@base_ui/react/RadioGroup'; -import * as Radio from '@base_ui/react/Radio'; import { describeConformance } from '../../../test/describeConformance'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -22,6 +22,7 @@ describe('', () => { describe('extra props', () => { it('can override the built-in attributes', () => { const { container } = render(); + // eslint-disable-next-line testing-library/no-node-access expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'switch'); }); }); @@ -36,9 +37,7 @@ describe('', () => { const item = screen.getByTestId('item'); - act(() => { - item.click(); - }); + fireEvent.click(item); expect(handleChange.callCount).to.equal(1); expect(handleChange.firstCall.args[0]).to.equal('a'); @@ -66,9 +65,7 @@ describe('', () => { expect(item).to.have.attribute('aria-checked', 'false'); - act(() => { - item.click(); - }); + fireEvent.click(item); expect(item).to.have.attribute('aria-checked', 'false'); }); @@ -98,9 +95,7 @@ describe('', () => { expect(item).to.have.attribute('aria-checked', 'false'); - act(() => { - item.click(); - }); + fireEvent.click(item); expect(item).to.have.attribute('aria-checked', 'false'); }); @@ -116,6 +111,7 @@ describe('', () => { const group = screen.getByTestId('root'); const item = screen.getByTestId('item'); + // eslint-disable-next-line testing-library/no-node-access const input = group.querySelector('input'); act(() => { @@ -156,6 +152,7 @@ describe('', () => { it('should set the name attribute on the input', () => { render(); const group = screen.getByRole('radiogroup'); + // eslint-disable-next-line testing-library/no-node-access expect(group.nextElementSibling).to.have.attribute('name', 'radio-group'); });