I have recently started using Vitest + React-Testing-Library to test the frontend of web application.
All was going smoothly until I added a test that opens a modal that uses the react-modal library. If I set this test (I will call it Failing Test for the rest of this question) to .skip, then all other tests pass perfectly fine. However if I include this test, then I've noticed that the DOM from the Failing Test bleeds into the other tests.
Whereas I would expect the other tests to have their own normal DOM instances, every other test seems to now have the same DOM from the failing test.
<body
class="ReactModal__Body--open"
>
<div
data-react-modal-body-trap=""
style="position: absolute; opacity: 0;"
tabindex="0"
/>
I assume this is something to do with the modal appending the class ReactModal__Body--open to the body element, however beyond this I can't find out how to isolate this test?
I've attempted to use --no-threads to run the tests in isolation but it still appears to not work.
Wondering if anyone has encountered something similair with portal'd elements and has any advice?
I figured it out, here's what I realised for those that see this in the future.
The problem wasn't actually DOM bleed (as far as I know), but rather a different test wasn't correctly using awaits and thus it's async methods were still running once the test with the modal was still running, resulting in the overlap.
This seemed to fix it for me:
await expect(screen.queryByText('[List not found]', { selector: 'h3' }).not.toBeNull());
Was changed to this:
await waitFor(() => expect(screen.queryByText('[List not found]', { selector: 'h3' })).not.toBeNull());
The added waitFor ensured that test wasn't terminating before the async loading in that test was finished.
Related
I'm in the process of converting a rather big application written in AngularJS to an Angular application using the #angular/upgrade module. For now, every component from AngularJS is running as expected in the Angular app. The app is being bootstrapped like this:
export class AppModule {
constructor(
private upgradeModule: UpgradeModule,
) {}
ngDoBootstrap() {
this.upgradeModule.bootstrap(
document.body,
['myApp'],
{ strictDi: true },
)
}
}
However, I've started to rewrite components in Angular and I've run into problems trying to get those downgraded components to work. I'm using ui-router to map components to states like this:
function config($stateProvider) {
$stateProvider.state('some-state', {
parent: 'app',
views: {
content: {
component: 'someComponent'
}
},
url: '/some-state'
})
}
The rewritten component is being downgraded like this:
angular
.module('myApp')
.directive(
'someComponent',
downgradeComponent({ component: SomeComponent }),
)
SomeComponent is just a regular Angular component.
It shows up fine, the template is being rendered and everything, however, change detection doesn't seem to be working. The change detector seems to run once shortly after the view is being rendered, after that however, it doesn't ever run again unless i call it manually. NgZone.isInAngularZone() returns false if run anywhere within the downgraded component, I'm not sure if this is intended or not. If I inject ChangeDetectorRef and run detectChanges on any methods that change the fields of the component, the updates are being detected and rendered just fine. However, it would be way too much work in the long run to append an (input)="changeDetectorRef.detectChanges()" to every input, and call detectChanges() in pretty much any function that does anything.
Is there anything I am missing? If I haven't provided enough information, I can try to get a minimal reproduction of the problem running, this would probably be a bit of work though, so I want to ask like this first.
Ok, so the answer turned out to be something really simple. While I upgraded everything individually, I copied over most of the old index.html, which still contained ng-app="myApp" on the body tag.
This caused the AngularJS app to bootstrap itself in the HTML instead of the Angular app handling the bootstrapping, which prevented the AngularJS app from running in the NgZone. I'm leaving this here for anyone who makes the same mistake. In short, make sure you've removed the old ng-app-tag from your index.html.
I have a situation using system.js with an angular application where I need to be able to include specific System.import(f) statements on a per-page basis, but it was imperative that they all be included before angular finishes bootstrapping and loading up its module.
I spent a long time on this problem and eventually this is the workaround I devised;
in my config.js, I am doing this...
config.js
// .... configuration ... //
Promise.all([
System.import('jquery'),
System.import('angular'),
System.import('angular.ng'),
System.import('bootstrap')
]).then(function() {
$(document).on('angular', function() {
angular.bootstrap(document, ['module-name']); $('body').removeClass('cloak');
});
});
Then I have a css class named .cloak. I tried ng-cloak but found it wasn't doing the job (I suspect because I'm deferring the angular bootstrapping)
.cloak { visibility: hidden; }
then on my individual page, I use this sort of code to shoe-horn my page-specific imports and finalize the process.
<!-- Load SystemJS -->
<script src="assets/js/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app/main').then(function (e) {
Promise.all([
System.import('app/controllers/index'),
System.import('app/controllers/read'),
System.import('app/controllers/edit/article'),
System.import('scripts/lib/init')
]).then(function (m) {
$(document).trigger('angular');
});
});
</script>
So that's the basic idea; I don't allow angular to finish wiring up its module until everything has been imported through system.js. At present, this seems to work fine.
My problem is that I'm not a very good programmer, nor am I very clever. This seems like an extremely standard, normal problem that comes with the way system.js is designed and it occurs to me that there has to be a better, built in solution that I'm missing or haven't found.
Has anyone else dealt with this before that can offer some advice?
The reason I need to defer the module wiring is because I've got various angular controllers and models and such and I don't want them all to load on every page. (I mean, trimming down the scripts to only the ones needed at the moment is one of the points of a module loader, aside dependency resolution).
Trying to use the ng-app directive was constantly causing trouble - as angular would try to load before everything was finished and loaded in, so it had trouble finding things like certain controllers and the like on certain pages.
The biggest reason I need an alternative is that this method doesn't work well for minifying typescript.
This is an extremely standard issue with ng-cloak in general. Perhaps a better way has come around, but pretty much since I started working with angular I've just defined ng-cloak in the header of my index.html file like this:
<style>
[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak {
display: none !important;
}
</style>
and added class="ng-cloak" to the body tag of my page. It works great and when Angular finishes loading it's internal ng-cloak styles effectively overwrite mine.
It seems like moving the inline script basically as is, to an external file, would still allow it to run exactly as you have it and then minification and such would be fine.
It also sounds like you're not creating a SPA here, since if I understand you correctly, you're calling config.jss from each page. You may want to reconsider that and go with a SPA. You will likely end up loading everything up front, but you'll load it all only once.
After a lot of research, and tinkering, I can't seem to actually get my Protractor test to do anything else other than have an Angular related error, even though I am using browser to avoid Angular being detected at all.
The test involves an Angular app, opening a dropdown in it, and clicking on the link for the console; the console opens a non-Angular admin page in a separate window.
So based on the many informative SO posts I found, I first used this...
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
//expect for new window here
});
});
Which appeared to work, as I could get to the window through repl pretty easily.
The issue is when either of the following were added...
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
expect(browser.getLocationAbsUrl()).toContain('/console/login.jsp');
expect(browser.driver.findElement(By.css('th.login')).getText()).toEqual('Login');
});
});
One expect check the URL and the other checks for the header element on the page, which is a table header. When I run this, I get the following:
Error while waiting for Protractor to sync with the page: "angular could not be found on the window"
When I decide to use browser.ignoreSynchronization = true, both in the function, or in a beforeEach, with or without a following afterEach setting it to false, I get the following:
JavascriptError: angular is not defined
I can't seem to get any "useful" errors to help me debug it, and trying it in repl does not help, as I get the same issue.
To be comprehensive, trying my URL expect without getting the second window will give me the root, and the other will fail.
Just doing one or the other will cause the same problem.
Changing to regular syntax (element(by.css...)) does not change things.
So much for my first question...
It appears that my use of browser.getLocationAbsUrl() is meant to be used for an Angular page, and was causing my issue...
Essentially, even though I believed I was using pure Webdriver calls, that call still required Angular on the page to work...
As stated in another post, the use of browser.driver.getCurrentUrl() is a non-Angular call using Webdriver, and fixed the problem. Thus, the final code is the following...
browser.sleep(1000); //to wait for the page to load
browser.driver.getAllWindowHandles().then(function(handles) {
browser.driver.switchTo().window(handles[1]).then(function() {
expect(browser.driver.getCurrentUrl()).toContain('/console/login.jsp');
expect(browser.driver.findElement(By.css('th.login')).getText()).toEqual('Login');
});
});
This works without setting ignoreSynchronization, BTW.
I realized it would probably be something relatively simple to fix it, just didn't expect I'd get it that quickly (I intended on submitting the question last night, but posted it this morning instead).
In any case, I hope this will at least be a good reference for anyone else facing the same issue.
Seems like getLocationAbsUrl is angular abs url.
Try using the native driver getCurrentUrl instead.
-- expect(browser.getLocationAbsUrl()).toContain('/console/login.jsp');
++ expect(browser.driver.getCurrentUrl() ...
I am using UI Bootstrap for collapsing/expanding a div section based on user clicking a button similar to the example shown in the official site - UI Bootstrap-Collapse
I included the latest version of ui-bootstrap(0.14.2) but it was not showing the expected behavior. In particular the collapseDone() and expandDone() callbacks are never called after the $animateCSS is done the animations. (The animations are working properly, presumably because of the css transition property of the class 'collapsing' in twitter bootstrap.)
But when I inspected the UI Bootstrap site, I found that it's working properly as expected. (That's the class 'collapsing' is added during the animation and then removed after animation and then the class 'collapse' is added). So I checked the source code link for collapse collapse source code -github and found that finally is used for $animateCSS promise resolution rather than done in the ui.bootstrap.js code I included.
So could someone please explain the difference between finally and done methods of the $animateCSS function? The documentation [Angular Docs-$animateCSS][3] says that
there is also an additional method available on the runner called .done(callbackFn). The done method works the same as .finally(callbackFn), however, it does not trigger a digest to occur. Therefore, for performance reasons, it's always best to use runner.done(callback) instead of runner.then(), runner.catch() or runner.finally() unless you really need a digest to kick off afterwards.
So it looks like both should behave similarly. Could someone shed light on this, as there seems to be very little resources to learn about $animateCSS. (google search for $animateCss returns results for animate.css which seems to be part of the earler angular js verion (v1.2) - so that doesn't help)
I had forgotten to inject "ngAnimate" to my module. That way the animation by $animateCss was not successful, so the done() was never called. But finally will be called even if the animation is not successful.
I'm running into an issue where when I run my tests on Jasmine, I get this error below. The problem is, it seems to happen when I try to execute a certain amount of tests. It doesn't seem to be tied to a particular test, as if I comment out some, the tests pass. If I uncomment some tests, the error appears. If I comment out ones that were uncommented before, they all pass again. (ie if I have red, green, blue and orange test and it fails, I comment out orange and blue it passes, then I uncomment blue and orange it fails again, but if I comment out red and green it passes again).
Chrome 41.0.2272 (Mac OS X 10.10.1) ERROR Some of your tests did a
full page reload! Chrome 41.0.2272 (Mac OS X 10.10.1): Executed 16 of
29 (1 FAILED) ERROR (0.108 secs / 0.092 secs)
I'm stumped as to what is going on. The more tests I add, that's when this becomes an issue. Has anyone encountered this before? I have no idea what could be causing it, as nothing in any of my tests do any kind of redirection, and they all pass universally on another persons machine.
In my case the problem was that in my source code I had code directly setting the href on the location object, like window.location.href = 'somewhere';
In my specs I set up a onbeforeunload listener that just returns a string instead of allowing the redirect to take place:
beforeAll(() => {
window.onbeforeunload = () => 'Oh no!';
});
I suppose you are using window.location somewhere in your targeted code. In order to pass it just create a spy for the window.onbeforeunload
Example:
window.onbeforeunload = jasmine.createSpy();
Or even better use $window instead, and this will not happen.
Make sure that your tests are properly isolating all modules under test with mocks/spies. The behavior you are seeing says to me that your tests are not truly running in isolation - they are changing some state somewhere that will trigger a reload.
I recently encountered this error with Karma 0.13.12. I upgraded to Karma 0.13.14 and my tests work again. The problem for me (and probably also for #mqklin) was related to https://github.com/karma-runner/karma/issues/1656 and https://github.com/jasmine/jasmine/issues/945.
There are many ways this error can happen.
If your component has a form element, this might be the cause.
Whenever a button on the form is clicked, this error can happen, even tho your component contains no navigation logic.
What worked for me was upgrading Karma from 1.4.0 to 1.4.1 and changing the maximumSpecCallbackDepth in my jasmine.js file from 20 to 100.
creating a spy on the function which has the window.location / reload fixed the issue for me
Hope you have used window.location = "some url" in your code;
Faced similar problem, and solved by using the below changes.
Replaced window.location in the code with,
window.location.assign("some url");
Do the below in unit test:
spyOn(window.location, "assign").and.callFake(() => {
// Dummy assign call - so that your actual call will be faked and the reload will not happen.
});
You also need to make sure that modules are not being loaded twice. In my case, I had an AngularJS module file -e.g., auth.controller.js which contents were already bundled in a core.js file. Once I excluded the bundled files on karma, the error disappeared.
Try to reduce amount of describe sections or completely remove them. I don't know why, but it works for me.
I was using setTimeout(() => window.location.replace('/'), 10);
I used below code in my unit test and it worked for me.
spyOn(global, 'setTimeout');
In case it was ng-submit callback, which doesn't call "event.preventDefault()" and the browser reloads page. Mocking $location doesn't help in that situation.
According to angularjs documentation you should inject the $window module to be able to solve the testability issue you get. If you really want to do a full page refresh while routing, which will reload the whole application. But anyway...
So for example in component
.controller('ExampleController', ['$scope', '$window', function($scope, $window**)
{
$scope.doRerouteWithPageReload = function() {
return this.$window.location.href = "/myUrl";
};
And then in your test-file you import $window to the test-controller your way, then where you assign spies you can do something like this:
$window = { location: {href: jasmine.createSpy() };
And then the actual test is something like this:
expect($window.location.href).toBe("/myUrl");
Angularjs documentation for reading more about $window.
It will solve this Karma redirect error!
var html = '<script type="text/javascript">';
html += 'window.location = "' + urlToRedirect +'"';
html += '</script>';
$( '.wrapper' ).append( html );