端到端测试与单元测试 - TypeScript

简介

在软件开发中，测试是至关重要的一环，它可以帮助开发人员发现和修复程序中的错误，提高程序的质量。测试通常可以分为两种类型，分别是端到端测试和单元测试。本文主要介绍 TypeScipt 中的端到端测试和单元测试的概念和使用方法。

端到端测试

端到端测试是指对整个系统进行测试，包括各个子系统之间的交互以及整个系统的功能是否符合预期。在 TypeScript 中，可以使用 Protractor 来进行端到端测试。

安装

使用 npm 安装 Protractor：

npm install -g protractor

配置

Protractor 的配置文件是 protractor.conf.js，在该文件中可以设置浏览器的类型、测试用例的路径以及测试报告的输出路径等，示例配置如下：

exports.config = {
  directConnect: true,
  capabilities: {
    'browserName': 'chrome'
  },
  specs: ['e2e/*.e2e-spec.ts'],
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  },
  onPrepare: function() {
    require('ts-node').register({
        project: require('path').join(__dirname, './tsconfig.e2e.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  },
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub'
};

编写测试用例

编写测试用例前需要安装以下依赖：

npm install --save-dev protractor @types/jasmine

在 e2e 目录下编写指定的测试用例，示例代码如下：

import { browser, element, by } from 'protractor';

describe('Protractor Demo App', () => {
  beforeEach(() => {
    browser.get('http://localhost:4200');
  });

  it('should display welcome message', () => {
    expect(element(by.css('app-root h1')).getText()).toEqual('Welcome to my-app!');
  });
});

运行测试用例

在命令行中输入以下命令，运行测试用例：

protractor protractor.conf.js

单元测试

单元测试是指对程序中的单个独立模块进行测试，它通常在开发过程中进行。在 TypeScript 中，可以使用 Karma 和 Jasmine 来进行单元测试。

安装

使用 npm 安装 Karma 和 Jasmine：

npm install --save-dev karma karma-jasmine jasmine-core karma-chrome-launcher karma-jasmine-html-reporter karma-sourcemap-loader karma-webpack karma-coverage ts-loader source-map-loader jasmine-spec-reporter @types/jasmine

使用 npm 安装 Karma 的命令行工具：

npm install -g karma-cli

配置

Karma 的配置文件是 karma.conf.js，在该文件中可以设置浏览器的类型、测试用例的路径以及测试报告的输出路径等，示例配置如下：

const webpackConfig = require('./webpack.test.config');

module.exports = function(config) {
  const _config = {
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      {pattern: './src/test.ts', watched: false},
    ],
    preprocessors: {
      './src/test.ts': ['webpack', 'sourcemap']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      stats: 'errors-only'
    },
    reporters: ['spec', 'coverage'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity,
    coverageReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reporters: [
        { type: 'text-summary' },
        { type: 'lcov', subdir: '.' },
        { type: 'html', subdir: '.' }
      ]
    }
  };

  config.set(_config);
};

在 src 目录下创建 test.ts 文件，示例代码如下：

// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';

import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

在 webpack.test.config.js 中配置 webpack，示例配置如下：

const webpack = require('webpack');

module.exports = function (config) {
  config.set({
    plugins: [
      new webpack.ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /@angular(\\|\/)core(\\|\/)fesm5/,
        __dirname + '/src', // location of your src
        {} // a map of your routes
      )
    ],
    resolve: {
      extensions: ['.ts', '.js']
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          loaders: ['ts-loader', 'angular2-template-loader']
        },
        {
          test: /\.html$/,
          loader: 'html-loader'
        },
        {
          test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
          loader: 'null-loader'
        },
        {
          test: /\.css$/,
          exclude: helpers.root('src', 'app'),
          loader: 'null-loader'
        },
        {
          test: /\.css$/,
          include: helpers.root('src', 'app'),
          loader: 'raw-loader'
        }
      ]
    },
    devtool: 'inline-source-map'
  });
};

编写测试用例

在 src 目录下创建 xx.spec.ts 文件，示例代码如下：

describe('xx component', () => {
  it('should be true', () => {
    const result = true;
    expect(result).toBe(true);
  });
});

运行测试用例

在命令行中输入以下命令，运行测试用例：

karma start karma.conf.js

总结

端到端测试和单元测试是测试中两种常见的类型，在 TypeScript 中，可以使用 Protractor 和 Karma 来进行端到端测试和单元测试。编写好测试用例后，运行测试用例可以有效地发现和修复程序中的错误，提高程序的质量。