jasmine-jquery fixtures not loading - fixtures

Problem is that jasmine-jquery in not loading my fixtures from spec/fixtures folder. Now when I look at jasmine-jquery source code default path for fixtures is spec/javascripts/fixtures.
In a version that I have, there is no spec/javascripts/fixtures folder. It seems it is something for Ruby gem. I also tried to create that javascripts folder but still it can't load it. When I place my fixture fragment inside of SpecRunner.html body - it works.
Here is my html fragment:
<ul class="fr">
<li></li>
</ul>
Spec file:
describe("something to describe", function() {
it("should see a DOM element", function() {
loadFixtures("custom.html");
expect($(".fr")).toExist();
});
});
Is that a bug or something with the path ?
Solved:
It is a problem with google-chrome. By default it doesn't allow access to other domain by same origin policy. Solution is to run app from local server, or to use firefox.

It indeed has to do with Chrome. This is a security concept called Same-Origin Policy.
Instead of running Firefox or the app from local server, you can still use Chrome with that security check disabled.
Just run Chrome/Chromium with the command-line argument --allow-file-access-from-files:
google-chrome --allow-file-access-from-files
Remember! Since this is a security feature, by disabling it you are putting your computer at risk. It is recommended to only use this parameter when testing local websites/apps (via a different shortcut/alias).

Related

How do I add and use Chrome Extensions with Cypress.io?

