V
V
Valery Chupurnov2017-07-26 15:50:31
Software testing
Valery Chupurnov, 2017-07-26 15:50:31

How to test GUI JavaScript in a browser from under the console?

Good time.
I've been sawing my project for a long time, the wysiwyg Jodit editor. By specifics, it is clear that the code interacts a lot with the browser. The project itself is written in TypeScript, which is compiled by webpack.
Webpack has the following settings:

output: {
        path: path.join(__dirname, 'dist'),
        filename: 'jodit.js',
        publicPath: '/dist/',
        libraryTarget: "this",
        library: "Jodit"
},

From the very beginning, I have been writing mocha + chai tests. They, and the editor itself, are connected to the test.html page
. I used to submit this page to phantomjs and that suited me. Gradually, phantomjs ceased to suit me, because it was stupid where other browsers (even ie9) worked fine. Then I just opened test.html in every browser, and ok. Tests are like this
it('Editor should replace and hide source textarea', function() {
            var area = appendTestArea();
            var editor = new Jodit(area);
            expect(area.style.display).to.equal('none');
            expect(editor.editor).to.equal(document.querySelector('.jodit_wysiwyg'));
})

Those. these are not unit tests. Regular user interface.
The question is, how can this be automated through the console? I installed karma and even made friends with webpack, but all the examples on the Internet show how to do unit tests on it, i.e. all we have is js, and we test classes and functions in it.
How to make karma, in addition to connecting the necessary scripts, also send the page to chrome?
Here is the karma config
var webpackConfig = require('./webpack.config');
var path = require('path');
module.exports = function(config) {
    config.set({
        frameworks: ['mocha', 'chai'],
        files: ['src/index.ts', 'test/bootstrap.js', 'test/**/*.js'],
        reporters: ['progress'],
        port: 9876,  // karma web server port
        colors: true,
        logLevel: config.LOG_INFO,
        browsers: ['ChromeHeadless'],
        autoWatch: false,
        // singleRun: false, // Karma captures browsers, runs the tests and exits
        concurrency: Infinity,
        preprocessors: {
            'src/index.ts': ['webpack'],
        },
        plugins: [
            'karma-chrome-launcher',
            'karma-mocha',
            'karma-chai',
            'karma-webpack',
            'karma-sourcemap-loader'
        ],
        webpack: {
            devtool: 'eval-source-map',
            module: webpackConfig.module,
            resolve: webpackConfig.resolve,
        },
        webpackMiddleware: {
            quiet: true,
            noInfo:true,
            publicPath: webpackConfig.output.publicPath
        }
    })
}

The problem is that the webpack that runs karma ignores the output directives, i.e. i am not getting the global Jodit object.
How to fix it? Tell me please

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question