Every web developer strives to create a faultless and perfect working application; hence, after successfully constructing your angular 12 application, you will need to test it to see whether it works as planned or satisfies the intended user's expectations.
When it comes to assuring software quality, testing is essential to verify that every component in your program performs flawlessly. This chapter will go over how to set up and test your angular components to ensure they work properly.
How to Conduct Testing
To download and install application testing components in Angular 12, we use the Jasmine test framework. All of the code you develop with the CLI will be ready to test when you install this framework.
To begin testing your application, use the angular CLI and enter the command "ng test." This command allows you to build your application in watch mode before launching the karma test runner.
Karma will list the tests that have been run as well as the overall time spent testing your application. Your test results will be presented in the Jasmine HTML Reporter on your web browser. Most developers choose Chrome over other browsers to run the Jasmine HTML Reporter since it is simpler to read than the console log.
The ng test command will keep track of your modifications as you continue to create your web components. However, this activity runs in the background, and to view it, simply make some modifications to the app.component.ts file and save it. The test will be repeated, and the updated results will be presented in your browser.
How CLI Performs Testing
The CLI is the core of the Angular frameworks, and it handles the Karma and Jasmine settings in this case of testing. It allows you to fine-tune many parameters by modifying the karma.conf.js file in the project root folder and the test.ts file in the src/folder. The karma.conf.js file is a partial configuration file, and the CLI constructs the whole runtime configuration in memory based on the structure of your application.
Other Methods of testing
Apart from the Jasmine test framework, you may also use the unit testing technique with additional test runners and libraries. Each of them has its own unique syntax, settings, and installation requirements.
The CLI produced the AppComponent with the name app.component.spec.ts. or spec.ts. in your application's src/app directory. You may now use any of the following conventions in your project by utilizing the spec file:
1. Paste the spec file next to the file it tests.
2. Paste the spec file into the test folder.
1. Paste the spec file next to the file it tests.
In this technique, you simply need to store the unit test spec files in the folder holding the application source code. This method works well because:
These tests are easy to find
You will be able to identify the part of your application that lacks tests at a glance
All the tests nearby can show how every part of the program works
The test file and the source code cannot be separated, which means that if the source code is moved, you will also move the test file
After renaming the source file, rename the test file as well.
2. Method pasting the spec files into the test folder
The application integration standards are used in this technique to verify the interaction between the various portions of the cross-referenced folders and modules. This indicates that they are not designed for a certain component.
It is preferable with this manner to create the necessary directory within the tests directory.
Testing Components
As we covered in previous chapters, the angular component is made up of a TypeScript class and an HTML template that operate together. During testing, you should ensure that your component template and typescript class are functioning properly.
Component testing will entail creating a host element for the component in the browser DOM and then testing the interaction between the class and the DOM as described in the template.
We utilize the TestBed to run these tests, as seen in the example below:
Component class testing Example
Consider the following Lightswitch component, which toggles on and off when the user clicks it
@Component({
selector: 'lightswitch-comp',
template: `
<button (click)="clicked()">Click here!</button>
<span>{{message}}</span>`
})
export class LightswitchComponent {
isOn = false;
clicked() { this.isOn = !this.isOn; }
get message() { return `The light is ${this.isOn ? 'On' : 'Off'}`; }
}
|
When the click () method is invoked, that is, when the user clicks the button, you can test it here. We will need to take the following steps:
Step 1: Create a component using a keyword.
Step 2: poke the APA component
Step 3: reaffirm the public's expectations of the state
describe('LightswitchComp', () => { it('#clicked() should toggle #isOn', () => { const comp = new LightswitchComponent(); expect(comp.isOn).toBe(false, 'off at first'); comp.clicked(); expect(comp.isOn).toBe(true, 'on after click'); comp.clicked(); expect(comp.isOn).toBe(false, 'off after second click'); }); it('#clicked() should set #message to "is on"', () => { const comp = new LightswitchComponent(); expect(comp.message).toMatch(/is off/i, 'off at first'); comp.clicked(); expect(comp.message).toMatch(/is on/i, 'on after clicked'); }); }); |
When testing a component with dependencies, you may utilize TestBed to create the component and its dependencies. The following testComponent, for example, will rely on the UserService to greet the user
export class WelcomeComponent implements OnInit { welcome = ''; constructor(private userService: UserService) { } ngOnInit(): void { this.welcome = this.userService.isLoggedIn ? 'Welcome, ' + this.userService.user.name : 'Please log in.'; } } |
Conclusion
That's all! You've learned how to run tests to see if your software is operating properly. The angular 12 Ivy compiler will be covered in the next chapter