Testing a un Proceso de Autenticación (Parte 2)

How to perform successful login testing?

When creating applications, testing the authentication flow is crucial to ensure security and functionality. In this case, we will see how to implement a test for a successful login using the right tools in a React environment.

What do we need for a successful login test?

First, we need to make sure that our login redirects us correctly when we use the correct credentials. In our Platzi Orders application, we want a valid login to navigate to /orders.

1. Component Rendering:

   • Using SessionProvider and MemoryRouter.
   • Creation of a reusable function called handleLogin to avoid repetitive code.

   const handleLogin = () => { return render( <MemoryRouter> <SessionProvider> <Login/> </SessionProvider> </MemoryRouter> );};

2. Test Structure:

   • Creating the test case that redirects to /orders.
   • Use of mock for getAuth promise.

   In the test file, we set up the mock and use the following method:

   mockGetAuth.mockResolvedValue({ success: true,});

3. Navigation Mocking:

   • Mock from the React Router DOM module to mock the navigate function.

   const mockNavigate = jest.fn();jest.mock('react-router-dom', () => ({. ..jest.requireActual('react-router-dom'), useNavigate: () => mockNavigate,}));

4. Interactions and Assertions:

   • Interaction with text input elements to simulate a login.
   • Use of waitFor to handle asynchronous operations.

   await waitFor(() => { expect(mockNavigate).toHaveBeenCalledWith('/orders');});

How to make sure the tests are working?

It is important to verify that our tests are actually evaluating the expected scenarios. By changing the expected values in our assertions and seeing that the test fails, we can make sure that they are correctly configured.

1. Verify navigation:

   • Changing the expected route in toHaveBeenCalledWith('/orders') to another such as '/incorrectRoute' should force a failure, demonstrating that the test is effective.

2. Correct errors:

   • Code review to correct typos and syntax errors that could cause tests to fail for incorrect reasons.

How to incorporate new functionality into the test?

When developing an application, it is possible to integrate additional functionality to improve the user experience. For example, in our use case, adding a test for the Show button on the login form would enrich our tests.

Challenge:Create a new use case that verifies the Show button toggles password visibility. This will allow you to practice creating more complex scenarios and manage variability in interface components.

In summary, performing thorough and well-configured tests on our application ensures that all functionalities, including authentication, work correctly and securely. Keep learning and improving your testing skills!