Merge pull request #35 from fabiothiroki/apptesteal

Apptesteal

src/components/AirportSelector/tests/AirPortSelector.test.js

@@ -7,7 +7,7 @@ import mockAirportResponse from "../../../services/Airport/test/mockAirportRepon
 import AirportSelector from "../AirportSelector";
 
 const server = setupServer(
-  rest.get("https://api.skypicker.com/locations", (req, res, ctx) =>
+  rest.get("https://api.skypicker.com/locations", (_req, res, ctx) =>
     res(ctx.json(mockAirportResponse))
   )
 );
@@ -20,29 +20,27 @@ const props = {
 
 const renderComponent = () => {
   const queryClient = new QueryClient();
-  const wrapper = (
+  return render(
     <QueryClientProvider client={queryClient}>
       <AirportSelector {...props} />
     </QueryClientProvider>
   );
-
-  return wrapper;
 };
 
 beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
 test("initial render", () => {
-  render(renderComponent());
+  renderComponent();
   const input = screen.getByRole("textbox");
 
   expect(input).toBeInTheDocument();
   expect(input).toHaveValue("");
 });
 
 test("search airport by term", async () => {
-  render(renderComponent());
+  renderComponent();
 
   const input = screen.getByRole("textbox");
   userEvent.type(input, "prag");
@@ -51,7 +49,7 @@ test("search airport by term", async () => {
 });
 
 test("autocomplete suggestions", async () => {
-  render(renderComponent());
+  renderComponent();
 
   const input = screen.getByRole("textbox");
   userEvent.type(input, "prag");
@@ -60,7 +58,7 @@ test("autocomplete suggestions", async () => {
 });
 
 test("select autocomplete suggestion", async () => {
-  render(renderComponent());
+  renderComponent();
 
   const input = screen.getByRole("textbox");
   userEvent.type(input, "prag");
@@ -76,7 +74,7 @@ test("select autocomplete suggestion", async () => {
 });
 
 test("clear autocomplete suggestion", async () => {
-  render(renderComponent());
+  renderComponent();
 
   const input = screen.getByRole("textbox");
   userEvent.type(input, "prag");

src/components/App/tests/App.test.js

@@ -1,5 +1,61 @@
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { rest } from "msw";
+import { setupServer } from "msw/node";
+import { QueryClientProvider, QueryClient } from "react-query";
+import mockAirportResponse from "../../../services/Airport/test/mockAirportReponse";
 import App from "../App";
+import FORM_FIELDS from "../../Search/constants";
 
-test("Render initial state", () => {
-  expect(App).toBeDefined();
+const server = setupServer(
+  rest.get("https://api.skypicker.com/locations", (req, res, ctx) =>
+    res(ctx.json(mockAirportResponse))
+  )
+);
+
+const renderComponent = () => {
+  const queryClient = new QueryClient();
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  );
+};
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+test("Render form and results", async () => {
+  renderComponent();
+
+  expect(screen.queryByText(/Search Flights/i)).toBeInTheDocument();
+
+  await waitFor(() => {
+    expect(screen.queryByText(/Find cheap flights/i)).toBeInTheDocument();
+  });
+});
+
+test("Search submit", async () => {
+  renderComponent();
+
+  userEvent.type(screen.getByRole("textbox", { name: "From" }), "prag");
+  userEvent.click(await screen.findByText(/prague/i));
+
+  userEvent.type(screen.getByRole("textbox", { name: "To" }), "prag");
+  userEvent.click(await screen.findByText(/prague/i));
+
+  fireEvent.change(screen.getByTestId(FORM_FIELDS.DEPARTURE_DATE), {
+    target: { value: "2020-05-13" },
+  });
+
+  fireEvent.change(screen.getByTestId(FORM_FIELDS.RETURN_DATE), {
+    target: { value: "2020-05-15" },
+  });
+
+  fireEvent.submit(screen.getByTestId("submitButton"));
+
+  await waitFor(() => {
+    expect(screen.getByRole("progressbar")).toBeInTheDocument();
+  });
 });

src/components/Search/tests/Search.test.js

@@ -26,21 +26,21 @@ const renderComponent = () => {
     </QueryClientProvider>
   );
 
-  return wrapper;
+  return render(wrapper);
 };
 
 beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
 test("Page title", () => {
-  render(renderComponent());
+  renderComponent();
 
   expect(screen.getByText("Search Flights")).toBeInTheDocument();
 });
 
 test("Form submission", async () => {
-  render(renderComponent());
+  renderComponent();
 
   userEvent.type(screen.getByRole("textbox", { name: "From" }), "prag");
   userEvent.click(await screen.findByText(/prague/i));
@@ -77,7 +77,7 @@ test("Form submission", async () => {
 });
 
 test("Validate required fields", async () => {
-  render(renderComponent());
+  renderComponent();
 
   fireEvent.submit(screen.getByTestId("submitButton"));
 

src/components/SearchResults/tests/SearchResults.test.js

@@ -13,21 +13,19 @@ const server = setupServer(
 
 const renderComponent = (props) => {
   const queryClient = new QueryClient();
-  const wrapper = (
+  return render(
     <QueryClientProvider client={queryClient}>
       <SearchResults {...props} />
     </QueryClientProvider>
   );
-
-  return wrapper;
 };
 
 beforeAll(() => server.listen());
 afterEach(() => server.resetHandlers());
 afterAll(() => server.close());
 
 test("Render component initial state", () => {
-  render(renderComponent());
+  renderComponent();
 
   expect(screen.getByRole("progressbar")).toBeInTheDocument();
 });
@@ -37,26 +35,24 @@ test("Render component without results", async () => {
     rest.get("https://api.skypicker.com/flights", (_req, res) => res(null))
   );
 
-  render(renderComponent());
+  renderComponent();
 
   await waitFor(() => {
     expect(screen.getByText(/Find cheap flights/i)).toBeInTheDocument();
   });
 });
 
 test("Render component with results", async () => {
-  render(
-    renderComponent({
-      searchParameters: {
-        dateFrom: "28/04/2021",
-        dateTo: "28/04/2021",
-        fly_from: "BWI",
-        fly_to: "TLV",
-        return_from: "30/04/2021",
-        return_to: "30/04/2021",
-      },
-    })
-  );
+  renderComponent({
+    searchParameters: {
+      dateFrom: "28/04/2021",
+      dateTo: "28/04/2021",
+      fly_from: "BWI",
+      fly_to: "TLV",
+      return_from: "30/04/2021",
+      return_to: "30/04/2021",
+    },
+  });
   await waitFor(() => {
     expect(screen.queryByRole("progressbar")).not.toBeInTheDocument();
     expect(screen.queryByText(/Find cheap flights/i)).not.toBeInTheDocument();