I was able to simulate click events using React test utils, but I couldn't simulate mouseEnter events
I added sample component and it tests in jsfiddle to show this problem
http://jsfiddle.net/kirana/Uf4e2/2/
var Events = React.createClass({
getInitialState: function () {
return {
event: ''
};
},
clickHandler: function () {
this.setState({
event: 'click'
});
},
mouseEnterHandler: function () {
this.setState({
event: 'mouseenter'
});
},
render: function () {
return React.DOM.div(null, React.DOM.button({
ref: 'button',
onClick: this.clickHandler,
onMouseEnter: this.mouseEnterHandler
}, 'click or mouseenter'), React.DOM.div(null, this.state.event));
}
});
var ReactTestUtils = React.addons.TestUtils;
describe('Events', function () {
it('should have click event state', function (done) {
var events = Events();
ReactTestUtils.renderIntoDocument(events);
ReactTestUtils.Simulate.click(events.refs.button.getDOMNode());
events.state.event.should.equal('click');
done();
});
// This test is failing
it('should have mouseenter event state', function (done) {
var events = Events();
ReactTestUtils.renderIntoDocument(events);
ReactTestUtils.Simulate.mouseEnter(events.refs.button.getDOMNode());
events.state.event.should.equal('mouseenter');
done();
});
});
I couldn't figure out what I am missing to simulate mouseEnter.
Currently mouseenter/mouseleave can't be simulated directly using ReactTestUtils; see this open issue: Simulate.mouseEnter and Simulate.mouseLeave not working.
As a workaround for now, you can use SimulateNative.mouseOver and SimulateNative.mouseOut (making sure to specify relatedTarget appropriately on each) and together they will cause React to fire onMouseEnter and onMouseLeave events.
This answer is a bit different now as the mouseOver event works in React since v0.11.1 - see here
That means you can now use
ReactTestUtils.Simulate.mouseEnter(events.refs.button.getDOMNode());
just as you tried in your example.
Related
I am using Bootstrap-select in my project. Is it possible to add a callback when Select has been opened? Code below does not work.
var sp = $.fn.selectpicker.constructor.prototype.show;
$.fn.selectpicker.constructor.prototype.show = function () {
sp.call(this);
if (this.options.callback) {
//console.log('is callback!');
this.options.callback();
}
};
$('.selectpicker-state').selectpicker({
title: null,
callback: function() {
alert('show!');
}
});
You can use the bootstrap dropdown event shown
http://getbootstrap.com/javascript/#dropdowns and see the Events section
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})
I have such code inside directive :
$document.bind('keydown', function ($event) {
if ($event && $scope.visible && $event.which === escapeKey) {
$scope.toggle();
$scope.$apply();
}
});
I want to test if user click escape toggle will run. At moment I have such test:
it('should toggle window visibility to false when keypress escape', function () {
var doc,
$event;
$httpBackend.when(method, url)
.respond(template);
$event = {
event: 'keydown'
};
directive = createDirective();
$httpBackend.flush();
$isolateScope = directive.isolateScope();
$isolateScope.toggle();
$document.triggerHandler('keydown');
});
But how can I pass that certain key was pressed thought triggerHandler. Don't want to use any jQuery . Is there another way of testing this?
element.triggerHandler({type: 'keydown', which: escapeKey});
Is there a built in way to stop $broadcast events from going down the scope chain?
The event object passed by a $broadcast event does not have a stopPropagation method (as the docs on $rootScope mention.) However this merged pull request suggest that $broadcast events can have stopPropagation called on them.
Snippets from angularJS 1.1.2 source code:
$emit: function(name, args) {
// ....
event = {
name: name,
targetScope: scope,
stopPropagation: function() {
stopPropagation = true;
},
preventDefault: function() {
event.defaultPrevented = true;
},
defaultPrevented: false
},
// ....
}
$broadcast: function(name, args) {
// ...
event = {
name: name,
targetScope: target,
preventDefault: function() {
event.defaultPrevented = true;
},
defaultPrevented: false
},
// ...
}
As you can see event object in $broadcast not have "stopPropagation".
Instead of stopPropagation you can use preventDefault in order to mark event as "not need to handle this event". This not stop event propagation but this will tell the children scopes: "not need to handle this event"
Example: http://jsfiddle.net/C8EqT/1/
Since broadcast does not have the stopPropagation method,you need to use the defaultPrevented property and this will make sense in recursive directives.
Have a look at this plunker here:Plunkr
$scope.$on('test', function(event) {
if (!event.defaultPrevented) {
event.defaultPrevented = true;
console.log('Handle event here for the root node only.');
}
});
I implemented an event thief for this purpose:
.factory("stealEvent", [function () {
/**
* If event is already "default prevented", noop.
* If event isn't "default prevented", executes callback.
* If callback returns a truthy value or undefined,
* stops event propagation if possible, and flags event as "default prevented".
*/
return function (callback) {
return function (event) {
if (!event.defaultPrevented) {
var stopEvent = callback.apply(null, arguments);
if (typeof stopEvent === "undefined" || stopEvent) {
event.stopPropagation && event.stopPropagation();
event.preventDefault();
}
}
};
};
}]);
To use:
$scope.$on("AnyEvent", stealEvent(function (event, anyOtherParameter) {
if ($scope.keepEvent) {
// do some stuff with anyOtherParameter
return true; // steal event
} else {
return false; // let event available for other listeners
}
}));
$scope.$on("AnyOtherEvent", stealEvent(function (event, anyOtherParameter) {
// do some stuff with anyOtherParameter, event stolen by default
}));
I'm just getting my feet wet with Backbone, and I think I have an easy problem to solve. I have the following view which is a simple tab that when clicked opens up a panel and when closed goes back to a tab:
myApp.views.Support = {
Form: Backbone.View.extend({
initialize: function () {
this.el = $('#support');
this._ensureElement();
},
render: function () {
if (this.$el.hasClass('support-panel')) {
// close panel
this.$el.empty();
this.$el.removeClass('support-panel');
this.$el.addClass('support-button');
}
else {
// open and populate panel
var template = _.template(myApp.utils.RenderTemplate('support/default'), {});
this.$el.removeClass('support-button');
this.$el.addClass('support-panel');
this.$el.html(template);
}
return this;
},
closePanel: function () {
alert('close event fired');
},
events: {
'click #SubmitFormButton': 'submitForm',
'click #CloseSupportPanel': 'closePanel'
},
submitForm: function (event) {
alert('form submitted: ' + $('#message'));
}
})
}
Everything is working fine except that "closePanel" gets fired +2 times every time the click event happens. I assume it's some sort of cleanup I'm missing but I don't know what.
Likely its because the event is bubbling up. Try returning false.
I know this is an old question but it helped me realize what my issue was. Returning false as Daniel said works, but the root cause of my issue was having the jQuery selector twice in my markup, resulting in two jQuery objects being created thus the click event fires twice.
I'm creating a modal dialog like this
window.NewPageModalView = Backbone.View.extend({
template: _.template($('#view-template-new-page-dialog').html()),
el: $('div#main'),
events: {
'click input[type=radio]': 'newPage'
},
newPage: function (event) {
$(event.currentTarget).closest('form').submit();
},
initialize: function () { },
render: function () {
$(this.el).append(this.template());
return this;
}
});
and then I create it inside another view like this
addPage: function (event) {
event.preventDefault();
var modal = new NewPageModalView();
modal.render();
}
this works just great but what is the best way if I want to close the dialog on body click or when pressing escape?
Generally speaking when you bind events in backbone using the events hash they are delegated to the view's el, however you can still bind events to something else in the initialize method (in your case the body).
initialize: function() {
$('body').bind('click', yourfunction);
}
Edit:
As #muistooshort mentions, you will want to make sure to also unbind the event.