I have a jQuery plugin
(function($) {
$.fn.myPlugin= function() {
internalFunction();
internalFunction = function() {
};
})($);
now I am trying to write a test to this plugin, is there a way to call internalFunction() from outside the scope of the plugin (i.e. $.fn.myPlugin.internalFunction() )
Thanks in advance
Related
I am new to mocha. My scripts below works when i run from the terminal. However, there is no result when i run from testrunner.html. On checking, it seems to be because of var xl = require('./excel');. if i comment this statement, it works. How can i make this work? i need to import custom modules for my script.
Updated test.js to incorporate RequireJS
Post changes: works on browser and termial
module1.js
if(typeof define !== 'undefined')
{
define([], function() {
return {
get: function() {
return get();
}
};
});
}
else if(typeof exports !== 'undefined') {
module.exports = {
get: function(){
return get();
}
};
}
function get(){
return "hello node world";
}
test.js
if(typeof requirejs == 'undefined') {var requirejs = require('requirejs');}
if(typeof chai == 'undefined') {var chai = require('chai');}
requirejs.config({
baseUrl: '.',
paths: {
},
nodeRequire: require
});
describe("RequireTest()", function(){
var module1;
before(function(done){
requirejs(['./module1'],
function(_module) {
console.log('before fired');
module1 = _module;
if(typeof requirejs == 'undefined') {mocha.run();}
done();
});
});
it('test case: ', function(){
console.log(module1.get());
chai.expect(1+1).to.equal(2);
});
});
testrunner.html (snippet)
<div id="mocha"></div>
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script src="../node_modules/requirejs/require.js"></script>
<script>mocha.setup('bdd')</script>
<script src="./test.js"></script>
<script>mocha.run();</script>
When you run Mocha at the command line you are using Node.js, which provides require.
When you run it in the browser, there is no require that the browser provides. You need to use a module loader at run-time like RequireJS or SystemJS. Or you need to use a packager like Webpack or Browserify that will process your code beforehand and turn it into a single bundle that incorporates all your code.
Note that whether third-party modules you use can be loaded in a browser, is a determination you have to make module-by-module. If you use a module that uses Node's child_process module to spawn a new process, for instance, you won't be able to just use that module in the browser because browsers don't provide child_process.
I'm using Rails 3.2.16 and require.js ('requirejs-rails' gem).
My app has a module named ExpensesUI (here is a snippet of it):
$(function() {
define('ExpensesUI', ['OperationsUI'], function(operationsUI) {
var expenses = {
operationConsolidatedCheckbox: "#operation_consolidated",
parcelledNoCheckbox: "#operation_parcelled_no",
parcelledYesCheckbox: "#operation_parcelled_yes",
/* more things */
};
}
});
I can use it perfectly in any .js file with:
require(['ExpensesUI'], function(expensesUI) { console.log(expensesUI.parcelledNoCheckbox); });
But when I try the same require call in a .js.erb, I got 'undefined' logged.
It's not possible to use requirejs with *.js.erb files. Just because requirejs get files out of sprockets.
But instead, you can use named modules in *.html.erb views, for instance:
<script>
define('mymodule', function() {
'use strict';
return {
user: <%= #user.to_json.html_safe %>
};
});
</script>
I am creating an MVC3 application, with requireJS. In my views I need to convert the Model object into a knockout viewmodel object. So I need to use knockout and knockout.mapping libraries.
My application is designed in the following way,
1). All the script files are categorized into folders
Scripts/app/home/ - contains the scripts for the views in Home controller.
Scripts/lib/ - contains the scripts like jQuery, knockout,knockout.mapping, requirejs etc
2). In the "_Layout.cshtml" I am referencing "require.js" like this.
<script src="#Url.Content("~/Scripts/lib/require.js")" type="text/javascript"></script>
3). To configure the require.js settings I am using a different script file called "common.js" (Scripts/lib/common.js)
require.config(
{
baseUrl: "/Scripts/",
paths:{
jquery: "lib/jquery-2.0.3",
ko: "lib/knockout-2.3.0",
komapping: "lib/knockout.mapping"
}
});
4). This is my index.js file which is in 'Scripts/app/home/"
define(['ko', 'komapping'], function (ko, komapping) {
var person = function () {
var self = this;
self.getPersonViewModel = function (data) {
return ko.mapping.fromJS(data); ;
};
};
return { Person: person };
});
5). This is my "Index" action method in the "Home" controller
public ActionResult Index()
{
var person = new Person
{
Id = 1,
Name = "John",
Addresses = new List<Address>(new[]{new Address{Country = "Country 1", City = "City 1"}})
};
return View(person);
}
6). Finally this is my "Index" view
#model MMS.Web.Models.Person
<script type="text/javascript">
require(["/Scripts/common/common.js"], function () {
require(["app/home/index"], function (indexJS) {
var person = new indexJS.Person();
var vm = person.getPersonViewModel(#Html.Raw(Json.Encode(Model)));
});
});
</script>
The problem which I am facing is when loading the index.js file, I get a script error that the knockout.js cannot be loaded.
Failed to load resource: the server responded with a status of 404 (Not Found) - http:///Scripts/knockout.js
But if I remove the dependency of "komapping" inside the "index.js" file it loads correctly, but then I cannot use the mapping functionality.
I had a look inside these links, but couldn't find a solution,
Knockout.js mapping plugin with require.js and
https://github.com/SteveSanderson/knockout.mapping/issues/57
Your help, suggestions are much appreciated. Thanks!
I had the same issue. The problem is that the knockout.mapping defines a knockout dependency, so you need to satisfy this one when you load the script.
Here is how you should load your mapping stuff
require.config(
{
baseUrl: "/Scripts/",
paths:{
jquery: "lib/jquery-2.0.3",
knockout: "lib/knockout-2.3.0",
komapping: "lib/knockout.mapping"
},
shim: {
komapping: {
deps: ['knockout'],
exports: 'komapping'
}
}
});
Then in my case, I use an index.js file with a requirejs call like the following
requirejs(['jquery', 'knockout', 'komapping'], function($, ko, komapping){
ko.mapping = komapping;
//Do other stuff here
});
I'm trying to get Sencha Touch to listen to the events phonegap gives off, any help I can find online only points to sencha events. I've also tried setting up listeners and " .on " but it doesn't seem to work on outside events.
I'm not talking about any specific event, just any event like 'resume', or 'batterystatus'.
Please don't reply with a reference to Ext.device because Sencha support for Ext.device is limited and outdated as it always has been when one company tries to provide a wrapper around a different company, I'd like to take full advantage of all the features the most up-to-date phonegap version offers.
You should be able to add PhoneGap-specific listeners like this:
document.addEventListener("deviceready", function() {
document.addEventListener("backbutton", MyApp.backButtonListener, false);
document.addEventListener("menubutton", MyApp.menuButtonListener, false);
}, false);
MyApp.backButtonListener = function(e) {
e.preventDefault();
//do other stuff here...
}
MyApp.menuButtonListener = function(e) {
e.preventDefault();
//do other stuff here...
}
You can do something like this, I have tested it and it's working!
Ext.application({
name: 'TestApp',
...
launch: function() {
// Hook up events of PhoneGap here
document.addEventListener("pause", this.onPause, false);
document.addEventListener("resume", this.onResume, false);
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('TestApp.view.Main'));
},
onPause: function() {
// this code is fine but using 'this' here is not safe
console.log("onPause");
},
onResume: function() {
console.log("onResume");
}
...
});
Edited:
Turn out it's not a very good idea to put the handler in the app.js file (although it will still work anw). Because if you upgrade sencha, it expects this file not to be modified much.
So you should instead put it in your launch function of a main controller. Controllers' launch function are executed after Application's launch function.
Ext.define('TestApp.controller.Main', {
extend: 'Ext.app.Controller',
...
launch: function() {
// Hook up events of PhoneGap here
document.addEventListener("pause", this.onPause, false);
document.addEventListener("resume", this.onResume, false);
},
onPause: function() {
// this code is fine but using 'this' here is not safe
console.log("onPause");
},
onResume: function() {
console.log("onResume");
}
...
});
i just came across this ajax upload plugin and i wish to use it inside a form as shown in the demo page example 3. For some reason i am not able to make it work. I am not sure what parameters come into the function. For example here is my sample code.
$(document).ready(function(){
var upload = new AjaxUpload('property_i',
{
action: 'submitproperty.php',
autoSubmit: false,
onSubmit : function(file , extension){
return false;
}
});
var upload_data = upload.setData({
'propertytype':'propertytype'
});
});
Now the ID used in the AjaxUpload function should be ID of the or of the Entire form. Also how do i use setData method. Any suggestions or links will be very helpful. Thanks
I got it to work with the following code:
new AjaxUpload('#uploader_button', {
action: 'filename.ashx',
autoSubmit: true,
onSubmit: function(file, ext) {
// --- stuff here
// --- add postdata parameters
this.setData({ id: 1, title: docTitle.val() });
},
onComplete: function(file, response) {
// --- stuff here too
}
});
it doesn't utilize the var but instead adds the custom data params in the onSubmit block. The only other difference is that I haven't wrapped the parameter key in quotes as it seems to serialize correctly. And I'm not using autoSubmit: false , but instead it's true...
The only way I could get this to work with autoSubmit: false is to add this outside any function:
var uploader;
var uploadFile;
then in the AjaxUpload(...
onChange: function(file, response){
uploader = this;
uploadFile = file;
},
then in the function to do the upload:
uploader.setData({session: session});
uploader.submit();
Hope this helps
I'm using uploadify and very useful.
http://www.uploadify.com/