Позвольте мне помочь вам с этим. Допустим, у вас есть
app.component.html
<div id="title">
{{title}}
</div>
<ng-template #content
let-modal
id="ng-modal">
<div class="modal-header dark-modal">
Header
</div>
<div class="justify-content-center flex-column flex-md-row list-inline">
Body
</div>
</ng-template>
app.component.ts
import { Component, ViewChild, TemplateRef } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'AngularProj';
@ViewChild('content') modalRef: TemplateRef<any>;
}
Вам нужно написать spec файл немного другим способом:
app.component.spec.ts
import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { ViewChild, Component, OnInit, AfterContentInit, TemplateRef } from '@angular/core';
import { By } from '@angular/platform-browser';
@Component({
template: `
<ng-container *ngTemplateOutlet="modal"> </ng-container>
<app-root></app-root>
`,
})
class WrapperComponent implements AfterContentInit {
@ViewChild(AppComponent) appComponentRef: AppComponent;
modal: TemplateRef<any>;
ngAfterContentInit() {
this.modal = this.appComponentRef.modalRef;
}
}
describe('AppComponent', () => {
let app: AppComponent;
let fixture: ComponentFixture<WrapperComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [WrapperComponent, AppComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(WrapperComponent);
const wrapperComponent = fixture.debugElement.componentInstance;
app = wrapperComponent.appComponentRef;
fixture.detectChanges();
});
it('should create the app', async(() => {
expect(app).toBeDefined();
}));
it('should have title in HtmL ', async(() => {
const titleText = (fixture.debugElement.nativeElement.querySelector('#title').innerText);
expect(titleText).toBe('AngularProj');
}));
it('should have Header in HtmL ', async(() => {
const headerText = (fixture.debugElement.queryAll(By.css('.modal-header.dark-modal'))[0].nativeElement.innerText);
expect(headerText).toBe('Header');
}));
});
- Как видите, я обернул
app-root образцом тестового компонента (WrapperComponent).
- С тех пор,
app-root имеет ng-template, поэтому он не будет отображаться самостоятельно. Это создает сложную ситуацию, так как нам нужно визуализировать эту часть app.component.
- Откройте
ng-template, создав @ViewChild('content') modalRef: TemplateRef<any>;, а затем используя его для рендеринга внутри WrapperComponent.
Я знаю, что это похоже на взлом, но по всем статьям, которые я прочитал, вот как мы можем этого достичь.
Для тестирования что-то вроде:
openDarkModal(content) {
this.modalService.open(content, { windowClass: 'dark-modal', size: 'lg', centered: true });
}
вы можете использовать spy, но перед этим сделайте modalService общедоступным, чтобы за ним можно было следить:
constructor(public modalService: NgbModal) { }
Обновление
и затем в spec:
import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
TestBed.configureTestingModule({
imports: [NgbModalModule],
declarations: [PhotosComponent, /*WrapperComponent*/],
schemas: [NO_ERRORS_SCHEMA],
})
// and in it block
it('should call modal Service open function when clicked ', async(() => {
spyOn(component.modalService,'open').and.callThrough();
const openModalEle= fixture.debugElement.nativeElement.querySelector('#photo-one'));
openModalEle.click();
expect(component.modalService.open).toHaveBeenCalled();
}));