Как указать свойства ngModel и name во время углового теста пользовательского компонента - PullRequest
Новая
       10

Как указать свойства ngModel и name во время углового теста пользовательского компонента

0 голосов
/ 10 января 2019

Я новичок в использовании угловых.

Я создал пользовательский компонент, который реализует ControlValueAccessor для предоставления значения разработчикам, которые собираются его использовать. Ниже приведен пример использования 

 <app-date [label]="'Fecha 2'" name='date1' [(ngModel)]="formulario.date2"
                                            [hidden]="true"></app-date>

Я написал этот тест для компонента: 

import {async, ComponentFixture, ComponentFixtureAutoDetect, TestBed} from '@angular/core/testing';
import {FormsModule} from '@angular/forms';
import {BsDatepickerConfig, BsLocaleService} from 'ngx-bootstrap';
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';

import {CUSTOM_DATE_CONTROL_VALUE_ACCESSOR, DateComponent} from './date.component';
import {UiOmdModule} from '../ui-omd.module';

const date = new Date();

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [],
      imports: [
        FormsModule,
        UiOmdModule
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA, CUSTOM_DATE_CONTROL_VALUE_ACCESSOR],
      providers: [
        BsDatepickerConfig,
        BsLocaleService,
        {provide: ComponentFixtureAutoDetect, useValue: true}
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DateComponent);
    component = fixture.componentInstance;
    component.value = date;
    // fixture.detectChanges();
  });

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

  it('test default values', () => {
    expect(component.editable).toBe(true);
    expect(component.hidden).toBe(false);
    expect(component.showWeekNumbers).toBe(false);
    expect(component.format).toBe('YYYY-MM-DD');
  });

  it('test component contains a label DOM element', () => {
    label = fixture.nativeElement.querySelector('label');
    expect(label).toBeTruthy();
  });
});

В приведенном выше коде мы видим тест с именем 'test default values', который легко обращается к свойствам пользовательских компонентов

Вопрос на данный момент: как предоставить ngModel и name для этого теста?

1 Ответ

0 голосов
/ 15 января 2019

Чтобы создать механизм, позволяющий мне тестировать мой пользовательский компонент, я создал еще один компонент в своем тесте, который использует сам тестовый компонент. Используя @ViewChild я могу получить доступ к элементу в тесте 

@Component( {
  selector: 'app-poc-criteria-select',
  template: '<app-criteria-select ' +
   ' [(ngModel)]="listaOtdelc" ' +
   ' [allElements]="allElementsForTest"  ' +
   ' name="listaOtdelc" ' +
   ' [elementId]="\'otdelc\'"  ' +
   ' [title]="\'Lista de tabla OTDE de LC\'"  ' +
   ' [brand]="\'LC\'"  ' +
   ' [table]="\'OTDE\'"> ' +
   ' </app-criteria-select> '
})
class CriteriaSelectSpecComponent implements OnInit {
  listaOtdelc;
  isHidden = false;
  allElementsForTest: boolean;
  @ViewChild(CriteriaSelectComponent) componentToTest: CriteriaSelectComponent;

  ngOnInit(): void {
  }
}
...