Testing D3 Applications with click and drag events - javascript

I'm creating an application based loosely on this example:
http://bl.ocks.org/rkirsling/5001347
I was wondering if anyone had any ideas on how to write tests for it.
Screenshot diff tools aren't the way to go as I don't want to test how the visualisation looks, but how it behaves.
Ideally what I would like to do is be able to check events.
For example, click the middle of the svg and check if a node has been created. Get the locations of two nodes, drag from one to the other and check if a link has been created.
Any thoughts on how to do this?

What you need is end-to-end testing tools. For Angular apps, Protractor is nice.
However, be careful, the native HTML5 drag-n-drop events are not well supported on Chrome, as described here: https://code.google.com/p/selenium/issues/detail?id=3604

Related

Different Behaviors for Touch and Click using Link in A-Frame in Mobile devices

I am new to this and need some tips. I want to know if is there some way to optimise an A-Frame page to work fully on Mobile. I made some events and all works well with PC and Mac, but a lot of functions don't work on Mobile (iPhoneX and Android 6), and even using lines like:
this.el.addEventListener('touchstart', (e) => {
window.open('https://physi-enabled.glitch.me','_blank');
Any ideas? This is the code: https://glitch.com/edit/#!/building-world?path=index.html:28:62
enter image description here
Your question is not specific enough, but here's a few tips as you requested:
Use A-Frame built-in components, primitives and util functions to your advantage. For example there's already link component - you can use it instead of manually attaching click events just to open link in new tab.
Look controls is a component that defines mouse and touch behaviors, so you might want to look into it.
AFRAME.utils.device.isMobile is a function that tells you if the device is mobile, you don't really need your own most of the time.
event-set component might help you reduce all the code related to changing one property on hover or click etc.
Most of the above, if not everything is mentioned in A-Frame docs.

Determine what javascript function is called in chrome

I am actually working on an ongoing project that is half way completed.
I have to:
Find javascript functions that are trigger when some checkboxes are selected,
inspect the CSS of some elements
I would like to know a trick or a plugin to determine them, this way I can speed my development process.
You should use the developer tool of google chrome.
You might to look on how to debug put break points in your script.
you have an how to use here
The Developer tools of Chrome seems to be an eligible choice.

How to take a screenshot of a web page by using Javascript

I need to capture the currently active web page as a screenshot. I've already tried html2canvas & GrabzIt but the problem is that I need a precise screenshot of the page I am on currently. The reason why I don't want to use html2canvas is because it does not always return a good version of a screenshot (not rendering properly) and I don't want to use GrabzIt because it's not free.
Do any of you have an idea how to accomplish this either by using javascript/java/flash?
Any option will do as long as it works...
P.S. I'm currently capturing screenshots with my addon for Firefox by using the function that firefox offers : context.drawWindow and now i want to make it available online.
Thanks a lot!
Currently possible alternatives:
rasterizeHTML.js:
this tool looks to be capable to capture a while page containing sophisticated html-structure and an image as well in this demo:
http://cburgmer.github.io/rasterizeHTML.js/
Lively 3D:
On the tool's website you can find a demo as well and it is still supported and developed.
http://livelygoes3d.blogspot.co.at/2011/11/rendering-html-on-canvas.html
HTML2Canvas:
Or after all HTML2Canvas because it does not look like that it is put on hold, quite the opposite there is a new release-version of it. And since I used it it might be handle rendering images onto a canvas better.
https://html2canvas.hertzen.com
Old-Answer:
I used this package in one of my projects and it worked pretty well. The only complain I have to make on this package is that images are not rendered that well in the final screenshot. But may be it's improved since then.
In the end, I ended up using server side generation of screenshots with phantomjs. Found it the most reliable in my scenario and it takes pretty decent screenshots.

Understanding Firefox' Autocompletion Popup

I build my own Richlist-Suggest-Popup for the URLBar along the lines of Mozilla.
When reading their Source I don't understand how they simply do a setAttribute('image', image) as a richlistitem actually doesn't support this attribute.
As far as I know the richlistitem DOM is supposed to look the following:
richlistitem.autocomplete-richlistitem
vbox
hbox
image.ac-site-icon
label
Generating this on my own almost works, but I'm kind of sure that this is the wrong way.
Could anyone explain either how Mozilla provides this feature or show me an example how one would achieve the behaviour?
I highly recommend DOM Inspector and Inspect Context. Using these, you can see that there are a number of different XBL bindings for those list items, and one of them must be the one that lets you add an image using an image attribute. I hope this helps!

dragover mouse event contain file info in XUL application using javascript

I'm writing a XUL application using JavaScript for the coding. I would like to be able to drag files onto a control in this application and, when dropped, have them show up.
This seems like it would be almost exactly like the tutorial here, but when I break in the drag and drop event handlers in a debugger, the dataTransfer member of the event isn't there!
How should I be doing this?
Thanks,
Nathan
These features were added in Firefox 3.1, and XULRunner 1.9.1, so make sure you are using the correct version. Be aware these builds are still in beta.
The old API for drag and drop is here.

Categories