When I'm trying to test using karma jsamin, I get this error:
Failed: Template parse errors:
< Can't bind to 'data' since it isn't a known property of 'ngx-item-category-barchart'.
If 'ngx-item-category-barchart' is an Angular component and it has 'data' input, then verify that it is part of this module.
If 'ngx-item-category-barchart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("gin-top: 20px;margin-bottom: 100px;" *ngIf="showBarchart1"> <ngx-item-category-barchart [ERROR ->][data]="data "> <div style="text-align: center;"): ng:///DynamicTestModule/ItemAnalyticsComponent.html@61:39 'ngx-item-category-barchart' is not a known element:
My component
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>
Spec.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();
});
});
Thanks
