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

Question

I am new using angular.

I created a custom component which implements the ControlValueAccessor in order to provide the value to developers who are going to use it. The following is an example of it use

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

I wrote this test for the 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 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();
  });
});

In the code above we can see the test named 'test default values' which easily access to the properties of the custom components.

The question at this point is: how to provide a ngModel and name to this test?

Answer 1

In order to provide a mechanism that allows to me to test my custom component, I created another component in my test who uses the test component itself. Using the @ViewChild I can access to element in 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 {
  }
}