When i'm trying to test using karma jsamin, i/m getting this error...
Failed: Template parse errors:
Can't bind to 'alwaysShowCalendars' since it isn't a known property of 'input'. ("
ngxDaterangepickerMd
[(ngModel)]="selected"
[ERROR ->][alwaysShowCalendars]="alwaysShowCalendars"
[linkedCalendars]="true"
"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@18:12
Can't bind to 'linkedCalendars' since it isn't a known property of 'input'. ("
[alwaysShowCalendars]="alwaysShowCalendars"
[ERROR ->][linkedCalendars]="true"
[locale]="{applyLabel: 'Done'}"
(rangeClicked)="ra"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@20:12
Can't bind to 'locale' since it isn't a known property of 'input'. ("
[linkedCalendars]="true"
[ERROR ->][locale]="{applyLabel: 'Done'}"
(rangeClicked)="rangeClicked($event)"
(date"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@21:12
Can't bind to 'ranges' since it isn't a known property of 'input'. ("angeClicked)="rangeClicked($event)"
(datesUpdated)="datesUpdated($event)"
[ERROR ->][ranges]="ranges"
[keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@24:12
Can't bind to 'keepCalendarOpeningWithRange' since it isn't a known property of 'input'. ("
(datesUpdated)="datesUpdated($event)"
[ranges]="ranges"
[ERROR ->][keepCalendarOpeningWithRange]="keepCalendarOpeningWithRange"
class="form-"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@25:12
Can't bind to 'nbDatepicker' since it isn't a known property of 'input'. ("
</div>
<div *ngIf="datepickerChanges">
<input [ERROR ->][nbDatepicker]="datepicker" [(ngModel)]="dateGrouped" (ngModelChange)="onDateSelect($event)">
"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@31:17
'nb-datepicker' is not a known element:
1. If 'nb-datepicker' is an Angular component, then verify that it is part of this module.
2. If 'nb-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("tepicker]="datepicker" [(ngModel)]="dateGrouped" (ngModelChange)="onDateSelect($event)">
[ERROR ->]<nb-datepicker #datepicker ></nb-datepicker>
</div>
</div>
"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@32:10
Can't bind to 'data' since it isn't a known property of 'ngx-order-payment-barchart'.
1. If 'ngx-order-payment-barchart' is an Angular component and it has 'data' input, then verify that it is part of this module.
2. If 'ngx-order-payment-barchart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("gin-top: 20px;margin-bottom: 100px;" *ngIf="showBarchart1">
<ngx-order-payment-barchart [ERROR ->][data]="data "></ngx-order-payment-barchart>
</div>
<div style="text-align: center;"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@46:39
'ngx-order-payment-barchart' is not a known element:
1. If 'ngx-order-payment-barchart' is an Angular component, then verify that it is part of this module.
2. If 'ngx-order-payment-barchart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("style="min-height: 300px;margin-top: 20px;margin-bottom: 100px;" *ngIf="showBarchart1">
[ERROR ->]<ngx-order-payment-barchart [data]="data "></ngx-order-payment-barchart>
</div>
<di"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@46:11
Can't bind to 'groupeddata' since it isn't a known property of 'ngx-order-average-cost-barchart'.
1. If 'ngx-order-average-cost-barchart' is an Angular component and it has 'groupeddata' input, then verify that it is part of this module.
2. If 'ngx-order-average-cost-barchart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (";margin-bottom: 100px;" *ngIf="showBarchart2"><!-- -->
<ngx-order-average-cost-barchart [ERROR ->][groupeddata]="datagrouped "></ngx-order-average-cost-barchart>
</div>
<div style=""): ng:///DynamicTestModule/OrderAnalyticsComponent.html@62:44
'ngx-order-average-cost-barchart' is not a known element:
1. If 'ngx-order-average-cost-barchart' is an Angular component, then verify that it is part of this module.
2. If 'ngx-order-average-cost-barchart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("in-height: 300px;margin-top: 20px;margin-bottom: 100px;" *ngIf="showBarchart2"><!-- -->
[ERROR ->]<ngx-order-average-cost-barchart [groupeddata]="datagrouped "></ngx-order-average-cost-barchart>
"): ng:///DynamicTestModule/OrderAnalyticsComponent.html@62:11
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.getItemAnalyticsItemCatogory(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() { }
}
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...................................................................................................................................................................................................................................
I have fixed the issue by importing 'NgxDaterangepickerMd'