在TypeScript项目中进行BDD测试

目录
  • 什么是BDD?
  • Gherkin语法
  • 给TypeScript项目配置BDD测试框架Cucumber.js

什么是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测试工作。

参考:

BDD Testing & Collaboration Tools for Teams | Cucumber

以上就是在TypeScript项目中进行BDD测试的详细内容,更多关于TypeScript项目BDD测试的资料请关注我们其它相关文章!

(0)

相关推荐

  • TypeScript 学习笔记之 typeScript类定义,类的继承,类成员修饰符

    目录 1.类的定义 2.类的继承 3.修饰符 前言: typeScript 中的类与 ES6 中的类非常相似,如果不知道 ES6 中的类,建议先学习下 ES6 中的 class .本篇文章重点介绍 typeScript 中的类定义.继承以及修饰符. 1.类的定义 类描述了所创建的对象共同的属性和方法.typeScript 支持面向对象的所有特性,比如类.接口等. 在 typeScript 中定义类的时候,使用 class 关键字,类名首字母使用大写,类可以包含以下三个模块: ​字段​ - 字段是

  • vue3+TypeScript+vue-router的使用方法

    目录 简单使用 创建项目 vue-cli创建 vite创建 安装vue-router 创建/修改组件 修改入口ts 启动vue 在浏览器中访问 文件结构图片 综合使用 动态参数 使用watch监听动态参数 使用组合API监听动态参数 重定向 命名与别名 命名路由 命名视图 别名 嵌套路由 编程式路由 简单使用 创建项目 vue-cli创建 $npm install -g @vue/cli $vue --version @vue/cli 4.5.15 $vue create my-project

  • 对TypeScript库进行单元测试的方法

    原文发布于2017年7月,为保证能正常运行,其中部分命令进行了调整. 当时TypeScript版本为2.x,但依旧具有借鉴意义. 单元测试能限制你库中Bug的「生长」.随着编写的库越来越大,你不能总是手工测试每个特性.但你可以使用单元测试来测试每个特性,并且编写起来并不难.下面展示如何在Typescript中设置单元测试! 步骤1:安装用于单元测试的包 单元测试assert(推断)代码中一些属性.例如你有一个方法add(x,y),其应该正确地将x和y相加,通过单元测试你可以进行如下测试asser

  • typeScript 泛型使用和泛型接口结合

    目录 1.泛型是啥? 2.泛型类型 3.泛型接口 4.泛型类 5.泛型约束 6.泛型参数默认类型 7.泛型条件类型 typeScript 中新增的泛型概念.泛型使用.泛型与接口结合: 在实际应用中可能会遇到求最小值的问题,比如求数组中的最小值. 在 ts 中的就需要写两种方式,一种针对 number,另外一种针对字符串. 这样写不利于代码重用,项目较大时,性能较差,同时工作效率也低,所以在 ts 中引入了泛型概念. function getMin1(arr:number[]):number {

  • 在TypeScript项目中进行BDD测试

    目录 什么是BDD? Gherkin语法 给TypeScript项目配置BDD测试框架Cucumber.js 什么是BDD? BDD(Behavior-Driven Design)是软件团队的一种工作方式,通过以下方式缩小业务人员和技术人员之间的差距: 鼓励跨角色协作,建立对待解决问题的共同理解 以快速.小迭代的方式工作,以增加反馈和价值流 生成系统文档,自动对照系统行为进行检查 我们通过将协作工作的重点放在具体的.真实的例子上来实现这一点,这些例子说明了我们希望系统如何运行.我们用这些例子来指

  • 详解如何在项目中使用jest测试react native组件

    目前Javascript的测试工具很多,但是针对React的测试策略,Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址:https://facebook.github.io/jest/.我们可以看到Jest官网宣称的是:Painless JavaScript Testing.是Facebook用于测试服务和React应用程序的JavaScript单元测试框架. 所谓单元测试也就是对每个单元进行测试,通俗的将一般针对的是函数,类或单个组件,不涉及系统和集成.单元测试是

  • 在Vue项目中使用snapshot测试的具体使用

    snapshot介绍 snapshot测试又称快照测试,可以直观地反映出组件UI是否发生了未预见到的变化.snapshot如字面上所示,直观描述出组件的样子.通过对比前后的快照,可以很快找出UI的变化之处. 第一次运行快照测试时会生成一个快照文件.之后每次执行测试的时候,会生成一个快照,然后对比最初生成的快照文件,如果没有发生改变,则通过测试.否则测试不通过,同时会输出结果,对比不匹配的地方. jest中的快照文件以为snap拓展名结尾,格式如下(ps: 在没有了解之前,我还以为是快照文件是截图

  • TS 项目中高效处理接口返回数据方法详解

    目录 写在前面 问题 解答 区别 总结 必备高效神器 写在前面 在 TypeScript 项目中,TypeScript 对接口返回数据的处理,是日常项目开发中一个比较棘手的问题. 那我们该如何 高效 的解决这个问题呢? 问题 项目中使用 ts 都会碰到如下场景:从接口请求过来的数据该如何进行处理? const fetchInfo = async (url: string, id: string) => { return $http.get(url, params); } const res =

  • vue项目中使用ts(typescript)入门教程

    目录 1.引入Typescript 2.配置文件webpack配置 3.让项目识别.ts 4.vue组件的编写 data()中定义数据 props传值 完整代码案例 最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入Typescript npm install vue-class-component vue-property-decorator --

  • 项目中使用Typescript封装axios

    目录 写在前面 基础封装 拦截器封装 类拦截器 实例拦截器 接口拦截 封装请求方法 取消请求 准备工作 取消请求方法的添加与删除 取消请求方法 测试 测试请求方法 测试取消请求 写在最后 写在前面 虽然说Fetch API已经使用率已经非常的高了,但是在一些老的浏览器还是不支持的,而且axios仍然每周都保持2000多万的下载量,这就说明了axios仍然存在不可撼动的地位,接下来我们就一步一步的去封装,实现一个灵活.可复用的一个请求请发. 这篇文章封装的axios已经满足如下功能: 无处不在的代

  • 在Spring boot的项目中使用Junit进行单体测试

    使用Junit或者TestNG可以进行单体测试,这篇文章简单说明一下如何在Spring boot的项目中使用Junit进行单体测试. pom设定 pom中需要添加spring-boot-starter-test <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>

  • 如何批量测试Mybatis项目中的Sql是否正确详解

    去Oracle行动 最近公司要发展海外项目,所以要将现有的系统全部平移过去,另外数据库也要从原来的Oracle变为Mysql.公司的数据库交互层面使用的是Mybatis,而Oracle与Mysql也有一些语法上的不同.所以在项目中的Sql要改动,但是多个项目中涉及到的Sql非常多,如果仅凭人工一条一条辨别的话,工作量有点大.所以就萌发出了直接将数据源变为Mysql,利用反射批量执行Mapper中的方法,然后如果有参数的话,就设置为默认的初始值,然后记录下来成功的数据和失败的数据,这样就可以根据失

  • 在Vue项目中使用Typescript的实现

    3.0迟迟没有发布release版本,现阶段在Vue项目中使用Typescript需要花不小的精力在工程的配置上面.主要的工作是webpack对TS,TSX的处理,以及2.x版本下面使用class的形式书写Vue 组件的一些限制和注意事项. Webpack 配置 配置webpack对TS,TSX的支持,以便于我们在Vue项目中使用Typescript和tsx. module.exports = { entry: './index.vue', output: { filename: 'bundle

  • TypeScript在React项目中的使用实践总结

    序言 本文会侧重于TypeScript(以下简称TS)在项目中与React的结合使用情况,而非TS的基本概念.关于TS的类型查看可以使用在线TS工具

随机推荐