This blog represents code sample on how to get started with unit test in an Angular app (Angular 2/Angular 4). The code sample shown below could be used as a template for creating a unit test spec for any component.
Unit Test Code Sample for Angular Component
Pay attention to following two points:
- Need to declare component which needs to be tested; In the code shown below, it is the SignupComponent which is tested. Note that SignupComponent represents template-driven form for Signup. In another example, the unit test for AppComponent is shown.
- Need to declare the modules which are required for testing the component; In the unit test code given below for SignupComponent, it is FormsModule which needs to be declared owing to the fact that Signup form is a template-driven form. In another example, for AppComponent, the feature module which is referenced in AppModule needs to be declared as part of imports array.
import { TestBed, async } from '@angular/core/testing'; import { SignupComponent } from './signup.component'; import { FormsModule } from '@angular/forms'; describe('SignupComponent', () => { beforeEach(async(() =>; { TestBed.configureTestingModule({ <strong>declarations: [ SignupComponent ], imports: [ FormsModule ],</strong> }).compileComponents(); })); it('should create the app', async(() => { <strong> const fixture = TestBed.createComponent(SignupComponent);</strong> const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); });
Below is the code which represents the unit test spec for bootstrap component, app.component.ts, which is found at the root level. This component is used to bootstrap the app.
import { TestBed, async } from '@angular/core/testing'; import { AppComponent } from './app.component'; import {SignupModule} from './signup/signup.module'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ <strong>declarations: [ AppComponent ], imports: [SignupModule]</strong> }).compileComponents(); })); it('should create the app', async(() => { <strong>const fixture = TestBed.createComponent(AppComponent);</strong> const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); })); });
Pay attention to some of the following in above code:
- Feature module such as SignupModule needs to be declared if it is referenced in the template code
- Component which is tested needs to be declared; In above code, this is AppComponent which is tested.
How to Run Unit Test
Execute the following command in the root folder to run the unit tests:
ng test
In case you are developing web apps using Spring and Angular, check out my book, Building web apps with Spring 5 and Angular. Grab your ebook today and get started.
- Confounder Features & Machine Learning Models: Examples - October 2, 2024
- Credit Card Fraud Detection & Machine Learning - September 26, 2024
- Neural Network Types & Real-life Examples - September 24, 2024
I found it very helpful. However the differences are not too understandable for me