Угловой тест `IboCalendarComponent должен создать` - PullRequest
Новая
       28

Угловой тест `IboCalendarComponent должен создать`

0 голосов
/ 27 мая 2019

когда я делаю тест, я получаю следующие ошибки. любой поможет мне решить эту проблему. Я не получаю подходящих ответов.

вот ошибка: 

Failed: Template parse errors:
Can't bind to 'view' since it isn't a known property of 'ibo-calendar-header'.
1. If 'ibo-calendar-header' is an Angular component and it has 'view' input, then verify that it is part of this module.
2. If 'ibo-calendar-header' 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. ("<div class="container-fluid site-content">

    <ibo-calendar-header [ERROR ->][(view)]="view" [(viewDate)]="viewDate"></ibo-calendar-header>

    <context-menu #basicMenu>
"): ng:///DynamicTestModule/IboCalendarComponent.html@2:22
Can't bind to 'viewDate' since it isn't a known property of 'ibo-calendar-header'.
1. If 'ibo-calendar-header' is an Angular component and it has 'viewDate' input, then verify that it is part of this module.
2. If 'ibo-calendar-header' 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. ("<div class="container-fluid site-content">

вот мой файл компонента: 

import { Component, OnInit, ChangeDetectionStrategy, Input, Output, EventEmitter, OnChanges, ViewEncapsulation  } from '@angular/core';
import { FormGroup, FormBuilder } from "@angular/forms";
import { CalendarService } from "./../../services/calendar.service";
import { ModelEvent, EventState } from "./../../models/model.event";
import { CalendarEvent } from 'angular-calendar';
import { Observable, Subject  } from 'rxjs';
import { colors } from "./../../utilities/colors";
import { tap } from 'rxjs/operators';
declare var $:any;

@Component({
    selector: 'ibo-calendar',
    templateUrl: './ibo-calendar.component.html',
    styleUrls: ['./ibo-calendar.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None
})
export class IboCalendarComponent implements OnChanges,OnInit {

    view: string = 'month';
    // viewDate: Date = new Date('August 19, 2018');
    viewDate:Date = new Date()

    @Input() events:ModelEvent[];
    @Input() currentEvent: ModelEvent;
    @Input() userName:string;

    @Output() eventAdded = new EventEmitter<ModelEvent>();
    @Output() eventDeleted = new EventEmitter<ModelEvent>();
    @Output() eventUpdated = new EventEmitter<ModelEvent>();

    refresh: Subject<any> = new Subject();

    removeEvent:ModelEvent;

    eventForm:FormGroup;
    selectedEvent:ModelEvent;

    constructor(private fb:FormBuilder) { }

    ngOnInit() {

        this.eventForm = this.fb.group({Title:''});

        const headerHeight = $('.site-header').outerHeight();
        //moving content down to header
        $('body').css({paddingTop: headerHeight});

    }

    ngOnChanges() {

        if( this.currentEvent ) {
            this.viewDate = new Date(this.currentEvent.Start);
        }
    }

    eventClicked({ event }: { event: CalendarEvent }): void {
        console.log('Event clicked', event);
    }

    addEvent(date:Date):void {

        const newEvent = {
            Id : 0,
            Start : new Date(date),
            Title : 'New Event on ' + date,
            AllDay : false,
            ColorId:3,
            End : new Date(date),
            CreatedBy:this.userName,
            CreatedDate:new Date(date),
            UpdatedBy:null,
            UpdatedDate:null
        }

        console.log('created entry is', newEvent);

        this.eventAdded.emit(newEvent);

    }

    setCurrentEvent(event:ModelEvent) {

        this.currentEvent = event;
        this.eventForm.patchValue({
            Title : this.currentEvent.Title
        });

    }

    updateEvent(event):void {

        console.log('this.currentEvent', this.currentEvent);

        const updateEvent = {
                ...this.currentEvent,
                ...this.eventForm.value,
                UpdatedBy:this.userName
             };

        this.eventUpdated.emit(updateEvent);
    }


    deleteEvent(event:ModelEvent):void {
        this.eventDeleted.emit(event);
    }

}

вот мой HTML: 

<div class="container-fluid site-content">

    <ibo-calendar-header [(view)]="view" [(viewDate)]="viewDate"></ibo-calendar-header>

    <context-menu #basicMenu>
        <ng-template contextMenuItem (execute)="addEvent($event.item)">
            Add event
        </ng-template>
    </context-menu>

    <ng-template
        #monthCellTemplate
        let-day="day"
        let-openDay="openDay"
        let-locale="locale"
        let-tooltipPlacement="tooltipPlacement"
        let-highlightDay="highlightDay"
        let-unhighlightDay="unhighlightDay"
        let-eventClicked="eventClicked"
    >
    <div
    class="fill-height"
    [contextMenu]="basicMenu"
    [contextMenuSubject]="day.date"
    >
    <div class="cal-cell-top">
        <span class="cal-day-badge" *ngIf="day.badgeTotal > 0"
            >{{ day.badgeTotal }}</span
            >
            <span class="cal-day-number"
            >{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span
            >
        </div>
        <div class="cal-events">
            <div
            class="cal-event"
            *ngFor="let event of day.events"
            (mouseenter)="highlightDay.emit({event: event})"
            (mouseleave)="unhighlightDay.emit({event: event})"
            [mwlCalendarTooltip]="event.Title | calendarEventTitle:'monthTooltip':event"
            [tooltipPlacement]="tooltipPlacement"
            (click)="$event.stopPropagation(); eventClicked.emit({event: event})"
            >
            </div>
            <div *ngFor="let event of day.events" class="event-shortInfo">
                <span>{{event.Title}}</span>
                <span>
                    {{event.Start | date: 'dd/MM/yyyy'}}
                    ({{event.Start | date:'shortTime'}})
                </span>
            </div>
        </div>
    </div>
</ng-template>

<ng-template
#weekHeaderTemplate
let-days="days"
let-locale="locale"
let-dayHeaderClicked="dayHeaderClicked"
>
<div class="cal-day-headers">
    <div
    class="cal-header"
    *ngFor="let day of days"
    [class.cal-past]="day.isPast"
    [class.cal-today]="day.isToday"
    [class.cal-future]="day.isFuture"
    [class.cal-weekend]="day.isWeekend"
    (click)="dayHeaderClicked.emit({day: day})"
    [contextMenu]="basicMenu"
    [contextMenuSubject]="day.date"
    >
    <b>{{ day.date | calendarDate:'weekViewColumnHeader':locale }}</b><br />
    <span
    >{{ day.date | calendarDate:'weekViewColumnSubHeader':locale }}</span
    >
</div>
</div>
</ng-template>

<ng-template #dayHourSegmentTemplate let-segment="segment" let-locale="locale">
    <div
    class="cal-hour-segment"
    [ngClass]="segment.cssClass"
    [contextMenu]="basicMenu"
    [contextMenuSubject]="segment.date"
    >
    <div [hidden]="!segment.isStart" class="cal-time">
        {{ segment.date | calendarDate:'dayViewHour':locale }}
    </div>
</div>
</ng-template>


<div class="alert alert-info">
    Click on a day on the view.
    <strong *ngIf="clickedDate">You clicked on this day: {{ clickedDate | date:'medium' }}</strong>
</div>

<div>
    <div [ngSwitch]="view">

        <mwl-calendar-month-view
        *ngSwitchCase="'month'"
        [viewDate]="viewDate"
        [events]="events | upper2Lower"
        [refresh]="refresh"
        [cellTemplate]="monthCellTemplate"
        (eventClicked)="eventClicked($event)"
        (dayClicked)="clickedDate = $event.day.date">
    </mwl-calendar-month-view>

    <mwl-calendar-week-view
    *ngSwitchCase="'week'"
    [viewDate]="viewDate"
    [events]="events"
    [refresh]="refresh"
    [headerTemplate]="weekHeaderTemplate"
    (eventClicked)="eventClicked($event)"
    (dayHeaderClicked)="clickedDate = $event.day.date">
</mwl-calendar-week-view>

<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"
[events]="events"
[refresh]="refresh"
[hourSegmentTemplate]="dayHourSegmentTemplate"
(eventClicked)="eventClicked($event)">
</mwl-calendar-day-view>
</div>

</div>

<ul class="list-group">
        <li class="list-group-item"
        *ngFor="let event of events" [ngClass]="{'active':event.Id === currentEvent?.Id }">
        {{event.Title}} &nbsp; <br> {{event.CreatedBy}}
        <div style="border:1px solid red;">{{event.Start}} :: {{event.End}}</div>
        <button type="button" class="btn btn-primary" (click)="setCurrentEvent(event)">Edit</button>
         <form (ngSubmit)="updateEvent(event)" [formGroup]="eventForm" *ngIf="event.Id === currentEvent?.Id">
            <input type="text"
            placeholder="Name (required)"
            formControlName="Title" >
            <button class="btn btn-primary">Update</button>
        </form>
        &nbsp;<button
                (click)="deleteEvent(event)"
                type="button" class="btn btn-danger">Delete</button>
    </li>
</ul>


</div>

вот мой файл spec.ts: (где я получаю ошибку) 

import { Component, EventEmitter, OnInit, Output, Input } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { IboCalendarComponent } from './ibo-calendar.component';
import { CalendarShellComponent } from './../../containers/calendar-shell/calendar-shell.component';


describe('IboCalendarComponent', () => {

    let component: IboCalendarComponent;
    let fixture: ComponentFixture<IboCalendarComponent>;

    beforeEach(async(() => {

        TestBed.configureTestingModule({
            declarations: [ IboCalendarComponent, CalendarShellComponent ],
            imports:[CalendarModule]
        })
        .compileComponents();

    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(IboCalendarComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

Как проверить такой сценарий, как я могу написать тест здесь? кто-нибудь ведет меня по правильному пути?

UPDATE Вот мой модуль календаря: (весь импорт происходит здесь) 

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from "@angular/common/http";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { ContextMenuModule } from 'ngx-contextmenu';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { reducerCalendar } from "./state/calendar.reducer";
import { EffectsEvents } from "./state/calendar.effects";


import { IboCalendarComponent } from './components/ibo-calendar/ibo-calendar.component';
import { IboCalendarHeaderComponent } from './ibo-calendar-header/ibo-calendar-header.component';
import { CalendarShellComponent } from './containers/calendar-shell/calendar-shell.component';

import { SharedModule } from "./../shared-components/shared.module";

import { Upper2Lower } from "./../pipes/caseTransform";

const iboCalenderRoutes: Routes = [
{ path: 'iboCalendar', component: CalendarShellComponent }
];


@NgModule({
    declarations: [
        IboCalendarComponent,
        IboCalendarHeaderComponent,
        CalendarShellComponent,
        Upper2Lower
    ],
    imports: [
        CommonModule,
        BrowserAnimationsModule,
        HttpClientModule,
        FormsModule,
        ReactiveFormsModule,
        SharedModule,
        CalendarModule.forRoot({
            provide: DateAdapter,
            useFactory: adapterFactory
        }),
        ContextMenuModule.forRoot({
            useBootstrap4: true
        }),
        RouterModule.forChild(iboCalenderRoutes),
        EffectsModule.forFeature([EffectsEvents]),
        StoreModule.forFeature('reducerCalendar', reducerCalendar)
    ],
    exports: [ ]
})
export class iboCalendarModule { }
...