[Angular Testing] Unit Testing -- Test component and service.
Angular -- and Service Component test Testing unit
2023-09-14 08:59:19 时间
Recommend to use angular-cli to generate component and service, so we can get testing templates.
ng g s heros // generate a heros service
Component with injected service:
import { TestBed, async, inject } from '@angular/core/testing'; import { AppComponent } from './app.component'; import {HerosService} from "./heros.service"; import {By} from "@angular/platform-browser"; let fixture, comInstance, herosService, element, de; describe('AppComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], providers: [ HerosService ] }); TestBed.compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(AppComponent); de = fixture.debugElement; comInstance = fixture.debugElement.componentInstance; herosService = fixture.debugElement.injector.get(HerosService); element = fixture.nativeElement; // to access DOM element }); it('should create the app', async(() => { expect(comInstance).toBeTruthy(); })); it(`should have as title 'app works!'`, async(() => { expect(comInstance.title).toEqual('app works!'); })); it('should render title in a h1 tag', async(() => { fixture.detectChanges(); expect(element.querySelector('h1').textContent).toContain('app works!'); })); it('should able to change the title', async(() => { const expected = "Change title"; comInstance.title = expected; fixture.detectChanges(); fixture.whenStable().then(() => { expect(element.querySelector('h1').innerText).toBe(expected); expect(de.query(By.css('h1')).nativeElement.innerText).toBe(expected); }); })); it('should have HerosService defined', async(() => { const expected = herosService.foo(); const result = "foo"; expect(expected).toBe(result); })); });
Service:
/* tslint:disable:no-unused-variable */ import { TestBed, async, inject } from '@angular/core/testing'; import { HerosService } from './heros.service'; import {HttpModule} from "@angular/http"; let service; describe('HerosService', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [ HttpModule ], providers: [ HerosService ] }); }); beforeEach(inject([HerosService], s => { service = s; })); it('should ...', inject([HerosService], (service: HerosService) => { expect(service).toBeTruthy(); })); it('should able to get foo from foo()', inject([HerosService], service => { const expected = service.foo(); const result = "foo"; expect(expected).toBe(result); })); it('should able to get heros from api', async(() => { service.getHeros() .subscribe(( heros )=> { expect(heros.length).toEqual(82); }) })) });
相关文章
- 自定义 angular-datetime-picker 格式
- 一个 Angular 开发人员对腾讯 Cloud Studio 使用后的体验报告
- AngularJS进阶(五)Angular实现下拉菜单多选
- Angular HTTPClient API 在 SAP 电商云中的使用
- Angular面试题_session面试题
- vue相比jquery_angular和vue哪个厉害
- 解决angular创建项目报错:setTimeout is not defined
- Angular forRoot 方法的使用场合介绍
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- Angular 项目路径添加指定的访问前缀
- Angular 应用 tsconfig.json 文件里的 typeRoots 属性讲解
- 基于 Spartacus 的 Angular Storefront 性能优化建议
- 什么是 Angular library 的 secondary entry points?
- 关于 Angular 12 的 inlineCriticalCss 选项