如何在自定义组件的 angular 测试期间指定 ngModel 和名称属性

Question

我是新手 angular。

我创建了一个实现 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？

Answer 1

为了提供一种允许我测试自定义组件的机制，我在测试中创建了另一个使用测试组件本身的组件。使用 @ViewChild 我可以访问 test

中的元素

@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 {
  }
}

如何在自定义组件的 angular 测试期间指定 ngModel 和名称属性

How to specify ngModel and name properties during an angular test of custom component

angular

typescript

testing

angular-components

angular-test