Ember and Syn integration - javascript

I'm having trouble integrating bitovi syn (link), Rails 3 (asset pipeline), Ember and qunit. I want to use syn for browser simulation for testing purposes. Has anyone done this, if so, how?
I'm using the version of syn that was released 11 Mar 2014. When I load it into my app, two things happen:
I get a global failure in qunit that says "TypeError: 'undefined' is not an object (evaluating 'Syn.schedule')", (around this line: syn.js?body=1:1084)
and
A div with a form is added to my application.
I'm using qunit for the most part, and I dabbled with using YUI to do browser simulation but it isn't working quite the way I had expected it to. I'd really like to use Syn, but I don't understand why it's not working.
In attempting to get it work, I tried adding this line to the top of the syn.js file:
window.Syn = { schedule: function (fn, ms) { Ember.run.later(window, fn, ms); } };
but it didn't do anything much at all.
I'd read on this pull request: https://github.com/bitovi/syn/pull/28 that I could add that piece of code to mount it in a fashion to work with Ember.
Any help would be greatly appreciated!

So the thing here was simply to load Syn at the bottom of the page. It's potentially a bit broken at the moment in the case where you want to load it in the head (which I probably shouldn't have been doing anyway, but still!) :)

Related

Using Nightwatch to Test Comments & Doctype

I am an IT instructor and have begun utilizing Nightwatch to test students' homework to see if it is meeting specs.
I can test all the "normal" elements/attributes with no problem. My issue is on some stuff that you would probably not normally test in a production environment.
I want to test that they are using the correct HTML5 doctype, which lies outside of the root, of course, and I believe Nightwatch begins with the HTML node.
I also harp on them about using comments to make their own life and that of their fellow developer easier. So, I would like to test that they are leaving comments. Some parts of the comment are required and consistent, but other parts vary, such as their name within the comment. Here is a sample of a comment...
The Name of the Page
Sample Page for the Widgets
Author: your name
Date: the date
Again, I would probably not be testing for comments and doctype in the real world, but wonder if it is possible with Nightwatch?
I have tried the containsText() and text.to.contain() methods already with no success.
Any thoughts and guidance would be appreciated.
Also, I am not opposed to using another testing tool or any other middleware that might help if you know of any. I have not found any in my searching, nor have I found a solution to my quandary.
I would say that Nightwatch has not been designed to accomplish such a task. It is an amazing framework to perform acceptance testing on a GUI (Graphical User Interface), but it is not a web crawler. Browser automation is a resource-intensive operation, especially when you automate a real web browser via Selenium WebDriver. So if the code structure matters more than the graphical part, I would recommend you to use more "minimalistic" libraries like CasperJS. It is based on PhantomJS, a WebKit headless browser.
Nightwatch
If you want to keep Nightwatch, the best thing you can do is using regular expressions with the .source() method which returns a serialization (string) of the DOM:
browser
.url("http://www.website.com")
.source(function (res) {
if (/<!--/.test(res.value)) {
console.log("Comment detected!");
}
})
This works to detect at least one comment, but you will not be able to check the DOCTYPE because it is not returned by the .source() method. Using XPath, the root element would be /html.
Moreover, here we use a basic console.log for comments, which is not ideal to perform a test. But the problem is that most Nightwatch assertion methods expect a CSS selector...
Casper
This is much easier here...
With Casper, you can use the .getHTML() method to get a serialization of the DOM. But here, the DOCTYPE is returned and you can use assertions (.assertMatch()) to validate the result against regular expressions. Your code could have the following structure:
casper.test.begin('Test website', function (test) {
casper.start('http://www.website.com', function () {
var html = this.getHTML();
test.assertMatch(html, /<!DOCTYPE html>/);
test.assertMatch(html, /<!--.*-->/);
});
casper.then(function () {
// Your code...
});
casper.run(function() {
test.done();
});
});
I have tested this code on a random page that contains a valid HTML5 document type declaration and some comments. It works fine.

how do you allow javascript communications with Flex/Flash/Actionscript

