[Angular Unit Testing] Testing Component with ChangeDetectionStrategy.OnPush
Angular with Component Testing unit
2023-09-14 09:00:47 时间
Component:
<div class="loading-placeholder" [ngClass]="extraClass"> <ng-container *ngIf="loadingService.config.showContent"> <ng-content></ng-content> </ng-container> </div>
import {Component, OnInit, Input, ChangeDetectionStrategy} from '@angular/core' import {LoadingService} from '../loading.service' @Component({ selector: 'loading-placeholder', templateUrl: './loading-placeholder.component.html', styleUrls: ['./loading-placeholder.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class LoadingPlaceholderComponent implements OnInit { @Input() type: string @Input() size: string extraClass: string constructor(public loadingService: LoadingService) {} ngOnInit(): void { this.extraClass = this.getType() } getType() { const whiteList = ['image', 'headline', 'text'] const sizes = ['small', 'medium', 'large', 'full'] const alias = ['s', 'm', 'l', 'f'] let res = '' if (whiteList.indexOf(this.type) === -1) { return res } if ( sizes.indexOf(this.size) === -1 && alias.indexOf(this.size) === -1 ) { return `loading-placeholder__${this.type}` } return `loading-placeholder__${this.type}--${this.size}` } }
Testing:
import { async, ComponentFixture, TestBed, fakeAsync, flush } from '@angular/core/testing' import {LoadingPlaceholderComponent} from './loading-placeholder.component' import {LoadingService} from '../loading.service' import {of} from 'rxjs' import {DebugElement, Component, ChangeDetectionStrategy} from '@angular/core' import {By} from '@angular/platform-browser' fdescribe('LoadingPlaceholderComponent', () => { let component: LoadingPlaceholderComponent let fixture: ComponentFixture<LoadingPlaceholderComponent> let el: DebugElement let loadingService: LoadingService let loadingServiceSpy = { loading$: of(true), get config() { return {showContent: false} } } beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [LoadingPlaceholderComponent], providers: [{provide: LoadingService, useValue: loadingServiceSpy}] }) .overrideComponent(LoadingPlaceholderComponent, { set: new Component({ templateUrl: './loading-placeholder.component.html', changeDetection: ChangeDetectionStrategy.Default }) }) .compileComponents() })) beforeEach(() => { fixture = TestBed.createComponent(LoadingPlaceholderComponent) component = fixture.componentInstance el = fixture.debugElement loadingService = TestBed.inject(LoadingService) fixture.detectChanges() }) it('should has correct className', () => { component.size = 'm' component.type = 'headline' component.ngOnInit() fixture.detectChanges() expect(component.extraClass).toBe( 'loading-placeholder__headline--m', 'extraClass has wrong value' ) expect( el.query(By.css('.loading-placeholder')).nativeElement.classList ).toContain( 'loading-placeholder__headline--m', "ngClass doesn't work" ) }) })
相关文章
- [Angular 8 Unit testing] Testing a smart component with service injection -- 1
- [Angular 8] Custom Route Preloading with ngx-quicklink and Angular
- [Angular] Remove divs to Preserve Style and Layout with ng-container in Angular
- [Angular] Handle HTTP Errors in Angular with HttpErrorResponse interface
- [Angular 2] Factory Provider with dependencies
- [AngularJS] Test an Angular Component with $componentController
- [Angular 2] Handling Clicks and Intervals Together with Merge
- [Angular 2] Get start with Firebase
- [Angular 2] Passing data to components with @Input
- [Angular 2] Using ng-model for two-way binding
- [Angular 2] 9. Replace ng-modle with #ref & events
- [Angular] oc.lazyLoad with Angular ui router
- [Angular 8 Unit testing] Testing a smart component with service injection -- 1
- [Angular] Remove divs to Preserve Style and Layout with ng-container in Angular
- [Angular + Unit Testing] Mock HTTP Requests made with Angular’s HttpClient in Unit Tests
- [Angular] Test Container component with async provider
- [Angular Directive] 3. Handle Events with Angular 2 Directives
- [Angular2 Router] Use Params from Angular 2 Routes Inside of Components
- [Angular 2] Create template with Params
- [Angular 2] Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)
- [Angular 2] Build a select dropdown with *ngFor in Angular 2
- [Angular 2] Passing data to components with @Input
- Angular里的routerLink不能按照期望工作的一个问题
- Angular Ngrx Store Effect 和 Action 的交互流程
- 为什么我们需要给 Angular library 创建多重入口 multiple entry point