Angular Testing Succinctly®
CHAPTER 5
Angular CLI
When you use the Angular CLI application to generate a project and components, it will generate your code and set up testing files for you. We are going to create a sample application of an online bank for later chapters. Let’s look at the basic setup using the CLI.
New project
Start a new project using the Angular CLI, as shown in Figure 8.
Figure 8: Angular CLI new project
If you open the project folder (OnlineBank), you will see several configuration files, the node modules folder, and your src code folder. There will also be an e2e folder for end-to-end testing.
Within the src\app folder is the actual application code. The app.component has four files generated. The .html file is the template code, and the .css file is your style sheet (the extension might vary depending on your selected style sheet format). The .ts file (shown in Code Listing 10) is the actual component code that ties the pieces together.
Code Listing 10: Default component
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'OnlineBank'; } |
The .spec.ts file is the unit test file generated by the Angular CLI. It contains the necessary code to start your unit testing. It simply confirms the component can be created, and the title is OnlineBank, as expected.
Create a service
Our next step is to navigate to the project folder and create a service to get information about the customer (name, PIN number, balance, etc.). Figure 9 shows the command line to generate the service code.
Figure 9: Create a service
Note that in addition to the service, the CLI also generated the unit test in the .spec.ts file. Since the CLI doesn’t know anything about the service, it will simply generate the structure and an empty constructor. The spec file simply tests that the service can be created. Code Listing 11 shows the sample spec file generated for the service.
Code Listing 11: Service test spec file
import { TestBed } from '@angular/core/testing'; import { CustomerInfoService } from './customer-info.service'; describe('CustomerInfoService', () => { beforeEach(() => TestBed.configureTestingModule({})); it('should be created', () => { const service: CustomerInfoService = TestBed.get(CustomerInfoService); expect(service).toBeTruthy(); }); |
We will explore these spec files in Chapter 7, “Unit Testing.”
Create a component
Figure 10 shows our command to generate a withdrawal component. The component source file and testing files are generated for us, and the app.module file is updated to import and declare the new component.
Figure 10: Generate withdrawal component
At this point, we have the basic starting point and all testing files for our application. There is also an e2e directory in the project root folder. This folder will contain a starting application for our end-to-end test process (which we cover in Chapter 8, “E2E Testing with Jasmine”).
Summary
Using the Angular CLI gives you all the necessary files for your application and testing work. As we explore the testing tools, we will take these generated files and expand them to provide a testable application.
- 80+ high-performance Angular components, including DataGrid, Diagram, and Scheduler.
- Support for AOT compilation and tree shaking.
- Lightweight and user-friendly.