nikku / karma-browserify

A fast Browserify integration for Karma that handles large projects with ease
MIT License
321 stars 50 forks source link

Karma not working with Firefox(FirefoxHeadless) when loading with html page. #214

Closed DaveO-Home closed 6 years ago

DaveO-Home commented 6 years ago

Hi, Browserify/Karma/Firefox(Headless)/*.html - Firefox fails usually with loops and memory corruption. The configuation works with Chrome. The config also works with "Webpack", "Fusebox" and "Stealjs". The "testapp_dev.html" loads the jasmine tests. Also, the unit-tests in tests/unit_test*.js work in firefox.

Firefox - Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0 on Fedora 26. Note: for firefox to work I need webcomponents for the import tag. I'm using the latest release.

Any suggestions?

Config:

let startupHtml = "appl/testapp_dev.html";
// Karma configuration
module.exports = function (config) {

if (!global.whichBrowsers) {
    global.whichBrowsers = ["ChromeHeadless, FirefoxHeadless"];
}

config.set({
    basePath: '../',
    frameworks: ['browserify', 'jasmine-jquery', 'jasmine'],
    files: [
        //Webcomponents for Firefox - used for link tag with import attribute.
        {pattern: "appl/karma/webcomponents-hi-sd-ce.js", watched: false},
        //Jasmine tests
        'tests/unit_test*.js',
        //Application and Acceptance specs.
        startupHtml,
        {pattern: 'node_modules/**/*.map', watched: false, included: false, served: false},
        {pattern: 'node_modules/bootstrap/**/*.js', watched: false, included: false},
        {pattern: 'node_modules/popper.js/dist/umd/*', watched: false, included: false},
        {pattern: 'node_modules/can/**/*.js', watched: false, included: false},
        {pattern: 'node_modules/can-*/**/*.js', watched: false, included: false},
        {pattern: 'appl/index.js', included: false, watched: false},
        {pattern: 'appl/js/**/*.js', included: false, watched: false},
        {pattern: 'node_modules/**/package.json', watched: false, included: false},
        {pattern: 'node_modules/jquery/**/*.js', watched: false, served: true, included: false},
        {pattern: 'node_modules/jasmine-jquery/lib/jasmine-jquery.js', watched: false, served: true, included: false},
        {pattern: 'node_modules/tablesorter/**/*.js', watched: false, served: true, included: false},
        {pattern: 'package.json', watched: false, included: false},
        {pattern: 'node_modules/lodash/**/*js', watched: false, included: false},
        {pattern: 'node_modules/moment/**/*.js', watched: false, included: false},
        {pattern: 'appl/**/*.html', included: false, watched: false},
        {pattern: 'dist_test/vendor.js', included: false, watched: false, served: true},
        {pattern: 'dist_test/index.js', included: false, watched: true, served: true},  //watching bundle to get changes during tdd/test
        {pattern: 'dist_test/**/*.*', included: false, watched: false},
        {pattern: 'images/favicon.ico', included: false, watched: false},
        {pattern: 'node_modules/bootstrap/dist/css/bootstrap.min.css', watched: false, included: false},
        {pattern: 'node_modules/tablesorter/dist/css/theme.blue.min.css', watched: false, included: false},
        {pattern: 'node_modules/tablesorter/dist/css/jquery.tablesorter.pager.min.css', watched: false, included: false},
        {pattern: 'appl/templates/stache/*.stache', included: false, watched: false},
        {pattern: 'appl/templates/*.json', included: false, watched: false},
        {pattern: 'appl/views/prod/Test.pdf', included: false, watched: false},
        {pattern: 'appl/css/**/*.css', included: false, watched: false},
        //Karma/Jasmine/Loader
        'build/karma.bootstrap.js'
    ],
    bowerPackages: [
    ],
    plugins: [
        'karma-chrome-launcher',
        'karma-firefox-launcher',
        'karma-opera-launcher',
        'karma-jasmine',
        'karma-jasmine-jquery',
        'karma-mocha-reporter',
        'karma-browserify'
    ],
    /* This will only work in Chrome by default - Webcomponents included above, so firefox should work also. Other browsers may work with tdd.
       Karma uses <link href="/base/appl/testapp_dev.html" rel="import"> -- you will need webcomponents polyfill to use other browsers.
     */
    browsers: global.whichBrowsers,
    customLaunchers: {
        FirefoxHeadless: {
            base: 'Firefox',
            flags: ['--headless']
        }
    },
    browserNoActivityTimeout: 0,
    exclude: [
    ],
    preprocessors: {
        //'tests/unit_test*.js': ['browserify']
    },
    browserify: {
        debug: true,
        transform: ["browserify-css"],
        extensions: ['.js', '.css'],
    },
    reporters: ['mocha'],
    port: 9876,
    colors: true,
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    autoWatch: true,
    singleRun: false,
    loggers: [{
            type: 'console'
        }
    ],
    client: {
//            captureConsole: true,
        clearContext: false,
        runInParent: true,
        useIframe: true,
        jasmine: {
            random: false
        }
    },
    concurrency: 5
});
};

Results from ChromeHeadless....

Suite for Unit Tests
    ✔ Verify that browser supports Promises
    ✔ ES6 Support
    ✔ blockStrip to remove Canjs block of code
  Unit Tests - Suite 2
    ✔ Is Karma active
    ✔ Verify NaN
  Popper Defined - required for Bootstrap
    ✔ is JQuery defined
    ✔ is Popper defined
  Application Unit test suite - AppTest
    ✔ Is Welcome Page Loaded
    ✔ Is Tools Table Loaded
    Test Router: table/tools
      ✔ controller set: table
      ✔ action set: tools
      ✔ dispatch called: table
    ✔ Is Pdf Loaded
    Test Router: pdf/test
      ✔ controller set: pdf
      ✔ action set: test
      ✔ dispatch called: pdf
    Load new tools page
      ✔ setup and change event executed.
      ✔ new page loaded on change.
    Contact Form Validation
      ✔ Contact form - verify required fields
      ✔ Contact form - validate populated fields, email mismatch.
      ✔ Contact form - validate email with valid email address.
      ✔ Contact form - validate form submission.
    Popup Login Form
      ✔ Login form - verify modal with login loaded
      ✔ Login form - verify cancel and removed from DOM
DaveO-Home commented 6 years ago

I solved this by removing "browserify" from the karma config and building the app with gulp.