Why I lost my variable after browserify - javascript

I have "react actions" file. And something going wrong.
'use strict';
var AppDispatcher = require('../dispatcher/AppDispatcher');
var constants = require('../constants/constants');
var URIjs = require('URIjs');
function loadPageData(url) {
//ajax call
}
var InputsRowActions = {
//some methods, like this
changePage: function(page) {
//work with url params..
loadPageData(url);
}
console.log(URIjs) //-> undefined
};
module.exports = InputsRowActions;
I can't understand, why URIjs didn't defined ?
My Gulp browserify task:
var b = browserify('./app/assets/react/app.react.js', {
debug: true
});
b = watchify(b);
b.transform('reactify');
b.on('update', bundle);
function bundle(fileName) {
return b
.bundle()
.pipe(source('app.react.js'))
.pipe(buffer())
.pipe(gulp.dest('app/assets/javascripts/'));
}
gulp.task('browserify', bundle);
I have same problem, with requiring 'lodash'.

Related

Obtain separate exports from individual modules

In modules.js I have this code:
module.exports = {
BookingHotel: function() {
this.getId = function(id) {
return "Hello World";
},
this.getAll = function() {
return "Hello World";
}
},
BookingFlight: function() {
this.book = function() {
return "Hello World";
}
},
}
The modules.js file is becoming too large and difficult to maintain.
How do I separate BookingHotel and BookingFlight into separate files and export them like they currently are?
Make separate files for the objects:
BookingHotel.js
BookingFlight.js
Export the objects from their respective files:
BookingHotel.js:
export default var BookingHotel = function() {
this.getId = function(id) {
return "Hello World";
},
this.getAll = function() {
return "Hello World";
}
}
BookingFlight.js:
export default var BookingFlight = function() {
this.book = function() {
return "Hello World";
}
}
Then import them in the modules.js file and add them to the exports object:
modules.js:
import BookingHotel from 'BookingHotel.js';
import BookingFlight from 'BookingFlight.js';
module.exports = {
BookingHotel: BookingHotel,
BookingFlight: BookingFlight
};
Make a separate JavaScript file for each export in modules.js and have each file export one function, then just require each file and re-export the functions like this:
NOTE: The names of the individual files don't matter as long as they're consistent with the filenames used in modules.js.
BookingHotel.js:
module.exports = {
BookingHotel: function() {
// Your code here
}
};
BookingFlight.js:
module.exports = {
BookingFlight: function() {
// Your code here
}
};
modules.js:
// Get the exports from BookingHotel.js
var BookingHotelExports = require("./BookingHotel.js");
// Get the exports from BookingFlight.js
var BookingFlightExports = require("./BookingFlight.js");
// Combine the individual exports from the two required modules into a new exports variable for this module.
module.exports = {
// BookingHotel is a property of the module.exports object from BookingHotel.js.
BookingHotel: BookingHotelExports.BookingHotel,
// Same here, but from BookingFlight.js.
BookingFlight: BookingFlightExports.BookingFlight
};

Mock modules using jest that are imported using import * to test react components

