Ошибка при выполнении теста кармы жасмина: не удается связать свойство ввода, поскольку оно не является известным свойством компонента - PullRequest
0 голосов
/ 24 сентября 2019

Я пытаюсь запустить угловые тесты, используя карму и жасмин, и получаю следующую ошибку в одном из моих спецификационных файлов.Я вижу, что html-компоненты имеют компонент MessageViewer, на который ссылаются как на дочерний компонент.

Я создал фиктивный компонент для дочернего элемента, но что я должен сделать для свойства input.Как вы можете видеть, свойство input имеет тип MessageViewerModel.MessageViewerModel относится к типу класса. Нужно ли имитировать?

вот так

<div *ngIf="messageViewerModel.messages.length > 0" style="padding-top: 5px;">
            <app-message-viewer [messageViewer]="messageViewerModel"></app-message-viewer>

 </div>

При выполнении теста я получаю следующую ошибку.

Can't bind to 'messageViewer' since it isn't a known property of 'app-message-viewer'.
1. If 'app-message-viewer' is an Angular component and it has 'messageViewer' input, then verify that it is part of this module.
2. If 'app-message-viewer' 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. ("messageViewerModel.messages.length > 0" style="padding-top: 5px;">
            <app-message-viewer [ERROR ->][messageViewer]="messageViewerModel"></app-message-viewer>
        </div>
    </div>

Я пыталсяссылаться на MessageViewerComponent, который в основном является app-message-viewer в spec-файле, но все равно получает вышеуказанную ошибку

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';

import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AuthService } from '../../../services/auth.service';
import { AlertService, MessageSeverity, DialogType } from '../../../services/alert.service';
import { ConfigurationService } from '../../../services/configuration.service';
import { LocalStoreManager } from '../../../services/local-store-manager.service';
import { AppTitleService } from '../../../services/app-title.service';
import { AppTranslationService, TranslateLanguageLoader } from '../../../services/app-translation.service';
import { NotificationService } from '../../../services/notification.service';
import { NotificationEndpoint } from '../../../services/notification-endpoint.service';
import { EndpointFactory } from '../../../services/endpoint-factory.service';
import { TradeService } from '../../../services/trade/trade.service';
import { TradeEndpoint } from '../../../services/trade/trade-endpoint.service';
import { expand } from 'rxjs/operators';
import { StripOrderComponent } from './strip-order.component';
import { Order } from '../../../models/trade/order/order.model';
import { CurrencyComponent } from '../../../components/shared/currency/currency.component';
import { CurrencyFormatPipe } from '../../../pipes/currency-format/currency-format.pipe';
import { OrderService } from '../../../services/order/order.service';
import { OrderEndpoint } from '../../../services/order/order-endpoint.service';
import { DateService } from '../../../services/dates/dates.service';
import { ValidationService } from '../../../services/validation/validation.service';
import { ValueDateService } from '../../../services/dates/value-date.service';
import { OrderRow } from '../../../models/trade/order/order-row.model';
import { ConfirmModalComponent } from '../../shared/confirm-modal/confirm-modal.component';
import { ModalDirective } from 'ngx-bootstrap/modal';
import { ComponentLoaderFactory } from 'ngx-bootstrap/component-loader';
import { PositioningService } from 'ngx-bootstrap/positioning';
import { MessageViewerComponent } from  '../../shared/message-viewer/message-viewer.component';

describe('StripOrderComponent', () => {
    let component: StripOrderComponent;
    let fixture: ComponentFixture<StripOrderComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                HttpClientModule,
                RouterTestingModule,
                FormsModule,
                TranslateModule.forRoot({
                    loader: {
                        provide: TranslateLoader,
                        useClass: TranslateLanguageLoader
                    }
                })
            ],
            declarations: [
                MessageViewerComponent,
                StripOrderComponent,
                CurrencyComponent,
                ConfirmModalComponent,
                ModalDirective
            ],
            providers: [
                AuthService,
                AlertService,
                ConfigurationService,
                LocalStoreManager,
                AppTitleService,
                AppTranslationService,
                NotificationService,
                NotificationEndpoint,
                EndpointFactory,
                TradeService,
                TradeEndpoint,
                OrderService,
                OrderEndpoint,
                CurrencyFormatPipe,
                DateService,
                ValidationService,
                ValueDateService,
                ComponentLoaderFactory,
                PositioningService
            ]
        })
            .compileComponents();
    }));

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

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

Компонент MessageViewer

@Component({
  selector: 'app-message-viewer',
  template: ''
})
class MessageViewerComponent {
   @Input messageViewer : MessageViewerModel    
}

Класс Mock

  class MockMessageViewerModel {
  messages: string;
 }

@Component({
  selector: 'app-message-viewer',
  template: ''
})
class MockMessageViewerComponent {
   @Input messageViewer : MockMessageViewerModel    
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...