Запустите юнит-тест с * ngFor и вводом - PullRequest
Новая
       3

Запустите юнит-тест с * ngFor и вводом

0 голосов
/ 11 января 2020

Я новичок в Angular. Я создал компонент, который отображает кнопки, используя * ngFor.

ts файл: 

        import { Component, OnInit, Input } from '@angular/core';

    @Component({
      selector: 'display-button',
      templateUrl: './display-button.component.html',
      styleUrls: ['./display-button.component.scss']
    })
    export class DisplayButtonComponent implements OnInit {

      @Input() compInput: any;
      buttons: any;

      constructor() { }

      ngOnInit() {
        if (this.compInput) {
          this.buttons = this.compInput.scriptButtonData.buttons;
        }
      }

      buttonClicked(selectedValue) {
        //do something
        }
      }
    }

html файл: 

<button class="scriptButton" *ngFor="let button of buttons" (click)="buttonClicked(button.value)" >{{button.name}}</button>

spe c .ts файл: 

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { InlineScriptButtonComponent } from './display-button.component';
import {By} from '@angular/platform-browser';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DisplayButtonComponent]
    })
    .compileComponents();
  }));

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

  fit('should contain label', () => {
    component.compInput= {
      scriptButtonData: {
        type: "scriptButton",
        buttons: [
          {
            name: "Proceed",
            value: "Yes"
          },
          {
            name: "Cancel",
            value: "No"
          },
        ]
      },
      someOtherProperty: null,
    };
    fixture.detectChanges();
    let buttonLabels = fixture.debugElement.queryAll(By.css('scriptButton'));
    expect( buttonLabels.length).toBe(2);
  });

});

Я пишу юнит-тесты, чтобы проверить, отображаются ли 2 кнопки. Когда я запускаю тесты, он завершается неудачно, потому что buttonLabels.length равен 0. Даже если я инициализирую входную переменную compInput в тесте, кажется, что он нулевой, когда он встречает строку 

if (this.compInput) {

Почему это значение NULL? Что я делаю неправильно? Кроме того, способ обмана - инициализация теста следующим образом: 

component.buttons = [
  {
    name: "Proceed",
    value: "Yes"
  },
  {
    name: "Cancel",
    value: "No"
  },
]

Несмотря на то, что тест проходит с добавлением вышеуказанной строки, это обман, так как я не проверяю код в функции ngOnInit.

Почему значения, которые я устанавливаю для component.compInput, недоступны для теста. Как правильно проверить эту функциональность?

Ответы [ 2 ]

0 голосов
/ 11 января 2020

Вызовите ngOnInit () из вашего теста, в противном случае это будет сделано до того, как вы зададите component.compInput. Также ищите document.getElementsByClass ('scriptButton'), чтобы получить ваши элементы.

Я бы также НЕ вызывал ваш оператор if непосредственно из вашего ngOnInit (), но поместил бы его в метод, который вызывается из ngOnInit (). Мне лично нравится эта стилистика c, которая делает хуки жизненного цикла немного чище.

Вот ваше заявление о соответствии с обновлениями. 

fit('should contain label', () => {
    component.compInput = {
        scriptButtonData: {
        type: 'scriptButton',
        buttons: [
        {
          name: 'Proceed',
          value: 'Yes'
        },
        {
          name: 'Cancel',
          value: 'No'
        }
      ]
    },
    someOtherProperty: null
  };

  component.ngOnInit();  //need to invoke ngOnInit()

  fixture.detectChanges();
  let buttonLabels = document.getElementsByClassName('scriptButton');
  expect(buttonLabels.length).toBe(2);
 });
0 голосов
/ 11 января 2020

вы указываете неправильный класс CSS, поэтому он не находит кнопок с этим классом. используйте вместо этого «scriptButton».

...