We Keep Coding

How to override third party module Js widget in custom module in magento 2

Here i'm trying to extend Amasty js widget in my module using mixin.
I have created requirejs-config.js file like below
var config = {
config: {
mixins: {
'amShopbyAjax': {
'vendor_CustomCatalog/js/amasty/amShopbyAjax-override': true
}
}
}
};
I have created js file like below
define([
"jquery",
"jquery-ui-modules/widget"
], function ($) {
'use strict';
var amShopbyWidgetMixin = {
selectors: {
category_products_wrapper: '#amasty-shopby-category-product-list',
},
reloadHtml: function (data) {
console.log("Sdfsdfsdf");
return this._super();
},
callAjax: function (clearUrl, data, pushState, cacheKey, isSorting) {
console.log("sdnjkasndnsadj");
return this._super();
}
};
return function (targetWidget) {
$.widget('custom.amShopbyAjax', targetWidget, amShopbyWidgetMixin);
return $.custom.amShopbyAjax;
};
});
After that I ran sudo bin/magento setup:static-content:deploy -f and clear cache then I am getting "Uncaught TypeError: base is not a constructor" error

Think that you should change custom.amShopbyAjax to mage.amShopbyAjax
return function (targetWidget) {
$.widget('mage.amShopbyAjax', targetWidget, amShopbyWidgetMixin);
return $.mage.amShopbyAjax;
};
The widget alias should be like for the target widget and the widget by parent alias should be returned

Webpack assets build is not working on webpack-dev-server

How assets section is working ?
During build it gives expected result - languages extended.
But once running webpack-dev-server it gives assets from file (not extended) - assets is built.
As i know webpack should load all assets into memory, why it gives assets from file and not built assets ?
Thanks
compiler.plugin('emit', function (compilation, callback) {
console.log('\nBuilding Languages...\n');
getBaseLanguages(function (files) {
Promise
.all(files.map(function (file) {
return languageBuilder.build(file).then(setAsset);
}))
.then(function () {
callback();
});
});
function setAsset(langs) {
langs.forEach(function (lang) {
compilation.assets[lang.path] = {
source: function () {
return JSON.stringify(lang.file);
},
size: function () {
return lang.file.length;
}
};
});
}
});

Javascript - Intern - Windows is not defined

I am running my intern test using the following code
node node_modules/intern/runner.js config=tests/intern
on my local machine. The application is using Dojo.
Basically I am trying to override the window.alert function as one of my test is failing because of unexpected alert.
window.alert = function(msg) {
//override alert function
//...
}
I tried putting this in my intern test and got the error. After some search I learned that window object is not available on node environment. Where can I override the alert?
The intern file looks like
define(['intern/lib/args'], function(args) {
var DEFAULT_PORT = "8080";
var urlInfo = {
PORT: args.port || DEFAULT_PORT,
BASE_URL : "http://localhost:".concat(args.port || DEFAULT_PORT, "/webtest"),
};
var config = {
proxyPort: 9000,
proxyUrl: 'http://localhost:9000',
capabilities: {
'selenium-version': '2.45.0',
},
...
...
};
return config;
});
Intern Test file example
define([
'intern!object',
'intern/chai!assert',
'intern/dojo/node!leadfoot/helpers/pollUntil',
'intern',
'intern/dojo/node!fs'
], function(registerSuite, assert, Pages, intern, fs) {
registerSuite ({
name: 'Tests',
setup: function() {
window.alert = function(msg){
console.log("Unexpected Alert: "+msg);
}
return this.remote.get(require.toUrl( intern.config.functionalInfo.BASE_URL)).maximizeWindow();
},
beforeEach: function() {
return
},
afterEach: function() {
return
},
'Test1' : function() {
this.timeout = 600000;
return this.remote
.setFindTimeout(5000)
....
},
}

window does not exist in node, you have to override its alert from code that runs on the browser (the code being tested), not on node itself. I would do it in the setup code for each test that uses it.

Proxyquire can't find module

I'm trying to use proxyquire to mock dependency for testing. But I keep getting this error Cannot find module
I tried with full path and it's still complaining.
I have a src file which is in assets/js/src/lib and the test in js-tests/specs
Here's the code.
var proxyquire = require('proxyquireify')(require);
var stubs = {
'mandrill': {
Mandrill: function () {
return {
messages : jasmine.createSpy('send')
};
}
}
};
var jQuery = require('jquery'),
Mandrill = proxyquire('../../assets/js/src/lib/Mandrill', stubs),
globalMandrill = require('mandrill');
which I'm getting this error.
Error: Cannot find module '../../assets/js/src/lib/Mandrill' at
I'm using Grunt and PhantomJs to run the tests
Here's my Browserify in Gruntfile.js
browserify : {
options: {
preBundleCB: function(b) {
b.plugin(remapify, [
// some module config
]);
}
},
dist: {
files : {
// some files
},
options: {
transform: ['browserify-shim']
}
},
specs : {
src : ['js-tests/specs/**/*.js'],
dest : 'js-tests/build/specs.js',
options: {
transform: ["browserify-shim"]
},
}
},

Try adding plugin: ['proxyquireify/plugin'] to specs.options object

Gulp-compile-handlebars for multiple html pages?

As of now I just have two gulp tasks, ex gulp.task('handlebars-index'), gulp.task('handlebars-about'). Below is code from the docs, https://www.npmjs.org/package/gulp-compile-handlebars
I am not sure how I can handle the task for two .handlebars files.
var gulp = require('gulp');
var handlebars = require('gulp-compile-handlebars');
var rename = require('gulp-rename');
gulp.task('handlebars', function () {
var templateData = {
firstName: 'Kaanon'
},
options = {
ignorePartials: true, //ignores the unknown footer2 partial in the handlebars template, defaults to false
partials : {
footer : '<footer>the end</footer>'
},
batch : ['./src/partials'],
helpers : {
capitals : function(str){
return str.toUpperCase();
}
}
}
// here how do I add an index.html and say and about.html?
return gulp.src('src/index.handlebars')
.pipe(handlebars(templateData, options))
.pipe(rename('index.html'))
.pipe(gulp.dest('dist'));
});
You can see with the above the task basically takes the index.handlebars then compiles it and creates an index.html file.
If I added an array of handlebar files how will the task know how to create the .html version?
return gulp.src(['src/index.handlebars','src/about.handlebars'])
.pipe(handlebars(templateData, options))
.pipe(rename('index.html'))
.pipe(rename('about.html'))
.pipe(gulp.dest('dist'));
The above won't work obviously.

Gulp-rename also takes a function where you can change only part of the path.
return gulp.src('src/*.handlebars')
.pipe(handlebars(templateData, options))
.pipe(rename(function(path) {
path.extname = '.html';
}))
.pipe(gulp.dest('dist'));
https://github.com/hparra/gulp-rename#usage