Fix test that was rendering twice

washtenawIdtreble · Sep 2, 2023 · 404b252 · 404b252
1 parent e5e381e
commit 404b252
Showing 1 changed file with 73 additions and 77 deletions.
diff --git a/src/pages/businesses/Businesses.test.tsx b/src/pages/businesses/Businesses.test.tsx
@@ -1,112 +1,108 @@
-import React from 'react';
-import { Businesses, BUSINESSES_PAGE_HEADING } from './Businesses';
-import { render, screen, waitFor, prettyDOM } from '@testing-library/react';
-import {
- errorBusinessesResolver,
- TEST_CATEGORIZED_BUSINESSES,
-} from '../../mock-server/businesses-resolver';
-import { MemoryRouter } from 'react-router-dom';
-import { axe } from 'jest-axe';
-import { Container } from 'react-dom';
-import { mockServer } from '../../mock-server/mock-server';
-import { rest } from 'msw';
-import { BASE_URL } from '../../utilities/base-url';
-import { SERVER_ENDPOINTS } from '../../utilities/server-endpoints';
-import { BUSINESS_ERROR_MESSAGE } from '../../hooks/useBusinesses';
+import React from "react";
+import { Businesses, BUSINESSES_PAGE_HEADING } from "./Businesses";
+import { render, screen, waitFor } from "@testing-library/react";
+import { errorBusinessesResolver, TEST_CATEGORIZED_BUSINESSES, } from "../../mock-server/businesses-resolver";
+import { MemoryRouter } from "react-router-dom";
+import { axe } from "jest-axe";
+import { Container } from "react-dom";
+import { mockServer } from "../../mock-server/mock-server";
+import { rest } from "msw";
+import { BASE_URL } from "../../utilities/base-url";
+import { SERVER_ENDPOINTS } from "../../utilities/server-endpoints";
+import { BUSINESS_ERROR_MESSAGE } from "../../hooks/useBusinesses";
 
 describe(Businesses.name, () => {
  let container: Container;
 
- beforeEach(() => {
- ({ container } = render(<Businesses />, { wrapper: MemoryRouter }));
- });
-
- afterEach(async () => {
- // wait for API call to resolve to avoid "can't update an unmounted component" error message
- await waitFor(() => {
- screen.getAllByRole('heading', { level: 2 });
- });
- });
-
- test('exports its page heading', () => {
- expect(BUSINESSES_PAGE_HEADING).toBe('Businesses that accept the ID');
- });
-
- test('has an h1 that can be focused programmatically', () => {
- const h1 = screen.getByRole('heading', {
- level: 1,
- name: BUSINESSES_PAGE_HEADING,
+ describe("When businesses load correctly", () => {
+ beforeEach(() => {
+ ({ container } = render(<Businesses/>, { wrapper: MemoryRouter }));
  });
- expect(h1).toBeVisible();
- expect(h1.hasAttribute('tabindex')).toBe(true);
- expect(h1.tabIndex).toBe(-1);
- });
-
- describe('after businesses are loaded', () => {
- let categoryHeadings: HTMLHeadingElement[] = [];
- beforeEach(async () => {
+ afterEach(async () => {
+ // wait for API call to resolve to avoid "can't update an unmounted component" error message
  await waitFor(() => {
- categoryHeadings = screen.getAllByRole('heading', { level: 2 });
+ screen.getAllByRole("heading", { level: 2 });
  });
  });
- test('has no AxE violations', async () => {
- const page = await axe(container as Element);
- console.log(prettyDOM(container as Element, 100000));
- expect(page).toHaveNoViolations();
+ test("exports its page heading", () => {
+ expect(BUSINESSES_PAGE_HEADING).toBe("Businesses that accept the ID");
  });
 
- test('contains category name as heading for each set of businesses', async () => {
- const categoryNames = categoryHeadings.map((h2) => h2.textContent);
- const titleCaseCategories = TEST_CATEGORIZED_BUSINESSES.map(
- (b) => b.category.displayName
- );
-
- expect(categoryNames).toEqual(titleCaseCategories);
+ test("has an h1 that can be focused programmatically", () => {
+ const h1 = screen.getByRole("heading", {
+ level: 1,
+ name: BUSINESSES_PAGE_HEADING,
+ });
+ expect(h1).toBeVisible();
+ expect(h1.hasAttribute("tabindex")).toBe(true);
+ expect(h1.tabIndex).toBe(-1);
  });
 
- test('category headings have IDs to allow focusing them', () => {
- const ids = categoryHeadings.map((h2) => h2.id);
- const expectedIds = TEST_CATEGORIZED_BUSINESSES.map(
- (b) => b.category.name
- );
+ describe("after businesses are loaded", () => {
+ let categoryHeadings: HTMLHeadingElement[] = [];
+ beforeEach(async () => {
+ await waitFor(() => {
+ categoryHeadings = screen.getAllByRole("heading", { level: 2 });
+ });
+ });
+ test("has no AxE violations", async () => {
+ const page = await axe(container as Element);
+ expect(page).toHaveNoViolations();
+ });
 
- expect(ids).toEqual(expectedIds);
- });
+ test("contains category name as heading for each set of businesses", async () => {
+ const categoryNames = categoryHeadings.map((h2) => h2.textContent);
+ const titleCaseCategories = TEST_CATEGORIZED_BUSINESSES.map(
+ (b) => b.category.displayName
+ );
+
+ expect(categoryNames).toEqual(titleCaseCategories);
+ });
+
+ test("category headings have IDs to allow focusing them", () => {
+ const ids = categoryHeadings.map((h2) => h2.id);
+ const expectedIds = TEST_CATEGORIZED_BUSINESSES.map(
+ (b) => b.category.name
+ );
+
+ expect(ids).toEqual(expectedIds);
+ });
 
- test('contains a business card for each business in a category', async () => {
- expect(TEST_CATEGORIZED_BUSINESSES.length).not.toBe(0);
- TEST_CATEGORIZED_BUSINESSES.forEach((category) => {
- expect(category.businesses.length).not.toBe(0);
- category.businesses.forEach((business) => {
- expect(
- screen.getByRole('heading', {
- level: 3,
- name: business.name,
- })
- ).toBeVisible();
+ test("contains a business card for each business in a category", async () => {
+ expect(TEST_CATEGORIZED_BUSINESSES.length).not.toBe(0);
+ TEST_CATEGORIZED_BUSINESSES.forEach((category) => {
+ expect(category.businesses.length).not.toBe(0);
+ category.businesses.forEach((business) => {
+ expect(
+ screen.getByRole("heading", {
+ level: 3,
+ name: business.name,
+ })
+ ).toBeVisible();
+ });
  });
  });
  });
  });
 
- describe('on error loading businesses', () => {
+ describe("on error loading businesses", () => {
  beforeEach(() => {
  mockServer.use(
  rest.get(
  `${BASE_URL()}/${SERVER_ENDPOINTS.BUSINESSES}`,
- errorBusinessesResolver(400, 'No businesses!')
+ errorBusinessesResolver(400, "No businesses!")
  )
  );
- ({ container } = render(<Businesses />, { wrapper: MemoryRouter }));
+ ({ container } = render(<Businesses/>, { wrapper: MemoryRouter }));
  });
- test('has no AxE violations', async () => {
+ test("has no AxE violations", async () => {
  await waitFor(() => {
  screen.getByText(BUSINESS_ERROR_MESSAGE);
  });
  const page = await axe(container as Element);
  expect(page).toHaveNoViolations();
  });
- test('should show an error alert', async () => {
+ test("should show an error alert", async () => {
  await waitFor(() => {
  expect(
  screen.getByText(BUSINESS_ERROR_MESSAGE)