Well here's a problem.
I've got a website with large javascript backend. This backend talks to a server over a socket with a socket bridge using http://blog.deconcept.com/swfobject/
The socket "bridge" is a Flex/Flash .swf application/executable/plugin/thing for which the source is missing.
I've got to change it.
More facts:
file appExePluginThing.swf
appExePluginThing.swf Macromedia Flash data (compressed), version 9
I've used https://www.free-decompiler.com/flash/ to decompile the .swf file and I think I've sorted out what's the original code vs the libraries and things Flash/Flex built into it.
I've used FDT (the free version) to rebuild the decompiled code into MYappExePluginThing.swf so I can run it with the javascript code and see what happens.
I'm here because what happens isn't good. Basically, my javascript code (MYjavascript.js) gets to the point where it does
window.log("init()");
var so = new SWFObject("flash/MYappExePluginThing.swf"", socketObjectId, "0", "0", "9", "#FFFFFF");
window.log("init() created MYappExecPluginThing!!!");
so.addParam("allowScriptAccess", "always");
log("init() added Param!!");
so.write(elId);
log("init() wrote!");
IE9's console (yeah, you read that right) shows
init()
created MYappExecPluginThing!!!
init() added Param!!
init() wrote!
but none of the debugging i've got in MYappExePluginThing.as displays and nothing else happens.
I'm trying to figure out what I've screwed up/what's going on? Is MYappExePluginThing.as running? Is it waiting on something? Did it fail? Why aren't the log messages in MYappExePluginThing.as showing up?
The first most obvious thing is I'm using FDT which, I suspect, was not used to build the original. Is there some kind of magic "build javascript accessible swf thing" in FlashBuilder or some other IDE?
First noteworthy thing I find is:
file MYappExePluginThing.swf
MYappExePluginThing.swf Macromedia Flash data (compressed), version 14
I'm using Flex 4.6 which, for all I know, may have a completely different mechanism for allowing javascript communication than was used in appExePluginThing.swf
Does anyone know if that's true?
For example, when FDT runs this thing (I can compile but FDT does not create a .swf unless i run it) I get a warning in the following method:
private function init() : void
{
Log.log("console.log", "MYappExePluginThing init()");
//var initCallback:String = Application.application.parameters.initCallback?Application.application.parameters.initCallback:"MYjavascript.MYappExePluginThing_init";
var initCallback:String = FlexGlobals.topLevelApplication.parameters.initCallback?FlexGlobals.topLevelApplication.parameters.initCallback:"MYjavascript.MYappExePluginThing_init";
try
{
ExternalInterface.addCallback("method1Callback",method1);
ExternalInterface.addCallback("method2Callback",method2);
ExternalInterface.call(initCallback);
}
catch(err:Error)
{
Log.log("console.log", "MYappExePluginThing init() ERROR err="+err);
}
}
I got a warning that Application.application was deprecated and I should change:
var initCallback:String = Application.application.parameters.initCallback?Application.application.parameters.initCallback:"MYjavascript.MYappExePluginThing_init";
to:
var initCallback:String = FlexGlobals.topLevelApplication.parameters.initCallback?FlexGlobals.topLevelApplication.parameters.initCallback:"MYjavascript.MYappExePluginThing_init";
which I did but which had no effect on making the thing work.
(FYI Log.log() is something I added:
public class Log{
public static function log(dest:String, mssg:String):void{
if(ExternalInterface.available){
try{
ExternalInterface.call(dest, mssg);
}
catch(se:SecurityError){
}
catch(e:Error){
}
}
trace(mssg);
}
}
)
Additionally, in MYjavascript.js MYappExePluginThing_init looks like this:
this.MYappExePluginThing_init = function () {
log("MYjavascript.js - MYappExePluginThing_init:");
};
Its supposed to be executed when MYappExePluginThing finishes initializing itself.
Except its not. The message is NOT displaying on the console.
Unfortunately, I cannot find any references explaining how you allow javascript communication in Flex 4.6 so I can check if I've got this structured correctly.
Is it a built in kind of thing all Flex/Flash apps can do? Is my swf getting accessed? Is it having some kind of error? Is it unable to communicate back to my javascript?
Does anyone have any links to references?
If this was YOUR problem, what would you do next?
(Not a full solution but I ran out of room in the comment section.)
To answer your basic question, there's nothing special you should need to do to allow AS3-to-JS communication beyond what you've shown. However, you may have sandbox security issues on localhost; to avoid problems, set your SWFs as local-trusted (right-click Flash Player > Global Settings > Advanced > Trusted Location Settings). I'm guessing this not your problem, though, because you'd normally get a sandbox violation error.
More likely IMO is that something is broken due to decompilation and recompilation. SWFs aren't meant to do that, it's basically a hack made mostly possible due to SWF being an open format.
What I suggest is that you debug your running SWF. Using break-points and stepping through the code you should be able to narrow down where things are going wrong. You can also more easily see any errors your SWF is throwing.
Not really an answer, but an idea to get you started is to start logging everything on the Flash side to see where the breakage is.
Since you're using IE, I recommend getting the Debug flash player, installing it, then running Vizzy along side to show your traces.
Should give you a good idea of where the app is breaking down.
Vizzy
Debug Player

AngularJS + Testem + Jasmine: Why is inject() giving this $injectorr error?

I'm using Testem with Jasmine to set up an environment to start unit testing in my AngularJS app. Everything was working great until the first time I tried to use the injector. This is what I got back:
test.js
describe('Custom events', function(){
beforeEach(module('AlchemyAdmin'));
beforeEach(inject());
it('should work', function() {
});
});
Error console output:
Custom events should work.
✘ Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$in
jector/modulerr?p0=AlchemyAdmin&p1=Error%3A%20%5B%24injector%3Amodulerr%
5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fmodulerr
%3Fp0%3DdateRangePicker%26p1%3DError%253A%2520%255B%2524injector%253Amod
ulerr%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.25%252F%2
524injector%252Fmodulerr%253Fp0%253Dpasvaz.bindonce%2526p1%253DError%252
53A%252520%25255B%252524injector%25253Anomod%25255D%252520http%25253A%25
252F%25252Ferrors.angularjs.org%25252F1.2.25%25252F%252524injector%25252
Fnomod%25253Fp0%25253Dpasvaz.bindonce%25250A%252520%252520%252520%252520
at%252520Error%252520(native)%25250A%252520%252520%252520%252520at%25252
0http%25253A%25252F%25252Flocalhost%25253A7357%25252Fvendor%25252Fangula
r%25252Fangular.min.js%25253A6%25253A450%25250A%252520%252520%252520%252
520at%252520http%25253A%25252F%25252Flocalhost%25253A7357%25252Fvendor%2
5252Fangular%25252Fangular.min.js%25253A20%25253A494%25250A%252520%25252
0%252520%252520at%252520http%25253A%25252F%25252Flocalhost%25253A7357%25
252Fvendor%25252Fangular%25252Fangular.min.js%25253A21%25253A502%25250A%
252520%252520%252520%252520at%252520http%25253A%25252F%25252Flocalhost%2
5253A7357%25252Fvendor%25252Fangular%25252Fangular.min.js%25253A33%25253
A267%25250A%252520%252520%252520%252520at%252520r%252520(http%25253A%252
52F%25252Flocalhost%25253A7357%25252Fvendor%25252Fangular%25252Fangular.
min.js%25253A7%25253A290)%25250A%252520%252520%252520%252520at%252520e%2
52520(http%25253A%25252F%25252Flocalhost%25253A7357%25252Fvendor%25252Fa
ngular%25252Fangular.min.js%25253A33%25253A207)%25250A%252520%252520%252
520%252520at%252520http%25253A%25252F%25252Flocalhost%25253A7357%25252Fv
endor%25252Fangular%25252Fangular.min.js%25253A33%25253A284%25250A%25252
Seems like there is something obvious I'm missing, but I can't quite grasp it. Note that taking out the line with the beforeEach(inject()); and writing standard tests in the it block works like a charm. Also, if I just declare an angular.module('myApp'); and then try to module() and inject() that, it works fine. Seems like something is going on in my module definition, maybe, but the app itself works fine with no errors from what I can tell!
Anybody run into this or know what I should look into? Thanks in advance!
Edit:
I thought it might make more sense if I gave a little context to my question. I have been developing an Angular app for a few weeks now, and I've been bit one to many times by not having unit tests. Having decided to TDD from here on out, I setup Testem, wrote a .spec.js file and tried to get started. I'm not testing any existing code, which will come later, but just trying to test-drive the part of the app I'm on. Before even writing my first piece of code or test, just setting up the module() and inject() calls per the docs failed miserably. That is where I am right now.
Well, I shouldn't have gotten frustrated with the angular error links. If you keep clicking through them, I eventually found a sub-dependency that I was not linking to! If anyone else finds themselves in this particular pickle, I hope this helps them! I am closing the plunker I made to remove my live code from the public. Special thanks to PSL for responding so quickly and being so willing to try to understand my issue.

Polling using Ember-Data with Rails backend

Background
I'm more used to Rails but trying to improve my client side javascript by switching to an MVC. Ember seems like a good fit for me (it has good integration with Rails and a similar convention over configuration approach).
I'm using Ruby 2.0.0, Rails 4.0.0 & Ember 1.0.0-rc6.3 so realise that this is all pretty new.
However, so far I've managed to display data from the database via a JSON API without any problems and it is working great.
Question
I'm currently struggling with updating the data when it changes on the database though.
My initial approach is to begin by using polling to keep the client data updated as the background job processes and updates the database (I would like further down the line to try SSE and Live to make this process better - but polling to start with).
The polling aspect is working fine like this in my controller
App.AnalysesController = Ember.ArrayController.extend
loaded: (->
setTimeout (=> #poll()), 1000
).observes('content.isLoaded')
poll: ->
console.log #get('content')
#get('content').reload()
I thought i'd found a solution to my issue with this commit:
https://github.com/emberjs/data/commit/278a0b863f0b1b2494fe2319ac12be6167195f6b
Whereby you can reload the model.
Unfortunately I am getting this error when I try...
Uncaught ReferenceError: reload is not defined
Which I don't understand because it looks like my content is of the right format and is not updating
Class {type: function, store: Class, isUpdating: false, toString: function, constructor: function…}
However - this works...
App.AnalysesController = Ember.ArrayController.extend
loaded: (->
setInterval (=> #poll()), 1000
).observes('content.isLoaded')
poll: ->
#set('content', App.Analysis.find())
Though it feels wrong to me - I should be using the model not duplicating the find query surely?
If anyone has any ideas why reload is not working i'd really appreciate it, as i've hit a bit of a wall but up until now have been enjoying learning Ember.
Thanks!
Reload lives on the individual models, not on the array of models. Your second approach is the correct approach, unless you want to iterate over the items in the array controller and call reload.

initialization of dojo widget

I tried to create custom widget for my site. when I loaded page it says:
mixin #0 is not a callable constructor.
clsInfo.cls.prototype is undefined
I can't find any information about clsInfo, so I don't know what is it. maybe the problem that I use dojo from google:
and my own script is located on localhost. so when my dojo on page initializes something goes wrong with my script. I can't find any good info on dojo, maybe I search in wrong places?
please help me to resolve my problem
I ran into this when I was trying to override a dijit.Dialog so I could bind events to controls within it. We've yet to see if the binding part will work, but if you look at the source, this happens when one of the bases passed in as the second argument fails to resolve to an "[Object function]". In my case, I was passing a String in.
dojo.declare takes 3 arguments:
The name of the custom object "class" you're building
An array of base classes, parents to provide functionality (not the string names of those classes)
A hash of functions and declarations
So if I want to override dijit.Dialog, I have to do:
dojo.declare("myDialogType", [dijit.Dialog], {
function1() {/*Code*/},
function2() {/*Code*/}
}
I had ["dijit.Dialog"] as my second argument and that was the problem.
I strongly recommend using Web Inspector or Firebug with uncompressed local copies of the Dojo library rather than the CDN to figure out what's going on and debug these types of problems. Dojo's documentation is extensive but not complete in some areas and some behaviors have to be figured out by looking at what the code expects. That's not intended as a slight to the authors; once you get it going it's a pretty awesome product, and any documentation for volunteer work is appreciated.
Are you sure Dojo is loading? Did you put your code in a dojo.addOnLoad()? When using a CDN you sometimes run into issues with execution times. dojo.addOnLoad() will not only trigger when the DOM is loaded, it gets called when dojo resources have downloaded, such as dijit._Widget.
I've run into this problem when I screw up the order of my requires which makes _WidgetBase not what _WidgetBase really is. Seems like a simple spot to screw up.

Categories