diff --git a/src/App.test.js b/src/App.test.js index 83a8dac..77827ba 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,10 +1,79 @@ -import { render, screen } from "@testing-library/react"; +import React from "react"; +import { + render, + screen, + cleanup, + waitFor, + waitForElementToBeRemoved, +} from "@testing-library/react"; import App from "./App"; -test("renders EbookFoundation/free-programming-books link", () => { - render(); - const linkElement = screen.getByText( - /EbookFoundation\/free-programming-books/i - ); +afterEach(cleanup); + +test('should render "free-programming-books" link', async () => { + const { getByText, queryByText } = render(); + await waitForElementToBeRemoved(() => queryByText("Loading")); + const linkElement = await waitFor(() => getByText("free-programming-books")); + expect(linkElement).not.toBeNull(); expect(linkElement).toBeInTheDocument(); + expect(linkElement).toHaveAttribute( + "href", + "/free-programming-books-search/" + ); +}); + +test('should render "EbookFoundation/free-programming-books" link', async () => { + const { getByText, queryByText } = render(); + + await waitForElementToBeRemoved(() => queryByText("Loading")); + const linkElement = await waitFor(() => + getByText("EbookFoundation/free-programming-books").closest("a") + ); + expect(linkElement).not.toBeNull(); + expect(linkElement).toBeInTheDocument(); + expect(linkElement).toHaveAttribute( + "href", + "https://github.com/EbookFoundation/free-programming-books" + ); +}); + +it("should display loading state", async () => { + const { getByText, queryByText } = render(); + + expect(getByText("Loading")).toBeInTheDocument(); + await waitFor(() => { + expect(queryByText("Loading")).not.toBeInTheDocument(); + }); +}); + +test('renders "Filter by Language" component', async () => { + const { getByText, queryByText } = render(); + + await waitForElementToBeRemoved(() => queryByText("Loading")); + const component = await waitFor(() => getByText("Filter by Language")); + expect(component).toBeInTheDocument(); +}); + +test('renders "SearchBar" input component', async () => { + const { getByPlaceholderText, queryByText } = render(); + + await waitForElementToBeRemoved(() => queryByText("Loading")); + const component = await waitFor(() => + getByPlaceholderText("Search Book or Author") + ); + expect(component).toBeInTheDocument(); + expect(component).toHaveAttribute("id", "searchBar"); + expect(component.nodeName).toBe("INPUT"); + expect(component).toHaveAttribute("type", "text"); +}); + +test('renders Markdown "List of Free Learning Resources In Many Languages" H1 component', async () => { + const { getByText, queryByText } = render(); + + await waitForElementToBeRemoved(() => queryByText("Loading")); + const component = await waitFor(() => + getByText(/List of Free Learning Resources In Many Languages/i) + ); + expect(component).toBeInTheDocument(); + expect(component.nodeName).toBe("H1"); });