前端自动化测试学习一Angular学习时使用到了自动化测试，记录一下学习过程。下面是跟着Jest教学视频学习，记录一

Angular学习时使用到了自动化测试，记录一下学习过程。

下面是跟着Jest教学视频学习，记录一些知识点，虽然测试框架集成方式不一样，但是语法相同。

获取页面中的元素

//获取一个页面中类名为 header-my 的元素
let header = fixture.nativeElement.querySelector(".header-my")

//获取页面中 id为 temo_p 的元素
fixture.nativeElement.querySelector("#temp_p")

获取Angular中通过*ngfor 创建的列表，里面item的数量,并获取某一个某一个item里面标签内容。

el = fixture.debugElement;
//例子解释:
//通过 `debugElement`获取 id名称为 `.test_list`列表组件 内部的所有item。
const test_lists = el.queryAll(By.css(".test_list"));
//得到第一个item
const test_li = test_list[0];
//获取item里面的a标签。话说里面的a标签过多怎么办？`queryAll`
const test_a = test_li.query(By.css("a"));
//获取`<a>`标签的链接
test_a.nativeElement.href

匹配器

toBe

值的比较使用toBe。

expect("1").toBe("1");

toEqual

如果使用toBe匹配对象，那么内容相同也会报错因为他们的地址不同

let objc = {name:"李白"}
//expect(objc).toBe({"name":"李白"}) error
expect(objc).toEqual({"name":"李白"})

`not` 匹配器

添加了not后，下面代码的解读为：objc的内容不等于{"name":"张三"}。测试将会通过。

let objc = {name:"李白"}
expect(objc).not.toEqual({"name":"张三"})

数字相关的匹配器

    let count = 10;
    //count必须大于9
    expect(count).toBeGreaterThan(9);
    //count必须大等于9
    expect(count).toBeGreaterThanOrEqual(9)
    //count必须小于11
    expect(count).toBeLessThan(11);
    //count必须小等于11
    expect(count).toBeLessThanOrEqual(11);

`toBeCloseTo`

js中因为浮点数相加的精准度问题，所以导致 0.1+0.2 != 0.3 这时就可以使用 toBeCloseTo 对浮点数进行比较

let num1 = 0.1;
let num2 = 0.2;
//expect(num2 +num1).toBe(0.3)//error
expect(num2 + num1).toBeCloseTo(0.3)

String相关

`toMatch`

用来检测字符串值是否包含某个字符。

let str = "shishanling";
expect(str).toMatch(/shan/);

数组相关

`toContain`

判断数组中是包含某个值

let array = ["1", "2", "3", "4"];
expect(array).toContain("1");

异常测试。

function throwNewErrorFunc(){
    throw new Error("这是一个异常");
}
//如果希望他抛出异常
expect(throwNewErrorFunc).toThrow();
//如果不希望他抛出异常
expect(throwNewErrorFunc).not.toThrow();
//也可以对异常抛出的字符串进行正则匹配
expect(throwNewErrorFunc).toThrow(/这是一个异常/);

其他常用的匹配器

expect(objc).toBeNull();
expect(objc).toBeUndefined();
expect(objc).toBeNaN();
expect(objc).toBeDefined();
expect(objc).toBeTruthy();
expect(objc).toBeFalse();
expect(objc).toBeFalsy();

异步事件。

关键字

waitForAsync
fixture.whenStable().then

it('(fakeAsync)之后显示引用', waitForAsync(()=>{
  fixture.detectChanges();  // ngOnInit()
  expect(component.tempData)
    .withContext('展示默认文字')
    .toEqual({ name: '数据获取中' });
  fixture.whenStable().then( () => {
    fixture.detectChanges();
    expect(component.tempData).toEqual({"success": true});
  })
}));

主动触发输入框事件。

it('当 输入框发生变化是  placeholder属性 应该也会变化', function () {
  //获取输入框
  let element = fixture.nativeElement.querySelector('.data-input')
  //给输入看赋值
  element.value = "1234";
  //触发输入事件
  element.dispatchEvent(new Event("input"));
  //更新视图
  fixture.detectChanges();
  //测试内容  输入框双向绑定的 component.placeholder 也跟着发生了变化.
  expect(component.placeholder).toEqual("1234");
});

主动触发button的点击

const ele = fixture.debugElement.query(By.css("#id"));
ele.triggerEventHandler('click', null)
fixture.detectChanges(); // 更新视图

const ele = fixture.nativeElement.querySelector("#id");
ele.click();
fixture.detectChanges(); // 更新视图

判断事件有没有被触发

it('函数 addData 不应该被触发', function () {
  //检测 component类里面的 addData 方法
  spyOn(component, "addData")
  //component.addData没有被触发
  expect(component.addData).not.toHaveBeenCalled()
});

`Material` 库中的 `MatDialog` 组件测试。

内容包括获取 MatDialog 弹出的子组件以及子组件中的子组件。笔记链接

网络服务测试。

主要内容是，设置模拟数据进行，网络服务的测试。笔记链接

前端自动化测试学习 一