Angular Unit Testing Tests Failing | Angular Community | Page 1

regal wadi Mar 11, 2023, 6:17 PM

#

describe('DroTaskCardComponent', () => {
  let component: DROTaskCardComponent;
  let fixture: ComponentFixture<DROTaskCardComponent>;
  let routerSpy: jasmine.SpyObj<Router>;
  let routeSpy: jasmine.SpyObj<ActivatedRoute>;
  let item: ITask<DROTarget>
  beforeEach(async () => {
    const dueDate = new Date();
    item = blah;
await TestBed.configureTestingModule({
      declarations: [ DROTaskCardComponent, Ellipsis, UserChip ],
      imports: [LoggerTestingModule, RouterTestingModule, HttpClientTestingModule, StoreModule.forRoot({my: testReducer })]
    })
    .compileComponents();

    fixture = TestBed.createComponent(DROTaskCardComponent);
    component = fixture.componentInstance;
    component.item = item;
    routerSpy = TestBed.inject(Router) as jasmine.SpyObj<Router>;
    routeSpy = TestBed.inject(ActivatedRoute) as jasmine.SpyObj<ActivatedRoute>;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
  it('should navigate to details page when allowDetailsPageClick is true', () => {
    component.allowDetailsPageClick = true;
    component.goToDetails(1);
    expect(routerSpy.navigate).toHaveBeenCalledWith(['/fulfillment/dro/details', 1], { relativeTo: routeSpy.root });
  });
  it('should convert the due date to a full date for calculation of time remaining', () => {
    const dueDate = new Date('2023-03-13');
    const expectedDate = new Date('2023-03-13T17:00:00');
    console.log("tesT" + component.getDueDate(dueDate).toString());
    expect(component.getDueDate(dueDate)).toEqual(expectedDate);
  });```

low galleon Mar 11, 2023, 6:34 PM

#

As the message says, you expect the routerSpy.navigate to be a spied function, but it's not, because you've never made it a spied function.
The line TestBed.inject(Router) as jasmine.SpyObj<Router> means: "trust me, TypeScript compiler, inject() will return a SpyObj". But it won't, because you've never provided a SpyObj for this token. So you're just lying to yourself with this line.

regal wadi Mar 11, 2023, 7:08 PM

#

Thank you for engaging on this issue. Why are none of my tests at least giving values?

regal wadi Mar 11, 2023, 7:09 PM

#

low galleon As the message says, you expect the routerSpy.navigate to be a spied function, b...

I changed it to ```ts
routerSpy = jasmine.createSpyObj('Router', ['navigate']);

#

But end up with the same result

low galleon Mar 11, 2023, 8:13 PM

#

That creates a spy object, but in order for the component to get that spy object when Angular injects it, you must provide it in your testing module:

TestBed.configureTestingModule({
  ...,
  providers: [
    { provide: Router, useValue: routerSpy }
  ]
});

Read the chapter about testing of your book: it's all explained there.

regal wadi Mar 13, 2023, 3:56 PM

#

Okay I will review that again. Thank you!

#Angular Unit Testing Tests Failing