Zombie.js jQuery Load Error 'j.getClientRects is not a function' - javascript

So first I have read this Stack Overflow question and it doesn't look like my same issue.
Basically I'm trying to use Mocha and Zombie.js to run some tests on my Node.js site.
I'm trying to check to see if I can create a user. In the end I would like to check to see if my bootstrap modal exists. Basically I have the bootstrap modal wrapped in an EJS if statement so there is defiantly a chance it might not exist. So that is why I'm trying to run tests on it.
But currently it's not even working with browser.assert.success(); so I'm currently just trying to solve this before moving on to checking for elements.
browser.visit('/login', function() {
browser.fill('email', 'test1#test.com');
browser.fill('password', 'testtest');
browser.pressButton('Login').then(function() {
browser.assert.success();
}).then(done, done);
});
In this case I should be running the following code on the page the browser is currently on.
<script>
$("#paymentModal").modal('show');
</script>
When running this unit test it gives me the following error.
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3
}return c}function Q(a){var b;for(b in a)if(("data"!==b||!n.isEmptyObject(a[b]))&&"toJSON"!==b)return!1;return!0}function R(a,b,d,e){if(M(a)){var f,g,h=n.expando,i=a.nodeType,j=i?n.cache:a,k=i?a[h]:a[h]&&h;if(k&&j[k]&&(e||j[k].data)||void 0!==d||"string"!=typeof b)return k||(k=i?a[h]=c.pop()||n.guid++:h),j[k]||(j[k]=i?{}:{toJSON:n.noop}),"object"!=typeof b&&"function"!=typeof b||(e?j[k]=n.extend(j[k],b):j[k].data=n.extend(j[k].data,b)),g=j[k],e||(g.data||(g.data={}),g=g.data),void 0!==d&&(g[n.camelCase(b)]=d),"string"==typeof b?(f=g[b],null==f&&(f=g[n.camelCase(b)])):f=g,f}}function S(a,b,c){if(M(a)){var d,e,f=a.nodeType,g=f?n.cache:a,h=f?a[n.expando]:n.expando;if(g[h]){if(b&&(d=c?g[h]:g[h].data)){n.isArray(b)?b=b.concat(n.map(b,n.camelCase)):b in d?b=[b]:(b=n.camelCase(b),b=b in d?[b]:b.split(" ")),e=b.length;while(e--)delete d[b[e]];if(c?!Q(d):!n.isEmptyObject(d))return}(c||(delete g[h].data,Q(g[h])))&&(f?n.cleanData([a],!0):l.deleteExpan
TypeError: j.getClientRects is not a function
at k (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:26891)
at Object.n.extend.pixelMarginRight (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:25936)
at a.getComputedStyle.Sa (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:27592)
at Function.n.extend.css (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:30895)
at https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:4:520
at Y (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:4661)
at n.fn.extend.css (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:4:361)
at c.setScrollbar (http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js:6:18612)
at c.show (http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js:6:14692)
at .<anonymous> (http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js:6:13878)
Looks to me like for some reason Zombie.js isn't loading jQuery on that page or there is an error. But in that previous Stack Overflow question and answer at the beginning of the question it looks like Zombie.js can load jQuery.
Are you not able to load jQuery with Zombie.js? How can I fix this? Seems like a very simple thing to test pages with jQuery. Any ideas?
Let me know if you need any additional information or anything. Thanks.
EDIT for some reason when downgrading to jQuery version 1.11.3 it seems to work and the error goes away. Any reason for this?

This bug is fixed : https://github.com/assaf/zombie/issues/1031
Adopting jsdom 8/9 as the fix for your problem was harder than I
wanted. It should be pretty easy to add a dummy implementation for
getClientRects() just to get past that specific failure. I'll try that
and see how it goes
Add a stub implementation of getClientRects() was straightforward. I've published 5.0.1 with a fix for this specific failure.
mdlavin

Related

webdriver.io rightClick immediately closes when executing tests, but works in repl

We're writing tests in webdriver.io 4.14.0 (with mocha and chai) , and I'm running into a strange issue that I can't get to the bottom of.
The issue revolves around the following code:
var elem = $("#myid");
elem.waitForText();
elem.rightClick() // also tried browser.rightClick("#myid");
In both cases above, the expectation is that a context menu in our application appears. When running the test from the console, I can see the context menu flash briefly, and disappear (this causes other commands to then fail since the required elements aren't visible).
The weird thing (to me) is that if I put browser.debug(), enter repl mode and execute the same commands there, everything works, and the context menu stays open.
Is there something that I'm missing when writing the test case?
I've tried both the stable 3.* and 4.0 alpha packages of selenium. Additionally, I'm using Chrome 71.
If anyone else encounters something like this, make sure you find something on your page that you can use to determine if any scripts are running. In my case, other scripts were trying to overwrite the DOM and closing the menu (something that wasn't happening in REPL because they had already finished).

Something overwrites window.onbeforeunload in Javascript

Hello guys,
I have a strange problem with my ASP.NET 4.5 page. For some strange reason, my window.onbeforeunload function gets overwritten every time I load the page. Inside the debugger, I can clearly see that the right value is set in my head section, if I place a breakpoint there. However, after finishing the loading process of the site, the value changes to the following:
function (a){return typeof p!="undefined"&&(!a||p.event.triggered!==a.type)?p.event.dispatch.apply(h.elem,arguments):b}
I have no idea where this is coming from. This is my code from the head section of the page:
window.onbeforeunload = function (e) { return 'Do you really want to cancel?'; };
I'm using JQuery 2.1.3 as well as DevExpress 14.2 in my project. Any idea what could be responsible for this weird behavior?
Thanks in advance!
I actually found the answer where this is coming from thanks to #DavidTansey's hint. It's the Browser Link feature that was introduced in Visual Studio 2013. It looks like Browser Link uses some old jQuery library and overwrites various handlers.
So if you are having the same issue, please try to disable the feature (the menu is next to the browser selection in the tool bar). This should solve the problem.
I'm pretty sure that this problem wouldn't appear on a real server, because it would likely not use Browser Link.

What can be the reasons for JavaScript breakpoint is not hit?

I set a breakpoint in a script block of a razor view.
VS2012 attaches to IE but breakpoint has yellow triangle with exclamation mark saying:
The breakpoint will not currently be hit. The code in the document is
not loaded.
Script debugging is enabled in Internet Options of IE.
Have no idea what is wrong.
I faced this problem too. After trying many codes and things take from different posts in Stackoverflow and others websites, they have not solve my problem. When i have take a look for #robert4 solution and go back in my javascript code, i saw one error and fixed it, by doing like that, i have finally solve may problem and can now get a breakpoint in my javascript document. For those who will face this type of problem, i think that the first thing to do it is to verify your js file code by code to see if there is no error before beginning to implement each of others solutions take from differents posts.
When I had similar issue it turned out that an omitted } was the cause
(in one of the JavaScripts of the page, one of the {}s was not closed).
There was no error message on the browser console at all,
just didn't work and I had no clue for half an hour.
When I fixed the missing }, everything began to work as expected.

FancyBox Jquery Null Error - Strange issue

I am experiencing a very strange issue i am hoping someone can answer (its kind of broad, but i will explain it my best), code works on local page when opened, but as soon as the same page is uploaded it throws an error. Two others have also looked at this, resulting in more confusion.
I downloaded FancyBox to use the inline feature to pop up a user form via href link, instead of taking the user to an additional page.
You can see the "stock" fancy box here:
1 fancyapps.com/fancybox/demo
Under various options, Inline is what i am using.
I didnt need all of the other features that came with FancyBox so i stripped the page to the following, which works just fine:
2 *Fancy Box Demo Stripped to Inline Feature only*
So then, i applied this code to our sandbox copy of the page to implement:
3 *Sandbox Copy with Fancy Box inline feature added to "make offer" link*
It stops working! There are no conflicts with other javascript on the page, and the only difference is that it has a couple of color .css changes, all .fancybox was named to .ptroffer and that the css code is not inline on the page (which wouldn't cause this error anyway).
This same page, opened locally works beautifully - upload and it throws error.
SCRIPT5007: Unable to get value of the property 'ptroffer': object is null or undefined
<script type="text/javascript">
$(document).ready(function() {
$('.ptroffer').ptroffer();
});
</script>
Works fine with link #2, and with link #3 locally, but with #3 uploaded it throws error.
Please!
Something in your code somewhere is overriding $. If you change that "ready" handler to call
jQuery('.ptroffer').ptroffer();
you won't get that error. However, things may not work; I think that an older version of jQuery is being imported by something (1.3!), which is bad.
edit oh I see, something's pulling in Prototype. You've got a regular script soup going on there, and things are going to be unpredictable and bizarre until you get that straightened out. Probably somewhere in there something's calling jQuery.noConflict(), but that "ready" handler you're adding isn't written to expect that. Whatever code that's expecting jQuery 1.3 may be in for a surprise also.

Internet Explorer 7+8 jQuery Error with infiniteCarousel

Hai guise! I am having a spot of trouble with some jQuery I am using, this was previously working but I have made many developments since then and tried to track back to find out what the issue was, but I am unsuccessful - hence, my presence on here. Anyway, I am getting some JS errors in both IE7 and IE8 with the catch my frame jQuery infiniteCarousel plugin, I am literally pulling my hair out over this as when you remove any reference to this everything works beautifully.
Here is a link to the page.
If anyone can shed any light on the matter you would be a life saver!
The problem is that the jQuery infinite carousel plugin is poorly written and the minifaction process requires well formed JavaScript. If you take his code and run it through JSLint you'll see it needs dozens of fixes before it's likely to minimize properly. This is something the author of the plugin needs to rectify.
Although it isn't throwing any errors, it seems that the plugin is loosing track of the elements. A possible solution would be to hook into the start and complete events and stop all the button events until it has completed the animation.
Alternatively, use this plugin instead: http://sorgalla.com/jcarousel/

Categories

Resources