Just getting started with angular.
I recently developed a custom component that implements the ControlValueAccessor to allow developers to easily access its value. Here's an example of how it can be used:
<app-date [label]="'Date 2'" name='date1' [(ngModel)]="form.date2"
[hidden]="true"></app-date>
I also created a test for this component:
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 currentDate = 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 = currentDate;
// 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();
});
});
In the above code snippet, there is a test called 'test default values' which accesses the properties of the custom component easily.
The question now arises: How can we provide an ngModel and name for this test?