Same code, one with beforeEach and the other one without. The second breaks. I want to understand why…

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LoginPage } from './login.page';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { TestBedHelper } from 'src/app/helpers/tests/testbedhelper';
import { Router, RouterModule } from '@angular/router';

describe('LoginPage', () => {
  let fixture: ComponentFixture<LoginPage>;
  let router: Router
  let mockGetStorage: any = null

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [LoginPage],
      imports: [FormsModule, IonicModule, RouterModule.forRoot([])],
      providers: [TestBedHelper.mockStorage(mockGetStorage)]
    }).compileComponents();

    fixture = TestBed.createComponent(LoginPage);
    router = TestBed.inject(Router)
    fixture.detectChanges();
  });

  it('should be able to login', () => {
    const emailInput = fixture.debugElement.nativeElement.querySelector('#email-input');
    const passwordInput = fixture.debugElement.nativeElement.querySelector('#password-input');
    const emailLoginButton = fixture.debugElement.nativeElement.querySelector('#email-login-button');
  
    emailInput.value = '[email protected]';
    emailInput.dispatchEvent(new Event('ionInput'))
    passwordInput.value = 'dummy1234';
    passwordInput.dispatchEvent(new Event('ionInput'));

    fixture.detectChanges()

    expect(emailLoginButton.disabled).toBeFalsy()
  })
});

If I change my code to this:

  it('should be able to login', async () => {
    await TestBed.configureTestingModule({
      declarations: [LoginPage],
      imports: [FormsModule, IonicModule, RouterModule.forRoot([])],
      providers: [TestBedHelper.mockStorage(mockGetStorage)]
    }).compileComponents();

    fixture = TestBed.createComponent(LoginPage);
    router = TestBed.inject(Router)
    fixture.detectChanges();

    const emailInput = fixture.debugElement.nativeElement.querySelector('#email-input');
    const passwordInput = fixture.debugElement.nativeElement.querySelector('#password-input');
    const emailLoginButton = fixture.debugElement.nativeElement.querySelector('#email-login-button');
  
    emailInput.value = '[email protected]';
    emailInput.dispatchEvent(new Event('ionInput'))
    passwordInput.value = 'dummy1234';
    passwordInput.dispatchEvent(new Event('ionInput'));

    fixture.detectChanges()

    expect(emailLoginButton.disabled).toBeFalsy()
  })
});

It fails with the following error:

        Expected true to be falsy.                                                                                                                                                            
            at <Jasmine>                                                                                                                                                                      
            at UserContext.<anonymous> (src/app/pages/session/login/login.page.spec.ts:35:39)                                                                                                 
            at Generator.next (<anonymous>)                                                                                                                                                   
            at asyncGeneratorStep (node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:1)                                                                                           
            at _next (node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:22:1)   

The button code is as follows:

          <ion-button
              id="email-login-button"
              size="large"
              expand="block"
              (click)="emailLogin()"
              [disabled]="validateForm()">
            Sing in
          </ion-button>

and the validateForm is:

  validateForm(): boolean {
    return !this.email || !this.password
  }

What am I missing? I have being banging my head against a wall for hours now…

The reason why I want this to work is to be able to use different mocks for my storage