单元测试角度应用

Tavish Aggarwal.
I

n本文,我们将研究如何编写单元测试案例,以测试您正在开发的角度应用程序。我们中的一些人认为这是在写作测试案件上度过时间吗?

我同意编写单位测试案件需要努力。但请记住,在写作单位测试案件中花费的努力将在长远来看。 

如果您不相信写入单元测试案例,则尝试回答以下问题(是/否):

  1. 您已建立了一个功能,并且有一个要求更改开发的功能。您是否确信,通过开发结束,现有功能将按预期工作?

  2. 有一个有100多个功能的应用程序,其中大部分功能都是依赖的。每一个构建后都可以彻底手动测试应用程序吗?

  3. 通过进行手动单元测试,您是否有信心您有100%代码覆盖,没有错误?

  4. 您的手动测试用例是否妥善记录(按组件的功能/组件的特征)?

  5. 您是否确信您将在解决错误的时间上花费将少于写入单元测试用例?

我想如果上述任何问题,您的答案都没有它在开发功能时编写单元测试用例。

希望你有足够的动力,并实现了写作单元测试用例随着特征的发展的重要性。

基本上有三种测试,我们可以在我们的角度应用中执行。

  1. 单元测试(仅限组件)
  2. 集成测试(组件+模板)
  3. 结束于最终测试

我们将在这篇文章中覆盖所有内容。让我们看看我们如何在角度应用中编写单元测试用例。

在此帖子中,我们将使用Angular CLI创建我们的新项目,因为它默认为我们提供测试所需的设置文件。因此,减少了我们将应用程序设置为运行单元测试用例的努力。如果你是角CLI的新手,我建议经历 角cli y章纸.

棱角 CLI使用Jasmine作为测试框架和KARMA作为单位测试或E2E(端到端)测试应用程序。在前进之前,让我们简单地了解茉莉花和业力。

茉莉花

茉莉花是一种用于测试JavaScript代码的行为驱动的开发框架。它不依赖于任何其他JavaScript框架。它不需要DOM。它有一个干净,明显的语法,使您可以轻松地编写测试。

让我们看看一个示例,演示了我们如何在茉莉花中编写测试用例。

// script.js
function helloWorld() { 
      return 'Hello world!'; 
}

// test.js
describe('Hello world', function() { 
       it('says hello', function() { 
             expect(helloWorld()).toEqual('Hello world!'); 
        }); 
});

在上面显示的示例中,我们正在测试HelloWorld函数。

我们使用“描述”关键字在Jasmine中创建一个测试套件。并使用'IT'关键字我们创建了我们需要运行的测试用例。

karma.

karma.是我们测试的任务跑步者。它观看配置文件中指定的所有文件,并每当任何文件更改时,它会触发测试。

这就是你需要了解与业力的所需要。


现在我们有了茉莉花和业力的了解。现在是时候前进了,熟悉了角CLI创建的一些测试文件。要与帖子一起,我建议您使用命令创建一个新项目: ng new <app name>

我们将查看以下文件,用于在角度应用程序中运行Unit / E2E测试用例:

  1. test.ts文件
  2. karma.config.ts文件
  3. protactor.conf.ts.

test.ts文件

此文件位于SRC文件夹中。让我们看看这个文件包含的内容:

// 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';

declare const require: any;

// 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);

您几乎不会使用此文件。在这里,我们指定了我们的测试用例所在的目录或文件名。

karma.config.ts文件

此文件位于SRC文件夹中。让我们看看这个文件包含的内容:

// Karma configuration file, see link for more information
// //karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

这是写入所有测试相关配置的文件。我们会查看文件中的一些配置:

  1. 框架:将您指定在测试应用程序时使用的测试框架。
  2. 浏览器:您要运行测试用例的浏览器。
  3. autowatch:如果设置为true,则测试用例将在Watch模式下运行。这意味着如果在符号文件测试用例中存在任何更改,则会重新运行。
  4. 端口:要用于运行测试服务器的端口。

protactor.conf.ts.

此文件位于E2E文件夹中。让我们看看这个文件包含的内容:

// Protractor configuration file, see link for more information
// //github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

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

该文件包含运行E2E测试用例所需的配置。让我们来看看文件中的一些配置:

  1. 规格:它是一个阵列,我们指定包含测试用例的文件路径。
  2. 功能:它是指定与浏览器相关信息的对象。
  3. 框架:我们将用于运行E2E测试用例的框架。

We gathered some good information about unit testing an application, and now its time to understand what happens behind the scene when we run a command ng test or ng e2e to run unit test cases and end to end test cases.

了解NG测试命令

