I'm looking for an ideal way to hook into and measure the time of bootstrapping an angular application which uses 'automatic intialization' (https://docs.angularjs.org/guide/bootstrap).
I've looked around and there doesn't appear to be a good built-in hook where I could measure the start/end-time with.
Anyone know of a nice solution for doing this?
If you want it only for testing performance you can use
console.time("Bootstrap");
//DO YOUR BOOTSTRAPPING
console.timeEnd("Bootstrap");
And then look at the console log in chrome
Just to provide an answer here: looking further into angular.boostrap, it appears you currently have to manually bootstrap and time both before and after. Alternatively, if you don't want to manually bootstrap angular, you'd have to edit/update angular to have a callback hook before/after.
You can also do this using W3C User Timing. For example, if you isert a timing mark here, then wouldn't this show the entry point since Angular begins to execute here. Then inserting another mark to calculate the time once you know the end. I used a JavaScript code I found that measures the Bootstrap finish.
performance.mark('entryPoint');
platformBrowserDynamic().bootstrapModule(AppModule)
window.performance && performance.measure && performance.measure("BootDuration", "entryPoint", "AngularBootstrapFinished");
Related
I am using A-Frame javascript 8th wall libarary and tap place component to place a model. When I tap on the screen iam getting the above warning and after 2 minutes or so I can see the model on the screen. I am not using any gltfloaders it is just plain html5, javascript with aframe tap-place component.
Is this something normal or am I doing wrong in my coding? Thanks in advance for helping!
My git link - https://github.com/NishithaSurapudi/tap_place
I believe the warning is coming from three.js which the 8thwall lib depends on. Try updating to the latest version of aframe, but if you can't fix it, its a minor warning so I wouldn't worry about it.
The problem seems to be that console.time is called multiple times with the same label. If you load a single model with GLTFLoader, everything should work fine. The warning shows when you start loading multiple models.
I'm using the tab project explained here: Tabs Project
Everything else but my issue works perfectly.
The only thing that doesn't work for me, at the moment, is applying *ngFor when creating tabs.
I know that the 2nd-phase checking by angular detects changes, and he's right, the tabs might be adding while the 2nd-phase check is in progress.
What I want to do is to try and still make it work, it's super important to me to use *ngFor within the tabs selector.
Provided is a Plunker code demonstrating the crash and what I'm trying to achieve.
Plunker Code
Important to say, Ive looked into
Here
and I understand that its only on debug mode and what the answerer said, though it was a year ago.
Almost the same answer, still not helpful
An ugly work around
In Addition
Unlike the Plunker which able run the code with errors in the console (that's the explanation of the issue), I cant even switch tabs in my project, but that's a normal behavior, I don't want bad code.
Unfortunately, I cant share my real code because its for my work basically, but I can provide more data if needed, though it is based almost 100% from the Plunker and the project I provided in the beginning of the issue.
.
One solution is to wrap your "zone" code with setTimeout (other methods for triggering change detection manually will also work)
if(activeTabs.length === 0) {
setTimeout(()=>{
this.selectTab(this.tabs.first);
},0);
}
Full plunker: https://plnkr.co/edit/UVfiJFYexgua2HfPe0Lw?p=preview
In order to fix the issue you need to remove the code for setting the first tab to active from your ngAfterContentInit() method. This code is causing the issue:
if(activeTabs.length === 0) {
this.selectTab(this.tabs.first);
}
I assume that the error pops up because change detection requires that the DOM is stabilized after one run, and your call in the ngAfterContentInit() would require anothed pass of CD to reflect the new tab.active value in the DOM.
What you could do instead is set the first element in your *ngFor to be active by default. Something like:
<tab *ngFor="let item of ['1','2']"; let index = index" [active]="index == 0"...
EDIT: Seems you can also use the first local variable (haven't tried it). See this plunkr
Explanation
For reasons which I appreciate, as of jQuery 1.8, the load event has been deprecated, however, it was still possible to detect whether an image was loaded (even if it was in the cache) just by using certain workarounds. Therefore, the deprecation of the event is actually quite irritating as it posed as a starting point at the very least for detecting when an image has finished loading onto the page.
Nevertheless, it has been deprecated, and I am therefore asking this question with the hope that I will find an answer, thus, help me and potentially others that may soon be running into the same issue.
An Example (before jQuery 1.8)
Without using a plugin (as this should be able to be done in very little code, so a plugin is unnecessary), I would like to call a function when each image on my page is loaded.
Something like this (this will not work due to the deprecation):
$('#mn_content .column').on('load','img',function(){
console.log('loaded');
})
My Question
Is anybody aware of how to achieve this now that the load event does not exist?
Please note: If the only way to achieve this (now), is to use the Javascript new Image objects, then please do not waste your time helping me as others need your help more than I do. I am able to write this code, it just seems a bit long winded for something so basic.
I have simply asked this question to ensure there is not a way of achieving this without the use of the Javascript image objects
I will of course be very grateful for any help, I just don't want you spending much time on me when there are others that need your help more. :-)
The load event still exists, you just can't bind to it using .load anymore. Your event delegation example should continue to work on into 1.9 and 2.0 (if the browser you're testing in supports bubbling of the load event)
I personally would still use the new Image method because i don't trust that all browsers will always bubble the load event properly.
Edit: Sorry if i wasn't clear, the point i was making is that the load event is still there, you just have to properly bind to it. Since the load event doesn't bubble in all browsers (if in any browser?), you must bind the event directly to the image. I'd suggest using the method that you asked us not to provide you an example of.
I've been looking into javascript test suites and I have found QUnit to be very interesting. I understand how to test computational code, but...
How do you test javascript applications written primarily for DOM manipulation?
it seems like testing the position/color/etc of DOM elements would be a moot point because you'd end up doing somethign like this:
$("li.my_element").css("background-color", "#f00");
and then in your test...
$(function() {
module("coloring");
test("test_my_element", function() {
var li_element_color = $("li.my_element").css('background-color');
equals(li_element_color, "#f00");
});
});
this just doesn't feel right because it basically just doing this:
var my_li= $("li.my_element");
my_li.css("background-color", "#f00");
if ( my_li.css("background-color") == "#f00" ) {
return true;
}
Am I nuts? How is this supposed to be done?
edit: the heart of the question:
I guess what I'm getting at is, I need to make sure the code isn't broken before I deploy, but the vast majority of it is UI helpers and ajax. How do I test that things are appearing correctly?
A few examples:
test that a JQuery UI dialog is appearing on top of all other elements
test that the drag-n-drop is working properly
test that the color of a droppable changes when an element is dropped on it
test that the ajax is all working properly
test that there are no extraneous commas that will break IE
I have found the Javascript/DOM tests, especially for the simple interactions that you are describing, are not that useful. You'll testing that things are set up right, and since jQuery is so declarative, your tests look a lot like your code.
My current thinking is that if you are writing larger JS components, it makes sense to pull out a set of interrelated behaviors both into a jQuery plugin and a set of tests for it.
But from the examples you mentioned, it sounds like you're really looking for a level of protection within your integrated website. A tool like Selenium will probably be more powerful and appropriate for you. In particular, it
can be automated
can run against multiple browsers, including IE
runs within the context of your web app and pages, so drag-n-drop can be tested where it really happens instead of in some test environment.
AJAX can be tested
Instead of testing the JQuery css function. Your test should mock the css function, and ensure that it is called only once with the correct color. The code tested should be yours, not the frameworks.
In addition to what Jason Harwig is saying, I would say that unit testing is a test to make sure that code is being run as expected. If you want to test that, then Jason is absolutely right about how you should do that. If you are wanting to run tests to check that the DOM manipulation is happening (UI testing) and not the actual code that is doing the DOM manipulation (unit testing), then you may want to check out something like Selenium, WatiN or Watir.
I'm guessing that many people test visually: i.e. they look at their browser's output on their monitor, to see whether it looks like the DOM was manipulated as expected.
If that needs to be an automated test case (eg. for regression testing), then maybe they record the output (like screen capture) and do something like compare two screenshots to see whether the results are the same.
Instead of capturing a screenshot, you could just capture the whole DOM, and do a side-by-side comparison of the captured DOM trees (which might be less error-prone that comparing pixels).
I test AJAX stuff like this:
Make the AJAX call
Set up a JavaScript timer
Check the DOM to see if the expected changes have happened
Now, it could be that the AJAX call hasn't returned before you do your check, but this is also useful test information; with an AJAX call, there is (usually) some time after which we'd call it a failure. As an example, if we're doing a suggestion popup, and it's taken 30 seconds to come back, that's a fail.
With javascript event timers, you can relatively easily determine how long it too for the page to render in the browser, especially when using tools like Jiffy. However, is it possible to capture more granular events such as individual image/object download times using javascript in the page? I am fairly sure this is not possible, but wanted to confirm with the javascript guru's of SO.
Thank you in advance.
Sadly, unless you load the images using the javascript image object manually instead of in the markup, I don't believe this is possible. that's why you usually see this functionality in things like firefox plugins
You could look at the Net tab in Firebug. I don't know if it can give you same information via Firebug Lite in other browsers or not.
If what you want to time can be put into an event that has a callback, you can check the time before and after. So anything you do with Ajax you can time. What exactly are you trying to time? Can you be more specific?
I'm not totally familiar with this jQuery plugin, but it may be of help to you:
http://plugins.jquery.com/project/timers