Can't find button inside a *ngIf statement while testing because statement involves a mocked class

I'm building an application where people can authenticate with Github in Angular. I've build a button to do so. When trying to test this button, the test doesn't seem to find the button. I think it has to do something with the *ngIf statement.

login.component.spec.ts:

    class MockAuthService implements Partial<AuthService> {
  isAuthenticated() {
    return 'Mocked';
  }

  isLoggedIn(): boolean {
    return true;
  }

  loginwithGithubProvider() {
    return new Promise((resolve, reject) => resolve());
  }

  logout(): Promise<boolean | Observable<never> | never> {
    return new Promise(function(resolve, reject) { resolve(); });
  }
}


describe('LoginComponent', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  let componentService: AuthService;
  const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
  const ghServiceSpy = jasmine.createSpyObj('GithubService', ['methodName']);

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MatCardModule,
        AngularFireModule.initializeApp(environment.firebase),
        RouterModule.forRoot([{path: '', component: LoginComponent}]),
      ],
      declarations: [
        LoginComponent
      ],
      providers: [
        AuthService,
        AngularFirestore,
        AngularFireAuth,
        HttpClient,
        HttpHandler
      ]
    });
    TestBed.overrideComponent(LoginComponent, {
      set: {
        providers: [
          {provide: AuthService, useClass: MockAuthService},
          {provide: Router, useValue: routerSpy},
          {provide: GithubService, useValue: ghServiceSpy},
        ]
      }
    });

    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    componentService = fixture.debugElement.injector.get(AuthService);
  }));

  it('Logginbutton calls signInWithGithub', async(() => {
    spyOn(component, 'signInWithGithub');
    const button =  fixture.debugElement.nativeElement.querySelector('#signInWithGithub');
    button.click();
    fixture.whenStable().then(() => {
      expect(component.signInWithGithub).toHaveBeenCalled();
    });
  }));

login.component.html:

 <div *ngIf="authService.isLoggedIn; else loginTemplate">
    <h1>Welcome </h1>
    <img src=" ">
    <br />
    <button mat-flat-button class="btn-github" id="logout" (click)="logout()">
      <i class="fab fa-github"></i> Stop authentication Github
    </button>
  </div>

  <ng-template #loginTemplate>
    <h1>FullProjectCloner</h1>
    <button mat-flat-button class="btn-github" id="signInWithGithub" (click)="signInWithGithub()">
      <i class="fab fa-github"></i> Authenticate with github
    </button>
    <p class="authError"></p>
  </ng-template> 

The error i get:

TypeError: Cannot read property 'click' of null