All geek questions in one place

Trying to install tests with mocha, babel & es6 modules

I am trying to use grunt and babel to load my es6 source as a dependency for this test. So I ran the actual src and compiled the application just fine using a browser:

module.exports = function (grunt) {

  // Import dependencies
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-browserify');

  grunt.initConfig({
    browserify: {
      dist: {
        files: {
          'www/js/bundle.js': ['src/app.js'],
        },
        options: {
          transform: [['babelify', { optional: ['runtime'] }]],
          browserifyOptions: {
            debug: true
          }
        }
      }
    },
    jshint : {
      options : {
        jshintrc : ".jshintrc",
      },

      dist: {
        files: {
          src: ["src/**/*.js"]
        }
      }
    },
    watch: {
      scripts: {
        files: ['src/**/*.js'],
        tasks: ['jshint', 'browserify'],
        options: {
          atBegin: true,
          spawn: true
        },
      },
    }
  });

  grunt.registerTask("default", ['watch']);

};

It compiles one bundle.js file, which I include in my index.html file. Fine!

So what I want to do from the tests is importing the file that I am testing. So I have a simple storage object called InteractionStore located at src/stores/interaction_store.js. Then I created a specification file at:test/stores/interaction_store_spec.js

import expect from "expect.js";
import InteractionStore from '../../../src/stores/interaction_store.js';

describe("InteractionStore", () => {
  beforeEach(() => {
    InteractionStore.data = [];
  });
  describe("#start()", () => {
    it ("should apped multiple", function () {
      InteractionStore.start();
      InteractionStore.start();
      InteractionStore.start();
      expect(InteractionStore.data.length).toEqual(3);
    });
  });
});

So, I import the repository directly. I added several sections to the grunt file for the test process:

module.exports = function (grunt) {

  // Import dependencies
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-browserify');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-mocha-test');
  grunt.loadNpmTasks('grunt-babel');

  grunt.initConfig({
    babel: {
      options: {
        sourceMap: true,
        modules: "common"
      },
      test: {
        files: [{
          expand: true,
          cwd: 'test',
          src: ['**/*.js'],
          dest: 'test/compiled_specs',
          ext:'.js'
        }]
      }
    },
    browserify: {
      dist: {
        files: {
          'www/js/bundle.js': ['src/app.js'],
        },
        options: {
          transform: [['babelify', { optional: ['runtime'] }]],
          browserifyOptions: {
            debug: true
          }
        }
      }
    },
    clean: ["test/compiled_specs"],
    jshint : {
      options : {
        jshintrc : ".jshintrc",
      },

      dist: {
        files: {
          src: ["src/**/*.js"]
        }
      }
    },
    watch: {
      scripts: {
        files: ['src/**/*.js'],
        tasks: ['jshint', 'browserify:dist'],
        options: {
          atBegin: true,
          spawn: true
        },
      },
    },

    mochaTest: {
      test: {
        src: ['test/compiled_specs/**/*_spec.js']
      }
    }
  });

  grunt.registerTask("default", ['watch']);
  grunt.registerTask("test", ['clean', 'babel', 'mochaTest']);

};

Babel , , , .js src, es6, , , .

+4
1

reddit. mocha mocha:

mocha --ui tdd --compilers js:babel/register test/**/*.js

, npm script.

, cordova, phantom js. , : https://gist.github.com/nmabhinandan/6c63463d9f0987020c6f. , - :

:

src/
  -- app code
test/
  spec/
    stores/
      interaction_store_spec
  SpecRunner.js
tests.html

module.exports = function (grunt) {

  // Import dependencies
  grunt.loadNpmTasks('grunt-contrib-watch')
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-browserify');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-babel');
  grunt.loadNpmTasks('grunt-exec');
  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.initConfig({
    babel: {
      options: {
        sourceMap: true,
        modules: "amd"
      },
      test: {
        files: [{
          expand: true,
          src: ["test/**/*.js"],
          dest: "dist",
          ext: ".js"
        }, {
          expand: true,
          src: ["src/**/*.js"],
          dest: "dist",
          ext: ".js"
        }]
      }
    },
    browserify: {
      dist: {
        files: {
          'www/js/bundle.js': ['src/app.js'],
        },
        options: {
          transform: [['babelify', { optional: ['runtime'] }]],
          browserifyOptions: {
            debug: true
          }
        }
      }
    },
    clean: {
      test: ["dist/test"]
    },
    eslint : {
      target: ["src/**/*.js"]
    },
    exec: {
      run_tests: "node_modules/.bin/mocha-phantomjs -p $(which phantomjs) tests.html"
    },
    sass: {
      dist: {
        options: {
          style: 'compressed'
        },
        files: {
          'www/css/styles.css': 'www/css/sass/styles.scss'
        }
      }
    },
    watch: {
      css: {
        files: ['www/css/sass/*.scss'],
        tasks: ['sass']
      },
      scripts: {
        files: ['src/**/*.js'],
        tasks: ['eslint', 'browserify:dist'],
        options: {
          atBegin: true,
          spawn: true
        },
      },
    }
  });

  grunt.registerTask("default", ['sass','watch']);
  grunt.registerTask("test", ["clean", "babel:test", "exec:run_tests"]);
};

, grunt babel, . mocha- phantom requirejs . , sass eslint . Babel AMD. requirejs . , requirejs baseUrl SpecRunner, .

SpecRunner.js:

// RequireJS configuration
require.config({
  baseUrl: 'dist/test',
  urlArgs: 'cb=' + Math.random(),
  paths: {
    spec: 'spec', // lives in the test directory
  },
  hbs: {
    disableI18n: true
  }
});

let testSuite = {
  specs: [
    'spec/stores/interaction_store_spec'
  ]
};

// run mocha
(function() {
  require(testSuite.specs, function() {

    if (window.mochaPhantomJS) {
      mochaPhantomJS.run();
    } else {
      mocha.run();
    }

  });
})();

Tests.html:

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Mocha Spec Runner</title>
    <link rel="stylesheet" href="node_modules/mocha/mocha.css">
</head>
<body>
    <div id="mocha"></div>

    <script src="node_modules/mocha/mocha.js"></script>
    <script src="node_modules/expect.js/index.js"></script>

    <script>
        mocha.ui('bdd');
        mocha.reporter('html');
    </script>
    <script src="node_modules/requirejs/require.js" data-main="dist/test/SpecRunner"></script>
</body>
</html>

json:

{
  "name": "test",
  "version": "0.0.1",
  "devDependencies": {
    "babel": "^5.8.12",
    "babel-runtime": "^5.8.12",
    "babelify": "^6.1.3",
    "eslint": "^0.24.1",
    "expect.js": "^0.3.1",
    "grunt": "^0.4.5",
    "grunt-babel": "^5.0.1",
    "grunt-browserify": "^3.8.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-eslint": "^16.0.0",
    "grunt-exec": "^0.4.6",
    "mocha": "^2.2.5",
    "mocha-phantomjs": "^3.6.0",
    "requirejs": "^2.1.20"
  }
}

, grunt test grunt babel , dist :

 dist/
   test/
     -- compiled specs
   src/
     -- compiled source

phantom . , phantomjs homebrew - , . 1.9.2

+3

Source: https://habr.com/ru/post/1598939/

More articles:


All Articles