diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a6a1a9d0f8b..f8bfbad787b 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -83,7 +83,6 @@ jobs: uses: docker://mcr.microsoft.com/playwright:v1.55.0-jammy with: args: npm test - continue-on-error: ${{ matrix.react-version == 'react-19' }} type-check: runs-on: ubuntu-latest diff --git a/packages/react/src/ActionList/Group.test.tsx b/packages/react/src/ActionList/Group.test.tsx index 83ae6ab53d0..2e3fcc6b9d4 100644 --- a/packages/react/src/ActionList/Group.test.tsx +++ b/packages/react/src/ActionList/Group.test.tsx @@ -1,4 +1,4 @@ -import {describe, it, expect, vi} from 'vitest' +import {describe, it, expect} from 'vitest' import {render as HTMLRender} from '@testing-library/react' import BaseStyles from '../BaseStyles' import {ActionList} from '.' @@ -6,7 +6,6 @@ import {ActionMenu} from '..' describe('ActionList.Group', () => { it('should throw an error when ActionList.GroupHeading has an `as` prop when it is used within ActionMenu context', async () => { - const spy = vi.spyOn(console, 'error').mockImplementation(() => vi.fn()) expect(() => HTMLRender( @@ -25,8 +24,6 @@ describe('ActionList.Group', () => { ).toThrow( "Looks like you are trying to set a heading level to a menu role. Group headings for menu type action lists are for representational purposes, and rendered as divs. Therefore they don't need a heading level.", ) - expect(spy).toHaveBeenCalled() - spy.mockRestore() }) it('should render the ActionList.GroupHeading component as a heading with the given heading level', async () => { @@ -43,7 +40,6 @@ describe('ActionList.Group', () => { expect(heading).toHaveTextContent('Group Heading') }) it('should throw an error if ActionList.GroupHeading is used without an `as` prop when no role is specified (for list role)', async () => { - const spy = vi.spyOn(console, 'error').mockImplementation(() => vi.fn()) expect(() => HTMLRender( @@ -57,8 +53,6 @@ describe('ActionList.Group', () => { ).toThrow( "You are setting a heading for a list, that requires a heading level. Please use 'as' prop to set a proper heading level.", ) - expect(spy).toHaveBeenCalled() - spy.mockRestore() }) it('should render the ActionList.GroupHeading component as a span (not a heading tag) when role is specified as listbox', async () => { const container = HTMLRender( diff --git a/packages/react/src/ActionList/Heading.test.tsx b/packages/react/src/ActionList/Heading.test.tsx index 0318c0e7bba..8227f229630 100644 --- a/packages/react/src/ActionList/Heading.test.tsx +++ b/packages/react/src/ActionList/Heading.test.tsx @@ -1,4 +1,4 @@ -import {describe, it, expect, vi} from 'vitest' +import {describe, it, expect} from 'vitest' import {render as HTMLRender} from '@testing-library/react' import BaseStyles from '../BaseStyles' import {ActionList} from '.' @@ -29,7 +29,6 @@ describe('ActionList.Heading', () => { }) it('should throw an error when ActionList.Heading is used within ActionMenu context', async () => { - const spy = vi.spyOn(console, 'error').mockImplementation(() => vi.fn()) expect(() => HTMLRender( @@ -47,8 +46,6 @@ describe('ActionList.Heading', () => { ).toThrow( "ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.", ) - expect(spy).toHaveBeenCalled() - spy.mockRestore() }) it('should support a custom `className` on the outermost element', () => { diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx index 0701c2c18c4..18533837f3e 100644 --- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx +++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx @@ -122,11 +122,6 @@ describe('AnchoredOverlay', () => { expect(mockCloseCallback).toHaveBeenCalledWith('escape') }) - it('should render consistently when open', () => { - const {container} = render() - expect(container).toMatchSnapshot() - }) - it('should call onPositionChange when provided', async () => { const mockPositionChangeCallback = vi.fn(({position}: {position: AnchorPosition}) => position) render() diff --git a/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap b/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap deleted file mode 100644 index 74c4f25139c..00000000000 --- a/packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap +++ /dev/null @@ -1,75 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`AnchoredOverlay > should render consistently when open 1`] = ` -
-
- -
-
-
-
-
-
-
-
-`; diff --git a/packages/react/src/NavList/NavList.test.tsx b/packages/react/src/NavList/NavList.test.tsx index f91ddd2b82d..a7da2521f13 100644 --- a/packages/react/src/NavList/NavList.test.tsx +++ b/packages/react/src/NavList/NavList.test.tsx @@ -21,35 +21,6 @@ const NextJSLikeLink = React.forwardRef( ) describe('NavList', () => { - it('renders a simple list', () => { - const {container} = render( - - - Home - - About - Contact - , - ) - expect(container).toMatchSnapshot() - }) - - it('renders with groups', () => { - const {container} = render( - - - - Getting started - - - - Avatar - - , - ) - expect(container).toMatchSnapshot() - }) - it('supports TrailingAction', async () => { const {getByRole} = render( @@ -196,54 +167,6 @@ describe('NavList.Item with NavList.SubNav', () => { expect(queryByRole('list', {name: 'Item 2'})).toBeNull() }) - it('has active styles if SubNav contains the current item and is closed', () => { - const {container, getByRole, queryByRole} = render( - - - Item - - - Sub Item - - - - , - ) - - const button = getByRole('button') - - // Starts open - expect(queryByRole('list', {name: 'Item'})).toBeVisible() - - // Click to close - fireEvent.click(button) - expect(queryByRole('list', {name: 'Item'})).toBeNull() - - // Snapshot styles - expect(container).toMatchSnapshot() - }) - - it('does not have active styles if SubNav contains the current item and is open', () => { - const {container, queryByRole} = render( - - - Item - - - Sub Item - - - - , - ) - - // Starts open - expect(queryByRole('list', {name: 'Item'})).toBeVisible() - - // Snapshot styles - expect(container).toMatchSnapshot() - }) - it('prevents more than 4 levels of nested SubNavs', () => { const consoleSpy = vi .spyOn(console, 'error') diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap deleted file mode 100644 index 2110a5a3c8f..00000000000 --- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap +++ /dev/null @@ -1,437 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`NavList > renders a simple list 1`] = ` - -`; - -exports[`NavList > renders with groups 1`] = ` -
- -
-`; - -exports[`NavList.Item with NavList.SubNav > does not have active styles if SubNav contains the current item and is open 1`] = ` -
- -
-`; - -exports[`NavList.Item with NavList.SubNav > has active styles if SubNav contains the current item and is closed 1`] = ` -
- -
-`; diff --git a/packages/react/src/TextInput/TextInput.test.tsx b/packages/react/src/TextInput/TextInput.test.tsx index 24ff94aff2f..db2d2616123 100644 --- a/packages/react/src/TextInput/TextInput.test.tsx +++ b/packages/react/src/TextInput/TextInput.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event' import {render, fireEvent, screen} from '@testing-library/react' import {describe, it, expect, vi} from 'vitest' import React from 'react' -import {TextInput} from '..' +import TextInput from '../TextInput' describe('TextInput', () => { it('should support `className` on the outermost element', () => { @@ -13,19 +13,24 @@ describe('TextInput', () => { }) it('renders', () => { - expect(render().container).toMatchSnapshot() + render() + expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text') + expect(screen.getByRole('textbox')).toHaveAttribute('name', 'zipcode') }) it('renders small', () => { - expect(render().container).toMatchSnapshot() + const {container} = render() + expect(container.firstElementChild).toHaveAttribute('data-size', 'small') }) it('renders large', () => { - expect(render().container).toMatchSnapshot() + const {container} = render() + expect(container.firstElementChild).toHaveAttribute('data-size', 'large') }) it('renders block', () => { - expect(render().container).toMatchSnapshot() + const {container} = render() + expect(container.firstElementChild).toHaveAttribute('data-block') }) it('renders error', () => { @@ -50,104 +55,109 @@ describe('TextInput', () => { }) it('renders leadingVisual', () => { - expect( - render().container, - ).toMatchSnapshot() - expect( - render(} />).container, - ).toMatchSnapshot() - expect( - render( + function FunctionComponent() { + return + } + + render( + <> + + } /> ( -
Trailing
+
Trailing
))} - />, - ).container, - ).toMatchSnapshot() - expect( - render( + /> ( -
Trailing
+
Trailing
))} - />, - ).container, - ).toMatchSnapshot() + /> + , + ) + + expect(screen.getByTestId('function-component')).toBeInTheDocument() + expect(screen.getByTestId('jsx-element')).toBeInTheDocument() + expect(screen.getByTestId('memo')).toBeInTheDocument() + expect(screen.getByTestId('forward-ref')).toBeInTheDocument() }) it('renders trailingVisual', () => { - expect(render()).toMatchSnapshot() - expect(render(} />)).toMatchSnapshot() - expect( - render( + function FunctionComponent() { + return + } + + render( + <> + + } /> ( -
Trailing
+
Trailing
))} - />, - ).container, - ).toMatchSnapshot() - expect( - render( + /> ( -
Trailing
+
Trailing
))} - />, - ).container, - ).toMatchSnapshot() + /> + , + ) + + expect(screen.getByTestId('function-component')).toBeInTheDocument() + expect(screen.getByTestId('jsx-element')).toBeInTheDocument() + expect(screen.getByTestId('memo')).toBeInTheDocument() + expect(screen.getByTestId('forward-ref')).toBeInTheDocument() }) it('renders trailingAction text button', () => { const handleAction = vi.fn() - expect( - render( - Clear} - />, - ).container, - ).toMatchSnapshot() + render( + Clear} + />, + ) + expect(screen.getByRole('button', {name: 'Clear'})).toBeInTheDocument() }) it('renders trailingAction text button with a tooltip', () => { const handleAction = vi.fn() - expect( - render( - - Clear - - } - />, - ).container, - ).toMatchSnapshot() + render( + + Clear + + } + />, + ) + + expect(screen.getByRole('button', {name: 'Clear'})).toBeInTheDocument() }) it('renders trailingAction icon button', () => { const handleAction = vi.fn() - expect( - render( - } - />, - ).container, - ).toMatchSnapshot() + render( + } + />, + ) + + expect(screen.getByRole('button', {name: 'Icon label'})).toBeInTheDocument() }) it('focuses the text input if you do not click the input element', () => { @@ -165,44 +175,6 @@ describe('TextInput', () => { expect(getByLabelText('Search')).toEqual(document.activeElement) }) - it('renders with a loading indicator', () => { - expect( - render( - <> - - - - - - - - - - - - - - - - - - - - - - - - , - ).container, - ).toMatchSnapshot() - }) - it('indicates a busy status to assistive technology', () => { const {container} = render( <> diff --git a/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap index 4d816592e47..b378ae7a1ea 100644 --- a/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap +++ b/packages/react/src/TextInput/__snapshots__/TextInput.test.tsx.snap @@ -1,38 +1,5 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`TextInput > renders 1`] = ` -
- - - -
-`; - -exports[`TextInput > renders block 1`] = ` -
- - - -
-`; - exports[`TextInput > renders contrast 1`] = `
renders error 1`] = `
`; -exports[`TextInput > renders large 1`] = ` -
- - - -
-`; - -exports[`TextInput > renders leadingVisual 1`] = ` -
- - - - -
-`; - -exports[`TextInput > renders leadingVisual 2`] = ` -
- - - - -
-`; - -exports[`TextInput > renders leadingVisual 3`] = ` -
- - - - -
-`; - -exports[`TextInput > renders leadingVisual 4`] = ` -
- - - - -
-`; - exports[`TextInput > renders monospace 1`] = `
renders placeholder 1`] = `
`; -exports[`TextInput > renders small 1`] = ` -
- - - -
-`; - -exports[`TextInput > renders trailingAction icon button 1`] = ` -
- - - - - - - -
-`; - -exports[`TextInput > renders trailingAction text button 1`] = ` -
- - - - - - -
-`; - -exports[`TextInput > renders trailingAction text button with a tooltip 1`] = ` -
- - - - - - - -
-`; - -exports[`TextInput > renders trailingVisual 1`] = ` -{ - "asFragment": [Function], - "baseElement": - - - - -
- - - - -
- , - "container":
- - - - -
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; - -exports[`TextInput > renders trailingVisual 2`] = ` -{ - "asFragment": [Function], - "baseElement": - - - - -
- - - - -
-
- - - - -
- , - "container":
- - - - -
, - "debug": [Function], - "findAllByAltText": [Function], - "findAllByDisplayValue": [Function], - "findAllByLabelText": [Function], - "findAllByPlaceholderText": [Function], - "findAllByRole": [Function], - "findAllByTestId": [Function], - "findAllByText": [Function], - "findAllByTitle": [Function], - "findByAltText": [Function], - "findByDisplayValue": [Function], - "findByLabelText": [Function], - "findByPlaceholderText": [Function], - "findByRole": [Function], - "findByTestId": [Function], - "findByText": [Function], - "findByTitle": [Function], - "getAllByAltText": [Function], - "getAllByDisplayValue": [Function], - "getAllByLabelText": [Function], - "getAllByPlaceholderText": [Function], - "getAllByRole": [Function], - "getAllByTestId": [Function], - "getAllByText": [Function], - "getAllByTitle": [Function], - "getByAltText": [Function], - "getByDisplayValue": [Function], - "getByLabelText": [Function], - "getByPlaceholderText": [Function], - "getByRole": [Function], - "getByTestId": [Function], - "getByText": [Function], - "getByTitle": [Function], - "queryAllByAltText": [Function], - "queryAllByDisplayValue": [Function], - "queryAllByLabelText": [Function], - "queryAllByPlaceholderText": [Function], - "queryAllByRole": [Function], - "queryAllByTestId": [Function], - "queryAllByText": [Function], - "queryAllByTitle": [Function], - "queryByAltText": [Function], - "queryByDisplayValue": [Function], - "queryByLabelText": [Function], - "queryByPlaceholderText": [Function], - "queryByRole": [Function], - "queryByTestId": [Function], - "queryByText": [Function], - "queryByTitle": [Function], - "rerender": [Function], - "unmount": [Function], -} -`; - -exports[`TextInput > renders trailingVisual 3`] = ` -
- - - - -
-`; - -exports[`TextInput > renders trailingVisual 4`] = ` -
- - - - -
-`; - -exports[`TextInput > renders with a loading indicator 1`] = ` -
- - - - Loading - - -
- - - -
- - - - -
- - - -
- - - - Loading - - -
- - - -
- - - - - - Loading - - -
- - - -
- - - - -
-
- -
- - - -
- - - - Loading - - -
- - - -
- - - - -
-
- -
- - - -
- - - - Loading - - -
- - - -
- - - - -
-
- -
- - - -
- - - - Loading - - -
- - - -
- - - - - - Loading - - -
-
- -
- - - -
- - - - -
- - - -
- - - - Loading - - -
-
- -
- - - -
- - - - - - Loading - - -
-
- -
- - - -
- - - - -
-
- -
- - - -
- - - - Loading - - -
-
- -
- - - -
- - - - -
-
- -
- - - -
- - - - Loading - - -
-
- -
- - - -
- - - - -
-
- -
- - - -
- - - - Loading - - -
-
- -
- - - -
- - -
-`; - exports[`TextInput > should render a password input 1`] = `
{ expect(triggerEL.getAttribute('aria-describedby')).toContain('custom-tooltip-id') }) it('should throw an error if the trigger element is disabled', () => { - const spy = vi.spyOn(console, 'error').mockImplementation(() => {}) expect(() => { HTMLRender( @@ -132,8 +131,6 @@ describe('Tooltip', () => { }).toThrow( 'The `Tooltip` component expects a single React element that contains interactive content. Consider using a `