Test the redirect page - reactjs

I am using Testcafe to test my application. I have a page on which there is a button. When I click the button the page redirects to another page which contains a bunch of images and where a server call happens. Then when the call has been resolved, the page redirects again to another page.
I am trying to test this middle page which shows only for a few seconds.
I want to test that the URL was changed when Page A went to Page B.
I want to test that the page was shown and images were shown.
The problem is that when I automate click on the button on Page A, it goes to Page B and then after a few seconds it goes to Page C and then the test executes and just hangs.
I have tried setting the
await t.setPageLoadTimeout(0)
.wait(200000)
.eval(() => window.location.pathname)
.expect(window.location.pathname)
.contains('/gatheringDetails', 'The response was ok', {timeout: 500});
So, I can control the page load timeout to help catch the middle page but it doesn't work.
Can someone help? Please.

The solution is to use a request hook that will listen to page B request and intercept the response. See Intercepting HTTP Requests

So i used Intercepting HTTP Requests and introduce a delay in response so i can stay on the page B longer to test the visuals on it.

Related

Old tab stops sending requests to API React

I have a problem that is hard to describe. The problem is reproduced in 2 cases.
Old browser tab (not closed from yesterday's session).
After the token is expired, I redirect to the login page, and if I click back in the browser, the problem appears.
What is the problem?
On such a tab, requests are no longer sent, but the content is drawn from the old data. I don't cache data anywhere.
The query logic is simple. For requests i used axios.
const getSomeData = async () => { const res = await axios.get('/url')}
useEffect(() => getSomeData(), [])
On such a tab, useEffect does not run. Reloading the page doesn't help. hard reboot too.
In the network tab, I see my request, but it is not marked as Fetсh / XHR and the very first one is loaded, before the scripts are loaded
sceen all request
headers request
Also in this request, it goes to the localhost and not to the domain, and the token is not sent.
In preview i get the following:
preview request
I think that javascript works because the logic of pressing buttons, opening modal windows works, but requests are not sent on such a tab. But due to the fact that requests are not sent, it does not work, I cannot try to process such a tab
I tried to search this error, but I did not find anything that would help my problem. I also failed to process through useEffect.

Why does my iframe sometimes initially load the Return URL page before the DocuSign form has been signed?

For my Next.js application, I'm embedding a DocuSign form using an iframe. At times when I visit the page where that form exists, I'll sometimes see the Return URL page (which I should only be redirected to in the iframe after having signed the form) when the page initially loads. After a few seconds, the correct page with the form loads in the iframe.
This issue does not occur when first visiting the form page. This typically happens after I return to home page (or visit any other page) without having signed the form and then return to the form page. Has anyone else who worked with embedding DocuSign forms using an iframe experienced this issue? If so, could you please explain how you were able to resolve it?
It's possible the envelope is locked. Instead of getting an error you get redirected back.
Normally, that will happen when you already signed.
It's also possible the URL you generated has expired. You have to generate it when the user click, not ahead of time, it expires within a few minutes.
Using an iframe can cause problems. What is the reason you use an iframe?

Complex url history on a Backbone Marionette application and back button

There are 2 web applications, ours and the other team. The other team's web app is http://otherteam.com and our application is http://myteam.com
On http://otherteam.com webpage, they have an href link pointing to our page which is http://myteam.com/config?lang=en. When our web application(actually Marionette AppRouter's task) receives that kind of route or path, it will parse it and set the language configuration and then we have a code to redirect the user to the final webpage which is http://myteam.com/landingpage
The code that we are using is
Backbone.history.navigate('landingpage', {replace: true});
to redirect the user to the final destination.
Unfortunately, when user clicks Back button of the browser, it doesn't go back to http://otherteam.com. It will go back to http://myteam.com/config?lang=en which is still our own application. What happens is that the Marionette app router will parse it again similar to how I described it above. The user will just be brought back to http://myteam.com/landingpage
So I changed
// Backbone.history.navigate('landingpage', {replace: true})
and now I'm using
history.replaceState({}, '', 'landingpage');
When I click Back button, the url on the top bar beocmes http://myteam.com/config?lang=en, but it doesn't reload our landingpage anymore which is good. However, nothing happens to the page until I click Back button again. After making the second click on the Back button, I'm back to http://otherteam.com which is great but I had to click the Back button twice.
The problem is you are redirecting the user from the /config?lang=en to another page, so when you click back, they land on the previous page and are then redirected back to the landing page again.
The simplest solution here would be for otherteam.com to link to your landing page and pass the params to be consumed there - http://myteam.com/landingpage?lang=en. Redirecting the user multiple time is never a good idea, and almost always unnecessary.
Once you have received the lang config param, it could be an idea to save it to local storage so it can be retrieved wherever it is needed throughout your app.

stop Angular from running the rest of the script and perform another action

I've been working on replacing alert() pop-ups in our Angular code with Angular overlay modals. I'm almost done with the exception of one problem.
I have a modal that opens when the user login has timed out. Some pages will load, fire the script properly and the overlay will be in focus, waiting for the user to click "ok" which sends them to the login page - which is what I want.
On other pages, content will partially load, then fire the overlay modal and for a split second I will see it, then the page continues to load, the modal goes away and even though they get logged out the page doesn't go to the login page.
I need some direction determining what code I should add after the overlay fires to prevent any other code from executing so the user has to interact with the overlay.
I'm sorry I can't share any code - it's proprietary - I just need some direction to go in.
This is very difficult to answer without having access to any code or fully understanding how you are managing various states/views.
A simple solution would be adding a function to the $rootScope which constantly checks if a user is authenticated (aka not timed out). And then have it perform some action if the user is no longer authenticated.
How you store the authentication indicator is completely up to you. Without knowing more about the app it would be difficult to say where the best place would be.
Example code:
$rootScope.checkAuth(){
if (!$sessionStorage.auth){
$state.go(login)
}
}
setTimeout($rootScope.checkAuth,10000)
You could also handle this by not resolving each view/state until a user has been confirmed as authenticated. Once again, how you set that up would be dependent on the structure of your app.

angularjs app back button

I am developing an angularjs and ionic app where in on the first screen I call the yelp api and display the results in the next screen. When I hit the back button and click on another request the yelp API gets executed but user is not redirected to the results screen.
I have a controller that calls the service to fetch the yelp results.
Can anyone suggest what could be issue?
Thanks
I was able to resolve it by adding callback=JSON_CALLBACK instead of callback=angular_callback_.0 –

Resources