Тестовый подкласс Angular 6 с декоратором @Input - PullRequest
Новая
       9

Тестовый подкласс Angular 6 с декоратором @Input

0 голосов
/ 18 октября 2018

Кажется, нет ответа на связанные вопросы, поэтому я задаю этот вопрос для моего конкретного случая.

Я ищу модульное тестирование компонента Angular 6, который является подклассом базовогосоставная часть.Этот базовый компонент имеет декоратор @Input.Абстрактный базовый класс, подобный следующему: 

import { Component, Input } from '@angular/core';
import { dateToUsFormat } from '../../helpers/date-helpers';

@Component({
    selector: 'abstract-widget',
    templateUrl: './abstract-widget.component.html',
    styleUrls: ['./abstract-widget.component.scss']
})

export class AbstractWidgetComponent {
    @Input() widgetData;
    constructor() {
    }
}

Класс реализации, подобный следующему: 

import { Component, OnInit } from '@angular/core';
import { AbstractWidgetComponent } from '../abstract-widget/abstract-widget.component';

@Component({
  selector: 'widget-title',
  templateUrl: './widget-title.component.html',
  styleUrls: ['./widget-title.component.scss']
})

export class WidgetTitleComponent extends AbstractWidgetComponent implements OnInit {

  ngOnInit() {
  }
  get titleReturn () {
    return widget_data.visual.title;
  }
}

Итак, это выглядит довольно просто.К сожалению, написание модульных тестов для этого небольшого куска кода кажется невозможным.Что я хочу сделать, это создать экземпляр компонента widget_title с AbstractWidgetComponent, имеющим определенные widgetData.

Мой код до сих пор выглядит так: 

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

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [ MatCardModule, AbstractWidgetComponent ],
            declarations: [ WidgetTitleComponent ],
            schemas: [ NO_ERRORS_SCHEMA  ]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(WidgetTitleComponent);
        component = fixture.componentInstance;
        component.widgetData = {visual: {title: 'This is a Sample Title'}};
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
        expect(component.titleReturn()).toBe('This is a Sample Title');
    });
});

Этот код предоставляет мне ошибку "не можетнайти имя 'widget_data'. "На что я говорю: «Конечно же… Но куда я это положу?»Я пробовал несколько вариантов, но я немного запутался.

Я не эксперт ни в Angular, ни в инъекциях, но я просмотрел несколько ресурсов, в том числе: Эта ссылка на GitHub, ссвязанный с ним пост в блоге и этот пост Microsoft. Я (возможно, ошибочно) надеялся на довольно простой способ создания экземпляра базового класса и его автоматического запуска через Jasmine.Обе эти ссылки предполагают создание совершенно нового класса.

Есть ли способ сделать это простым , или мне нужно будет создать тестовый класс инъекций для базового класса?

Примечание по разрешению:Я добавил no_errors_schema, как и ожидалось, и просто установил для свойства компонента значение, которое я хотел получить в beforeEach.

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

На мой взгляд, проблема не связана с жасмином или с тем фактом, что вы расширяете другой компонент (обычная подача приведенного выше кода также должна вызывать ту же ошибку).

«widget_data» не существует, и я предполагаю, что вы хотите получить доступ к какому-либо свойству расширенного «widgetData» (@Input)?

Если это так, вы должны получить к нему доступ, используя вместо этого «this.widgetData».Это должно исправить вашу ошибку, и после этого вы сможете протестировать ваш компонент как «нормальные» компоненты, используя @Input.(и, как уже упоминалось, ваши компоненты хранятся в декларациях вместо импорта).

https://angular.io/guide/testing#component-with-inputs-and-outputs

Если нет, и вы хотите получить доступ к «widget_data.visual.title», вам нужно объявитьЭто.

0 голосов
/ 18 октября 2018

Вы должны иметь AbstractWidgetComponent в массиве declarations.Импорт для всех модулей, объявленных с @ngModule.

. Вы также можете игнорировать их, используя NO_ERRORS_SCHEMA: подробности в этом сообщении

...