得到“预期未定义是真实的”。测试时查看是否创建了组件

Question

作为扩展和更新我的技能组合的一部分。我被指派为 Angular 9 应用程序编写 Jasmine/Karma 测试。我已经完成了一个在线教程并进行了一些谷歌搜索。我开始编写我的第一个无指导的测试用例，但我遇到了一些我还没有找到解决办法的事情。

我的 HTML 是这样的：

<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>

我的 .ts 文件是：

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']);
  }
}

我的规范文件是：

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();
    });
})

我怀疑我遗漏了一些简单的东西，但我无法运行此测试，结果我得到“预期未定义为真实”。

我相信夹具已定义。

Answer 1

我发现我正在测试的实际代码比到目前为止我一直在做的教程更复杂。一旦我在 beforeEach 中模拟了构造函数中的所有内容，我将不再收到此错误。

我要感谢用户 h​​ugomosh，因为他的评论让我今天早上找到了答案。