unit-testing - 如何使用 ng-template 测试模态元素以及触发它的操作?
问题描述
我阅读了Angular 测试,但我不确定是否有任何关于在模态中测试元素以及如何检查自定义操作的参考。我的目的是编写必要的测试来证明我将确保我的功能和模态按预期工作。
由于模态框被隐藏,检查模态框元素是否出现的测试失败。所以我想这里缺少一些东西。
这是我的photos.components.ts
文件:
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-photos',
templateUrl: './photos.component.html',
styleUrls: ['./photos.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class PhotosComponent implements OnInit {
constructor(private modalService: NgbModal) { }
openDarkModal(content) {
this.modalService.open(content, { windowClass: 'dark-modal', size: 'lg', centered: true });
}
ngOnInit() {
}
}
这是我的photos.component.html
文件:
<div>
<div class="col-lg-4 col-sm-6 mb-3">
<a><img (click)="openDarkModal(content)" id="photo-one" class="img-fluid z-depth-4 relative waves-light" src="#" alt="Image" data-toggle="content" data-target="#content"></a>
</div>
</div>
<!-- Dark Modal -->
<ng-template #content let-modal id="ng-modal">
<div class="modal-header dark-modal">
<img (click)="modal.dismiss('Cross click')" id="modal-image" class="embed-responsive-item img-fluid" src="#" alt="Image" allowfullscreen>
</div>
<div class="justify-content-center flex-column flex-md-row list-inline">
<ul class="list-inline flex-center text-align-center text-decoration-none" id="modal-buttons-list">
<li><a style="color: white;" href="#"><button mdbBtn type="button" size="sm" class="waves-light" color="indigo" mdbWavesEffect><i class="fab fa-facebook-f"></i></button></a></li>
<li><a style="color: white;" href="#"><button mdbBtn type="button" size="sm" class="waves-light" color="cyan" mdbWavesEffect><i class="fab fa-twitter"></i></button></a></li>
<li><a style="color: white;" href="#"><button mdbBtn type="button" size="sm" class="waves-light btn btn-blue-grey" mdbWavesEffect><i class="fas fa-envelope"></i></button></a></li>
</ul>
</div>
</ng-template>
这就是我使用photos.component.spec.ts
文件的地方:
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PhotosComponent } from './photos.component';
import { NO_ERRORS_SCHEMA } from '@angular/core';
describe('PhotosComponent', () => {
let component: PhotosComponent;
let fixture: ComponentFixture<PhotosComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PhotosComponent ],
schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PhotosComponent);
component = fixture.componentInstance;
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should render the first photo', () => {
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('#photo-one')).toBeTruthy();
});
});
我需要Dark Modal内部元素的测试用例和openDarkModal的测试。除了代码之外,我们将不胜感激在 Angular 7 测试中为初学者提供的参考。
解决方案
让我帮你解决这个问题。假设你有
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 ', () => {
const titleText = (fixture.debugElement.nativeElement.querySelector('#title').innerText);
expect(titleText).toBe('AngularProj');
});
it('should have Header in HtmL ', () => {
const headerText = (fixture.debugElement.queryAll(By.css('.modal-header.dark-modal'))[0].nativeElement.innerText);
expect(headerText).toBe('Header');
});
});
- 如您所见,我用
app-root
示例测试组件 (WrapperComponent
) 包装了 。 - 因为,
app-root
hasng-template
,所以它不会自己渲染。这造成了一个棘手的情况,因为我们需要渲染app.component
. ng-template
通过创建@ViewChild('content') modalRef: TemplateRef<any>;
然后使用它在内部渲染来公开WrapperComponent
。
我知道这似乎是一种 hack,但在我浏览过的所有文章中,这就是我们可以实现这一目标的方式。
用于测试类似:
openDarkModal(content) {
this.modalService.open(content, { windowClass: 'dark-modal', size: 'lg', centered: true });
}
您可以使用spy
,但在此之前将其modalService
公开,以便可以对其进行监视:
constructor(public modalService: NgbModal) { }
您还可以使用jasmine.createSpyObj
和保留该服务private
。
然后在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();
}));
更新:
使用 Angular 11,您需要进行一些更改:
@Component({
template: `
<div>
<ng-container *ngTemplateOutlet="modal"> </ng-container>
</div>
<app-root> </app-root>
`,
})
class WrapperComponent implements AfterViewInit {
@ViewChild(AppComponent) appComponentRef: AppComponent;
modal: TemplateRef<any>;
constructor(private cdr: ChangeDetectorRef) {}
ngAfterViewInit() {
this.modal = this.appComponentRef.modalRef;
this.cdr.detectChanges();
}
}
describe('AppComponent', () => {
let fixture: ComponentFixture<WrapperComponent>;
let wrapperComponent: WrapperComponent;
beforeEach(
waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [WrapperComponent, AppComponent],
imports: [ModalModule.forRoot()],
}).compileComponents();
})
);
beforeEach(() => {
fixture = TestBed.createComponent(WrapperComponent);
wrapperComponent = fixture.debugElement.componentInstance;
fixture.detectChanges();
});
it('should create the app', () => {
expect(wrapperComponent).toBeDefined();
expect(wrapperComponent.appComponentRef).toBeDefined();
});
});
推荐阅读
- angular - HttpErrorResponse: api url jasmine test 的 Http 失败响应
- php - 仅当最后一个“-”之后的字符串是数字时,如何获取最后一个“-”之前的字符?
- android - 使用高斯模糊渲染系统壁纸
- swift4 - 如何使用 EurekaForm Library / Swift 在列表中获取所选值并设置默认值
- java - 为什么这两个数字比较的工作方式不同?
- tls1.2 - 具有不同端口的同一服务器上的 2 个连接 mbedtls
- go - 在我的 proto 文件中使用 google.protobuf.Struct 作为动态 json 时出错
- google-bigquery - BigQueryIO 返回 TypedRead
而不是 PCollection . 如何获取真实数据? - selenium-webdriver - 运行 selenium 脚本时 Chrome 未启动
- url-rewriting - ASP.CORE 2.0 中的 SEO url 重写