I am using Webpack to bunlde my angular js code. However i am not able to write the mocha based unit test cases bcz gulp-mocha is failing to "require" css. Following are code snippet for details.
Benefits.js angular js directive:
var Utilities = require("./../../../../../utilities/Utilities");
var AppUtilities = require("./../../../../../utilities/AppUtilities");
require("./../../../../css/benefits.css");
module.exports = {
getBenefits: function ($sce) {
return {
restrict: "E",
template: require('html!./../../../../templates/page/Benefits.html'),
replace: true,
scope: {
benefits: '=',
productPageBenefits: '=',
divider: '='
},
link: function (scope, element, attrs) {
//get benefit details as per given list of key
scope.getBenefitsList = function (benefitKeyList, benefits) {
return OpensiteUtilities.getBenefitsList(benefitKeyList, benefits);
};
}
};
}
};
Benefits_test.js is unit test case file:
describe('The Benefits', function () {
var Benefits = require('../../../../../../../../application/client-src/js/application/directives/productpage/Benefits.js');
beforeEach(function () {
});
it('Should be an Object', function () {
Benefits.should.be.a('Object');
expect(Benefits).to.have.property('getBenefits');
});
});
I am gettign following error
/my/path/application/client-src/css/benefits.css:1
(function (exports, require, module, __filename, __dirname) { @media (min-widt
^
[16:18:49] { [SyntaxError: Unexpected token ILLEGAL]
name: 'SyntaxError',
message: 'Unexpected token ILLEGAL',
stack: 'SyntaxError: Unexpected token ILLEGAL\n at Module._compile (module.js:439:25)\n at Object.Module._extensions..js (module.js:474:10)\n at Module.load (module.js:356:32)\n at Function.Module._load (module.js:312:12)\n at Module.require (module.js:364:17)\n at require (module.js:380:17)\n at Object.<anonymous> (/my/path/application/client-src/js/application/directives/productpage/Benefits.js:9:1)\n at Module._compile (module.js:456:26)\n at Object.Module._extensions..js (module.js:474:10)\n at Module.load (module.js:356:32)\n at Function.Module._load (module.js:312:12)\n at Module.require (module.js:364:17)\n at require (module.js:380:17)\n at Suite.<anonymous> (/my/path/test/application/client-src/js/application/directives/productpage/Benefits_test.js:20:20)\n at context.describe.context.context (/my/path/node_modules/jumpstart-engine/node_modules/gulp-mocha/node_modules/mocha/lib/interfaces/bdd.js:75:10)\n at Object.<anonymous> (/my/path/test/application/client-src/js/application/directives/productpage/Benefits_test.js:19:1)',
showStack: false,
showProperties: true,
plugin: 'gulp-mocha' }
I understand its failing bcz gulp-mocha is not able to understand "css" file. How I can write the test cases? Do I have move "require(./../benefits.css)
" outside of my directive code?
I want to keep all the dependencies in same directive code (using webpack). Please help
One option would be to trigger Mocha through mocha-loader and set CSS to be loaded through null-loader. That should fix the
require
issue you are encountering.In case you want to solve it outside of Webpack you would need to patch
require
somehow. I expect you would want to use something like proxyquire, mockery or rewire in that case.