我是使用角度的新手。
我创建了一个实现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和名称?
为了提供一种允许我测试自定义组件的机制,我在测试中创建了另一个使用测试组件本身的组件。使用@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 {
}
}