This is my first time using Cyrpress, and I am trying to run a test for my React app. The test is after a name is entered in the modal, the submit button will be clicked and you'll be taken to the homepage. However, the .click function is not working, at least I think it isn't since the modal is still there with the name on it. Can someone tell me what I am doing wrong and how to fix it?
This is how I wrote the test:
**fourth.spec.js**
describe ('UI tests', () => {
it('should navgitate to landing page after submitting with button', () =>{
const text = "Christian"
cy.visit('/')
cy.get('.new').type (text).should ('have.value', text)
.click()
})
})
This is how I have the button setup for my modal
<div className="my-modal">
<h1>Welcome!</h1>
<p>Please enter your name</p>
<form>
<input
autoFocus
className="new task"
placeholder="Name"
type="text"
name="firstName"
onChange={this.inputChange}>
</input>
</form>
<button
className="modal-btn"
type="button"
disabled={!this.state.firstName}
onClick={this.displayNameHandler}>
Submit
</button>
</div>
Looks like you're clicking on the input field rather than the button. Try:
cy.get('.modal-btn').click()
You could also try to click on the Submit button based on the button text
cy.get('button[type="button"]').contains("Submit").click();
Related
<label class="label-set">
<input type="checkbox" class="" name="sameadr" />
I agree to all statements of
Terms of Use
</label>
How to open popup, onclick of link. simple popup should open as soon as user click on link
In html
give a id to your a tag.
<label class="label-set" id="mainId">
<input type="checkbox" class="" name="sameadr" />
I agree to all statements of
Terms of Use
</label>
In javascript
document.getElementById("newId").addEventListener("click", function(){
confirm("confirm this") // or your popop code
})
Try this for vue.js
Terms of Use
And write this inside your method
new Vue({
el: '#mainId',
methods: {
openPopup: function () {
alert('ok')
}
}
})
Try this
Make a modal component. Add a click to your a tag. When clicked show your modal component. After another action (confirm etc.) close and continue.
How to make a reusable modal component in Vue.js: How to make a Modal Component
I have a background in Angular. Starting with vue was an okay experience for me until I came across a problem which VueJS developers seem to have shit on and slid under the carpet.
How can we create a form in which user can press enter from an input field to submit the form
This was seriously disappointing.
and please if you know the answer be kind enough to post in the Official vue documentation as well.
*Note:
my workaround: I used v-on:keydown.enter.prevent='loginUser' on every input field.
is there any way to not use it this way ( on every input field).
With button type as submit as well, form gets submitted when Enter key is pressed on any input.
No explicit binding is required on keypress.
new Vue({
el: '#app',
data() {
return {
title: "Vue 2 -Form submission on Enter",
formInput:{
fname:'',
lname:'',
gender:'male'
}
};
},
methods:{
onSubmit(){
console.log('submitted', this.formInput)
}
}
})
.form{
display:flex;
flex-direction:column;
gap:10px;
max-width:200px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"><h2>{{title}}</h2>
<form v-on:submit.prevent="onSubmit" class="form">
<input v-model="formInput.fname" #keydown.enter.prevent placeholder="first name"/>
<input v-model="formInput.lname" placeholder="last name"/>
<div>
<input v-model="formInput.gender" name="gender" placeholder="Gender" type="radio" value="male"/>male
<input v-model="formInput.gender" name="gender" placeholder="Gender" type="radio" value="female"/>Female
</div>
<button type="submit">Submit</button>
<pre>{{formInput}}</pre>
</form>
</div>
I'd urge you to check out this page on the VueJS documentation.
It explains how to set events on certain interactions. For example, you can trigger a function call on pressing the Enter key within an input field by doing this:
<input type="text" #keyup.enter="submit">
This will call the submit() method when the Enter key is pressed and released (keyup). On press, you can use keydown instead.'
In fact, the example I've taken is directly from this section in the page I linked above.
EDIT: A pure-HTML way to do this is to set your input type as submit, which will allow Enter to submit the form
You need to wrap your inputs within <form> ... </form> tag
I made modal component using v-show options live below.
<registerModal v-show="register.etcCompanyVisible" />
Thus, when register.etcCompanyVisible is true, this modal appears.
And this modal has some input like this.
<input type="text" v-model="etcCompanyName" placeholder="name" autofocus />
When this modal is opened at first time, the autofocus works well.
And then, this modal can be closed with cancel button by changing register.etcComapnyVisible to false.
<button class="btn secondary" v-on:click="etcCompanyVisibleClosed()">Cancel</button>
When I open modal again, the autofocus doesn't work. I think it needs some reset option for this modal, but I don't know how it can be done.
Could you give me some recommendation? Thank you so much for reading.
My understanding is that the autofocus attribute is only reliable on page load, so you need to handle the focus event yourself.
The easiest way to do this is to put a ref on your input.
<input ref="companyName" type="text" v-model="etcCompanyName" placeholder="name"/>
Then when you launch your modal, maybe you are using a button, call the focus on that $ref.
<template>
...
<button #click="focusInput">launch modal</button>
...
</template>
<script>
...
methods:{
foucusInput() {
this.$refs.companyName.focus();
}
}
Note that you could use the same method to dynamically focus inputs in a certain order. Here is a fiddle demonstrating that using button clicks but you could easily use this to move from one input to the next automatically after a certain condition is met.
I'd like to show the ngx-bootstrap alert multiple times with the [dismissOnTimeout] attribute; however, after it's dismissed the first time I can't figure out how to show it again.
My Angular html template:
<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>
<div *ngIf="showMessage">
<alert type="success" [dismissOnTimeout]="dismissValue">
<strong>Well done!</strong> You successfully upload (disappearing in 3,2,1..).
</alert>
</div>
and in my compoent's method:
openModal(template: TemplateRef<any>) {
this.showMessage = true;
this.modalRef = this.modalService.show(template);
}
So once I call openModal(), the alert<> opens and gets dismissed the first time.
I'm trying to figure out how to reset the alert, so I can display that alert again - i.e.simulating a toaster type of component.
Thank you.
There's no direct way to show the alert that has been hidden after a timeout but you can get this working with a little workaround ( ngIf and alert's onClosed output).
<alert *ngIf="isOpen" type="success" dismissOnTimeout="5000" (onClosed)="isOpen = false">
5 sec timeout
</alert>
<button type="button" class="btn btn-primary" (click)="isOpen = true">Show again</button>
https://stackblitz.com/edit/angular-pfxjgi?file=app%2Fdismiss-on-timeout.html
Another way to do this would be via using the document and finding the alert you want to close and adding an id:
<alert id="alertid" *ngIf="isOpen" type="success" (onClosed)="isOpen = false">
5 sec timeout
</alert>
And then in the part you wish to programmatically close the control.
const element = this._document.getElementById('alertid').getElementsByTagName('button');
if (element && element.length) {
element[0].click();
}
where document is defined as:
constructor(#Inject(DOCUMENT) private _document: Document) {}
In this way you can close the alert at any time/place you want and can dispense with the timeout.
I'm still learning, please help!
I am trying to apply a Modal Popup that appears only when a link is clicked instead of when the page loads. My Modal Popup does all work fine, but I want to turn off/prevent the Popup from appearing at all when the page loads and simply have it only invoke the Popup when my chosen link is clicked.
$(document).ready(function () {
$("#popup-1").myModal({
// Functionality goes below this line
});
});
And this
<div id="popup-1" class="myModal">
<div class="window">
<!-- Your popup content -->
<div class="wrap demo-1">
<div class="title">Some Text Here</p>
<form>
<input type="text" class="field" placeholder="Your email goes here" />
<input type="submit" class="closeModal send" value="Submit" />
</form>
<label class="deny closeModal">Some Text Here</label>
</div>
<div class="cta demo-1">
<span class="icon"></span>
<p>Some Text Here</span></p>
</div>
<!-- / Your popup content -->
</div>
</div>
Is there a simple fix I can apply to solve this issue? I have spent countless hours going through existing posts and forums but almost each enquiry doesnt target the same specific question im trying to achieve based on my actual existing code.
My cose for the Link Click to activate
Newsletter
your help is very much appreciated
Just execute your modal opening code when a link is clicked instead of when the ready event is fired :
$('#modal-link').on('click', function() {
$("#popup-1").myModal({
// Functionality goes below this line
});
});
assuming the link opening your modal is :
link