如何在 Angular 中創建基本單元測試

Question

我有一個組件Strip 。 它是一個簡單的 HTML 卡片，帶有一些數字和計算。 這是代碼：

import { Component, Input, NgZone, OnInit } from '@angular/core';
import './strip.component.scss';
import { SisenseService } from '../../core/services/sisense.service';

@Component({
    selector: 'app-strip',
    templateUrl: './strip.component.html'
})
export class StripComponent extends BaseCardComponent implements OnInit {
        
    constructor(private zone: NgZone, private sisenseService: SisenseService) {
        super();
    }

    ngOnInit(): void { 
    }
}

我正在注入 2 個服務， SisenseService和NgZone 。

我正在編寫一個非常簡單的測試用例。 這是規范文件：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { StripComponent } from './strip.component';
import { CUSTOM_ELEMENTS_SCHEMA, NgZone } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { SisenseService } from '../../core/services/sisense.service';

describe('StripComponent', () => {
    let component: StripComponent;
    let fixture: ComponentFixture<StripComponent>;
    let sisenseService: SisenseService;
    let ngZone: NgZone;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [StripComponent],
            imports: [TranslateModule.forRoot()],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            providers: [SisenseService, NgZone]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(StripComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
        sisenseService = TestBed.get(SisenseService);
        ngZone = TestBed.get(NgZone);
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

但它沒有告訴我：

Chrome Headless 76.0.3803.0 (Windows 10) StripComponent 應該創建 FAILED 失敗：無法解析 NgZone 的所有參數：(?)。 錯誤：無法解析 NgZone 的所有參數：(?)。

請指出我的錯誤。

Answer 1

嘗試模擬 NgZone 並在提供程序中使用它

const mockNgZone = jasmine.createSpyObj('mockNgZone', ['run', 'runOutsideAngular']);
mockNgZone.run.and.callFake(function () {return undefined;});

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [StripComponent],
        imports: [TranslateModule.forRoot()],
        schemas: [CUSTOM_ELEMENTS_SCHEMA],
        providers: [
            SisenseService,
            {provide: NgZone, useValue: mockNgZone}
        ]
    }).compileComponents();
}));