I'm currently dealing with a an X-Frame-Options issue being blocked when running my Cypress.io tests. I cannot change the server setup to modify the X-Frame settings. Somebody mentioned to me that I should try a chrome extension called "Ignore X-Frame headers."
I have the extension installed on my non-Cypress Chrome, but how do I install it for use in my Cypress.io tests? If I go into developer tools while running a Cypress test, I can see that no extensions are loaded for Cypress/Chrome.
Any ideas on how or IF I can do this? I'm using a Mac.
You could try to install the extension through Cypress chrome (and enable it).
You can use the before:browser:launch event to load a Chrome extension.
More information on how to use this event here.
For those wondering what the link is to that extension is:
https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe
paste that link into the chrome window Cypress is running in and install it then try to re-load your test. :)
const path = require("path")
module.exports = (on, config) => {
on('before:browser:launch', (browser, launchOptions) => {
// supply the absolute path to an unpacked extension's folder
// NOTE: extensions cannot be loaded in headless Chrome
launchOptions.extensions.push(path.resolve(__dirname,"../../extension_name"))
return launchOptions
})

Chrome Extension: How to solve "Not allowed to load local resource" error upon content script injection

I tried to inject jQuery to content page to make easy access to DOM elements.
The code was something like below
chrome.tabs.executeScript(tabId, { file: "jquery.min.js"} ,function(){
chrome.tabs.executeScript(tabId, { file: myOwnScript.js});}
);
It was all fine on Windows, but on Ubuntu, in content page window, I always get console error message saying
"Not allowed to load local resource: file:///****/jquery.min.map"
I noted it was talking about *.map but not *.js
There are some more mysteies:
1. There is no error message on myOwnScript.js
2. My extension works well even though this message keeps showing at each page load.
I made plenty searches on Google but didn't find similar case.
My questions is,
1. What is the reason of such error?
2. Should I take it as a serious error?
My enviroment is as below
OS : Ubuntu 14.04, with LXDE desktop
Chrome : 34.0.1847.132
(Didn't try other configurations because I am not that good at customizing Linux :)
Previous versions of Jquery have a comment pointing to the map file (so that a bug in jquery.min.js can be translated to a bug in the readable jquery.js). You can safely delete this comment, or upgrade to a more recent version of Jquery, which has removed this comment (for exactly this reason). See also this answer.

How to test an AngularJS/SocketStream/Node.js app using Karma

I am working on an AngularJS application that is delivered by a SocketStream/node.js server.
I have an AngularJS service that calls api functions on the SocketStream server and progress has been good so far.
But now the time has come to start writing the first tests and the first testing framework that came to mind is Karma/Jasmine, since this is the recommend AngularJS set up.
So far so good, but since my AngularJS modules are imported using 'require' (SocketStream's version, not require.js) and server api calls are part of the test, I need to configure Karma to load SocketStream (at least its client side).
I took a good look at 'https://github.com/yiwang/angular-phonecat-livescript-socketstream' but when I run this example I get run time errors, possibly because I have later versions of variuous dependencies installed.
I managed to get 'required' resolved by packing my SocketStream app by adding 'ss.client.packAssets()' to app.js and run 'SS_PACK=1 node app.js', but when I start karma it logs an error message saying:
'Chrome 23.0 (Linux) ERROR
Uncaught TypeError: undefined is not a function
at /the...path/client/static/assets/app/1368026081351.js:25'
'1368026081351.js' is the SocketStream packed assets file. If I don't load it the error message is something like 'require is undefined', so my best guess is that the error is happening somewhere inside the SocketStream require code. Also because I run karma in DEBUG mode and can see all the files being served.
I have been trying different approaches as to find out what is happening but to now avail. So my questions are:
Is anybody else successfully testing AngularJS/SocketStream using Karma?
Does anybody have any suggestions as to how I can fix, or at least debug this problem?
Are there any alternatives/better solutions?
Time to answer, sort of, my own question:
Sort of, because I came to the conclusion that Karma and node.js/SocketStream have a lot of overlap, so I decided to see if I can omit Karma altogether and deliver the Jasmine testing platform through SocketStream. It turns out that that is possible and here's how I did it:
I defined a new SocketStream route and client in my 'app.js' file:
ss.client.define( 'test', {
view: 'SpecRunner.html',
css: ['libs/test'],
code: ['libs', 'tests', 'app'],
tmpl: 'none'
});
ss.http.route( '/test', function(req, res) {
res.serveClient( 'test' );
});
I downloaded jasmine-standalone-1.3.1.zip and copied 'SpecRunner.html' to the 'client/views' folder. I then edited it to make it load AngularJS and all SocketStream client files, like all other views:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js"></script>
<SocketStream/>
I removed the 'script' tags that import the sample source files ( 'Player.js' and 'Song.js' ) and specs but let the last 'script' block in place unmodified.
I then created a new folder inside 'client/css/libs' called 'test' and copied 'jasmine.css' in there unmodified.
Then I copied 'jasmine.js' and 'jasmine-html.js' renamed to '01-jasmine.js' and '02-jasmine-html.js' but otherwise unmodified, into '/client/code/libs'.
Now Jasmine is in place and will be invoked by using the '/test' route. The slightly unsatisfactory bit is that I haven't found an elegant place to store my spec files. They only work so far if I place them inside the 'libs' folder. Anywhere else and they are served by SocketStream as modules and are not run.
But I can live with that for now. I can run Jasmine tests without having to configure a special Karma setup.

Drag 'n' Drop files to a Chrome Package App?

Has anyone successfully implemented drag and drop with files from desktop to the app?
I've tried just putting this drag 'n' drop example into the index file but I just get this error:
Can't open same-window link to "file:///C:/Users....whatever"; try target="_blank".
Please share your stories, what you've tried and if you have succeed :)
Some resources to help you:
New Chrome Packaged Apps codelab that we've been working on covers drag-and-drop in both AngularJS and pure JavaScript.
AngularJS drag-and-drop: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/angularjs/2_drop_files
JavaScript drag-and-drop: https://github.com/GoogleChrome/chrome-app-codelab/tree/master/lab5_data/javascript/2_drop_files
There's an early version of docs too for AngularJS drag-and-drop for Chrome at developer.chrome.com/trunk/apps/app_codelab5_data.html#handle_drag_and_dropped_files_and_urls
We're working on the docs to cover both samples though.
I have done this a while ago and it worked.
The problem you've got is that you are creating a file url, then trying to navigate to the url. The navigation is failing, not the read. It's failing due to CSP, and you probably won't be able to override that with a different CSP due to security restrictions we've placed on allowable CSPs.
But, you should be able to just read the file and use the content. You need to change that sample code to use ReadAsText or ReadAsArrayBuffer instead of readAsDataURL. Look here for more details.
Please let us know how you get on!
Just listening for drop won't work. You will have to prevent the default functionality of dragover.
document.body.addEventListener('dragover', function(e) {
e.preventDefault();
}
document.body.addEventListener('drop', function(e) {
alert('it works!')
}

Is there a way to refresh your phonegap application - eg, build the page and start running the scripts from the beginning?

Is there any way to do this?
E.g., if a user starts the app with no internet connection, no remote scripts can be loaded, and the application basically can't run and I display a "No internet" page. But if the user gets internet later and the application is still running, is there any way to just "restart" ?
how about -
document.location = "index.html"
PhoneGap applications are just like an embedded website - you should be able to go to any hyperlink you wish (mind the whitelists).
Of course, if you also want to detect when it's again online, you should use the PhoneGap Network API to bind to those online/offline events.
In general thought, have you ever thought of using the HTML5 manifest functionality to actually let your local PhoneGap app cache those remote scripts? That way your app could still run, even when offline (except if it needs remote data to "do your thing")...
Hope this helps!
Try this
navigator.app.loadUrl("file:///android_asset/www/index.html", {wait:2000, loadingDialog:"Wait,Loading App", loadUrlTimeoutValue: 60000});
Accepted solution works, but might fail if you have an SPA with html5 url routing.
Here's a safest solution:
// keep startup url (in case your app is an SPA with html5 url routing)
var initialHref = window.location.href;
function restartApplication() {
// Show splash screen (useful if your app takes time to load)
navigator.splashscreen.show();
// Reload original app url (ie your index.html file)
window.location = initialHref;
}

Resources