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