We use ng test command to run unit or integration test cases. Let's understand what happens behind the scenes when we run the command:

  1. 角CLI加载Angular.JSON。
  2. 棱角 CLI使用Angular.JSON指定的配置路径(SRC / KARMA.CONF.JS)运行Karma。
  3. 业力打开Karma配置中指定的浏览器。
  4. 然后,Karma使用Karma Config中指定的测试框架指示浏览器运行SRC / Test.ts。
  5. 棱角应用程序读取SRC / Test.ts文件,并在SRC目录中运行以.spec.ts结尾的所有规范文件。
  6. karma.报告测试运行到控制台的结果。
  7. karma.手表SRC文件进行更改,重复步骤检测到文件更改时读取所有SPEN文件和重新运行测试用例的步骤。

了解ng e2e命令

We use ng e2e command to run end to end test cases. Let's understand what happens behind the scenes when we run the command:

  1. 角CLI加载Angular.JSON。
  2. 棱角 CLI使用Angular.json中指定的配置(E2E / Protractor.conf.js)运行Promrartor。
  3. Pratractor打开Promractor配置中指定的浏览器。
  4. 然后,Pryractor指示浏览器运行以.e2e-spec.ts结尾的所有规范文件。
  5. Pratrador将测试运行的结果报告给控制台。

我们有基础知识关于单位测试如何在角度应用中工作的知识。我们还掌握了关于在运行单元测试用例的场景后面所涉及的文件和执行计划的知识。现在是时候在规范文件中编写测试用例并测试我们的组件。

当我们创建一个新应用程序时,默认创建的组件(/src/app.component.ts)。以及它,也创建了一个规范文件(/src/app/app.component.spec.ts)。我们将理解创建的spec文件:

// 第1节:导入包
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';


// 第2节:创建测试套件
describe('AppComponent', () => {
  
 // 第3节:在运行测试用例之前配置
 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  // 第4节:创建测试用例
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it(`should have as title 'Testing'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('Testing');
  }));

  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to Testing!');
  }));

});

为了更好地理解,我将默认情况下创建的划分规范文件由Angular CLI成4个部分。这些是:

  1. 第1节:导入包
  2. 第2节:创建测试套件
  3. 第3节:在运行测试用例之前配置
  4. 第4节:创建测试用例

让我们详细了解上述四个部分,并掌握在角度应用中创建测试用例的技能组。

第1节:导入包

我们很少需要导入以创建测试用例。这些是:

  1. 试验台:测试平台是所有角度测试界面的主要入口。它将让我们创建组件,因此它们可用于运行单元测试。
  2. 异步
  3. 组件:这是我们需要测试的组件本身。

第2节:创建测试套件

导入包后,我们创建一个测试套件,该测试套件将保持测试用例。我们遵循的最佳实践是我们在我们的应用程序中创建了每个和每个组件的测试套件。我们在DESCEAD关键字的帮助下创建套件。

第3节:在运行测试用例之前配置

Once we have created a suite, inside it we specify the configurations that we need to load up before running any of the test cases. We do this using beforeEach function which is being provided by the Jasmine.

在此处,我们正在配置测试模块,并编译组件以测试它。

第4节:创建测试用例

现在我们有模块编译并准备测试。我们编写了测试用例以测试组件。

Once we've set up our testing module, we'll use TestBed.createComponent to create our component. The createComponent method actually returns a ComponentFixture. Our component actually lives at the fixture's componentInstance attribute. So we try to access our component as:

const app = fixture.debugElement.componentInstance;

现在我们有一个组件加载和可访问,我们可以执行我们想要的任何测试用例。这里在上面所示的示例中,我们正在执行三个测试:

  1. 测试是否创建了组件
  2. 测试组件的标题属性
  3. 测试H1标签内的内容

以类似的方式,您可以测试所有应用程序,包括角度形式,服务等。

要了解更多茉莉花和茉莉花提供的功能进行测试,我建议您通过 茉莉花文件.


到目前为止,一切都很好。我们有了解如何编写测试用例,但我们如何判断我们已编写的测试用例是否已执行代码库的每一行。你对它有对,我在谈论代码覆盖范围。让我们详细讨论。

代码覆盖范围

要运行检查案例,这些案例将检查所需的代码覆盖:

ng test --code-coverage

The above command will create a coverage folder in our angular application, which we can serve using http-server:

http-server -c-1 -o -p 9875 ./coverage

使用上面命令,如果您在9875端口打开页面,您可以看到一个将显示代码覆盖的报告。

希望你学到了帖子的新东西。当您正在开发您的下一个角度项目时,您将开始编写测试用例。

如果您有任何疑问或建议。请在“评论框”部分中向我们联系。

作者信息

Tavish Aggarwal.

网站: http://tavishaggarwal.com

Tavish Aggarwal.是一个数据科学家 在一个海德拉巴工作,具有广泛的经验,在跨电子商务,财务,医疗保健等等不同领域解决现实世界的业务问题。 他对技术充满热情,喜欢在团队中工作。

类别