JavaScript Quality Code (Lint and Test) Essentials

  1. Ideally, Quality Codes are codes that are
    1. readable & maintainable by other programmer
    2. reusable for other projects
    3. bug-free
  2. For Readability & Maintainability
    1. Use Consistent Formatting and Logical Naming convention
    2. Practice a team coding convention and automate the enforcement
      1. Avoid using: too many rules, needlessly strict rules, overly pedantic rules
    3. Use structures and naming to convey the intent of the codes. Only use comments when it is needed badly
    4. Modularize
    5. Solution: EditorConfig, ESLint (jump start with AirbnbGoogle, or Feross’ Style Guide, and customize it)
  3. For Reusability
    1. Do Functional Programming if possible
    2. Modularize components
  4. For Bug-Free > Code Testing
    1. Unit Testing (单元测试): Testing a small piece of non-vendor code, say a module, usually with a simulated dependencies
    2. Integration Testing (集成测试): Unit Testing with APIs, UIs and result, usually cross-units
    3. Functional Testing (功能测试): Testing focusing on the user interface against the specification (business logics)
    4. System Testing (系统测试): Run the app on a production-like environment. It’s may be a Stress Test (for reliability), Load Tests (for scalability), a Security Scan and UX (User Experience) Test, Compatibility Test.
    5. Regression Test (回归测试): Rerunning Unit and Integration tests after bugs found in a feature upgrade
  5. Testing Frameworks:
    1. opinionated, minimalist, has an assertions lib, fast with async parallel testing, zero pollution to global namespace
    2. jesmine: synchronous,  no external dependencies, adds to global namespace
    3. jest: asynchronous, React support, includes test doubles, interact test, adds to global namespace
    4. mocha: mature, async, flexible, plugable, not assertion lib or mocks, adds to global namespace
  6. Testing Tool: Assertion Library
    1. Definition: a super set of Node.js’ Assert module, which evaluate output against its expectation
    2. Chai.js (TDD or BDD)
    3. Should.js (BDD)
  7. Testing Pattern: Testing-Driven Development (TDD)
  8. Testing Pattern: Behavior-Driven Development (BDD)
    // A dead simple test
    // inside of "src/index.js"
    module.exports = class Demo{
      static add(a,b){return a+b}
    // inside of "src/index.test.js"
    const chai = require("chai")
      , should = chai.should()
      , Demo = require("./index.js")
    describe("add", function(){
      context("1 + 2", function(){
        it("should be 3", function(){
    // inside of "buildScripts/testSetup.js"
    // This file is not transiplied, and so CommonJS and ES5
    // register babel to transpile before our tests run.
    // disable webpack features that Mocha doesn't support
    require.extensions['.css'] = function(){};
    $ mocha --reporter progress buildScripts/testSetup.js \"src/**/*.test.js\