Skip to content

Commit

Permalink
fix unit tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@stilt0n
stilt0n committed Jan 12, 2025
1 parent e841b1d commit 4d846e9
Showing 1 changed file with 6 additions and 4 deletions.
10 changes: 6 additions & 4 deletions components/recipe-gallery/__tests__/gallery-pagination.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { GalleryPagination } from '../gallery-pagination.client';
import { withMockNavigation } from '@/__mocks__/nextMocks';
import { describe, it, expect } from 'bun:test';
import { screen, render, within } from '@testing-library/react';
import { screen, render, within, waitFor } from '@testing-library/react';

describe('Given Gallery Pagination component', () => {
it('should render three list items when there is one page', () => {
Expand All @@ -20,11 +20,13 @@ describe('Given Gallery Pagination component', () => {
expect(getAllByRole('listitem')).toHaveLength(7);
});

it('should set aria current based on search params', () => {
it('should set aria current based on search params', async () => {
withMockNavigation({ searchParams: { page: '4' } });
render(<GalleryPagination pageCount={10} />);
const current = screen.getByRole('link', { current: 'page' });
expect(current).toHaveTextContent('4');
await waitFor(() => {
const current = screen.getByRole('link', { current: 'page' });
expect(current).toHaveTextContent('4');

Check failure on line 28 in components/recipe-gallery/__tests__/gallery-pagination.test.tsx

View workflow job for this annotation

GitHub Actions / test pull request

TypeError: expect(current).toHaveTextContent is not a function. (In 'expect(current).toHaveTextContent("4")' 

Ignored nodes: comments, script, style
<html>
  <head />
  <body>
    <div>
      <nav
        aria-label="pagination"
        class="mx-auto flex w-full justify-center"
        role="navigation"
      >
        <ul
          class="flex flex-row items-center gap-1"
        >
          <li
            class=""
          >
            <a
              aria-disabled="false"
              aria-label="Go to previous page"
              class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-zinc-300 hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 h-9 px-4 py-2 gap-1 pl-2.5"
              href="?page=3"
            >
              <svg
                class="h-4 w-4"
                fill="none"
                height="15"
                viewBox="0 0 15 15"
                width="15"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  clip-rule="evenodd"
                  d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z"
                  fill="currentColor"
                  fill-rule="evenodd"
                />
              </svg>
              <span>
                Previous
              </span>
            </a>
          </li>
          <li
            class=""
          >
            <a
              class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-zinc-300 hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 h-9 w-9"
              href="?page=2"
            >
              2
            </a>
          </li>
          <li
            class=""
          >
            <a
              class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-zinc-300 hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 h-9 w-9"
              href="?page=3"
            >
              3
            </a>
          </li>
          <li
            class=""
          >
            <a
              aria-current="page"
              class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-zinc-300 border border-zinc-200 bg-white shadow-sm hover:bg-zinc-100 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 h-9 w-9"
              href="?page=4"
            >
              4
            </a>
          </li>
          <li
            class=""
          >
            <a
              class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-zinc-300 hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 h-9 w-9"
              href="?page=5"
            >
              5
            </a>
          </li>
          <li
            class=""
          >
            <a
              class="inline-flex items-center justify-center w
});
});

it('should disable previous button when on first page', () => {
Expand Down

0 comments on commit 4d846e9

Please sign in to comment.