With the Login component there are two main aspects of the component we would like to test.

1. How the user is redirected to Google's authentication URL when they attempt to sign-in and the authentication URL is manually queried.

2. How the login mutation is triggered when the user visits the /login route with a code query parameter provided by Google's servers.

With this in mind, the tests in the newly created Login.test.tsx file can be structured as follows:

import { Login } from "../index";

describe("Login", () => {

  describe("AUTH_URL Query", () => {});

  describe("LOGIN Mutation", () => {});

});

In this lesson, we'll prepare tests around the AUTH_URL query.

AUTH_URL Query#

When it comes to how the Login component behaves when a user attempts to be directed to Google's authentication URL, there are two behaviors we can look to assert:

1. When the user clicks the Sign-in button and the AUTH_URL is successfully queried, the user is redirected to the authentication URL returned from the query.

2. When the user clicks the Sign-in button and the AUTH_URL query is unsuccessful, the user is not redirected anywhere and an error message is shown.

These two tests will be arranged as follows:

import { Login } from "../index";

describe("Login", () => {

  describe("AUTH_URL Query", () => {

    it("redirects the user when query is successful", () => {});

    it("does not redirect the user when query is unsuccessful", () => {});

  });

  // ...

});

User is redirected when the query is successful#

We'll begin to prepare the preparation of the first test. We'll do very similar to what we did in the previous component we tested and look to prepare how the <Login /> component can be rendered in our test.

To render our <Login /> component, there are a few initial things we'll need to do:

• We'll need to mock the AUTH_URL query such that it's mocked to be successful and returns the expected data.

• We'll need to wrap our <Login /> component with React Router's <Router /> since the <Login /> component uses specific React Router functionality.

• We'll need to declare a value for the required setViewer prop the <Login /> component expects.

Doing the above, our component to be rendered in our test will look as follows:

import React from "react";

import { Route, Router } from "react-router-dom";

import { createMemoryHistory } from "history";

import { render } from "@testing-library/react";

import { MockedProvider } from "@apollo/react-testing";

import { AUTH_URL } from "../../../lib/graphql/queries";

import { Login } from "../index";

const defaultProps = {

  setViewer: () => {},

};

describe("Login", () => {

  describe("AUTH_URL Query", () => {

    it("redirects the user when query is successful", () => {

      const authUrlMock = {

        request: {

          query: AUTH_URL,

        },

        result: {

          data: {

            authUrl: "https://google.com/signin",

          },

        },

      };

      const history = createMemoryHistory({

        initialEntries: ["/login"],

      });

      render(

        <MockedProvider mocks={[authUrlMock]} addTypename={false}>

          <Router history={history}>

            <Route path="/login">

              <Login {...defaultProps} />

            </Route>

          </Router>

        </MockedProvider>

      );

    });

  });

  // ...

});

There are two small changes we've made to the above when compared to the tests we've set up in the <Home /> component. First, we've wrapped our <Login /> component with both React Router's <Router /> component and <Route />. In addition, we've provided a value of /login as the value in the initialEntries array of our history object.

• We've wrapped the <Login /> component with a <Route /> component that has a path of /login to emulate the fact that the component is only rendered in the /login route. We didn't do this for the <Home /> component since not providing a value for a <Route /> has it default to the index route (/) with the component shown is rendered under.

• We've provided a value of /login in the initialEntries array to specify the exact location the user is in. With this test, the route is the same however for our other tests we'll write around the LOGIN mutation, here is where we'll need to dictate the code query parameter in our route.

The other change we've implemented is we've created a defaultProps object at the top of our file and used the spread operator to directly specify the prop values in the object to our rendered component. Our tests do not need to know what the setViewer() function exactly does since it's a functionality that is the responsibility of the parent. As a result we've specified the value of the function as an empty operation () => {}.

At this point, our test is appropriately set-up and we can now think of the assertions we want to write. In our test, the main assertion we would like to test for is if the user has been redirected successfully. To do this, we can create a mock function around the functionality we want to test and assert that it is called the way we expect it to.

Let's break this down. In our <Login /> component, when the AUTH_URL is successfully, we've set the redirect functionality to occur with the browser window.location.assign() function.