1

我试图计算初始li和从服务器获取数据后（使用单元测试用例），但我得到无法读取 null 的属性“长度”

我的代码：

import { ComponentFixture, TestBed, async, getTestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { MockAppService } from './mock.service'
import { DebugElement } from '@angular/core';

import { AppComponent } from './app.component';
import { AppService } from './app.service';

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>,
    component: AppComponent,
    service: AppService,
    debugEl:DebugElement,
    el:HTMLElement;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      declarations: [
        AppComponent
      ],

      providers: [{ provide: AppService, useClass: MockAppService }]

    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    service = TestBed.get(AppService);
     el = fixture.nativeElement;

    spyOn(service, 'getData').and.callThrough();

  }));

  afterEach(() => {
    //httpMock.verify();
  });

  describe('AppComponent onit test', () => {

        it('intial list item', async(() => {
                  debugEl = fixture.debugElement.query(By.css('li'));
      expect(fixture.nativeElement.querySelector('li').length()).toBe(0);
    }));
    it('should called appService getData method', async(() => {
      fixture.detectChanges();
      expect(service.getData).toHaveBeenCalled();
    }));
    it('should return an Observable<User[]>', () => {
      const dummyUsers = [{
        userId: 10,
        id: 10,
        title: "post",
        body: "post"
      }];

      service.getData().subscribe(users => {
        console.log(users)
        expect(users.length).toBe(1);
        expect(users).toEqual(dummyUsers);
         expect(fixture.nativeElement.querySelector('li').length()).toBe(1);

      });
    });
  })
});

代码链接

https://stackblitz.com/edit/angular-testing-w9towo?file=app%2Fapp.component.spec.ts

在此处输入图像描述

4

2 回答 2

0

查询不返回数组，尝试使用queryAll返回数组而不是查询这里是解决方案：

it('intial list item', async(() => {
   let liCount= fixture.debugElement.queryAll(By.css('li'));
   expect(liCount.length).toBe(0);
}));
于 2018-04-15T16:37:33.103 回答
0

当您查看此文档时：https ://angular.io/api/core/DebugElement

你会发现DebugElement.query方法返回DebugElement

并且方法DebugElement.queryAll方法返回DebugElement[]

所以DebugElement.queryAll将返回一个数组DebugElement

在这种情况下，由于它是一个数组，因此您可以length对其应用属性。

所以你必须使用DebugElement.queryAll才能测试结果数组的长度。

于 2018-04-21T15:20:05.707 回答