skoder
@skoder
web программист

Как тестировать GUI JavaScript в браузере из под консоли?

Доброего времени.
Я уже долго время пилю свой проект, wysiwyg редактор Jodit. По специфике понятно, что код много взаимодействует с браузером. Сам проект написан на TypeScript, который собирает webpack.
У webpack в настройках указано:
output: {
        path: path.join(__dirname, 'dist'),
        filename: 'jodit.js',
        publicPath: '/dist/',
        libraryTarget: "this",
        library: "Jodit"
},

С самого начала я писал тесты на mocha + chai. Они, и сам редактор подключаются на странице test.html
Раньше я отправлял эту страницу в phantomjs и этом меня устраивало. Постепенно phantomjs перестал меня устраивать, потому как тупил там где другие браузеры (даже ie9) отрабатывали нормально. Тогда я просто открывал test.html в каждом браузере, и ок. Тесты примерно такие
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'));
})

Т.е. это не unit тесты. Обычный пользовательский интерфейс.
Вопрос в том, как это можно автоматизировать через консоль? Я поставил карму и даже подружил ее с webpack, но все примеры в интернете показывают как делать на ней unit тесты, т.е. все что имеем это js, и в нем тестируем классы и функции.
Как сделать так, чтобы karma помимо того, что подключает нужные скрипты, еще и отправляла страницу в хром?
Вот конфиг karma
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
        }
    })
}

Проблема в том, что webpack который запускает karma, игнорирует директивы output, т.е. я не получаю глобального объекта Jodit.
Как это исправить? Подскажите пожалуйста
  • Вопрос задан
  • 434 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы