Ionic 3 testing cannot find button with by.css('button')

I am trying to get my button, which I have given the classname loginButton. My test constantly fails and the error says: "Expected the method spy push to have been called but it was never called". I am testing with karma and jasmine. Maybe it is because it cannot find the button ?

test class:

import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import {IonicModule, NavController} from 'ionic-angular';
import {StatusBar} from "@ionic-native/status-bar";
import {SplashScreen} from "@ionic-native/splash-screen";
import {NavMock} from "../../mocks";
import {By} from "@angular/platform-browser";
import {DebugElement} from "@angular/core";
import {LoginPage} from "./login";
import {MyApp} from "../../app/app.component";
import {HomePage} from "../home/home";

let comp: LoginPage;
let fixture: ComponentFixture<LoginPage>;
let de: DebugElement;

describe('Component: Login forward', () => {

  beforeEach(async(() => {

    TestBed.configureTestingModule({

      declarations: [MyApp, LoginPage],

      providers: [
        {
          provide: NavController,
          useClass: NavMock
        },
        [StatusBar],
        [SplashScreen]
      ],

      imports: [
        IonicModule.forRoot(MyApp)
      ]

    }).compileComponents();

  }));

  beforeEach(() => {

    fixture = TestBed.createComponent(LoginPage);
    comp    = fixture.componentInstance;

  });

  afterEach(() => {
    fixture.destroy();
    comp = null;
    de = null;
  });

  it('should be able to navigate to home page', () => {

    let navCtrl = fixture.debugElement.injector.get(NavController);
    spyOn(navCtrl, 'push');

    de = fixture.debugElement.query((By.css('button')));
    de.triggerEventHandler('click', null);

    expect(navCtrl.push).toHaveBeenCalled();
  });
});

html page:

<ion-header>

  <ion-navbar>
    <ion-title>Login</ion-title>
  </ion-navbar>

</ion-header>


<ion-content class="master">
    <div class="loginWindow">
      <ion-item>
        <ion-label fixed>Sign in</ion-label>
      </ion-item>
      <ion-item>
        <ion-label fixed>Email</ion-label>
        <ion-input type="email" name="email"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label fixed>Password</ion-label>
        <ion-input type="password" name="password"></ion-input>
      </ion-item>
      <ion-item>
        <div padding>
          <button ion-button (click)="doLogin()" class="loginButton" color="avioBlue" block>Sign in</button>
        </div>
      </ion-item>
    </div>
</ion-content>