We Keep Coding

Number toLocaleString not working on Angular' tests

I have the following function on my application.
convertToPercent(number) {
if (!number) return 'N/A';
return Number(number / 100).toLocaleString('pt-br', { style: 'percent'
});
}
and then I just created the following test scenario
it('Should convertToPercent(10) return "10%" ' , () => {
expect(component.convertToPercent(10)).toEqual('10%');
})
But then When I'm running the tests it's broken because 0.1 is not equal to 10%.
Does anyone have some idea of what it can be?
When running the application it's working.

I just detected that the problem was because the PhantomJS Browser as default won't support the ECMAScript Internationalization API as default.
To solve it you can install the intl library using npm i intl --save-dev and then enable it inside the polyfill file.
* Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
*/
import '#angular/localize/init';
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `#angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags.ts';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
import 'intl';
/**
* Date, currency, decimal and percent pipes.
* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
*/
/**
* Need to import at least one locale-data with intl.
*/
import 'intl/locale-data/jsonp/pt-BR';
Additional info: https://dzone.com/articles/using-phantomjs-with-karma

How to exclude Express view engines from Webpack bundle

I'm bundling my CLI app using Webpack v4. One of the dependencies is Express, and this causes a warning:
WARNING in ./node_modules/express/lib/view.js 81:13-25
Critical dependency: the request of a dependency is an expression
# ./node_modules/express/lib/application.js
# ./node_modules/express/lib/express.js
# ./node_modules/express/index.js
That comes from this line within Express:
/**
* Initialize a new `View` with the given `name`.
*
* Options:
*
* - `defaultEngine` the default template engine name
* - `engines` template engine require() cache
* - `root` root path for view lookup
*
* #param {string} name
* #param {object} options
* #public
*/
function View(name, options) {
var opts = options || {};
this.defaultEngine = opts.defaultEngine;
this.ext = extname(name);
// ...
if (!opts.engines[this.ext]) {
// load engine
var mod = this.ext.substr(1)
debug('require "%s"', mod)
// default engine export
var fn = require(mod).__express // <-- this require is the problem
There's quite a few questions asking about how to fix this by not bundling express at all, or not bundling anything from node_modules.
For me that would defeat the point (I'm trying to shrink my deployed file footprint), so I want to fix this whilst keeping express inside my bundle. In my case I don't use view engines at all, and this require exists solely to load view engines on demand, so I really just want the warning to go away.
If I'm confident that this require will never be called, how can I tell webpack to ignore it completely?

What you could maybe try is alter you webpack config module rules so that
view unit uses the null-loader
This will of course make View return null but if you never touch views it might be ok.
example.
rules: [
{
test: require.resolve("express/view"),
use: 'null-loader',
},
],
Looking at application
this.set('view', View); hopefully View been null here doesn't cause issues.
The only other place View is then mentioned in application is then in render that you say your not using. So fingers crossed this won't cause any side effects.

Jenkins integration with Jest

Is there a way to have Jenkins integration in the Javascript Jest testing framework that is built on top of Jasmine?
I've tried to integrate Jest with jasmine-reporters, but didn't manage to get a JUnit XML output. I installed the reporters for Jasmine 1.3 with npm install jasmine-reporters#~1.0.0 and then in my setupTestFrameworkScriptFile:
require('jasmine-reporters');
jasmine.VERBOSE = true;
jasmine.getEnv().addReporter(new jasmine.JUnitXmlReporter({
savePath: "output/"
}));
When I run jest I get NodeJS attempt: Arguments to path.join must be strings or NodeJS attempt: Object [object Object] has no method 'join'.

I've managed to get a working version of it in this repo. The problem was I was not mocking path and fs in the test file.

You're using the syntax of jasmine-reporters 2.x with the 1.x branch. Specifically, you are passing an object of options but you need to send positional arguments.
Don't do this:
jasmine.getEnv().addReporter(new jasmine.JUnitXmlReporter({
savePath: "output/"
}));
Instead, you should do this:
jasmine.getEnv().addReporter(new jasmine.JUnitXmlReporter("output/"));
You can check out the source for the list of available options. Here are the current options:
/**
* Generates JUnit XML for the given spec run.
* Allows the test results to be used in java based CI
* systems like CruiseControl and Hudson.
*
* #param {string} [savePath] where to save the files
* #param {boolean} [consolidate] whether to save nested describes within the
* same file as their parent; default: true
* #param {boolean} [useDotNotation] whether to separate suite names with
* dots rather than spaces (ie "Class.init" not
* "Class init"); default: true
* #param {string} [filePrefix] is the string value that is prepended to the
* xml output file; default: 'TEST-'
* #param {boolean} [consolidateAll] whether to save test results from different
* specs all in a single file; filePrefix is then the whole file
* name without extension; default: false
*/
var JUnitXmlReporter = function(savePath, consolidate, useDotNotation, filePrefix, consolidateAll) {
/* ... */
}

Looks like jest-junit is also a option.

How to handle blocked scripts in requirejs

I am using require js to load google analytics.
In config I have
requirejs.config({
"paths": {
"ga": "//www.google-analytics.com/analytics",
...
And I have a module that depends on ga that initialises analytics.
Everything works fine until someone uses a browser plugin that blocks google analytics.
When that happens, the resulting javascript error breaks everything.
failed to load resource : blocked by clien
uncaught error: script error for: ga
How can I tell requirejs not to have a fit if a certain module fails to load?
How can you make a module optional?
Thanks.

require takes a 3rd argument which is an error callback, so you can assign window.ga to a function which always returns undefined. This avoids errors when calling google analytics functions elsewhere in your code.
require(['ga'], function(data) {
window.ga('create', 'UA-XXXXXXXX-X');
window.ga('send', 'pageview');
}, function() {
window.ga = function(){};
});

You could require the module within your own module code but outside of the module definiton requirements, but this does mean you can't quite as easily chain on dependencies you need. i.e.
define([ /* Normal dependencies here ... */], function() {
try {
require(['ga']);
} catch (error) {
// Handle lack of GA if needed
}
};
Alternatively you'd have to write your own module wrapper which synchronously blocks as it attempts the above, then returns GA if it was successful, or null otherwise.

I found the best way is to use the array notation for path definitions. This way you can define the external URL for the module, and a local fallback, in your requirejs path configuration. No need for additional try/catch blocks or module-specific error handling.
Documentation link:
http://requirejs.org/docs/api.html#pathsfallbacks
I defined a module named noop which defines an empty function, and then set up my paths like this:
requirejs.config({
"paths": {
"ga": [
"//www.google-analytics.com/analytics",
"util/noop"
],
...

The best solution, It works for me.
Open lib/mage/requirejs/resolver.js file.
/**
* Checks if provided module has unresolved dependencies.
*
* #param {Object} module - Module to be checked.
* #returns {Boolean}
*/
function isPending(module) {
return !!module.depCount;
}
Replace with this bellow code:
/**
* Checks if provided module is rejected during load.
*
* #param {Object} module - Module to be checked.
* #return {Boolean}
*/
function isRejected(module) {
return registry[module.id] && (registry[module.id].inited || registry[module.id].error);
}
/**
* Checks if provided module has unresolved dependencies.
*
* #param {Object} module - Module to be checked.
* #returns {Boolean}
*/
function isPending(module) {
if (!module.depCount) {
return false;
}
return module.depCount > _.filter(module.depMaps, isRejected).length;
}
Thanks

Change sails.js EJS views to use .html extensions instead of .ejs extensions?

Is it possible to configure sails.js apps to use .html extentions rather than .ejs (but still use the ejs view engine)?
sails new app creates ./views/home/index.ejs and ./views/layout.ejs.
I'd like to change the extensions to .html but keep everything else working the same way.
ie: I would now have ./views/home/index.html and ./views/layout.html, and the home page would still be injected into the layout page, as per normal.
How can I configure this please?

In your config/views.js:
engine: {
ext: 'html',
fn: require('ejs').renderFile
},
Seems though that the future support for this feature is not guaranteed, since they removed this from docs, so use with caution.

Another approach
Sails provides EJS templating by default.To override this and to use .html files , here is a simple solution. In your Sails App , go to config/routes.js. You will see following code there
module.exports.routes = {
/***************************************************************************
* *
* Make the view located at `views/homepage.ejs` (or `views/homepage.jade`, *
* etc. depending on your default view engine) your home page. *
* *
* (Alternatively, remove this and add an `index.html` file in your *
* `assets` directory) *
* *
***************************************************************************/
'/': {
view: 'homepage'
}
/***************************************************************************
* *
* Custom routes here... *
* *
* If a request to a URL doesn't match any of the custom routes above, it *
* is matched against Sails route blueprints. See `config/blueprints.js` *
* for configuration options and examples. *
* *
***************************************************************************/
};
Remove the route to '/' as shown below . Keep it blank
New routes.js will look like
module.exports.routes = {
//Remove '/' :)
};
Okay !!! now it’s done you can use your HTML files in Sails app . Put your index.html in assets folder . Sails will now load views from here :)

In latest sails.js 0.11, this also valid:
engine: 'ejs',
extension: 'html',
To check how they do this, in /node_modules/sails/lib/hooks/views/configure.js:
if (typeof sails.config.views.engine === 'string') {
var viewExt = sails.config.views.extension || sails.config.views.engine;
sails.config.views.engine = {
name: sails.config.views.engine,
ext: viewExt
};
}