JavaScript 与 QA 测试工程师

1,167 阅读3分钟

单元测试

  • 测试一个函数
  • 测试一个组件

上面的叫单元测试。

  • 测试整个页面就不叫做单元测试了

为什么要做单元测试

  • 我们能够保证我们的代码质量
  • 你可能觉得前端的单元测试会增加你的工作量,放心可以通过代码自动生成
  • 通过单元测试更好的去解释当前的代码运行
  • 能够驱动开发,指导设计
  • 对于项目重构有所保障

他的目的

  • 为了让开发人员明确知道代码结果

原则

  • 单一指责、接口抽象、层次分离

断言库

  • 保证最小单元是否正常运行检测方法

部分框架

看PPT

  • 安装 karma:pnpm install karma -D
  • 修改package.json:"karma:init":"karma init",
  • 运行: pnpm karma:init
    • 选择:jasmine / no / PhantomJS / 会车... / no
  • 生成文件:/Users/edz/yd-learn/karma.conf.js

框架原理

  • karma框架里有一个无头浏览器,我们的js文件会先在里面执行
  • 然后运行测试的.spec.js文件
  • 发现你用了三方的it断言库,运行断言库

e2e

  • 如果你做e2e可以使用jest

ui测试

  • backstopjs

接口测试

  • express supertest 用来测试node接口。

单元测试个部分配置

karma 单元测试

  • 能够对函数,组件进行单元测试
  • 安装 karma karma-coverage jasmine-core karma-jasmine karma-phantomjs-launcher phantomjs-prebuilt
  • 通过karma init 生成 karma.conf.js 文件
module.exports = function (config) {
  config.set({
    // 基础路径
    basePath: '',
    // 你要使用什么框架
    frameworks: ['jasmine'],
    // 浏览器中加载哪些文件
    files: ["./src/**/*.js", "./tests/unit/**/*.spec.js"],
    // 排除哪些文件
    exclude: [],
    // 预处理一些文件,在他们提供给浏览器之前
    // 预先处理 src/**/*.j下的文件,
    preprocessors: {
      "src/**/*.js": ["coverage"]
    },
    // 测试结果使用什么?
    reporters: ['progress', "coverage"],
    port: 9876,
    // 输出时候有颜色么?
    colors: true,
    // 使用什么级别记录
    logLevel: config.LOG_INFO,
    // 当文件改变的时候是否进行检测?
    autoWatch: false,
    // 启动这些浏览器
    // 但是一般使用无头浏览器
    browsers: ['PhantomJS'],
    // 持续集成
    // 如果为true,Karma 捕获浏览器,运行测试并且退出
    singleRun: true,
    coverageReporter: {
      type: 'html',
      dir: "docs/coverage/"
    },

    // 并发等级
    // 怎么让多个浏览器同时启动
    concurrency: Infinity
  })
}
  • 我们会在tests目录下写单元测试,对src里的js文件进行单元测试
  • 会在docs/coverage/PhantomJS 2.1.1 (Mac OS 0.0.0) 目录下生成对应的单元测试文件,这个目录中有index.html,在浏览器打开可以看见对应的单元测试信息。

jest

  • 我当前是使用jest来做e2e
  • jest 的最佳伴侣是 majestic,当我们运行 yarn jest:start 的时候,如果没有配置,他会自动取查找 *.spec.js *.test.hs *.test.js 文件并执行
const { Builder, By, Key, until } = require('selenium-webdriver');

(async function example() {
  let driver = await new Builder().forBrowser('chrome').build();
  try {
    await driver.get('https://www.baidu.com/');
    await driver.findElement(By.name('wd')).sendKeys('京程一灯', Key.RETURN);
    await driver.wait(until.titleIs('京程一灯_百度搜索'), 1000);
  } finally {
    await driver.quit();
  }
})();
  • 上面代码是e2e中的测试文件,会自动打开chrome浏览器,然后运行下面的步骤。
  • majestic 会打开一个页面,能够在这个页面中进行单元测试。

backstop

  • ui图的对比,ui走查
  • backstopjs 安装,运行 "ui:init": "backstop init" 生成配置文件:backstop.json
  • 运行 "ui": "backstop test" 会生成一个ui对比页面,就不需要再一像素一像素去找了

express supertest

  • 使用这两个,对接口进行测试,测试node
  • 运行 node mochasRunner.js
const Mocha = require('mocha');
const mocha = new Mocha({
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: './docs/mochawesome-report',
    quiet: true,
  },
});

mocha.addFile('./tests/services/router.spec.js');

mocha.run(function (err) {
  console.log('🍺接口测试完毕');
  if (err) {
    //出错的退出 CI CD
    process.exit(-1);
  } else {
    process.exit();
  }
});

往 mocha 中添加一个文件:./tests/services/router.spec.js

运行 mocha 测试完毕会将错误抛出

const request = require("supertest")
const express = require("express")
const app = express()
app.get("/user", function (req, res) {
    res.status(200).json({
        name: "john"
    })
})
describe("Node自动化测试", function () {
    it("获取首页数据", function (done) {
        request(app)
            .get("/user")
            .expect("Content-Type", /json/)
            .expect("Content-Length", "15")
            .expect(200)
            .end(function (err, res) {
                if (err) {
                    done(err);
                } else {
                    done()
                }
            })
    })
    it('404测试', function (done) {
        request(app)
            .get('/xx')
            .expect(200)
            .end(function (err, res) {
                if (err) {
                    done(err);
                } else {
                    done();
                }
            });
    });
})

总结

  • 单元测试
  • karma
  • jest e2e
  • backstop ui对比
  • express supertest 接口测试