未加星标

Sazerac: Data-driven Testing for JavaScript

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

I recently built Sazerac to address a problem that I often run into when writing javascript tests. I’ve found that in order to create a test suite that is comprehensive, maintainable, and doesn’t have an insane amount of repeated code, I end up using a data-driven approach.

This means I try to boil my tests down to inputs and expected outputs. Encapsulating application the code I’m going to test into pure functions always helps.

While the latest JS stacks (like React + Redux ) encourage a pure functional approach, the most widely used testing frameworks ( Jasmine , Mocha , and Jest ) aren’t designed with this approach in mind. They often assume that you’ll be testing code with side-effects. Think code “spying”, and (to a certain extent) mocking. These features were created for testing impure functions, but there’s nothing to use specifically for testing pure functions.

I feel strongly about the need for a testing framework with the data-driven approach at its core. Building that framework would be a big undertaking, so I chose a lighter option. I designed Sazerac as a helper library that works with Jasmine, Mocha, and Jest.

I might consider turning Sazerac into a standalone framework, but I’d like to see if people find it useful first.

Getting Down toIt

Let’s look at some code.

This pure function isPrime() returns true or false depending on whether the given parameter num is a prime number.

Here are some tests for isPrime() , given the numbers 1 , 2 , 3 , and 4 .

That’s a lot of code to write. If I wanted to add more test cases, I’d have to do some copy and paste. This just doesn’t feel right.

Here are the same tests, using Sazerac .

Sazerac will use these test cases to run describe and it functions that work with Jasmine, Mocha, Jest.

The describe/it messages are set based on given input and expected output, so test reports are super consistent:

isPrime() when given 1 should return true when given 2 should return true when given 3 should return true when given 4 should return false In The RealWorld

Things are usually more complicated.

Your code isn’t always as simple as the isPrime() function. Take this React component, for example.

This component expects a product object with 3 props, title , price , and inventory . If any of those props are missing, it renders an error message and an error class at the root element. If all the props have values, it renders a success message and no error class.

I’m going to use Enzyme (awesome for testing React components) to help test this. In my spec file, I’ll create a function to mount the component.

This function’s expected return value is complex, so the .expect() method that was used for isPrime() can’t be used here. I’ll use Sazerac’s .assert() method instead.

In this example, the p object is the return value of ProductComponent() given {} . The test above will pass if the product element (at the root of the component) has the class error .

More expectations can be added using additional .assert() calls on the same test case.

Each .assert() call runs a new test for ProductComponent() with the given input, {} . In this example, these 3 tests are run:

ProductComponent() when given {} should render `error` class should display error message should not display success message And It GetsBetter

We just tested for the “empty” object case, but what about other cases that might result in a similar state? For example, if title , price , or inventory is missing, we would expect the component to render with the same error state.

Sazerac’s forCases() method lets you group test cases that share the same expectations.

Resulting in the following tests:

ProductComponent() when given {} should render `error` class should display error message should not display success message when given {"price":"1.11","inventory":"111"} should render `error` class should display error message should not display success message when given {"title":"p1","inventory":"111"} should render `error` class should display error message should not display success message when given {"title":"p1","price":"1.11"} should render `error` class should display error message should not display success message

This ends up being much more concise than the equivalent tests written with describe , it , beforeEach , etc. It also makes it super easy to add new cases, or to update existing ones as needed.

Try ItOut

I’d recommend taking a few of your existing tests and refactoring them to use Sazerac . My hope is that it will reduce the complexity and increase readability of your tests.

If you have feedback, get in touch with me on twitter @MikeCalvanese

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaJavaScriptReact
分页:12
转载请注明
本文标题:Sazerac: Data-driven Testing for JavaScript
本站链接:http://www.codesec.net/view/532047.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(25)