For a long time, front-end tests have not been necessary for developers to write, but with the development of front-end engineering, front-end tests have become an important part of continuous integration, writing front-end tests can achieve the following purposes:

  • Correctness: You can verify the correctness of your code and know before you go live.
  • Automation: By writing test cases, you can write once, run many times.
  • Explanatory: How to use these apis is designed in test cases, and good test cases are more intuitive than development documentation.
  • Drive development: To ensure that your code is testable, you need to pay attention to the design of the API during development. The idea of TDD test-driven development is to write testable code during development to ensure that the code is testable.
  • Ensure refactoring: The Internet industry product iteration speed is very fast, there must be a process of code refactoring after iteration, then how to ensure the quality of the refactoring code? With test cases behind you, you can be bold about refactoring.

Unit testing

Unit testing includes assertions, test frameworks, test cases, test coverage, and mocks. The goal is to let developers know exactly what the code will look like.

assertions

Assertion: Ensures that the smallest unit is running properly.

The test framework

The testing framework is used to serve the testing and does not participate in the testing itself. It is mainly used to manage test cases and generate test reports to improve the development speed, readability and maintainability of test cases. Common testing frameworks are: Mocha, JEST, Jasmine, etc.

Test style

There are generally two testing styles that developers can choose from depending on the situation.

  • Test-driven development (TDD) : Focus on whether all functionality is implemented, and each functionality has a corresponding test case.
  • Behavior-driven development (BDD) : Each line of code is written with a purpose to provide a comprehensive set of test cases, focusing on whether the overall behavior meets expectations.
TDD runs the process

TDD (Test Drived Develop). The principle of TDD is to write unit test case code before developing functional code, and test it to drive development.

  • Setup (before a single test case starts)
  • SuiteSetup (before each test case starts)
  • Test (Define the test case and set it with the assertion library)
  • Teardown (after the start of a single test case)
  • SuiteTeardown (after each test case starts)
suite('Array'.function() {
  setup(function() {
    // Before the test case begins
  });
  suite('#indexOf'.function() {
    test('should return -1 when not present'.function() {
      assert.equal(- 1[1.2.3].indexOf(4));
    });
  });
  teardown(function() {
    // After the test case
  });
});
Copy the code
BDD runs the process

Behavior Driven Development (BDD). Behavior-driven development, which describes the behavior process of software, can be directly used as software requirements document.

  • Before (before a single test case starts)
  • BeforeEach (beforeEach test case starts)
  • It (Define test cases and set them up with an assertion library)
  • After (after the start of a single test case)
  • AfterEach (afterEach test case starts)
describe('Array'.function() {
  before(function() {
    // Before the test case begins
  });
  describe('#indexOf'.function() {
    it('should return -1 when not present'.function() {[1.2.3].indexOf(4).should.equal(- 1);
    });
  });
});
Copy the code

The test case

A Test Case is a set of Test inputs, execution conditions, and expected results written for a specific goal to determine whether a code function meets a specific requirement. At a minimum, test cases require forward and reverse testing to ensure functional coverage.

Use IT to define a test case:

it('should return -1 when not present'.function(done) {
  // xxx
});
Copy the code

Asynchronous test

When an asynchronous test case is executed, the done function is injected as an argument.

it('should return -1 when not present'.function(done) {
  setTimeout((a)= > {
    done();
  }, 1000);
});
Copy the code

Test coverage

Test coverage is used to determine how much code is covered by unit tests. The principle is to inject statistical code into the source code to monitor the execution of each line of code. You can count whether the line of code is executed and how many times it is executed. Test coverage includes the following aspects:

  • Line coverage: Is every line executed?
  • Function coverage: Is every function called?
  • Branch Coverage: Is every if block executed?
  • Statement coverage: Is every statement executed?

E2E test

The E2E (End To End) test simulates user operations on the web page and checks whether the function runs properly by detecting the change of the web page status.

When using E2E tests, the test program usually automatically opens the browser to perform the configured operations. Therefore, the browser needs to be driven. Common libraries include:

  • selenium/webdriver
  • nightwatch
  • puppeteer

The performance test

Performance testing has a wide range of categories, including benchmarking, stress testing and so on.

The benchmark

Benchmarks measure how many times a method is executed over how many times. Usually written by the Benchmark library.

  • Aspect oriented Programming (AOP) non-invasive statistics.
  • A Benchmark test method that does not simply count the number of times a test code is executed. It has a rigorous sampling process that depends on whether the data sampled is complete or not. The variance is calculated according to the number of counts.
var suite = new Benchmark.Suite();

// add tests
suite
  .add('RegExp#test'.function() {
    /o/.test('Hello World! ');
  })
  .add('String#indexOf'.function() {
    'Hello World! '.indexOf('o') > - 1;
  })
  // add listeners
  .on('cycle'.function(event) {
    console.log(String(event.target));
  })
  .on('complete'.function() {
    console.log('Fastest is ' + this.filter('fastest').map('name'));
  })
  // run async
  .run({ async: true });

// logs:
// => RegExp#test x 4, 4, 5 +-0.99 (cycles)
// => String#indexOf x
// => Fastest is String#indexOf
Copy the code

Pressure test

Stress testing is focused on the server side and helps us find bottlenecks in the system and reduce the chances of problems after release to production. It can also predict the carrying capacity of the system, so that we can make some countermeasures based on that.

Several common indicators to check for network interface stress tests are throughput, response time, and concurrency, which reflect the server’s concurrent processing capacity.

  • Pv website number of visitors on that day.
  • Number of unique visitors to UV.
  • QPS server processing requests per second. QPS = pv/t.

Commonly used pressure testing tools: AB, JMeter.

Security testing

Security test is a professional test. Testers need to understand common Web attack methods, and then simulate the test program to prevent other illegal personnel from using the same way to attack the program after it goes online. Common front-end attacks are as follows:

  • XSS
  • SQL injection
  • CSRF

A functional test

Function test is to verify each function of the product. According to the function test cases, test item by item to check whether the product meets the function required by users. Common functional testing methods are smoke testing, regression testing and so on.

Smoke test

A free form of testing, where you find a bug and fix it, and then focus on that bug. The advantages and disadvantages are as follows:

  • Save time.
  • Defect coverage is extremely low.

Regression testing

Modify all tests of the whole function in one place, generally with automated tests. The advantages and disadvantages are as follows:

  • Greatly reduce the probability of error.
  • Time consuming.

Test related library

  • Karma: Use a real browser environment and test compatibility.
  • Mocha: Testing framework.
  • Chai: Assertion library.
  • Istanbuljs/NYC: The coverage library.
  • Backstopjs: Test UI.
  • Benchmark: Indicates a benchmark test.
  • Phantomjs: Headless browser.
  • Nightwatch: E2E testing.
  • Jest: Big and complete.

For more articles, welcome to Star and subscribe to my blog.