Fix tests after initial tailwind components migration

src/common/AppUpdateBanner.tsx

@@ -24,12 +24,15 @@ export const AppUpdateBanner: FC<AppUpdateBannerProps> = ({ isOpen, onClose, for
   }
 
   return (
-    <Card className={clsx(
+    <Card
-      'tw:w-[700px] tw:max-w-[calc(100%-30px)]',
+      role="alert"
-      'tw:fixed tw:top-[35px] tw:left-[50%] tw:translate-x-[-50%] tw:z-[1040]',
+      className={clsx(
-    )}>
+        'tw:w-[700px] tw:max-w-[calc(100%-30px)]',
+        'tw:fixed tw:top-[35px] tw:left-[50%] tw:translate-x-[-50%] tw:z-[1040]',
+      )}
+    >
       <Card.Header className="tw:flex tw:items-center tw:justify-between">
-        <b>This app has just been updated!</b>
+        <h5>This app has just been updated!</h5>
         <CloseButton onClick={onClose} />
       </Card.Header>
       <Card.Body className="tw:flex tw:gap-4 tw:items-center tw:justify-between tw:max-md:flex-col">

test/common/AppUpdateBanner.test.tsx

@@ -4,11 +4,11 @@ import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
 
 describe('<AppUpdateBanner />', () => {
-  const toggle = vi.fn();
+  const onClose = vi.fn();
   const forceUpdate = vi.fn();
   const setUp = async () => {
     const result = await act(
-      () => renderWithEvents(<AppUpdateBanner isOpen toggle={toggle} forceUpdate={forceUpdate} />),
+      () => renderWithEvents(<AppUpdateBanner isOpen onClose={onClose} forceUpdate={forceUpdate} />),
     );
     await waitFor(() => screen.getByRole('alert'));
 
@@ -28,9 +28,9 @@ describe('<AppUpdateBanner />', () => {
   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 () => {

test/common/NotFound.test.tsx

@@ -30,6 +30,5 @@ describe('<NotFound />', () => {
 
     expect(link).toHaveAttribute('href', expectedLink);
     expect(link).toHaveTextContent(expectedText);
-    expect(link).toHaveAttribute('class', 'btn btn-outline-primary btn-lg');
   });
 });

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('<ManageServersRow />', () => {
   };
   const setUp = (hasAutoConnect = false, autoConnect = false) => render(
     <MemoryRouter>
-      <table>
+      <Table header={<Table.Row />}>
-        <tbody>
+        <ManageServersRow server={{ ...server, autoConnect }} hasAutoConnect={hasAutoConnect} />
-          <ManageServersRow server={{ ...server, autoConnect }} hasAutoConnect={hasAutoConnect} />
+      </Table>
-        </tbody>
-      </table>
     </MemoryRouter>,
   );
 
@@ -32,11 +31,7 @@ describe('<ManageServersRow />', () => {
     [false, 3],
   ])('renders expected amount of columns', (hasAutoConnect, expectedCols) => {
     setUp(hasAutoConnect);
-
+    expect(screen.getAllByRole('cell')).toHaveLength(expectedCols);
-    const td = screen.getAllByRole('cell');
-    const th = screen.getAllByRole('columnheader');
-
-    expect(td.length + th.length).toEqual(expectedCols);
   });
 
   it('renders a dropdown', () => {

test/servers/__snapshots__/ManageServersRow.test.tsx.snap

@@ -2,14 +2,25 @@
 
 exports[`<ManageServersRow /> > renders auto-connect icon only if server is autoConnect 1`] = `
 <div>
-  <table>
+  <table
-    <tbody>
+    class="tw:w-full"
+  >
+    <thead
+      class="tw:hidden tw:lg:table-header-group"
+    >
       <tr
-        class="responsive-table__row"
+        class="tw:group tw:lg:table-row tw:flex tw:flex-col tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border"
+      />
+    </thead>
+    <tbody
+      class="tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3"
+    >
+      <tr
+        class="tw:group tw:lg:table-row tw:flex tw:flex-col tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border tw:hover:bg-lm-primary tw:dark:hover:bg-dm-primary tw:group-[&]/card:hover:bg-lm-secondary tw:dark:group-[&]/card:hover:bg-dm-secondary tw:relative"
       >
         <td
-          class="responsive-table__cell"
+          class="tw:p-2 tw:border-lm-border tw:dark:border-dm-border tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1 tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1"
-          data-th="Auto-connect"
+          data-column="Auto-connect"
         >
           <svg
             aria-hidden="true"
@@ -28,9 +39,9 @@ exports[`<ManageServersRow /> > renders auto-connect icon only if server is auto
             />
           </svg>
         </td>
-        <th
+        <td
-          class="responsive-table__cell"
+          class="tw:p-2 tw:border-lm-border tw:dark:border-dm-border tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1 tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1 tw:font-bold"
-          data-th="Name"
+          data-column="Name"
         >
           <a
             data-discover="true"
@@ -38,15 +49,15 @@ exports[`<ManageServersRow /> > renders auto-connect icon only if server is auto
           >
             My server
           </a>
-        </th>
+        </td>
         <td
-          class="responsive-table__cell"
+          class="tw:p-2 tw:border-lm-border tw:dark:border-dm-border tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1 tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1 tw:max-lg:border-b-0"
-          data-th="Base URL"
+          data-column="Base URL"
         >
           https://example.com
         </td>
         <td
-          class="responsive-table__cell text-end"
+          class="tw:p-2 tw:border-lm-border tw:dark:border-dm-border tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1 tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1 tw:text-right tw:max-lg:absolute tw:right-0 tw:-top-1 tw:mx-lg:pt-0"
         >
           <span>
             ManageServersRowDropdown
@@ -60,18 +71,29 @@ exports[`<ManageServersRow /> > renders auto-connect icon only if server is auto
 
 exports[`<ManageServersRow /> > renders auto-connect icon only if server is autoConnect 2`] = `
 <div>
-  <table>
+  <table
-    <tbody>
+    class="tw:w-full"
+  >
+    <thead
+      class="tw:hidden tw:lg:table-header-group"
+    >
       <tr
-        class="responsive-table__row"
+        class="tw:group tw:lg:table-row tw:flex tw:flex-col tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border"
+      />
+    </thead>
+    <tbody
+      class="tw:lg:table-row-group tw:flex tw:flex-col tw:gap-y-3"
+    >
+      <tr
+        class="tw:group tw:lg:table-row tw:flex tw:flex-col tw:lg:border-0 tw:border-y-2 tw:border-lm-border tw:dark:border-dm-border tw:hover:bg-lm-primary tw:dark:hover:bg-dm-primary tw:group-[&]/card:hover:bg-lm-secondary tw:dark:group-[&]/card:hover:bg-dm-secondary tw:relative"
       >
         <td
-          class="responsive-table__cell"
+          class="tw:p-2 tw:border-lm-border tw:dark:border-dm-border tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1 tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1"
-          data-th="Auto-connect"
+          data-column="Auto-connect"
         />
-        <th
+        <td
-          class="responsive-table__cell"
+          class="tw:p-2 tw:border-lm-border tw:dark:border-dm-border tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1 tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1 tw:font-bold"
-          data-th="Name"
+          data-column="Name"
         >
           <a
             data-discover="true"
@@ -79,15 +101,15 @@ exports[`<ManageServersRow /> > renders auto-connect icon only if server is auto
           >
             My server
           </a>
-        </th>
+        </td>
         <td
-          class="responsive-table__cell"
+          class="tw:p-2 tw:border-lm-border tw:dark:border-dm-border tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1 tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1 tw:max-lg:border-b-0"
-          data-th="Base URL"
+          data-column="Base URL"
         >
           https://example.com
         </td>
         <td
-          class="responsive-table__cell text-end"
+          class="tw:p-2 tw:border-lm-border tw:dark:border-dm-border tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1 tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1 tw:text-right tw:max-lg:absolute tw:right-0 tw:-top-1 tw:mx-lg:pt-0"
         >
           <span>
             ManageServersRowDropdown

test/servers/helpers/ServerForm.test.tsx

@@ -8,10 +8,12 @@ describe('<ServerForm />', () => {
 
   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();
   });