We replaced the previous CSS query with a simpler one that does not depend on layout elements. Use this good practice in your project templates to facilitate E2E testing and make the test less likely to break.
We’ll create an E2E test for the new journal entry form, but first, let’s apply the best practice to the templates we’ll be using in this test. In the Home component template, we will refactor as follows:
<li>
<a
routerLink=”./diary”
class=”flex items-center space-x-2 text-white”
data-cy=”home-menu”
>
<span>Diary</span>
</a>
</li>
<li>
<a
routerLink=”./diary/entry”
class=”flex items-center space-x-2 text-white”
data-cy=”new-entry-menu”
>
<span>New Entry</span>
</a>
</li>
<li>
<a
(click)=”logout()”
class=”flex items-center space-x-2 text-white”
data-cy=”logout-menu”
>
<span>Logout</span>
</a>
</li>
In the template, we add the data-cy HTML element to the items of the menu. Note that as the test is from the user’s point of view, we need to simulate how they get to the form.
In the new-entry-form-reactive.component.html template, we will change the submit button like so:
<button
type=”submit”
[disabled]=”entryForm.invalid”
[class.opacity-50]=”entryForm.invalid”
class=”rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700″
data-cy=”submit”
>
Confirm
</button>
As with the login screen, we mark the button with the data-cy element to facilitate the development of the E2E test.
With our application better adapted for testing, we will create the new-entry-form.cy.ts file in the cypress/e2e folder of our workspace and add the following code:
describe(‘New Entry Form:’, () => {
beforeEach(() => {
cy.visit(‘/’);
cy.get(‘#username’).type(‘mario’);
cy.get(‘#password’).type(‘1234’);
cy.get(‘[data-cy=”submit”]’).click();
});
it(‘Should register a new entry in the workout diary’, () => {
cy.get(‘[data-cy=”new-entry-menu”]’).click();
cy.contains(‘Date’);
cy.get(‘#date’).type(‘2023-08-08’);
cy.get(‘#exercise’).type(‘Front Squat’);
cy.get(‘#sets’).type(‘4’);
cy.get(‘#reps’).type(‘6’);
cy.get(‘[data-cy=”submit”]’).click();
cy.contains(‘Item Created!’);
});
});
Like Jasmine, the Mocha.js framework also has the beforeEach function, but here, instead of setting up the environment with TestBed, we use the function to perform the login, since each test where we are simulating the user is necessary for this action.
In the test case of the form, since we are already logged in, we click on the menu of the input form and check whether there is a Date label. From then on, we fill in the form fields with data and click on the button. In the assertion phase, we check whether the Item created message appears on the screen.
One thing to note is that at no point do we tell the script how long to wait for the backend response, which can vary. This happens because the Cypress framework does this work for us and makes this waiting process transparent to our development.
We will create a test case to evaluate the form validations:
it(‘should validate field information and show the validation message’, () => {
cy.get(‘[data-cy=”new-entry-menu”]’).click();
cy.contains(‘Date’);
cy.get(‘#date’).type(‘2023-08-08’);
cy.get(‘#exercise’).type(‘Front Squat’);
cy.get(‘#sets’).type(‘3’);
cy.get(‘#reps’).type(‘6’);
cy.contains(‘Sets is required and must be a positive number.’);
cy.contains(‘sets is required and must be multiple of 2.’);
});
In this test case, we don’t need to worry about the login because the beforeEach function performs this function and we work directly on the form. We fill in the fields, but this time, with information that is not valid. In the assertion phase, we check whether the validation messages appear correctly with the contains method.
With that, you’ve learned about Cypress and E2E testing in an Angular application, so let’s summarize what we looked at in the chapter.
Summary
In this chapter, we learned how to perform tests in an Angular project. We studied what types of tests there are, their importance, and how to apply them in our daily lives. We worked on our project by first creating tests for the services and looking at how to isolate the dependencies for a unit test. Furthermore, we explored testing HTTP requests using the HttpClientTestingModule module. We learned about the TestBed component and its important task of setting up the environment for each unit test to run. We also looked at component testing and how to assert components that use routes. Finally, we explored E2E tests with the Cypress tool, which simplifies the creation of scripts that simulate the behavior of our application from the client’s point of view.
In the next chapter, we will explore the concept of the micro frontend using the Angular framework.
No Responses