I'm trying to hover over a button in Cypress and for that I've tried to use trigger('mouseover') but it is not working for me. Any suggestions?
it('hovering over button', () => {
cy.visit("http://www.qaclickacademy.com/practice.php");
cy.get('#mousehover').trigger('mouseover'); })
I've finally found a workaround for this. With the use of Invoke() method in my code I was able to hover over a button.
it('hovering over button', () => {
cy.visit("http://www.qaclickacademy.com/practice.php");
cy.get('.mouse-hover-content').should('be.hidden').invoke('show');
})
The answer above helped me to find the solution for me:
cy.get('.mouse-hover-content')
.should('be.hidden')
.invoke('css', 'visibility', 'visible')
Related
I have angular project in which I have included custom js in index.html . I have following code in custom.js file for navigation menu open and close for mobile devices. active class not getting applied in mobile view. I searched but did not found reason/solution of it.
$(document).ready(function () {
// Navigation Toggle
$("#nav-icon").click(function () {
$(this).toggleClass("active");
$(".close_overlay").toggleClass("active");
$(".navigation").toggleClass("active");
});
$(".close_overlay").click(function () {
$("#nav-icon").removeClass("active");
$(".close_overlay").removeClass("active");
$(".navigation").removeClass("active");
});
$("header .singleMenu").click(function () {
$("#nav-icon").removeClass("active");
$(".close_overlay").removeClass("active");
$(".navigation").removeClass("active");
});
});
If above code is included in header component ts file. It works. But that's not correct way of doing this.
How can add active class in mobile view when click events as above?
please guide and help. thanks.
I'm making a modal in my React project that requires a class to be added to the body when the modal is open and removed when it is closed.
I could do this the old jQuery way by running some vanilla JavaScript which adds / removes a class, however this doesn't feel like the normal React philosophy.
Should I instead setState on my top level component to say whether the modal is open or closed? Even if I did this, as it's rendered into the div on the page it's still a side-effect to edit the body element, so is there any benefit for this extra wiring?
TL;DR use document.body.classList.add and document.body.classList.remove
I would have two functions that toggle a piece of state to show/hide the modal within your outer component.
Inside these functions I would use the document.body.classList.add and document.body.classList.remove methods to manipulate the body class dependant on the modal's state like below:
openModal = (event) => {
document.body.classList.add('modal-open');
this.setState({ showModal: true });
}
hideModal = (event) => {
document.body.classList.remove('modal-open');
this.setState({ showModal: false });
}
With the new React (16.8) this can be solved with hooks:
import {useEffect} from 'react';
const addBodyClass = className => document.body.classList.add(className);
const removeBodyClass = className => document.body.classList.remove(className);
export default function useBodyClass(className) {
useEffect(
() => {
// Set up
className instanceof Array ? className.map(addBodyClass) : addBodyClass(className);
// Clean up
return () => {
className instanceof Array
? className.map(removeBodyClass)
: removeBodyClass(className);
};
},
[className]
);
}
then, in the component
export const Sidebar = ({position = 'left', children}) => {
useBodyClass(`page--sidebar-${position}`);
return (
<aside className="...">
{children}
</aside>
);
};
Actually you don't need 2 functions for opening and closing, you could use document.body.classList.toggle
const [isOpen, setIsOpen] = useState(false)
useEffect(() => {
document.body.classList.toggle('modal-open', isOpen);
},[isOpen])
<button onCLick={()=> setIsOpen(!isOpen)}>Toggle Modal</button>
Like what #brian mentioned, try having a top-level container component that wraps around your other components. (assuming you're not using redux in your app)
In this top-level component:
Add a boolean state (eg. modalOpen) to toggle the CSS class
Add methods (eg. handleOpenModal & handleCloseModal) to modify the boolean state.
Pass the methods created above as props into your <Modal /> component
ReactJS has an official React Modal component, I would just use that: https://github.com/reactjs/react-modal
Hi I've added a button to the toolbar of my KendoUI Grid, but I have a couple of issues, I'm hoping someone can assist with.
I've tried to add one of the kendo web icons next to the button but it doesn't render.
When I click the button in the toolbar I see the following error in the console:
Uncaught ReferenceError: sendEmail is not defined.
I don't understand why it isn't seeing my function. Just for testing purposes I'm displaying an alert until it sees it.
toolbar: [
{ name: "create", text: "Add" },
{ template: "<input type='button' class='k-button' value='Email Users' onclick='sendEmail()' />",
imageclass: "k-icon k-i-pencil" }
]
function sendEmail() {
debugger;
alert('Send Emails');
}
Can someone please help?
You can Use as below:
toolbar: [
{
name: "Add",
text: "Send Email",
click: function(e){alert('Send Emails'); return false;}
}
],
According to the documentation you would need to return the function that you want to occur on click. Like this:
template: '<a class="k-button" href="\\#" onclick="return toolbar_click()">Command</a>'
The documentation
I hope that helps.
this works for me:
you must define your grid in variable
initializing grid and add your button in toolbar option
toolbar: [{ name: "myButton", text: "this is your button text" }]
after initializing write this code to find button and add function:
grid.find(".k-grid-toolbar").on("click", ".k-grid-myButton", function (e) {
alert("it's work") ;});
Is your function sendEmail() initialized in document.ready or $(()=>{}); if not you will have to initialize it or else you could use this way
add a id for the button and write this in your document.ready (remove the onlcick from the button tag).
$("#examplebuttonid").click(()=>{
//write your code in here
});
How can I detect that a click event is fired on any checkbox on a page using jQuery? Please also note that on page load, may be checkbox(s) is/are not created but could be created on request. So HTML DOM will be updated in that fashion.
$(":checkbox").on("click", function(){
// your work
} );
also see bind
delegate
live
reference On
TRy this
$( document ).on( "click", "input[type='checkbox']", function() {
alert( "check box clicked" );
});
$(":checkbox").on("click", function(){
// ALL YOUR STUFF
} )
Simply create a function checkboxClick() as -
function checkboxClick() {
// ---
// your code goes here
// ...
}
Now for every checkbox (even when you add them dynamically) add attribute onclick like
<input type="checkbox" onclick="javascript:checkboxClick();" class="checkbox" />
Note : Since javascript works on existing dom elements, even if you do something like jQuery(".checkbox").click(function() {...});, it wont work on dynamicically added elements
$(document).on('click', ':checkbox', function() {
//your code
});
Newbie to jQuery here. I have a check box that is dynamically added through the following code in jQuery:
.html("<input type='checkbox' class='checkbox' value='7.5'>");
I want to be able to eventually call a function if a checkbox is clicked. I have tried using these two variants of code:
for the class checkbox:
$(".checkbox").live('click', function() {
alert('test');
});
or to call all checkboxes:
$(":checkbox").live('click', function() {
alert('test');
});
This isn't working at all. Any ideas?
Much appreciated!
.live() is deprecated. Use the event delegation syntax:
$(document).on('change', 'input[type="checkbox"]', function(e) {
alert(e);
});
Replace document with the selector of the closest parent element that's present when you bind the event handler. I'd also suggest not to use :checkbox, as it's a non-native selector and will be slower than input[type="checkbox"]