【发布时间】：2020-11-21 22:19:13
【问题描述】：
当我尝试使用 karma jsamin 进行测试时，我收到此错误：
失败：模板解析错误：
如果“ngx-item-category-barchart”是一个 Angular 组件并且它有“数据”输入，那么验证它是这个模块的一部分。
如果“ngx-item-category-barchart”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。
要允许任何属性将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas”。 ("gin-top: 20px;margin-bottom: 100px;" *ngIf="showBarchart1">
][data]="data "> 我的组件
import { Component, OnInit } from '@angular/core'; import { NgxSpinnerService } from 'ngx-spinner'; import { ApiService } from '../../../services/api.service'; import * as moment from 'moment'; @Component({ selector: 'ngx-item-analytics', templateUrl: './item-analytics.component.html', styleUrls: ['./item-analytics.component.scss'] }) export class ItemAnalyticsComponent implements OnInit { data: any; data2: any; showBarchart1: boolean = false; showBarchart2: boolean = false; maxDate: moment.Moment; minDate: moment.Moment; datepickerChanges:boolean = false; dateGrouped:Date; alwaysShowCalendars: boolean; keepCalendarOpeningWithRange: boolean; showRangeLabelOnInput: boolean; invalidDates: moment.Moment[] = []; selected: any; startDate:any; endDate:any; datagroupedChart:boolean=false; datagrouped:any[] =[]; venues: any = []; selectedVenue: any = 'Oahu'; selVenue: any; ranges: any = { Today: [moment(), moment()], Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 'Last 7 Days': [moment().subtract(6, 'days'), moment()], 'Last 30 Days': [moment().subtract(29, 'days'), moment()], 'This Month': [moment().startOf('month'), moment().endOf('month')], 'Last Month': [ moment() .subtract(1, 'month') .startOf('month'), moment() .subtract(1, 'month') .endOf('month') ], 'Last 3 Month': [ moment() .subtract(3, 'month') .startOf('month'), moment() .subtract(1, 'month') .endOf('month') ] }; isInvalidDate = (m: moment.Moment) => { return this.invalidDates.some(d => d.isSame(m, 'day') ); } timezone: any; constructor(private spinner: NgxSpinnerService, private apiService: ApiService,) { this.datagrouped = [{"State":"CA","Under 5 Years":2704659,"5 to 13 Years":4499890,"14 to 17 Years":2159981,"18 to 24 Years":3853788,"25 to 44 Years":10604510,"45 to 64 Years":8819342,"65 Years and Over":4114496},{"State":"TX","Under 5 Years":2027307,"5 to 13 Years":3277946,"14 to 17 Years":1420518,"18 to 24 Years":2454721,"25 to 44 Years":7017731,"45 to 64 Years":5656528,"65 Years and Over":2472223},{"State":"NY","Under 5 Years":1208495,"5 to 13 Years":2141490,"14 to 17 Years":1058031,"18 to 24 Years":1999120,"25 to 44 Years":5355235,"45 to 64 Years":5120254,"65 Years and Over":2607672},{"State":"FL","Under 5 Years":1140516,"5 to 13 Years":1938695,"14 to 17 Years":925060,"18 to 24 Years":1607297,"25 to 44 Years":4782119,"45 to 64 Years":4746856,"65 Years and Over":3187797},{"State":"IL","Under 5 Years":894368,"5 to 13 Years":1558919,"14 to 17 Years":725973,"18 to 24 Years":1311479,"25 to 44 Years":3596343,"45 to 64 Years":3239173,"65 Years and Over":1575308},{"State":"PA","Under 5 Years":737462,"5 to 13 Years":1345341,"14 to 17 Years":679201,"18 to 24 Years":1203944,"25 to 44 Years":3157759,"45 to 64 Years":3414001,"65 Years and Over":1910571}]; this.maxDate = moment().add(0, 'weeks'); this.minDate = moment().subtract(3, 'days'); this.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; this.alwaysShowCalendars = true; this.keepCalendarOpeningWithRange = true; this.showRangeLabelOnInput = true; this.dateGrouped = new Date() this.selected = {startDate: moment().subtract(30, 'days'), endDate: moment()}; setTimeout(() => { this.invalidDates = [moment().add(2, 'days'), moment().add(3, 'days'), moment().add(5, 'days')]; }, 5000); var m = moment(this.selected.startDate); m.set({hour:0,minute:0,second:0,millisecond:0}) this.startDate = m.format('YYYY-MM-DD 00:00'); this.endDate = moment(this.selected.endDate).format('YYYY-MM-DD 23:59'); } rangeClicked(range) { } datesUpdated(range) { var m = moment(this.selected.startDate); m.set({hour:0,minute:0,second:0,millisecond:0}) this.startDate = m.format('YYYY-MM-DD 00:00'); this.endDate = moment(this.selected.endDate).format('YYYY-MM-DD 23:59'); this.viaAirportAnalytics(); } viaAirportAnalytics(){ var statrdate = new Date(this.startDate).toISOString(); var endDate = new Date(this.endDate).toISOString(); this.spinner.show(); this.apiService.getVenues().subscribe((res)=>{ this.spinner.hide(); this.venues = res.body.venues; this.selVenue = this.venues[0]; for(let sel of this.venues){ if(sel.name == this.selectedVenue) { this.selVenue = sel; } } let arg = { startDate:statrdate, endDate:endDate, venueId:this.selVenue._id } this.spinner.show(); this.apiService.getItemAnalyticsItemCategory(arg).subscribe((res)=>{ this.spinner.hide(); let dataChart = []; res.chartData.map(data =>{ dataChart.push( {gate:data.category, deliveries: data.count}) }) if(dataChart.length>0){ this.showBarchart1 = true; this.data = dataChart; } else { this.showBarchart1 = false; } }); this.spinner.show(); this.apiService.getItemAnalyticsItems(arg).subscribe((res)=>{ this.spinner.hide(); let dataChart = []; res.chartData.map(data =>{ dataChart.push( {gate:data.menuItem, deliveries: data.count}) }) if(dataChart.length>0){ this.showBarchart2 = true; this.data2 = dataChart; } else { this.showBarchart2 = false; } }); }); } onDateSelect(event){ var m = moment(event); m.set({hour:0,minute:0,second:0,millisecond:0}) var r = moment(event); r.set({hour:23,minute:59,second:59,millisecond:59}) this.startDate = m.format('YYYY-MM-DD 00:00'); this.endDate = r.format('YYYY-MM-DD 23:59'); } ngOnInit() { } }HTML
<nb-card> <nb-card-header> Item Analytics </nb-card-header> <nb-card-body style="min-height: 523px;"> <div class="row"> <div class="row" style="position: relative;top: 25px;text-align: center;width: 100%;"> <div class="col-xxxl-2 col-xxl-2 col-lg-2 col-md-2" style="margin-top: 3%;text-align: right;"> Island: </div> <div class="col-xxxl-7 col-xxl-7 col-lg-7 col-md-7" style="margin-top: 27px;"> <div> <select class="selectbox" [(ngModel)]="selectedVenue" (change)="viaAirportAnalytics();"> <option *ngFor="let venue of venues" value="{{venue.name}}">{{venue.name}}</option> </select> </div> </div> </div> </div> <div class="row"> <div class="row" style="position: relative;top: 25px;text-align: center;width: 100%;"> <div class="col-xxxl-2 col-xxl-2 col-lg-2 col-md-2" style="margin-top: 3%;text-align: right;"> Date Range: </div> <div class="col-xxxl-7 col-xxl-7 col-lg-7 col-md-7" style="margin-top: 27px;"> <div *ngIf="!datepickerChanges"> <input type="text" style="width: 40%;" ngxDaterangepickerMd [(ngModel)]="selected" [alwaysShowCalendars]="alwaysShowCalendars" [linkedCalendars]="true" [locale]="{applyLabel: 'Done'}" (rangeClicked)="rangeClicked($event)" (datesUpdated)="datesUpdated($event)" [ranges]="ranges" [keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange" class="form-control" placeholder="Please select date range"/> </div> <div *ngIf="datepickerChanges"> <input [nbDatepicker]="datepicker" [(ngModel)]="dateGrouped" (ngModelChange)="onDateSelect($event)"> <nb-datepicker #datepicker ></nb-datepicker> </div> </div> </div> </div> <div class="row"> <div class="row" style="position: relative;top: 25px;text-align: center;width: 100%;"> <div class="col-xxxl-12 col-xxl-12 col-lg-12 col-md-12" style="margin-top: 0.5%;"> <h6>Item Category Frequency</h6> </div> </div> <div class="col-xxxl-12 col-xxl-12 col-lg-12 col-md-12" > <div style="min-height: 300px;margin-top: 20px;margin-bottom: 100px;" *ngIf="showBarchart1"> <ngx-item-category-barchart [data]="data "></ngx-item-category-barchart> </div> <div style="text-align: center;min-height: 300px;margin-top: 10%;" *ngIf="!showBarchart1"> <p style="font-weight: 600;">No Data to Show</p> </div> </div> </div> <div class="row"> <div class="row" style="position: relative;top: 25px;text-align: center;width: 100%;"> <div class="col-xxxl-12 col-xxl-12 col-lg-12 col-md-12" style="margin-top: 0.5%;"> <h6>Top 5 Items</h6> </div> </div> <div class="col-xxxl-12 col-xxl-12 col-lg-12 col-md-12" > <div style="min-height: 300px;margin-top: 20px;margin-bottom: 100px;" *ngIf="showBarchart2"> <ngx-items-barchart [data]="data2 "></ngx-items-barchart> </div> <div style="text-align: center;min-height: 300px;margin-top: 10%;" *ngIf="!showBarchart2"> <p style="font-weight: 600;">No Data to Show</p> </div> </div> </div> </nb-card-body> <nb-card>规格.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ItemAnalyticsComponent } from './item-analytics.component'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NbCardModule, NbCalendarKitModule, NbCalendarRangeModule, NbCalendarModule, NbDatepickerModule } from '@nebular/theme'; import { MatDatepickerModule, NativeDateModule } from '@angular/material'; describe('ItemAnalyticsComponent', () => { let component: ItemAnalyticsComponent; let fixture: ComponentFixture<ItemAnalyticsComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ FormsModule, ReactiveFormsModule, NbCardModule, NbCalendarModule, NbCalendarKitModule, NbCalendarRangeModule, MatDatepickerModule, NbDatepickerModule, NativeDateModule ], declarations: [ ItemAnalyticsComponent ] }) .compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(ItemAnalyticsComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); });谢谢
【问题讨论】：
ngx-item-category-barchart的模块导入您的测试。您需要这样做才能让 Karma 能够构建夹具。
标签： angular karma-jasmine karma-coverage