lundi 15 février 2021

How to test a component with injected data?

I am passing data from parent component to child component using an injector.

export class ParentComponent OnInit {
  ...
  public OpenStaffTerritory(staffTerritory: StaffTerritory) {
     this.tabService.AddTab(staffTerritory.name, StaffTerritoryComponent, Injector.create({ providers: [{ provide: StaffTerritory, useValue: staffTerritory, deps: [] }], parent: this.injector }), true);
  }
  ...
}

staff-territory.component.html:

<mat-card>
  <form>
    <div>
      <div>
        <mat-form-field>
          <input matInput [(ngModel)]="staffTerritory.name" name="name">
        </mat-form-field>
      </div>
    </div>
  </form>
</mat-card>

staff-territory.component.ts:

@Component({
  selector: 'app-staff-territory',
  templateUrl: './staff-territory.component.html',
  styleUrls: ['./staff-territory.component.scss']
})
export class StaffTerritoryComponent implements OnInit {
  public staffTerritory: StaffTerritory;

  constructor(staffTerritory: StaffTerritory) {

    if (staffTerritory != undefined) {
      this.staffTerritory = staffTerritory;
    }
    else {
      this.staffTerritory = new StaffTerritory();
    }
  }

I'm trying to pass fake data to a component and test that two-way binding works and that the field in the DOM has the desired value. But so far I am getting an error in the test with text "Error: Expected '' to contain 'StaffTerritory'.". Please tell me how to do it correctly?

staff-territory.component.spec.ts:

describe('StaffTerritoryComponent', () => {
  let component: StaffTerritoryComponent;
  let fixture: ComponentFixture<StaffTerritoryComponent>;
  let httpClient: HttpClient;
  let httpTestingController: HttpTestingController;
  let staffTerritoryStub: StaffTerritory = { 
    id: 1, 
    name: 'StaffTerritory', 
    regionCode: 29, 
    createDate: new Date(),
    creatorId: 0,
    dateFrom: new Date(),
    dateTo: null,
    dateToSelect: new Date(),
    dateFromChanger: 0,
    dateToChanger: null, 
  };

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ StaffTerritoryComponent ],
      imports: [ 
        HttpClientTestingModule, 
        MaterialModule, 
        MatCardModule,
        MatFormFieldModule,
        FormsModule,
        BrowserAnimationsModule, 
        ToastrModule.forRoot() 
      ],
      providers: [
        MatDialog,
        { provide: StaffTerritory, useValue: staffTerritoryStub },
        { provide: APP_CONFIG, useValue: APP_CONFIG }
      ]
    })
    .compileComponents();
    httpClient = TestBed.inject(HttpClient);
    httpTestingController = TestBed.inject(HttpTestingController);
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(StaffTerritoryComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  it('should render title in a input tag', () => {
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('input').textContent).toContain('StaffTerritory');
  });
});

Aucun commentaire:

Enregistrer un commentaire