Why is my modal disappearing in my Cypress test? - javascript

I have a modal with several different possible views (login, signup, password reset, etc).
I am navigating the different views for the modal through a piece of state in redux.
The links work fine outside of my Cypress tests, but in my tests, some of them work and some of them make the modal completely disappear.
For example, when I tell Cypress to click the Sign up link it properly switches, but when I tell it to click Forgot Password the modal just disappears.
I've logged the redux state values and it is in the correct state value to show the modal and the state is NOT being updated to a hidden status.
If I manually click the Forgot password link in the test runner it properly navigates to the the forgot password form.
They are both wrapped in a tags as such:
<a
onClick={() =>
dispatch(setAuthModalView(AuthModalViewTypes.FORGOT_PASSWORD))
}
className="text-sm"
data-testid="forgotPassword">
Forgot Password?
</a>
Here are my cypress tests:
Password Reset:
cy.visit('/')
cy.contains('Sign In').click()
cy.contains('Forgot Password').click()
cy.findByTestId('auth-modal')
Sign up
cy.visit('/')
cy.contains('Sign In').click()
cy.contains('Sign Up').click()
cy.findByTestId('auth-modal')
Just to reiterate, the modal correctly navigates to the page when I manually click the link, and redux has the proper state to show the modal, but it's just dissapearing.
I've tried placing cy.wait commands in betweeen the commands to make sure it's not a timing issue, but it was no help.
Any help is appreciated

Related

How to toggle password show and hide using useReducer in react

https://codesandbox.io/s/loginusingreducer-fo3bgv?file=/src/App.js
Hi,
I am having 2 issues in this application. First one is when I am trying to show/hide the password using useReducer. When I chick on the show icon ,I can see the password but cannot toggle it.
The second issue is when I click on the login button, I don't see "Logging In" text which is supposed to show if isLoading is true and I already have set that condition. Please let me know what I am doing wrong.
Thanks!
I have tried this on code sandbox. Here is the link to it
https://codesandbox.io/s/loginusingreducer-fo3bgv?file=/src/App.js

CanDeactivate Guard not hiding URL in browser window on cancelling navigation

I am using the skipLocationChange property with true value so I can hide the URL in the browser. It is working fine. But for one of my features, I am using CanDeactivate guard so I can warn the user to save changes before leaving the current page. I am just displaying one pop-up to take confirmation from the user. If the user clicks on "OK" then he is navigating to the target page without any issue also the URL is also hidden in the browser.
But If the user clicks on the "Cancel" button then he is staying on the same page but the problem is here current page URL is getting appended to the base URL in the browser. Which I don't want. I just want the URL to be hidden with the cancel case too.
I am also attaching the link to a sample project created using stackblitz:
https://stackblitz.com/edit/angular-ivy-uqq8sg?file=src/app/app.component.html
Steps to produce an issue in sample project:
Open the user-details page by clicking on the user-details link.
Fill out the user details form and click on the page-one link then it will show a confirmation window click on cancel.
User will stay on the same page but it will also append the user-details URL in the browser.
Note: This question Router guard skip location change does not give the answer to my question because that using canActivate guard, not the canDeactivate guard. In canActivate guard we use router.navigateByURL method where we can set skipLocationChange to true value but in canDeactivate guard for canceling navigation we don't use a router.navigateByURL method
Thanks in advance.
The code is taken from here
What I changed:
In the component, return pure value, not observer so in the guard I can use it directly
return true; //return of(true)
In the guard, navigate by router service instead of just return false/true
this.router.navigate([state.url], { skipLocationChange: true });
Forked stackblitz

Reloading content after change of url with router

Lately I'm learning and trying to do chat app with react. Today I ve ran into a problem with react-router:
I'm using custom link (/string/:userid1/:userid2) which is supposed to show me chat between users and it works, but when i try to change chat to other IDs (other users) my page doesn't reload and it doesn't show me other chat untill i reload page manually.
The quesion is if there is any possibility to refresh component / page after clicking Link button
<Link to={`/chat/${params.myuid}/${friends.uid}`}><div className="text-center pt-3"><img className="friends-img" src={friends.url} alt=""/></div></Link>
Try making the variables you get form the url a part of your page state.
I mean everytime it changed there should be a change in your state.
It may help you page re-render without a manual reload.
Tip: useEffect with the route variables in the dependancy array.

