typescript - ไม่สามารถอ่านคุณสมบัติ 'textContent' ของค่า null ในการทดสอบ Angular

ฉันมีแอปพลิเคชัน angular แบบง่าย ๆ ที่มี AppComponent และ ProductComponent เมื่อฉันรันคำสั่ง ng test จะได้รับข้อผิดพลาดดังต่อไปนี้ที่ http://localhost:9876/?id=80860281

Jesmine 3.5.0Options
finished in 0.473s
4 specs, 1 failure, randomized with seed 16102
Spec List | Failures
AppComponent > should render title
TypeError: Cannot read property 'textContent' of null
at <Jasmine>
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/app.component.spec.ts:33:51)
at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:364:1)
at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:292:1)
at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:363:1)
at Zone.run (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:123:1)
at runInTestZone (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:545:1)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:560:1)
at <Jasmine>

นี่คือโค้ดของฉัน

app.module.ts คลาส

@NgModule({
declarations: [
AppComponent,
ProductComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule 
],
providers: [],
bootstrap: [AppComponent]})

คลาส app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Product';
}

ไฟล์ app.component.spec.ts และ product.component.spec.ts มีโค้ดเริ่มต้น ผมไม่ได้แก้ไขไฟล์เหล่านั้น

รหัสไฟล์ app.component.spect.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'Assignment01`, () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('Assignment01');
  });

  it('should render title', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('.title').textContent).toContain('Product app is running!');
    });
});

ไฟล์ product.component.ts

export class ProductComponent implements OnInit {
constructor() { }

productName:any
quantity:any

public data:any[]=[
{
    "ID": 101,
    "Product": "Moto G",
    "Quantity": 2,
},
{
    "ID": 102,
    "Product": "TV",
    "Quantity": 4,
},
{
    "ID": 105,
    "Product": "Watch",
    "Quantity": 2,
},   
]

ngOnInit(): void {} 

addItem() {
this.data.push({ Product: this.productName, Quantity: this.quantity});
} 

ไฟล์ product.component.html

<div>  
    <h1>Demonstration of Built in directives and data binding</h1>
    <br>
    <h2>Product List</h2>
    <table border="1"  *ngIf='data && data.length'>
      <thead>
        <tr>
          <th>Product</th>
          <th>Quantity</th>
        </tr>
      </thead>
      <tbody>
          <tr *ngFor='let record of data'>
            <td>{{record.Product}}</td>
            <td>{{record.Quantity}}</td>
          </tr>
      </tbody>
    </table>
    <br>
    <label>Enter product name:</label>
    <input type="text" [(ngModel)]="productName" />
    <label>Enter quantity:</label>
    <input type="text" [(ngModel)]="quantity"/>
    <button (click)='addItem()'>Add</button>
    <br/><br/>
  </div>

ไฟล์ app.component.html มีเพียง <router-outlet></router-outlet>

ฉันจะแก้ไขปัญหานี้ได้อย่างไร?

คำตอบ #1

ตามผลลัพธ์ HTML ของคุณจำเป็นต้องมี

<div class="content"><span>Product app is running!</span> </div>

เพื่อให้มันทำงาน