File name Postman.js
"use strict";
define([], function() {
var postManSingleton = (function() {
var postManInstance
, createPostMan = function() {
var events = {};
return {
publish: function(event, payload) {
if(!events.hasOwnProperty(event))
return;
events[event].forEach(function(listener){
listener(payload || {});
});
},
subscribe: function(event, listener) {
if(!events.hasOwnProperty(event))
events[event] = [];
var index = events[event].push(listener)-1;
return {
remove: function () {
delete events[event][index];
}
}
}
}
};
return {
getInstance: function() {
if(!postManInstance)
postManInstance = createPostMan();
return postManInstance;
}
}
}());
return postManSingleton.getInstance();
});
Importing this file as in index.test.js
import * as Postman from 'postman.js';
How do I mock its publish and subscribe events in jest.
I have tried
jest.mock('Postman.publish', () =>({//some code}))
Error : Cannot find module Postman.publish from 'index.test.js'
Please help how it is possible to mock the above file. Is it even possible?
Your Postman.js is in AMD & Jest does not support AMD. So you need to convert AMD to commonjs.
You can use babel-plugin-transform-amd-to-commonjs for conversion.

javascript custom module system

i am trying to make a custom module based application myself.
1st the idea:
i want to have couple of modules which all will represent a file )
1 module: Object, with filename. Object.js
2nd module: Utils, with filename Utils.js
now as you can see in my code i am using get script to load all those files and prepare a global app object which i can use all accross my application.
However i want to combine all my js at the end of the development and minify it, so basically i dont know how to check ( and register ) those modules with requiring the file itself. Here are my app.js and my Object.js
app.js:
var shop = (function () {
'use strict';
var modules = [];
var getModulesDir = function () {
return document.location.origin + "/js/App/modules/"
}
var registerDefaultModules = function () {
modules.push({
name: "Object",
alias: "Object"
}, {
name: "Utils",
alias: "Utils"
});
};
var loadModules = function () {
jQuery.each(modules, function (key, module) {
if (module.name == "") {
console.error("loading script without name");
return true;
}
if (module.alias == "") {
module.alias = module.name;
}
if (typeof shop[module.alias] !== "undefined") {
return true;
}
window.moduleAlias = module.alias;
var path = "";
if (typeof module.path != "undefined") {
path = module.path;
}
if (path == "") {
path = getModulesDir() + module.name.split('.').join('/') + ".js";
}
$.getScript(path)
.done(function (script, textStatus) {
})
.fail(function (jqxhr, settings, exception) {
console.error('failed loading a script')
});
});
}
var init = function () {
registerDefaultModules();
loadModules();
}
return {
init: init
};
})();
jQuery(document).ready(function () {
shop.init();
});
Object.js
(function($, app) {
$(window).load(function(event) {
'use strict';
app.Object = {
getSize: function(object) {
var size = 0,
property;
for (property in object) {
if (object.hasOwnProperty(property)) {
size++;
}
}
return size;
}
}
return app;
});
})(jQuery, shop);
i could be totally wrong, and if so would be nice if someone show me the right way of doing it.

node.js unit testing mock dependency

I have a question on using proxyquire (or any other suggestions on how to test the following code)
If i have the following file to test:
var path = require('path');
module.exports = function (conf) {
var exported = {};
exported.getIssue = function (issueId, done) {
...
...
};
return exported;
};
How do i pass in the 'conf' variable while using proxyquire to mock 'path; var?
Is there any other way to do this if not using proxyquire?
You simply have to pass conf variable to the module/function required via proxyquire. Proxyquire has meaning to to do the same CommonJs require stuff, but with the possibility of mocking and stubing some modules. So you should act the same.
var pathMock = {
someMethod = function() {}
};
var confMock = {
someMethod = function() {}
};
spyOn(pathMock, 'someMethod').and.callThrough();
spyOn(confMock, 'someMethod').and.callThrough();
module = proxyquire('../path/to/module', {
path: pathMock
});
it('do some test', function(done) {
module(conf).getIssue();
expect(pathMock.someMethod).toHaveBeenCalled;
expect(confMock.someMethod).toHaveBeenCalled;
});

'Object is not a function' error when trying to use Page Object with Protractor

I've got a TypeError: object is not a function every time I try to run my tests. Before I started to use PageObject everything was ok.
Here is my spec.js
'use strict';
var todoAppPage = require('../pages/angular.page');
describe('angularjs todo list', function () {
var page;
beforeEach(function () {
page = new todoAppPage();
page.get();
});
it('should add a todo task', function () {
page.addNewTask('my first task');
expect(page.todoList.count()).toEqual(1);
expect(page.todoList.get(0).getText()).toEqual('my first task');
});
});
Here is Page Object file
'use strict';
var todoAppPage = function() {
this.newTodo = element(by.model('newTodo'));
this.todoList = element.all(by.repeater('todo in todos'));
this.get = function() {
browser.get('/');
};
this.addNewTask = function (taskName) {
this.newTodo.sendKeys(taskName);
this.newTodo.sendKeys(protractor.Key.ENTER);
};
};
module.exports = new todoAppPage();
There is a problem in the way you "export" your page object, should be:
module.exports = todoAppPage;

Categories

Resources