Jest+angular testing routerLink with navigateByUrl

Question

I'm wondering how to be more specific about obtaining the url of redirection when user click a router link... In this case my template would be like :

<div>
    <a title="Logo" js-selector="logo" class="some-class" routerLink="/session/login">
      <img some image/>
    </a>
</div>

Thus in test I have tried with two variants

The first one would be injecting the router on the mock, then spying on its method navigateByUrl, checking if this method is called when the link is clicked:

OPTION 1

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let page: Page;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [MyComponent],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(NavigationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    page = new Page();
  });

  describe('When clicking logo and redirecting to login page', () => {
    it('Should redirect to login page', inject([Router], (Router: Router) => {
      const navigateSpy = jest.spyOn(Router, 'navigateByUrl').mockImplementation();
      const brandLogoLink = page.getBrandLogoLink();

      brandLogoLink.click();

      expect(navigateSpy).toHaveBeenCalledWith(['/session/login']);
    }));
  });

  class Page {
    private _el: HTMLElement;

    constructor() {
      this._el = fixture.nativeElement;
    }

    getLogoLink(): HTMLElement {
      return this._el.querySelector('[js-selector="logo"]')====>GETTING THE CLICKABLE HTMLELEMENT
    }
  }
});

In this case i receive an object but can´t find the wait to be a bit more accurate about accessing it to expose the link of redirection

The other option was creating an stub class mocking the navigateByUrl method and inject is as class value in the router provider

OPTION 2

STUB

export class RouterStub {
  navigateByUrl(url: string) {
    return url;
  }
}


TEST


describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let page: Page;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [MyComponent],
      providers: [{ provide: Router, useClass: RouterStub }],==>injecting stub class
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    page = new Page();
  });

  describe('When clicking logo and redirecting to login page', () => {
    it('Should redirect to login page', () => {
      const navigateSpy = jest.spyOn(Router, 'navigateByUrl' as any).mockImplementation();

      const brandLogoLink = page.getBrandLogoLink();
     
      brandLogoLink.click();

      expect(navigateSpy).toHaveBeenCalledWith(['/session/login']);
    });
  });

  class Page {
    private _el: HTMLElement;

    constructor() {
      this._el = fixture.nativeElement;
    }

    getBrandLogoLink(): HTMLElement {
      return this._el.querySelector('[js-selector="brand-logo-registration"]');
    }
  }
});

In this case i receive a TypeError: Cannot read property 'root' of undefined

Just wondering if in these two options which would be the best approach, and how to improve it.

Thanks!!!