Author: helinjiang

We will discuss how to introduce automated testing into a front-end project. Although this article focuses on the front-end project, it actually applies to Node side applications as well.

This is the first chapter in a series of articles that gives you a first look at front end automation testing. Suitable for beginners.

1. The need to introduce automated testing

The benefits include reduced errors and increased efficiency, especially as front-end projects become larger and more maintained by multiple people.

There are also costs, after all, there are additional learning costs. But adding testing to your project may not be as difficult as you think.

2. BDD vs TDD

Speaking of testing, it is necessary to talk about the main types of testing, including BDD and TDD, which is a bit boring, but it is necessary to have a brief understanding, because it affects the strategy of choosing how to test.

  • TDD(Testing Driven Development) emphasizes a development approach in which tests drive the entire project, writing tests against interfaces and then passing tests as the functionality is completed, with the ultimate goal of passing all tests.
  • BDD(Bebavior Driven development) emphasizes a style of writing tests that are written like natural language so that each member of the project and even the product can understand and even write tests.

BDD and TDD both have their own application scenarios. BDD is generally more inclined to the automatic test design of system functions and business logic, while TDD is more efficient in the process of rapid development and testing of functional modules, aiming to complete the development quickly.

It is easy to find many comparisons on the Internet, such as:

  • Is TDD and BDD just a difference in language description? – zhihu
  • Some thoughts on TDD, BDD, and DDD
  • Virtual workshops: Code test ratios, test-driven development, and behavior-driven development

3. Mocha, the JavaScript testing framework

This article uses Mocha, one of the most popular JavaScript test frameworks out there, as an example. You can also use Jasmine, QUnit, etc.

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

A “test framework” is a tool for running tests. It allows you to add tests to your JavaScript application to ensure the quality of your code.

Installing Mocha in the project:

$ npm install mocha --save-dev
Copy the code

But for ease of operation, install Mocha globally as well:

$ npm install mocha -g
Copy the code

4. Assert library Chai

An Assertion library is a library for writing assertions.

The Wikipedia article assertions (Programs) explains assertions like this: In programming, an assertion is a first-order logic (such as a true or false assertion) placed within a program to indicate and verify an assertion that should be true when the program is running at the assertion location. If the assertion is not true, the program aborts with an error message.

According to the style, the assertion library is divided into TDD style and BDD style. Chai Assertion Library is a well known example, supporting both styles.

Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.

Install Chai into the project:

$ npm install chai --save-dev
Copy the code

5. Write test scripts

Let’s take a look at the relationship between Mocha, Chai, and test scripts. If you don’t understand it clearly, the rest of the tutorial will be confusing.

  • Mocha is just a testing framework that runs test scripts. It is not responsible for specific testing.
  • Chai is simply an assertion library that is used to write assertions in test scripts.
  • Testing scripts (files) is just like writing JS modules normally, except that the testing framework provides additional global methods and variables, such asdescribe,itIf you don’t start it with a test framework, it won’t run. likewindowObject is provided by the browser and can only be started by the browser, not by Node.
  • In test scripts, the assertion library provides syntactic support for making judgments, such as when you want to test a variableaShould be a string, you just have to write it like thisexpect(a).to.be.a('string');Leave the rest to Mocha + Chai, because they will handle correctly: pass if true, error if false.
  • Some testing frameworks come with an assertion library, but Mocha doesn’t, and Chai is a powerful separate assertion library, making the two a good match.

Let’s take a simple addition module as an example. The full code can be viewed here.

5.1 Creating the Source file

Let’s create a new source file, named add.js, with the following contents:

function add(x, y) {
    return x + y;
}

module.exports = add;
Copy the code

5.2 Creating a Test File

Create a new test file named add.test.js.

Typically, a test script has the same name as the source code script to be tested, but with the suffix.test.js (for tests) or.spec.js (for specifications).

var add = require('./add.js'); var expect = require('chai').expect; Function () {expect(add(1, 1)).to.be.equal(2); }); });Copy the code

The test script should contain one or more Describe blocks, and each DESCRIBE block should contain one or more IT blocks. Describe blocks can also include describe blocks.

  • describeA block is called a test suite and represents a set of related tests.
  • itA block, called a test case, represents a single test and is the smallest unit of testing.

Expect (add(1, 1)).to.be.equal(2); Is an assertion, and here we have chosen Chai’s Expect interface approach, which is BDD style. A detailed description of the API can be found here.

5.3 Running test Commands

In the current directory, run the following command:

mocha add.test.js
Copy the code

The result is as follows. It can be seen that the test script is identical to the test. There is only one test case in total, and the time is 8 ms.

The mocha command is followed by the path and file name of the test script, and you can specify multiple test scripts. Example: mocha file1 file2 file3

6. Summary

This article is just a primer on the basics of front-end testing, and uses Mocha + Chai as an example to write fairly simple test cases.

But this use case is too simple and idealistic. In a real project environment, there are many issues that need to be addressed, such as:

  • How do I write test cases using ES6 syntax?
  • How do I test for DOM manipulation in my code?
  • How do I test in different browsers?
  • How do I test using frameworks like React?
  • How do you test when you rely on scenarios such as Ajax?
  • .

We will continue to discuss these practical situations in the following articles. But at least according to this chapter, you can already write test cases for pure functions, such as passing in a timestamp and printing a custom time or date.

Give it a try!

Ivweb. IO /topic/58b69…