Javascript E2E测试（静态网站）与Karma/Mocha

我正在开发一个简单的静态网站，我希望有自动化的e2e和单元测试。然而，我无法通过考试。我的猜测是，在mocha/karma执行我的测试之前，我的页面没有完全加载

当我转到Karma仪表板并单击

Debug

按钮时，我的网站会正确加载，但在控制台中，我会得到

Debug.html:38断言错误：预期0高于1

。0是

$（'.en'）.length的结果，当我在控制台中运行它时，它输出3，因此断言应该为true

下面是我的单元测试和karma配置的代码：

索引规范js

import chai, {assert, expect} from 'chai';
import chaiAsPromised from 'chai-as-promised';
chai.use(chaiAsPromised);
chai.should();

describe('index', () => {
    before(() => {
        if (__html__) {
            const html = __html__['src/client/index.html'];
            const newDoc = document.open('text/html', 'replace');
            newDoc.write(html);
            newDoc.close();
        }
    });

    describe('changeLanguage', () => {
        it('should have French as the default language', () => {
            const frenchSections = $('.fr');
            const englishSections = $('.en');

            frenchSections.length.should.be.greaterThan(1);
            englishSections.length.should.be.greaterThan(1);
            frenchSections.each(e => $(e).is(':visible').should.be.true);
            englishSections.each(e => $(e).is(':visible').should.be.false);
        });
    });
});

module.exports = function(config) {
    config.set({
        basePath: './',

        frameworks: ['mocha', 'chai-sinon', 'browserify'],

        files: [
            client + '**/*.html',
            client + '**/*.js',
            test + '**/*.spec.js',
            'bower_components/jquery/dist/jquery.js',
            {pattern: 'bower_components/material-design-lite/material.min.css', included: false},
            'bower_components/material-design-lite/material.min.js',
            {pattern: 'bower_components/material-design-lite/material.min.js.map', included: false},
            temp + '**/*.js',
            {pattern: temp + '**/*.*', included: false},
            {pattern: client + 'fonts/**/*.*', included: false}
        ],

        exclude: [],

        proxies: {
            '/.tmp/': '/base/.tmp/',
            '/fonts/': '/base/src/client/fonts/',
            '/scripts/': '/base/scripts/',
            '/bower_components/': '/base/bower_components/'
        },

        preprocessors: {
            'src/client/**/*.js': ['browserify'],
            'test/**/*.spec.js': ['browserify'],
            'src/client/**/*.html': ['html2js']
        },

        browserify: {
            debug: true,
            transform: [
                [
                    'babelify',
                    {presets: 'es2015'}
                ],
                [
                    'browserify-istanbul',
                    {instrumenterConfig: {embedSource: true}}
                ]
            ]
        },

        coverageReporter: {
            reporters: [
                {'type': 'text-summary'},
                {'type': 'html', dir: 'coverage'}
            ]
        },

        reporters: ['progress', 'coverage', 'mocha'],

        port: 9876,

        colors: true,

        logLevel: config.LOG_INFO,

        autoWatch: false,

        browsers: ['PhantomJS'],

        singleRun: true,

        concurrency: Infinity,

        plugins: [
            'karma-browserify',
            'karma-chai-sinon',
            'karma-chrome-launcher',
            'karma-coverage',
            'karma-firefox-launcher',
            'karma-html2js-preprocessor',
            'karma-ie-launcher',
            'karma-mocha',
            'karma-mocha-reporter',
            'karma-phantomjs-launcher'
        ]
    });
};

karma.conf.js

import chai, {assert, expect} from 'chai';
import chaiAsPromised from 'chai-as-promised';
chai.use(chaiAsPromised);
chai.should();

describe('index', () => {
    before(() => {
        if (__html__) {
            const html = __html__['src/client/index.html'];
            const newDoc = document.open('text/html', 'replace');
            newDoc.write(html);
            newDoc.close();
        }
    });

    describe('changeLanguage', () => {
        it('should have French as the default language', () => {
            const frenchSections = $('.fr');
            const englishSections = $('.en');

            frenchSections.length.should.be.greaterThan(1);
            englishSections.length.should.be.greaterThan(1);
            frenchSections.each(e => $(e).is(':visible').should.be.true);
            englishSections.each(e => $(e).is(':visible').should.be.false);
        });
    });
});

module.exports = function(config) {
    config.set({
        basePath: './',

        frameworks: ['mocha', 'chai-sinon', 'browserify'],

        files: [
            client + '**/*.html',
            client + '**/*.js',
            test + '**/*.spec.js',
            'bower_components/jquery/dist/jquery.js',
            {pattern: 'bower_components/material-design-lite/material.min.css', included: false},
            'bower_components/material-design-lite/material.min.js',
            {pattern: 'bower_components/material-design-lite/material.min.js.map', included: false},
            temp + '**/*.js',
            {pattern: temp + '**/*.*', included: false},
            {pattern: client + 'fonts/**/*.*', included: false}
        ],

        exclude: [],

        proxies: {
            '/.tmp/': '/base/.tmp/',
            '/fonts/': '/base/src/client/fonts/',
            '/scripts/': '/base/scripts/',
            '/bower_components/': '/base/bower_components/'
        },

        preprocessors: {
            'src/client/**/*.js': ['browserify'],
            'test/**/*.spec.js': ['browserify'],
            'src/client/**/*.html': ['html2js']
        },

        browserify: {
            debug: true,
            transform: [
                [
                    'babelify',
                    {presets: 'es2015'}
                ],
                [
                    'browserify-istanbul',
                    {instrumenterConfig: {embedSource: true}}
                ]
            ]
        },

        coverageReporter: {
            reporters: [
                {'type': 'text-summary'},
                {'type': 'html', dir: 'coverage'}
            ]
        },

        reporters: ['progress', 'coverage', 'mocha'],

        port: 9876,

        colors: true,

        logLevel: config.LOG_INFO,

        autoWatch: false,

        browsers: ['PhantomJS'],

        singleRun: true,

        concurrency: Infinity,

        plugins: [
            'karma-browserify',
            'karma-chai-sinon',
            'karma-chrome-launcher',
            'karma-coverage',
            'karma-firefox-launcher',
            'karma-html2js-preprocessor',
            'karma-ie-launcher',
            'karma-mocha',
            'karma-mocha-reporter',
            'karma-phantomjs-launcher'
        ]
    });
};