How can I create a unit test for @Inject(DOCUMENT) document: Document in Angular

Question

I'm trying create a test for a redirect that I have in my code:

import {DOCUMENT, Location} from '@angular/common';
....
export class BankSlipConfirmationComponent {

constructor(...
          @Inject(DOCUMENT) private readonly document: Document) {
}

...

cancel() {
    this.document.location.href = `${environment.urlMenu}`;
}

But I can't find how I can Inject in test file the DOCUMENT, example:

...
beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [
    LinkIconeBradescoModule,
    RouterTestingModule,
    ModalMobileBradescoModule
  ],
  declarations: [BankSlipConfirmationComponent, ConfirmationModalComponent],
  providers: [{provider: DOCUMENT, useValue: document}, BankSlipInclusionService]
}).compileComponents();
}));

beforeEach(() => {
  fixture = TestBed.createComponent(BankSlipConfirmationComponent);
  router = TestBed.get(Router);
  service = TestBed.get(BankSlipInclusionService);
  service.change(getValidateBankSlipInclusion());
  component = fixture.componentInstance;
  fixture.detectChanges();
});
it('Test when user click in cancel button', () => {
    component.cancel();
});

When I run the test I had received this message:

console.error

node_modules/jest-environment-jsdom-fifteen/node_modules/jsdom/lib/jsdom/virtual-console.js:29

Error: Not implemented: navigation (except hash changes)
    at module.exports (C:\Desenvolvimento\Quero-Receber-PDPJ\pdpj-fed-account-receivables\node_modules\jest-environment-jsdom-fifteen\node_modules\jsdom\lib\jsdom\browser\not-implemented.js:9:17)
    at navigateFetch (C:\Desenvolvimento\Quero-Receber-PDPJ\pdpj-fed-account-receivables\node_modules\jest-environment-jsdom-fifteen\node_modules\jsdom\lib\jsdom\living\window\navigation.js:77:3)
    at exports.navigate (C:\Desenvolvimento\Quero-Receber-PDPJ\pdpj-fed-account-receivables\node_modules\jest-environment-jsdom-fifteen\node_modules\jsdom\lib\jsdom\living\window\navigation.js:55:3)
    at LocationImpl._locationObjectNavigate (C:\Desenvolvimento\Quero-Receber-PDPJ\pdpj-fed-account-receivables\node_modules\jest-environment-jsdom-fifteen\node_modules\jsdom\lib\jsdom\living\window\Location-impl.js:29:5)
    at LocationImpl._locationObjectSetterNavigate (C:\Desenvolvimento\Quero-Receber-PDPJ\pdpj-fed-account-receivables\node_modules\jest-environment-jsdom-fifteen\node_modules\jsdom\lib\jsdom\living\window\Location-impl.js:23:17)
    at LocationImpl.set href [as href] (C:\Desenvolvimento\Quero-Receber-PDPJ\pdpj-fed-account-receivables\node_modules\jest-environment-jsdom-fifteen\node_modules\jsdom\lib\jsdom\living\window\Location-impl.js:45:10)
    at Location.set href [as href] (C:\Desenvolvimento\Quero-Receber-PDPJ\pdpj-fed-account-receivables\node_modules\jest-environment-jsdom-fifteen\node_modules\jsdom\lib\jsdom\living\generated\Location.js:135:29)
    at BankSlipConfirmationComponent.cancel (C:\Desenvolvimento\Quero-Receber-PDPJ\pdpj-fed-account-receivables\src\app\bank-slip-confirmation\bank-slip-confirmation.component.ts:568:33)
    at C:\Desenvolvimento\Quero-Receber-PDPJ\pdpj-fed-account-receivables\test\bank-slip-confirmation.component.spec.ts:51:15
    at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (C:\Desenvolvimento\Quero-Receber-PDPJ\pdpj-fed-account-receivables\node_modules\zone.js\dist\zone.js:391:26) undefined

However, I'm not understanding what is the problem...

Can you help me?

Thanks!

Answer 1

I believe you could skip the following to provide the DOCUMENT:

{provider: DOCUMENT, useValue: document}

The injected document can be used directly as follows:

let mockDocument: Document;

beforeEach(() => {
  fixture = TestBed.createComponent(BankSlipConfirmationComponent);
  mockDocument = TestBed.inject(DOCUMENT);
});