建议使用以下浏览器,以获得最佳体验。 IE 9.0+以上版本 Chrome 31+ 谷歌浏览器 Firefox 30+ 火狐浏览器
请选择 进入手机版 | 继续访问电脑版
设置昵称

在此一键设置昵称,即可参与社区互动!

确定
我再想想
选择版块
092947bevjlmiytnwwd8ky.jpg 独家拆解金融TB级超大数据库 【乘风破浪赋能学习季】7天玩转MySQL基础实战营,数据库学习走起!
标签
数据库
自动化测试
您还可以添加5个标签
  • 没有搜索到和“关键字”相关的标签
  • 云产品
  • 解决方案
  • 技术领域
  • 通用技术
  • 平台功能
取消

前端小盆友

发帖: 6粉丝: 0

级别 : 新手上路

发消息 + 关注

发表于2020年07月27日 10:23:14 239 3
直达本楼层的链接
楼主
显示全部楼层
[技术分享] Angular 单元测试

  • 隔离程序的每个部件,在隔离环境中运行测试用例。

  • karma.conf.js :文件是为了告知 Karma 需要启用哪些插件、加载哪些测试脚本、需要哪些测试浏览器环境、测试报告通知方式、日志等等。具体配置内容参见 karma.conf.jshttps://karma-runner.github.io/5.0/config/configuration-file.html>

  • 测试文件的扩展名必须是 .spec.ts,这样工具才能识别出它是一个测试文件,也叫规约(spec)文件

"test": {
    "options": {
        "codeCoverage": true
    }
}


Jasmine

Angular 单元测试是使用 Jasmine 框架来编写的。

基础知识

describe(string, function):是 Jasmine 的全局函数,可以理解为一个测试集(Test Suite),主要功能是用来划分单元测试的。describe 可以嵌套使用。

it(string, function):可以理解为测试用例。Specs 通过调用 it 的全局函数来定义。每个 Spec 包含一个或多个 expectations 期望值来测试需要测试代码。

Jasmine 中的每个 expectation 是一个断言,可以是 true 或者 false。当每个 Spec 中的所有 expectations 都是 true,则通过测试。有任何一个 expectation 是 false,则未通过测试。而方法的内容就是测试主体。

每个 Matchers 实现一个布尔值,在实际值和期望值之间比较。它负责通知 Jasmine,此 expectation 是真或者假。然后 Jasmine 会认为相应的 spec 是通过还是失败。所有的 expect 都可以使用 not 表示否定的断言。

JavaScript 的作用域的规则适用,所以在 describe 定义的变量对 Suite 中的任何 it 代码块都是可见的。

beforeAll:每个 suite(即 describe)中所有 spec(即 it)运行之前运行,整个suite里只运行一次afterAll:每个 suite(即 describe)中所有 spec(即 it)运行之后运行
xdescribe:该 describe下的所有 it 将被忽略,jasmine 将直接忽略这些it,因此不会被运行
// 引入相关模块
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { BackupListComponent } from './backup-list.component';
import { DebugElement } from '@angular/core';

describe('HorizontalGridComponent test', () => {
   let component: HorizontalGridComponent;
 let fixture: ComponentFixture<HorizontalGridComponent>;

    // 配置 TestBed 环境
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
           HttpClientTestingModule
         ],
         declarations: [HorizontalGridComponent],
  }).compileComponents();
   }));
 
 beforeEach(() => {
        // 创建一个HorizontalGridComponent 的实例
  fixture = TestBed.createComponent(HorizontalGridComponent);
        // 使用 fixture.componentInstance 来访问组件实例
  component = fixture.componentInstance;
        // TestBed.createComponent 不能触发变更检测,使用 detectChanges() 触发检查。
  fixture.detectChanges();
 });
  
 it('should create', () => {
  expect(fixture).toBeDefined();
       expect(component).toBeDefined();
 });

 it('should have <h3> with "Hello"', () => {
        // const El: HTMLElement = fixture.nativeElement;
        const De: DebugElement = fixture.debugElement;
        const El: HTMLElement = De.nativeElement; // nativeElement相当于debugElement的一个属性
        // js原生的querySelector api去获取h3标签
        const p = El.querySelector('h3');
        // 判断h3标签的内容
        expect(p.textContent).toEqual('Hello');
    });

    it('should find the <h3> with fixture.debugElement.query(By.css)', () => {
        const De: DebugElement = fixture.debugElement;
        const El = De.query(By.css('h3')); // nativeElement相当于debugElement的一个属性
        // js原生的querySelector api去获取h3标签
        const p: HTMLElement = El.nativeElement;
        // 判断h3标签的内容
        expect(p.textContent).toEqual('Hello');
    });

   afterEach(() => {
      TestBed.resetTestingModule();
   });
});

  • 置好 TestBed 之后,调用它的 createComponent() 方法,它会创建一个 HorizontalGridComponent 的实例,把相应的元素添加到测试运行器的 DOM 中,然后返回一个 ComponentFixture 对象。ComponentFixture 用来与所创建的组件及其 DOM 元素进行交互。

  • 获取组件元素 nativeElement 和 DebugElement。 前者原生 DOM 元素,属性取决于运行环境,如果是浏览器,就提供浏览器的一些api,后者是由 Angular 进行包装可以安全的横跨其支持的所有平台运行并提供诸如 query 或者 triggerEventHandler 事件dom操作等方法。

  • TestBed.createComponent 不能触发变更检测,使用 detectChanges() 触发检查。

运行完成后,控制台输出:

image-20200725163345103.png

chrome浏览器输出:

image-20200725163409476.png


举报
分享

分享文章到朋友圈

分享文章到微博

运气男孩

发帖: 11粉丝: 4

级别 : 外部版主

发消息 + 关注

发表于2020年07月27日 10:27:44
直达本楼层的链接
沙发
显示全部楼层

感谢您的分享~

点赞 评论 引用 举报

Micker

发帖: 94粉丝: 12

级别 : 外部版主

发消息 + 关注

发表于2020年07月31日 23:06:03
直达本楼层的链接
板凳
显示全部楼层

感谢您的分享~

点赞 评论 引用 举报

风起云涌1

发帖: 166粉丝: 7

级别 : 外部版主

发消息 + 关注

发表于2020年08月01日 15:28:27
直达本楼层的链接
地板
显示全部楼层

感谢分享

点赞 评论 引用 举报

游客

富文本
Markdown
您需要登录后才可以回帖 登录 | 立即注册