test( 'Superfluous whitespace is ignored', t => {
const ractive = new Ractive({
el: fixture,
template: '<div class="one" on-click=" foo "></div><div class="two" on-click="{{#bar}} bar {{/}}"></div>'
});
let fooCount = 0;
let barCount = 0;
ractive.on({
foo () {
fooCount += 1;
},
bar () {
barCount += 1;
}
});
fire( ractive.find( '.one' ), 'click' );
t.equal( fooCount, 1 );
fire( ractive.find( '.two' ), 'click' );
t.equal( barCount, 0 );
ractive.set( 'bar', true );
fire( ractive.find( '.two' ), 'click' );
t.equal( barCount, 1 );
});
test( 'proxy events can have multiple arguments', t => {
t.expect( 7 );
const ractive = new Ractive({
el: fixture,
template: '<span id="foo" on-click="one:1,2,3">click me</span><span id="bar" on-click="two:{a:1},{b:2}">click me</span><span id="baz" on-click="three:{c:{{c}}},{d:\'{{d}}\'}">click me</span>',
data: { c: 3, d: 'four' }
});
ractive.on({
one ( event, one, two, three ) {
t.equal( one, 1 );
t.equal( two, 2 );
t.equal( three, 3 );
},
two ( event, one, two ) {
t.equal( one.a, 1 );
t.equal( two.b, 2 );
},
three ( event, three, four ) {
t.equal( three.c, 3 );
t.equal( four.d, 'four' );
}
});
fire( ractive.nodes.foo, 'click' );
fire( ractive.nodes.bar, 'click' );
fire( ractive.nodes.baz, 'click' );
});
test( 'Splicing arrays correctly modifies proxy events', t => {
t.expect( 4 );
const ractive = new Ractive({
el: fixture,
template: `
{{#buttons:i}}
<button id="button_{{i}}" on-click="remove:{{i}}">click me</button>
{{/buttons}}`,
data: { buttons: new Array(5) }
});
ractive.on( 'remove', function ( event, num ) {
this.splice( 'buttons', num, 1 );
});
t.equal( ractive.findAll( 'button' ).length, 5 );
fire( ractive.nodes.button_2, 'click' );
t.equal( ractive.findAll( 'button' ).length, 4 );
fire( ractive.nodes.button_2, 'click' );
t.equal( ractive.findAll( 'button' ).length, 3 );
fire( ractive.nodes.button_2, 'click' );
t.equal( ractive.findAll( 'button' ).length, 2 );
});
test( 'proxy events can have dynamic names', t => {
t.expect( 2 );
const ractive = new Ractive({
el: fixture,
template: '<span id="test" on-click="do_{{something}}">click me</span>',
data: { something: 'foo' }
});
let last;
ractive.on({
do_foo () {
last = 'foo';
},
do_bar () {
last = 'bar';
}
});
fire( ractive.nodes.test, 'click' );
t.equal( last, 'foo' );
ractive.set( 'something', 'bar' );
fire( ractive.nodes.test, 'click' );
t.equal( last, 'bar' );
});
test( 'proxy event parameters are correctly parsed as JSON, or treated as a string', t => {
t.expect( 3 );
const ractive = new Ractive({
el: fixture,
template: '<span id="foo" on-click="log:one">click me</span><span id="bar" on-click=\'log:{"bar":true}\'>click me</span><span id="baz" on-click="log:[1,2,3]">click me</span>'
});
let last;
ractive.on({
log ( event, params ) {
last = params;
}
});
fire( ractive.nodes.foo, 'click' );
t.equal( last, 'one' );
fire( ractive.nodes.bar, 'click' );
t.deepEqual( last, { bar: true } );
fire( ractive.nodes.baz, 'click' );
t.deepEqual( last, [ 1, 2, 3 ] );
});
test( 'event.rootpath is set to the non-mapped keypath in a component', t => {
t.expect( 4 );
const cmp = Ractive.extend({
template: '{{#with baz}}<span id="test" on-click="someEvent">click me</span>{{/with}}<cmp2 oof="{{baz}}" />'
});
const cmp2 = Ractive.extend({
template: '{{#with oof}}<span id="test2" on-click="someEvent">click me</span>{{/with}}'
});
const ractive = new Ractive({
el: fixture,
template: '<cmp baz="{{foo}}" />',
data: {
foo: { bar: 'test' }
},
components: { cmp, cmp2 }
});
ractive.on( 'cmp.someEvent', function ( event ) {
t.equal( event.rootpath, 'foo' );
t.equal( event.context.bar, 'test' );
});
ractive.on( 'cmp2.someEvent', function ( event ) {
t.equal( event.rootpath, 'foo' );
t.equal( event.context.bar, 'test' );
});
fire( ractive.find( '#test' ), 'click' );
fire( ractive.find( '#test2' ), 'click' );
});
it('should support multiple eventTypes with a returned "off" function', function () {
var off = windowState.on('blur focus', foo.bar)
off()
simulant.fire(window, 'blur')
simulant.fire(window, 'focus')
expect(foo.bar).toHaveBeenCalledTimes(0)
})
test( 'Proxy event arguments update correctly (#2098)', t => {
t.expect( 2 );
const one = { number: 1 };
const two = { number: 2 };
const ractive = new Ractive({
el: fixture,
template: `<button type="button" on-click="checkValue:{{current}}">foo</button>`
});
ractive.set( 'current', one );
ractive.set( 'current', two );
let expected = two;
ractive.on( 'checkValue', ( event, value ) => {
t.strictEqual( value, expected );
ractive.set( 'current', one );
expected = one;
});
const button = ractive.find( 'button' );
fire( button, 'click' );
fire( button, 'click' );
});
beforeEach(function () {
simulant.fire(this.reactDiv, 'keydown', { key: KeyCode.A });
simulant.fire(this.reactDiv, 'keypress', { key: KeyCode.A });
simulant.fire(this.reactDiv, 'keydown', { key: KeyCode.B });
simulant.fire(this.reactDiv, 'keypress', { key: KeyCode.B });
});
it('should update properties on the service object', function () {
simulant.fire(window, 'focus')
expect(windowState.isFocused).toBe(true)
expect(windowState.isBlurred).toBe(false)
simulant.fire(window, 'blur')
expect(windowState.isFocused).toBe(false)
expect(windowState.isBlurred).toBe(true)
})
before(function clickRectangleWidget () {
// DEV: We don't use click due to draggabilly listening to mousedown/mouseup
// DEV: We should note that this click could be on the heading as well
var svgLeft = this.svgElBounds.left;
var svgTop = this.svgElBounds.top;
simulant.fire(this.svgEl, 'mousedown', {button: 0, clientX: svgLeft + 5, clientY: svgTop + 5});
simulant.fire(this.svgEl, 'mouseup', {button: 0, clientX: svgLeft + 5, clientY: svgTop + 5});
});
), node, function callback() {
const { trackHorizontal: track } = this.refs;
simulant.fire(track, 'mouseenter');
simulant.fire(track, 'mouseleave');
setTimeout(() => {
expect(track.style.opacity).toEqual('0');
done();
}, 100);
});
), node, function callback() {
const spy = spyOn(this, 'hideTracks');
const { trackVertical: track } = this.refs;
simulant.fire(track, 'mouseenter');
simulant.fire(track, 'mouseleave');
setTimeout(() => {
expect(spy.calls.length).toEqual(0);
done();
}, 100);
});
it.skip('should prevent dragging the map when dragging the slider', () => {
sinon.spy(map.dragging, 'enable');
sinon.spy(map.dragging, 'disable');
const control = L.timelineSliderControl();
control.addTo(map);
const slider = document.getElementsByClassName('time-slider')[0];
simulant.fire(slider, 'pointerdown');
map.dragging.disable.should.have.been.called;
simulant.fire(slider, 'pointerup');
map.dragging.enable.should.have.been.called;
});
it('should support omitting handler to clear all events of multiple types', function () {
windowState.on('show', foo.bar)
windowState.on('blur', foo.barfoo)
windowState.off('show blur')
simulant.fire(document, 'visibilitychange')
simulant.fire(window, 'blur')
expect(foo.bar).toHaveBeenCalledTimes(0)
expect(foo.barfoo).toHaveBeenCalledTimes(0)
})
it('should support specifying multiple event types', function () {
windowState.on('show', foo.bar)
windowState.on('blur', foo.bar)
windowState.on('focus', foo.bar)
windowState.off('show blur focus', foo.bar)
simulant.fire(window, 'blur')
simulant.fire(window, 'focus')
simulant.fire(document, 'visibilitychange')
expect(foo.bar).toHaveBeenCalledTimes(0)
})
), node, function callback() {
const { thumbVertical: thumb, trackVertical: track } = this.refs;
const { top } = thumb.getBoundingClientRect();
simulant.fire(thumb, 'mousedown', {
target: thumb,
clientY: top + 1
});
simulant.fire(document, 'mouseup');
setTimeout(() => {
expect(track.style.opacity).toEqual('0');
done();
}, 100);
});
), node, function callback() {
const { thumbHorizontal: thumb, trackHorizontal: track } = this.refs;
const { left } = thumb.getBoundingClientRect();
simulant.fire(thumb, 'mousedown', {
target: thumb,
clientX: left + 1
});
simulant.fire(document, 'mousemove', {
clientX: left + 100
});
setTimeout(() => {
expect(track.style.opacity).toEqual('1');
done();
}, 100);
});
it('should not close when disabled', () => {
let spy = sinon.spy();
render(
<RootCloseWrapper onRootClose={spy} event={eventProp} disabled>
<div id='my-div'>hello there</div>
</RootCloseWrapper>
, mountPoint);
simulant.fire(document.getElementById('my-div'), eventName);
expect(spy).to.not.have.been.called;
simulant.fire(document.body, eventName);
expect(spy).to.not.have.been.called;
});
it('should bind and remove key listeners', () => {
should.exist(control._listener);
sinon.spy(control, '_onKeydown');
simulant.fire(document, 'keydown', { which: 65 });
control._onKeydown.should.have.been.called;
control._onKeydown.restore();
});
keyDown(key, options = {}) {
this.element.simulate('keyDown', {key});
if (this.nativeElement) {
simulant.fire(this.nativeElement, 'keydown', {key});
}
}
test( 'component "on-" with arguments[n]', t => {
t.expect( 5 );
const Component = Ractive.extend({
template: `<span id="test" on-click="foo:'foo', 42">click me</span>`
});
const ractive = new Ractive({
el: fixture,
template: `<Component on-foo="foo(arguments[2], 'qux', arguments[0])" on-bar="bar(arguments[0], 100)"/>`,
components: { Component },
foo ( arg1, arg2, arg3 ) {
t.equal( arg1, 42 );
t.equal( arg2, 'qux' );
t.equal( arg3.original.type, 'click' );
},
bar ( arg1, arg2 ) {
t.equal( arg1, 'bar' );
t.equal( arg2, 100 );
}
});
const component = ractive.findComponent( 'Component' );
fire( component.nodes.test, 'click' );
component.fire( 'bar', 'bar' );
});
test( 'component "on-" with $n', t => {
t.expect( 5 );
const Component = Ractive.extend({
template: '<span id="test" on-click="foo:\'foo\', 42">click me</span>'
});
const ractive = new Ractive({
el: fixture,
template: '<Component on-foo="foo($3, \'qux\', $1)" on-bar="bar($1, 100)"/>',
components: { Component },
foo ( arg1, arg2, arg3 ) {
t.equal( arg1, 42 );
t.equal( arg2, 'qux' );
t.equal( arg3.original.type, 'click' );
},
bar ( arg1, arg2 ) {
t.equal( arg1, 'bar' );
t.equal( arg2, 100 );
}
});
const component = ractive.findComponent( 'Component' );
fire( component.nodes.test, 'click' );
component.fire( 'bar', 'bar' );
});
it('should add an event listener', function(done) {
delegate(global.container, 'a', 'click', function() {
done();
});
simulant.fire(global.anchor, simulant('click'));
});
test( 'component "on-" with additive ...arguments', t => {
t.expect( 7 );
const Component = Ractive.extend({
template: `<span id="test" on-click="foo:'foo', 42">click me</span>`
});
const ractive = new Ractive({
el: fixture,
template: `<Component on-foo="foo('fooarg', ...arguments)" on-bar="bar('bararg', ...arguments)"/>`,
components: { Component },
foo ( arg1, e, arg2, arg3 ) {
t.equal( arg1, 'fooarg' );
t.equal( e.original.type, 'click' );
t.equal( arg2, 'foo' );
t.equal( arg3, 42 );
},
bar ( arg1, arg2, arg3 ) {
t.equal( arg1, 'bararg' );
t.equal( arg2, 'bar' );
t.equal( arg3, 100 );
}
});
const component = ractive.findComponent( 'Component' );
fire( component.nodes.test, 'click' );
component.fire( 'bar', 'bar', 100 );
});
function simulateClickAnnotation(callback) {
simulant.fire(document, 'click', { clientX: 25, clientY: 25 });
setTimeout(function () {
let overlay = findOverlay();
callback(overlay);
});
}
setTimeout(function () {
simulant.fire(overlay, 'mouseup', { clientX: 50, clientY: 50 });
setTimeout(function () {
let call = editAnnotationSpy.getCall(0);
callback(call ? call.args : []);
});
});
keyPress(key, options = {}) {
this.element.simulate('keyPress', {key});
if (this.nativeElement) {
simulant.fire(this.nativeElement, 'keypress', {key});
}
}
it('should close when clicked outside', () => {
let spy = sinon.spy();
render(
<RootCloseWrapper onRootClose={spy}>
<div id='my-div'>hello there</div>
</RootCloseWrapper>
, mountPoint);
simulant.fire(document.getElementById('my-div'), 'click');
expect(spy).to.not.have.been.called;
simulant.fire(document.body, 'click');
expect(spy).to.have.been.calledOnce;
});
keyUp(key, options = {}) {
this.element.simulate('keyUp', {key});
if (this.nativeElement) {
simulant.fire(this.nativeElement, 'keyup', {key});
}
}