React Routing - How to load pop up using Routes

What I have:
1. Login Component
2. Register Component
In Login Component, there is a link called register. It routes it to Register page. The code is simple:
<Link to='/register' className='links align-left'>Register</Link>
I want to show the register component in a popup instead. I know, I can use a Dialog Component and show the register component in that dialog. Easy, but what I don't understand is how I can set my routing so it shows the login window behind, and loads the registration component in the popup. Lemme explain with an example. See how trello board works in following screenshot. The url is https://trello.com/b/i1QoQatf/
Now when I click an item, it shows me a pop up, like in following screenshot. Please note the URL right now is https://trello.com/c/QisVDEgX/639-sort-all-dropdowns-alphaetically
Now my confusion is, how can I achieve the same for my Login and Register component. If I load my routing like this:
<Route path='/register' component={RegisterComponent} />
It will call the render method of Register Component, and then only load the Register Component. How I can route it to Register Component, and still use Login in the background. Any help please?
I think to achieve this your RegisterComponent will have to render login component and a register popup.
Within your render function you will return where RegisterPopup is your registration form rendered in popup (let's assume react modal)
<React.Fragment>
<LoginComponent/>
<RegisterPopup/>
</React.Fragment>
Adding my solution here so people will understand the concept of routing.
This is actually pretty easy, if you are using NextJS. In NextJS, we need to use a server (like express) for routing. NextJS router is very strong and give loads of flexibility. Also, NextJS Link tag is as powerful. Following is the explanation on how to achieve the url routing without loading the page.
In general, you can reach to a page two ways. 1. By clicking a link/button (for example Register Now) 2. By pasting the URL directly in browser. Let's say, I have two URLs:
https://example.com/login
https://example.com/register
Now, what I want to achieve is, when I click the "Register Now" link in my Login page, it should route my page to /register but still show Login page in the background, and Registration form in popup. But remember, I want to achieve this by making sure the Login component doesn't load twice.
With NextJS, following will be the way to do it:
We will be creating one next js page called account.js
For routing to our login page, the link for login screen will be something like following:
<Link href={{pathname: '/account', query: { mode: 'login' }}} as {'/login}>
<a>Login</a>
</Link>
The link page will route us to accounts page.
If you noticed, the link tag is not a normal href. The above link tag means, "we want to go to account page, but show url as "/login", and when we render account page, send query {mode: 'login'} to the account pages' router object.
In the render function of account page, we can make a decision in run time easily on the basis of router's query object.
render() {
const mode = this.props.router.query.mode;
return (
<div>
<LoginComponent></LoginComponent>
{/* the following line will open the register component in a popup */}
{mode === 'registration' && <PopUp><RegisterComponent></RegisterComponent></PopUp>}
</div>
)
}
In login component, we will add the registration link like following:
<Link href={{pathname: '/account', query: { mode: 'registration' }}} as={`/`}>
<a>Register Now</a>
</Link>
In above example, all we did was created a page called accounts.js. We made sure that when we route to Login window, we route it to accounts page, but we send mode: 'login'. When we click on register link, we are loading the same page - accounts.js but with a different mode: 'registration'. The render function will open the register component in popup because mode is === 'registration'. In url, it will show the address as '/register'
Please note: That is just an example code for reference, It is by no means a tested code so please bear that in mind.

How to open a react-bootstrap modal globally using multiple other components

I'm building an application that allows users to browse but will prompt them to login if they try to perform an action (e.g. liking something, trying to post something)
To achieve this, I have created a registration form which appears in a React-Bootstrap modal.
My question is, how can I trigger that modal to appear from multiple different components (for example a 'like' button component, or the 'sign up' component, or an 'upload' component)
I am not using redux, my application is a Meteor application.
My current idea: Add the modal open/close state to the top level component (App) and manipulate that state from the children components when the user clicks them?

Categories

Resources