单击第一个组件，使第二个组件能够使用茉莉测试不同的操作。
单击第一个组件，使第二个组件能够使用茉莉测试不同的操作。
提问于 2022-05-09 03:55:41
我有两个与图表相关的组件。组件1保存数字卡信息，组件2保存行图信息.
单击数字卡组件中的任意一张卡后，我们将通过启用行图组件来显示线条图.
测试用例:需要单击行图组件中的按钮，使用茉莉测试用例.
面对的问题:由于线型组件只有在单击数字卡组件中的卡片后才启用，所以我无法单击行图组件中的按钮。
number-card-component.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ScaleType } from '@swimlane/ngx-charts';
import { BehaviorSubject, Subscription } from 'rxjs';
@Component({
selector: 'app-number-card',
templateUrl: './number-card.component.html',
styleUrls: ['./number-card.component.scss']
})
export class NumberCardComponent implements OnInit {
cardsData: any[] = [];
displayChart = false;
constructor(private service: MyService) { }
ngOnInit(): void {
this.getMetricsSubscription = this.service.getNumbers()
.subscribe((data: any) => {
this.cardsData = data;
})
}
onSelect(event: any) {
this.displayChart = true;
}
}line-chart-component
import { Component, OnInit } from '@angular/core';
import { ScaleType } from '@swimlane/ngx-charts';
@Component({
selector: 'app-line-chart',
templateUrl: './line-chart.component.html',
styleUrls: ['./line-chart.component.scss']
})
export class LineChartComponent implements OnInit {
chartContent: any[] = [];
constructor(private service: MyService) {
}
ngOnInit(): void {
this.service.chartInfo.subscribe((chartData) => {
this.chartContent = chartData;
});
}
closeChart() {
console.log('chart is closed');
}
}number-card-html
<ngx-charts-number-card
[results]="cardsData"
(select)="onSelect($event)">
</ngx-charts-number-card>
<app-line-chart *ngIf=displayChart></app-line-chart>line-chart-html
<ngx-charts-line-chart [results]="chartContent">
</ngx-charts-line-chart>
<button (click)="closeChart()">Close</button>jasmine-test-case
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
import { of } from 'rxjs';
import { LineChartComponent } from './line-chart.component';
import { NumberCardComponent } from '../summary-card/summary-card.component'
describe('LineChartComponent', () => {
let component: LineChartComponent;
let fixture: ComponentFixture<LineChartComponent>;
let service: Service;
let cardComponent: ComponentFixture<NumberCardComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HttpClientTestingModule],
declarations: [LineChartComponent],
providers: [MyService],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(LineChartComponent);
cardComponent = TestBed.createComponent(NumberCardComponent);
service = TestBed.inject(MyService);
component = fixture.componentInstance;
fixture.detectChanges();
spyOn(service, 'getNumbers').and.returnValue(of(
[
{ name: "Metric 1", value: 877 },
{ name: "Metric 2", value: 111 }
]
));
});
it('on closeChart method ChartData information needs to be reset', fakeAsync(() => {
fixture.debugElement.nativeElement.querySelectorAll('button')[1].click();
// component.closeChart();
expect(component.closeChart).toHaveBeenCalled();
}));
});回答 1
Stack Overflow用户
发布于 2022-05-10 04:41:27
您正在显示LineChartComponent的测试，但我认为您需要对NumberCardComponent进行测试。
还为它设置一个测试，并执行以下操作：
it('should display chart on select', () => {
const card = fixture.debugElement.query(By.css('ngx-charts-number-card'));
// first argument is event name, 2nd argument is the $event object mocked
card.triggerEventHandler('select', {});
// call detect changes so the HTML updates
fixture.detectChanges();
const chart = fixture.debugElement.query(By.css('app-line-chart'));
expect(chart).toBeTruthy();
});看看这里的triggerEventHandler：https://netbasal.com/simulating-events-in-angular-unit-tests-5482618cd6c6，这是一篇写得很好的文章。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72171598
复制相关文章
相似问题
腾讯云开发者
