angular - Får "Expected undefined to be truthy." när man testar för att se om komponenten är skapad

Som en del av att utöka och uppdatera mina färdigheter har jag fått i uppdrag att skriva Jasmine/Karma-tester för en Angular 9-applikation. Jag har genomfört en onlinehandledning och gjort några Google-sökningar. Jag började skriva mina första okontrollerade testfall och stöter på något som jag ännu inte har hittat ett sätt förbi.

Min HTML är detta:

<div class="container-fluid">
<div class="center">
  <div class="welcome-container">
    <div class="title">PCPlan</div>
  </div>
  <mat-card>
    <div class="login-form">
      <div class="inputs">
        <mat-form-field class="formfield-min-width">
          <input matInput type="text" placeholder="AD Username" [(ngModel)]="model.username" (keyup.enter)="login()" tabindex="0" autofocus="true"/>
          <button mat-button *ngIf="model.username" matSuffix mat-icon-button aria-label="username" (click)="model.username=''" tabindex="-1">
            <i class="fas fa-times-circle"></i>
          </button>
        </mat-form-field>

        <mat-form-field class="formfield-min-width">
          <input matInput type="password" placeholder="Password" [(ngModel)]="model.password" (keyup.enter)="login()" tabindex="0" autofocus="true"/>
          <button mat-button *ngIf="model.password" matSuffix mat-icon-button aria-label="password" (click)="model.password=''" tabindex="-1">
            <i class="fas fa-times-circle"></i>
          </button>
        </mat-form-field>
      </div>

      <button mat-raised-button color="primary" (click)="login()" class="login-button">LOG IN</button>

      <div>
        <div *ngIf="errMsg" style="color:indianred; font-weight: bold">{{errMsg}}</div>
      </div>

    </div>
  </mat-card>
</div>

Min .ts-fil är:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthGuard } from 'src/app/routing/guards/auth.guard';
import { AuthenticationService } from 'src/app/services/shared/authentication.service';
import { LoginService } from 'src/app/services/shared/login.service';
//import { UserAPI } from 'src/app/services/api/userAPI.service';
import { take } from 'rxjs/operators';
import { authBaseUrl, pcplanServiceBaseUrl } from 'src/environments/environment';
//import { MatToolbarModule, MatIconModule, MatFormFieldModule, MatCardModule, MatInputModule, MatButtonModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { CdkTableModule} from '@angular/cdk/table';
import {DataSource} from '@angular/cdk/table';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})

export class LoginComponent implements OnInit {
  model: any = {
    username: '',
    password: '',
  };
  errMsg = '';
  constructor(
    private router: Router,
    private loginService: LoginService,
    private authenticationService: AuthenticationService,
   // public userAPI: UserAPI,
    public Authinacate: AuthGuard,
    private http: HttpClient,
  ) { }
  userInfo = this.authenticationService.getUserInfo();
  userInTestTableValue = '';
  userAccessChecked = false;

  ngOnInit() {
    // reset login status
    console.log("Initializing: login.component.ts")


    this.loginService.logout();
  }

  login() {
    this.loginService.getToken(this.model.username, this.model.password)
      .subscribe(resp => {
        if (!resp.user || resp.user.token === 'INVALID') {
          console.log(":(");
          if (!Array.isArray(resp)) {
            this.errMsg = 'Username or password is incorrect ';
          }
          return;
        } 
        else {
          console.log('success')
          this.router.navigate([resp.landingPage]);
        }
      },
        errResponse => {
          switch (errResponse.status) {
            case 401:
              this.errMsg = 'Username or password is incorrect';
              console.log(this.errMsg);
              break;
            case 404:
              this.errMsg = 'Service not found';
              break;
            case 408:
              this.errMsg = 'Request Timedout';
              break;
            case 500:
              this.errMsg = 'Internal Server Error';
              break;
            default:
              this.errMsg = 'Login failed: Make sure Username and Password are correct and try again.';
          }
        }
      );
  }

  onSignUp() {
    this.router.navigate(['signup']);
  }
}

och min spec-fil är:

import { ComponentFixture, TestBed } from "@angular/core/testing"
import { LoginComponent } from './login.component'

describe('Login Component', () => {
    let fixture: ComponentFixture<LoginComponent>;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [LoginComponent],
        });
        fixture = TestBed.createComponent(LoginComponent);
    });

    it('Component successfully created', () => {
        expect(fixture).toBeTruthy();
    });
})

Min misstanke är att det är något enkelt som jag missar, men jag kan inte få detta test att köra och resultatet jag får är "Förväntade undefined att vara sant."

Jag tror att armaturen är definierad.

Svar #1

Jag kom fram till att den faktiska koden jag testade var mer komplex än de handledningar jag hade gjort hittills. När jag väl fick allt i konstruktorn mockat i beforeEach får jag inte längre detta fel.

Jag vill verkligen tacka användaren hugomosh eftersom hans kommentar ledde mig till att hitta svaret i morse.

Svar #2

Jag loggar fixture från BeforeEach-blocket (1) och fixture från it-testblocket (2) och det blev klart att fixture definieras efter att testblocket är avslutat. Det är därför hela testet misslyckas. I konsolen ser jag att fixture är undefined (uttalande 2) på första raden och efter det kommer definierad fixture med mocks och så vidare (uttalande 1). Konstigt, men jag har kommit ur problemet.