From 7c31b210bdfbc4a9ca7fae280865ab4ff4f1437b Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Wed, 2 Apr 2025 09:33:28 +0200 Subject: [PATCH] Fix tests after initial tailwind components migration --- src/common/AppUpdateBanner.tsx | 13 ++-- test/common/AppUpdateBanner.test.tsx | 8 +-- test/common/NotFound.test.tsx | 1 - test/servers/ManageServersRow.test.tsx | 15 ++-- .../ManageServersRow.test.tsx.snap | 70 ++++++++++++------- test/servers/helpers/ServerForm.test.tsx | 6 +- 6 files changed, 67 insertions(+), 46 deletions(-) diff --git a/src/common/AppUpdateBanner.tsx b/src/common/AppUpdateBanner.tsx index 05c01abb..8562271c 100644 --- a/src/common/AppUpdateBanner.tsx +++ b/src/common/AppUpdateBanner.tsx @@ -24,12 +24,15 @@ export const AppUpdateBanner: FC = ({ isOpen, onClose, for } return ( - + - This app has just been updated! +
This app has just been updated!
 diff --git a/test/common/AppUpdateBanner.test.tsx b/test/common/AppUpdateBanner.test.tsx index e98ad2cb..3587d237 100644 --- a/test/common/AppUpdateBanner.test.tsx +++ b/test/common/AppUpdateBanner.test.tsx @@ -4,11 +4,11 @@ import { checkAccessibility } from '../__helpers__/accessibility'; import { renderWithEvents } from '../__helpers__/setUpTest'; describe('', () => { - const toggle = vi.fn(); + const onClose = vi.fn(); const forceUpdate = vi.fn(); const setUp = async () => { const result = await act( - () => renderWithEvents(), + () => renderWithEvents(), ); await waitFor(() => screen.getByRole('alert')); @@ -28,9 +28,9 @@ describe('', () => { it('invokes toggle when alert is closed', async () => { const { user } = await setUp(); - expect(toggle).not.toHaveBeenCalled(); + expect(onClose).not.toHaveBeenCalled(); await user.click(screen.getByLabelText('Close')); - expect(toggle).toHaveBeenCalled(); + expect(onClose).toHaveBeenCalled(); }); it('triggers the update when clicking the button', async () => { diff --git a/test/common/NotFound.test.tsx b/test/common/NotFound.test.tsx index 1e13e3c1..61d71f37 100644 --- a/test/common/NotFound.test.tsx +++ b/test/common/NotFound.test.tsx @@ -30,6 +30,5 @@ describe('', () => { expect(link).toHaveAttribute('href', expectedLink); expect(link).toHaveTextContent(expectedText); - expect(link).toHaveAttribute('class', 'btn btn-outline-primary btn-lg'); }); }); diff --git a/test/servers/ManageServersRow.test.tsx b/test/servers/ManageServersRow.test.tsx index 4a3ec3c4..fb3b4e9d 100644 --- a/test/servers/ManageServersRow.test.tsx +++ b/test/servers/ManageServersRow.test.tsx @@ -1,3 +1,4 @@ +import { Table } from '@shlinkio/shlink-frontend-kit/tailwind'; import { render, screen } from '@testing-library/react'; import { fromPartial } from '@total-typescript/shoehorn'; import { MemoryRouter } from 'react-router'; @@ -17,11 +18,9 @@ describe('', () => { }; const setUp = (hasAutoConnect = false, autoConnect = false) => render( - - - - -
+ }> + +
, ); @@ -32,11 +31,7 @@ describe('', () => { [false, 3], ])('renders expected amount of columns', (hasAutoConnect, expectedCols) => { setUp(hasAutoConnect); - - const td = screen.getAllByRole('cell'); - const th = screen.getAllByRole('columnheader'); - - expect(td.length + th.length).toEqual(expectedCols); + expect(screen.getAllByRole('cell')).toHaveLength(expectedCols); }); it('renders a dropdown', () => { diff --git a/test/servers/__snapshots__/ManageServersRow.test.tsx.snap b/test/servers/__snapshots__/ManageServersRow.test.tsx.snap index ae446804..0ecf0a1a 100644 --- a/test/servers/__snapshots__/ManageServersRow.test.tsx.snap +++ b/test/servers/__snapshots__/ManageServersRow.test.tsx.snap @@ -2,14 +2,25 @@ exports[` > renders auto-connect icon only if server is autoConnect 1`] = `
- - +
+ + + + - +
> renders auto-connect icon only if server is auto /> > renders auto-connect icon only if server is auto > My server - https://example.com ManageServersRowDropdown @@ -60,18 +71,29 @@ exports[` > renders auto-connect icon only if server is auto exports[` > renders auto-connect icon only if server is autoConnect 2`] = `
- - +
+ + + + +
- > renders auto-connect icon only if server is auto > My server - https://example.com ManageServersRowDropdown diff --git a/test/servers/helpers/ServerForm.test.tsx b/test/servers/helpers/ServerForm.test.tsx index 63207f6c..2d6f6379 100644 --- a/test/servers/helpers/ServerForm.test.tsx +++ b/test/servers/helpers/ServerForm.test.tsx @@ -8,10 +8,12 @@ describe('', () => { it('passes a11y checks', () => checkAccessibility(setUp())); - it('renders components', () => { + it('renders inputs', () => { setUp(); - expect(screen.getAllByRole('textbox')).toHaveLength(3); + expect(screen.getByLabelText(/^Name/)).toBeInTheDocument(); + expect(screen.getByLabelText(/^URL/)).toBeInTheDocument(); + expect(screen.getByLabelText(/^API key/)).toBeInTheDocument(); expect(screen.getByText('Something')).toBeInTheDocument(); });