Current situation
I'm developing a bookmarklet by using a stub as the actual bookmark that sources JavaScript code in a file on GitHub. I test the bookmarklet on a webpage and then I make changes to the JavaScript code in a text editor, push it to the GitHub file with git on the command line, and then run the bookmarklet again on the web page.
Problems with current situation
This approach seems tedious to me. Every time I make a change to the JS code in the text editor I have to save in the text editor and write 3 commands (git add, git commit, git push) to update the changes in the GitHub file (and then click the bookmarklet again).
What's more frustrating is that it seems like Chrome takes a very long time to recognize the changes in a recently changed GitHub file. I test this by making a simple alert("message"); command, changing the message value, pushing the changed code to GitHub (successfully), and seeing if the bookmarklet stub sources the recently changed file (it doesn't).
I avoid caching by appending a random number to the GitHub file URL sourced by the stub - stub shown below:
javascript:(function(){
var script=document.createElement('script');
script.type='text/javascript';
script.src='https://rawgit.com/username/repo_name/master/bookmarklet.js?v='+(Math.random()*1000);
document.body.appendChild(script);})();
Question
Is there a better way to develop bookmarklets where you can quickly see changes in bookmarklet code when the bookmarklet is used? Or can anyone see any problems in what I'm doing?
Thanks!
I'm trying to run some JavaScript on an RDF-XML file on my local machine on WebStorm. I want to replicate the functionality of writing JavaScript into Firebug after the document loads - something not explicitly included in the HTML code itself (RDF-XML in my case), kinda like in JSFiddle.
The idea is to test some JS code on the RDF document without having to do it on a browser debugger like Firebug (not the best place to write code, and I dont want to keep copy pasting back and forth from an editor/IDE).
I am a JS and WebStorm newbie. Im not sure if WebStorm allows me to do this, and if so, how I configure it to do so.
Could anyone help? How do you guys debug write and debug bulky JavaScript?
I am using ACE to allow people to code freely on my website. How would I run this code.
I would like a run button in the bottom left corner (I can do that in css), but how would I run it, as it is python. I have added extra tags, as you can write these languages in the ace editor. When I mean, a run button, I mean like on codecademy, where you write some code, then it is submitted.
You could possibly make a temporary file in your system, and in an iframe, open the file.
Important Note
This could be insecure as they could get the URL and execute code to delete ../../../ or something, which could harm your files.
How should I structure tests containing a mixture of Selenium code (for setting up the page), and client-side Mocha code (for actually performing the tests on the client-side JS being tested)?
I am testing a client-side javascript library. Unit tests work great with Karma, Mocha, and Grunt. The unit-tests can be run locally, or via SauceLabs. The unit tests are able to test basically everything up to the part where a file is actually submitted. This part requires browser automation, and/or manual interaction, and this is what I'm struggling with.
The library in question is a Javascript file-upload library. It has features like chunking, auto-resuming, and much more. It does not require jQuery, and it works on a variety of browsers (IE7-10, FF, Safari (Mac & iOS), Chrome, Android stock browser). So, there are a lot of cases and exceptions to be covered in these tests.
Basically, I need to use Selenium to set up the page. Since I'm testing a client-side JS file-upload library I need to use Selenium to programmatically submit a file so it can actually be uploaded. Once this file has been submitted (the equivalent of selecting a file from the dialog window that appears when you try to upload a file or files online) then client-side tests can be run to ensure the UI has been drawn properly, the file has been found, etc.
I'm trying to wrap my head around how I can test this properly, and how I can set up my test suite to be extensible for the future, robust, and simple/easy to use.
Should I inject JS code to be run client-side with Selenium?
One idea is to inject the client-side JS code at opportune times with Selenium. Here's some pseudo-code of what I'm thinking:
describe("A Test", function () {
it("injects some JS", function (done) {
// Assume `getClientSideScript` loads some .js file from the filesystem,
// reads its contents, and returns the contents as a string (to be executed).
browser.safeExecute(getClientSideScript('initialize'), function (err, result) {
// At this point, the client-side library is initialized on the page.
// Assume that `uploadFile` will submit a file to the `<input type='file'>`
// element
utils.uploadFile('file.jpg', function (file) {
browser.safeExecute(getClientSideScript('test_file_submission'), function (err, result) {
assert.ok(/* something about the result */);
});
});
});
});
});
This, to me, would work, but seems like a giant PITA. I would have to come up with some convention for storing and loading the client-side scripts that are loaded. Also, two different test would have two different injected scripts so we'd have a huge collection of one-time-use scripts chillin' out in our repo. I'm also afraid of going down this road and finding out that it is a bad decision or impossible.
Anyone have any experience with this?
Mock server...I'm going to need one.
I could use Sinon.js to make mock servers client-side, or nock to have a separate server-side mock server. The server is super simple, but I believe I need to able to assert client-side that the response from the server was what was expected.
Intercepting client-side test results
Similar to the above, how would I be able to intercept asserts within the client-side code when using Selenium to automate the browser. For example, let's say I wanted to test a request-response cycle between my library and a mock server and I wanted to verify that if my library sends request A to the server it will expect response A. Selenium can't test that. I need to be able to have asserts captured client-side and outputted through Selenium.
Been bangin' my head on the wall trying to figure out the best method to do this. If anyone has any experience with anything similar, please, chime in!
I wouldn't mix these two types of tests at all. You have several different concerns here. You can still get full test coverage without having to combine tests like you are describing.
Client side unit tests (using Karma, Mocha, etc.) validate that the JavaScript code is behaving as expected.
Server side unit tests (using JUnit or whatever unit testing framework exists for your back end) validate that the server code is behaving as expected.
Integration or end-to-end tests (using Selenium) validate generally validate that multiple components are working together correctly. You can use a mock back-end for these if necessary.
You can create Karma/Mocha unit tests to verify the details of whatever processing may exist for that file upload action. Here, you should be testing edge cases of the individual JavaScript functions underneath the UI.
You can then create a Selenium test to purely test the upload action and expected result of uploading the file. You can verify that the correct elements exist on the page and have the expected properties after the upload. The JavaScript is a black box in this case. You are testing from the user's perspective. This will exercise some of the code you unit tested already, but the point of it is to test the connection between front and back ends.
I have an html/js(jquery) app that has the below functionality:
when a button is clicked, a modal opens and shows input details, we can enter and submit them. The submitted details will be stored in localstorage and automatically page gets rendered with new content.
Enter entry that we make appears as a row on the page.
Thats it !
I want to write tests for it.
So, what tests do I need to write for this app?
just test what each and every function returns.
test functionality of app. For example, add some sample entries and check whether they are displayed on the page as required.
Any others as you suggest.
By the way, is jasmine ok for this types of apps?
Jasmine is great for these kind of apps and you might want to couple it with a test runner such as Karma JS.
In a sense you need to write:
1. Small and focused unit tests that mock as much of the functionality that is not tested such as server side calls. For this I use Karma/Jasmine/Sinon.
2. Functionality/UI/Integration test using an automation framework such as Casper JS driving PhantomJS to mimic actual user interactions.
3. Make sure you have good code coverage with Karma's code coverage plugin running Istanbul (included).