Add karma test runner to hybris storefront extension

Frontend development is not staying on the same place and nowadays in every project you need to run unit tests for javascript.

To add js unit test run in latest hybris 1808 version:

  1. Add karma, jasmine and phantomjs to your_custom_storefront/web/package.json:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  "name": "your_custom_storefront",
  "version": "0.0.0",
  "description": "grunt config for the accelerator",
  "private": true,
  "scripts": {
    "test": "./node_modules/karma/bin/karma start karma.conf.js",
    "start": "grunt"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.3",
    "grunt-browser-sync": "^2.2.0",
    "grunt-contrib-less": "^2.0.0",
    "grunt-contrib-watch": "^1.1.0",
    "jasmine-core": "^3.2.1",
    "karma": "^3.0.0",
    "karma-coverage": "1.1.2",
    "karma-jasmine": "^1.1.2",
    "karma-phantomjs-launcher": "^1.0.4",
    "plugin": "^0.3.3"
  },
  "dependencies": {
    "grunt-sync": "0.8.0",
    "phantomjs": "^2.1.7"
  }
}
  1. Add karma settings to your_custom_storefront/web/karma.conf.js:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
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: ['jasmine'],


        // list of files / patterns to load in the browser
        files: [
            'webroot/WEB-INF/_ui-testsrc/prepare.hybris.tests.js',
            'webroot/WEB-INF/_ui-src/**/*.js',
            // 'webroot/WEB-INF/_ui/**/*.js',
            'webroot/WEB-INF/_ui-testsrc/**/*.js'
        ],


        // list of files / patterns to exclude
        exclude: [
            '**/qunit.js'
        ],


        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {},


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

        // optionally, configure the reporter
        coverageReporter: {
            includeAllSources: true,
            dir: '../temp/coverage',
            subdir: function (browser) {
                // normalization process to keep a consistent browser name across different
                // OS
                return browser.toLowerCase().split(/[ /-]/)[0];
            }
        },

        // 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: false,

        // Allow remote debugging when using PhantomJS
        customLaunchers: {
            'PhantomJS_custom': {
                base: 'PhantomJS',
                debug: true
            }
        },

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


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

        // Concurrency level
        // how many browser should be started simultaneous
        concurrency: Infinity
    })
}
  1. Create directory your_custom_storefront/web/webroot/WEB-INF/_ui-testsrc, where would be stored all javascript tests.

  2. Create in your_custom_storefront/web/webroot/WEB-INF/_ui-testsrc file prepare.hybris.tests.js, which will contain javascript variables created on server side jsp:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
    var ACC = {config: {}};
ACC.config.contextPath = '';
ACC.config.encodedContextPath = '';
ACC.config.commonResourcePath = '';
ACC.config.themeResourcePath = '';
ACC.config.siteResourcePath = '';
ACC.config.rootPath = '';
ACC.config.CSRFToken = '';
ACC.config.googleApiKey = '';
ACC.config.googleApiVersion = '';
ACC.config.loginUrl = '';
ACC.config.authenticationStatusUrl = '';

ACC.pwdStrengthVeryWeak = '';
ACC.pwdStrengthWeak = '';
ACC.pwdStrengthMedium = '';
ACC.pwdStrengthStrong = '';
ACC.pwdStrengthVeryStrong = '';
ACC.pwdStrengthUnsafePwd = '';
ACC.pwdStrengthTooShortPwd = '';
ACC.pwdStrengthMinCharText = '';
ACC.accessibilityLoading = '';
ACC.accessibilityStoresLoaded = '';
ACC.autocompleteUrl = '';

var screenXs = "480px";
var screenSm = "640px";
var screenMd = "1024px";
var screenLg = "1400px";

var screenXsMin = "480px";
var screenSmMin = "640px";
var screenMdMin = "1024px";
var screenLgMin = "1400px";

var screenXsMax = "639px";
var screenSmMax = "1023px";
var screenMdMax = "1399px";

Now you can run javasript tests with npm test command from your_custom_storefront/web folder. Test result will be generated into your_custom_storefront/temp/coverage.

comments powered by Disqus