在TypeScript项目中进行BDD测试

什么是BDD?

BDD(Behavior-Driven Design)是软件团队的一种工作方式,通过以下方式缩小业务人员和技术人员之间的差距:

  • 鼓励跨角色协作,建立对待解决问题的共同理解
  • 以快速、小迭代的方式工作,以增加反馈和价值流
  • 生成系统文档,自动对照系统行为进行检查

我们通过将协作工作的重点放在具体的、真实的例子上来实现这一点,这些例子说明了我们希望系统如何运行。我们用这些例子来指导我们在持续合作的过程中从概念到实施。

Gherkin语法

BDD特性(Feature)描述采用Gherkin语法。Gherkin使用一组特殊的关键字为可执行规范提供结构和意义。每个关键词都被翻译成多种语言;在本参考资料中,我们将使用英语。

Cucumber是流行的BDD测试框架,支持各种平台,其文档中的大多数行都以一个关键字开头。

注释仅允许出现在新行的开头,即要素文件中的任何位置。它们以零个或多个空格开头,后跟散列符号(#)和一些文本。(Cucumber目前不支持区块注释。)

空格或制表符可用于缩进。建议的缩进级别为两个空格。下面是一个例子:

Feature: Guess the word

  # The first example has two steps
Scenario: Maker starts a game
When the Maker starts a game
Then the Maker waits for a Breaker to join # The second example has three steps
Scenario: Breaker joins a game
Given the Maker has started a game with the word "silky"
When the Breaker joins the Maker's game
Then the Breaker must guess a word with 5 characters

Gherkin语法具体可以参考Gherkin Reference - Cucumber Documentation

给TypeScript项目配置BDD测试框架Cucumber.js

  • 通过命令yarn add -D @cucumber/cucumber chai 安装BDD测试框架Cucumber.js和断言(Assert)框架chai。

  • 创建目录features,在目录下创建文件bank-account.feature,内容如下:

    # features/bank-account.feature
    Feature: Bank Account Scenario: Stores money
    Given A bank account with starting balance of $100
    When $100 is deposited
    Then The bank account balance should be $200

    此文档描述了存款场景,银行存款账户有100美金,存入100美金,则账户应该有200美金。

  • 创建step-definitions\bank-account.steps.ts

    const { Given, Then, When} = require( '@cucumber/cucumber');
    const { assert } = require( 'chai'); let accountBalance = 0; Given('A bank account with starting balance of ${int}', function(amount) {
    accountBalance = amount;
    }); When('${int} is deposited', function (amount) {
    accountBalance = Number(accountBalance) + Number(amount);
    }); Then('The bank account balance should be ${int}', function(expectedAmount) {
    assert.equal(accountBalance, expectedAmount);
    });

    我们需要创建与之对应的测试代码,代码将通过类型与特性文件中输入和输出验证进行映射,其中Given对应的方法将获得100美金初始账户金额的映射,传给accountBalance。在When对应的方法中,amount测试会获得存入100美金的金额映射。最后,在Then对应的方法中expectedAmount会映射到200美金,用来验证最后是否与accountBalance相等,如果相等断言正常返回,否则BDD判断测试Case失败。

  • 我们可以通过命令yarn cucumber-js features\**\*.feature -r step-definitions\**\*.js运行测试。

  • 要想完成自动化配置,可以在工程根目录下创建文件cucumber.js,内容如下:

    // cucumber.js
    let common = [
    'features/**/*.feature', // Specify our feature files
    '--require step-definitions/**/*.js', // Load step definitions
    '--format progress-bar', // Load custom formatter
    ].join(' ');
    module.exports = {
    default: common
    };
  • 再次执行命令yarn cucumber-js,通过cucumber.js文件中的配置项,会自动找到feature文件和步骤定义脚本文件,完成BDD测试工作。

参考:

在TypeScript项目中进行BDD测试的更多相关文章

  1. 在 Ionic2 TypeScript 项目中导入第三方 JS 库

    原文发表于我的技术博客 本文分享了在Ionic2 TypeScript 项目中导入第三方 JS 库的方法,供参考. 原文发表于我的技术博客 1. Typings 的方式 因在 TypeScript 中 ...

  2. 在Spring Boot项目中使用Spock测试框架

    本文首发于个人网站:在Spring Boot项目中使用Spock测试框架 Spock框架是基于Groovy语言的测试框架,Groovy与Java具备良好的互操作性,因此可以在Spring Boot项目 ...

  3. Vue+Typescript项目中使用echarts

    方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...

  4. typescript项目中import 图片时报错:TS2307: Cannot find module ‘...’

    最近在用typescript写项目时,我用import来加载一个图片,webpack编译文件是会报错如下: 报错: 解决: 如果在js中引入本地静态资源图片时使用import img from './ ...

  5. 【IDEA】单元测试:项目中引入JUnit测试框架+Mock简单了解

    一.Junit 使用和说明: 参考:单元测试第三弹--使用JUnit进行单元测试-HollisChuang's Blog http://www.hollischuang.com/archives/17 ...

  6. 在Jenkins的pipeline项目中运行jmeter测试-教程

    Jenkins 2.0的发布引入了一种新的项目类型 - Pipeline,以前只能通过插件获得.从Jenkins 2.0开始,Pipeline项目开箱即用. 与通常的“自由式”项目相比,管道构建具有几 ...

  7. springboot项目中进行并发测试

    一 利用工具包: <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  8. 在typeScript+vue项目中使用ref

    因为vue项目是无法直接操作dom的,但是有时候开发需求迫使我们去操作dom. 两个办法,一个是很low的再引入jq,然后通过jq来操作,但是这样就失去了我们使用vue的意义, 可惜的是我曾经这样干过 ...

  9. Spring Boot项目中如何定制拦截器

    本文首发于个人网站:Spring Boot项目中如何定制拦截器 Servlet 过滤器属于Servlet API,和Spring关系不大.除了使用过滤器包装web请求,Spring MVC还提供Han ...

随机推荐

  1. 前端人员不要只知道KFC,你应该了解 BFC、IFC、GFC 和 FFC

    前言 说起KFC,大家都知道是肯德基,但面试官问你什么是BFC.IFC.GFC和FFC的时候,你是否能够像回答KFC是肯德基时的迅速,又或者说后面这些你根本就没听说过,作为一名前端开发工程师,以上这些 ...

  2. WPF页面后台代码InitializeComponent()报错

    InitializeComponent(); 报错: 查看对应的前台xaml文件中,主标签中是否缺失引用: x:class="命名空间.类名"

  3. linux文件目录权限操作

    设置修改文件的属主或修改文件属组 [root@localhost ~]# ll test.txt -rw-r--r--. 1 root root 0 Oct 21 12:01 test.txt [ro ...

  4. C# form捕捉方向键事件

    在C# Form中监听键盘输入事件本身是很简单的,但是如果是想监听键盘上的上下左右这四个方向键,实现起来有所不同.下面我就以一个Demo简单陈述一下实现过程. 一.为了让界面能够监听键盘事件,必须实现 ...

  5. laravel 登录+中间件拦截+红柚小说网小说采集+图片本地化

    .......................登录界面 <!doctype html> <html lang="en"> <head> < ...

  6. Windows原理深入学习系列-Windows内核提权

    这是[信安成长计划]的第 22 篇文章 0x00 目录 0x01 介绍 0x02 替换 Token 0x03 编辑 ACL 0x04 修改 Privileges 0x05 参考文章 继续纠正网上文章中 ...

  7. 基于Zookeeper的分布式锁(干干干货)

    原文地址: https://juejin.im/post/5df883d96fb9a0163514d97f 介绍 为什么使用锁 锁的出现是为了解决资源争用问题,在单进程环境下的资源争夺可以使用 JDK ...

  8. 从零开始,开发一个 Web Office 套件(10):捕获键盘事件,输入文字

    这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...

  9. LGP5430题解

    新的 \(O(k+\log n)\) 做法. 考虑计算每个猴子对答案的贡献. 打个表: 1 1 2 4 8 16 32 ... 可以看出第 $ i $ 个猴子对答案的贡献是 \(i^k \times ...

  10. async-validator 源码学习笔记(二):目录结构

    上一篇文章<async-validator 源码学习(一):文档翻译>已经将 async-validator 校验库的文档翻译为中文,看着文档可以使用 async-validator 异步 ...