angular - 无法读取空 Angular Testing 的属性 'textContent'

Question

我有简单的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类(class)

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

app.component.ts类(class)

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> .
我该如何解决这个问题？

Answer 1

根据输出，您的 HTML 需要具有

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

使其工作。