Seed of webpack + angular (Part 2)

Time:2021-7-16

Seed of webpack + angular (Part one)The construction, production and hot compilation display of the project are introduced.

introduce

Here is mainly about testing. Many companies are doing agile development. There are many methods for agile development, but no matter which method is adopted, testing is necessary. Verification of code, verification of function, timely feedback and timely repair are the basis of ensuring agile development. Therefore, automatic testing can ensure that the development can still be maintained well in rapid development, and will not bring new problems and code quality problems.

unit testing

Karma can do unit testing for multiple browsers at the same time, taking into account the compatibility of the code. But Kara does not contain assertion library, so we need assertion library. Here I use Mocha + Chai instead of jasmine’s. As for why, to be honest, I just came into contact with automated testing. There is no dependency, so I know about it in the evening. Mocha is chosen mainly because of its scalability and asynchronous testing ability. The comparison can be viewedThis articleThen, because ES6 is used, you need to compile the code before testing, so you need to use the two help to locate the location of the code: the karma webpack and the karma sourcemap loader. Finally, there is the karma Mocha reporter, which helps me to view the test report more clearly.

Karma.conf.js

module.exports = function (config) {
    config.set({

        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '',


        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['mocha', 'chai'],


        // list of files / patterns to load in the browser
        files: ['app/**/*Spec.js'],


        // list of files to exclude
        exclude: [],


        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {'app/**/*Spec.js': ['webpack', 'sourcemap']},


        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['mocha'],


        // web server port
        port: 9876,


        // enable / disable colors in the output (reporters and logs)
        colors: true,


        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,


        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,


        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['Chrome'],


        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: false,

        // Concurrency level
        // how many browser should be started simultaneous
        concurrency: Infinity,

        webpack: {
            devtool: 'inline-source-map',
            module: {
                loaders: [
                    {test: /\.js/, exclude: [/app\/lib/, /node_modules/], loader: 'babel'},
                    {test: /\.html/, loader: 'raw'},
                    {test: /\.styl$/, loader: 'style!css!stylus'},
                    {test: /\.css$/, loader: 'style!css'}
                ]
            }
        },
        webpackServer: {
            noInfo: true // prevent console spamming when running in Karma!
        },
        plugins: [
            'karma-chrome-launcher',
            'karma-chai',
            'karma-mocha',
            'karma-webpack',
            'karma-sourcemap-loader',
            'karma-mocha-reporter'
        ]
    })
};

The main test configuration of karma is here.
The biggest advantage of karma is that it can monitor code changes and help you test code problems in real time. At the same time, we can know whether there will be too big a problem. Good control of the code.

By the way, another problem is that the testing of angularjs requires the collocation of ‘angular mocks’, which can help you test
Module, the content of controller.

navbar.js

let navbar = angular.module('navbar', []);
navbar.controller('navbarCtrl', ['$scope', function ($scope) {
    $scope.links = ['home', 'about'];
}]);

navbar.directive('navbar', function () {
    return {
        restrict: 'AE',
        templateUrl: '/widgets/navbar/navbar.html'
    };
});
export default navbar;

navbar.Spec.js

import angular from 'angular';
import mocks from 'angular-mocks';
import navbar from './navbar';    
describe('navbar', function () {
    let scope;
    beforeEach(angular.mock.module('navbar'));
    beforeEach(angular.mock.inject(function ($rootScope, $controller) {
        scope = $rootScope.$new();
        $controller('navbarCtrl', {$scope: scope});
    }));
    It ('controller test ', function (){
        expect(scope).to.have.property('links').with.length(2);
    });
});

The above is a simple angular write space navbar test.

As for the assertion libraryCHAIYou can check the official documentation for specific assertions.

E2E test

E2E, also known as end to end, is the so-called “user real scene”. This test comparison system, based on E2E test development is also a kind of agile development. An E2E test example has been given in the official example of angularjs. The tool used is the protractor. It is also a testing tool given by angularjs. I have a general viewAPII feel that the function is still very strong. But to be honest, I didn’t take a detailed look at each API. Let’s leave this document for the future.

protractor-conf.js

exports.config = {
    allScriptsTimeout: 10000,

    specs: [
        '*.js'
    ],

    capabilities: {
        'browserName': 'chrome'
    },

    chromeOnly: true,
    baseUrl: 'http://localhost:3000/',
    framework: 'mocha',
    mochaOpts: {
        timeout: 10000
    }
};

Remember to set the timeout time, in case the test task function time is too long

HomeE2E.js

var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);
var expect = chai.expect;

describe('HomeE2E', function() {
    beforeEach(function() {
        browser.get('/');
    });

    It ('test links', function (){
        var todoList = element.all(by.repeater('x in links'));
        expect(todoList.get(1).getText()).to.eventually.equal('about');
        expect(todoList.get(0).getText()).to.eventually.equal('home');
    });

    It ('test input box ', function (){
        var HomeInput = element(by.model('HomeInput'));
        var Hometext = element(by.id('Hometext'));
        HomeInput.sendKeys('nexus');
        expect(Hometext.getText()).to.eventually.equal('nexus');
        HomeInput.clear();
    });
});

The above is a simple test code.

Test coverage

Karma coverage is a tool used by karma to judge the coverage of test code. However, due to the source code written in ES6, the coverage test result is compiled code, and the coverage of test has no practical significance. So this tool doesn’t appear in my project. But code coverage testing is important. In the case of not using ES6, you can still use karma coverage to count the code coverage of unit tests( I’m still looking for a solution to the code coverage of ES6. After all, ES6 is a direction in the future. So it’s good to ask in advance.)

Those who are interested can gozchq88_seedTake a look at this project.