How to use the metal-dom.triggerEvent function in metal-dom

To help you get started, we’ve selected a few metal-dom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github metal / metal.js / test / JSX.js View on Github external
it('should attach inline listeners', function() {
		class TestComponent extends Component {
			render() {
				return <div>
					<button data-onclick="{this.handleClick.bind(this)}"></button>
				</div>;
			}
		}
		TestComponent.prototype.handleClick = sinon.stub();
		TestComponent.RENDERER = JSX;

		component = new TestComponent();
		dom.triggerEvent(component.element.childNodes[0], 'click');
		assert.strictEqual(1, component.handleClick.callCount);
	});
github metal / metal.js / test / Soy.js View on Github external
it('should attach function listeners found in component\'s soy template', function() {
			comp = new FunctionsComponent();

			dom.triggerEvent(comp.element, 'click');
			assert.strictEqual(0, comp.handleClick.callCount);

			dom.triggerEvent(comp.element.querySelector('button'), 'click');
			assert.strictEqual(1, comp.handleClick.callCount);
		});
github metal / metal.js / test / JSXComponent.js View on Github external
it('should attach inline listeners', function() {
		class TestComponent extends JSXComponent {
			render() {
				return <div>
					<button data-onclick="{this.handleClick.bind(this)}"></button>
				</div>;
			}
		}
		TestComponent.prototype.handleClick = sinon.stub();

		component = new TestComponent();
		dom.triggerEvent(component.element.childNodes[0], 'click');
		assert.strictEqual(1, component.handleClick.callCount);
	});
github metal / metal.js / test / IncrementalDomRenderer.js View on Github external
it('should attach listeners from "data-on" attributes', function() {
			class TestComponent extends Component {
				render() {
					IncDom.elementOpen('div');
					IncDom.elementVoid('div', null, null, 'data-onclick', 'handleClick');
					IncDom.elementClose('div');
				}
			}
			TestComponent.RENDERER = IncrementalDomRenderer;
			TestComponent.prototype.handleClick = sinon.stub();

			component = new TestComponent();
			assert.strictEqual(0, component.handleClick.callCount);

			dom.triggerEvent(component.element, 'click');
			assert.strictEqual(0, component.handleClick.callCount);

			dom.triggerEvent(component.element.childNodes[0], 'click');
			assert.strictEqual(1, component.handleClick.callCount);
		});
github metal / metal.js / test / IncrementalDomRenderer.js View on Github external
it('should attach sub component inline listeners', function() {
			class TestComponent extends Component {
				render() {
					IncDom.elementOpen('div');
					IncDom.elementVoid('ChildComponent', null, null, 'ref', 'child');
					IncDom.elementClose('div');
				}
			}
			TestComponent.RENDERER = IncrementalDomRenderer;
			component = new TestComponent();

			var child = component.components.child;
			assert.strictEqual(0, child.handleClick.callCount);

			var button = child.element.querySelector('button');
			dom.triggerEvent(button, 'click');
			assert.strictEqual(1, child.handleClick.callCount);
		});
github metal / metal.js / test / Soy.js View on Github external
it('should attach function listeners found in component\'s soy template', function() {
			comp = new FunctionsComponent();

			dom.triggerEvent(comp.element, 'click');
			assert.strictEqual(0, comp.handleClick.callCount);

			dom.triggerEvent(comp.element.querySelector('button'), 'click');
			assert.strictEqual(1, comp.handleClick.callCount);
		});
github metal / metal.js / test / SoyRenderer.js View on Github external
it('should attach listeners to parent component when its id is the listener name\'s prefix', function() {
			ChildrenTestComponent.ATTRS = {
				bar: 'bar',
				children: {
					value: ''
				}
			};

			nestedComp = new DeeplyNestedTestComponent({
				id: 'nested'
			}).render();

			var parentButton = nestedComp.element.querySelector('.parentButton');
			dom.triggerEvent(parentButton, 'click');
			assert.strictEqual(1, nestedComp.handleClick.callCount);
		});
github metal / metal.js / test / EventsCollector.js View on Github external
it('should detach all listeners when detachAllListeners is called', function() {
		var custom = createCustomComponentInstance(
			'<div data-onkeydown="handleKeyDown" data-onclick="handleClick"></div>'
		);
		custom.handleClick = sinon.stub();
		custom.handleKeyDown = sinon.stub();

		var collector = new EventsCollector(custom);
		collector.startCollecting();
		collector.attachListener('click', 'handleClick');
		collector.attachListener('keydown', 'handleKeyDown');

		collector.detachAllListeners();
		dom.triggerEvent(custom.element.childNodes[0], 'click');
		assert.strictEqual(0, custom.handleClick.callCount);
		dom.triggerEvent(custom.element.childNodes[0], 'keydown');
		assert.strictEqual(0, custom.handleKeyDown.callCount);
	});
github metal / metal.js / test / IncrementalDomRenderer.js View on Github external
IncDom.elementVoid('div', null, null, 'data-onkeydown', 'handleKeydown');
					}
					IncDom.elementClose('div');
				}
			}
			TestComponent.RENDERER = IncrementalDomRenderer;
			TestComponent.STATE = {
				keydown: {
					value: true
				}
			};
			TestComponent.prototype.handleClick = sinon.stub();
			TestComponent.prototype.handleKeydown = sinon.stub();

			component = new TestComponent();
			dom.triggerEvent(component.element.childNodes[1], 'keydown');
			assert.strictEqual(1, component.handleKeydown.callCount);

			sinon.spy(component, 'removeListener');
			component.keydown = false;
			component.once('stateSynced', function() {
				assert.strictEqual(2, component.removeListener.callCount);
				assert.notStrictEqual(-1, component.removeListener.args[0][0][0].indexOf('keydown'));
				assert.strictEqual('stateSynced', component.removeListener.args[1][0]);
				done();
			});
		});
github metal / metal.js / test / IncrementalDomRenderer.js View on Github external
render() {
					IncDom.elementOpen('div');
					IncDom.elementVoid('div', null, null, 'data-onclick', 'handleClick');
					IncDom.elementClose('div');
				}
			}
			TestComponent.RENDERER = IncrementalDomRenderer;
			TestComponent.prototype.handleClick = sinon.stub();

			component = new TestComponent();
			assert.strictEqual(0, component.handleClick.callCount);

			dom.triggerEvent(component.element, 'click');
			assert.strictEqual(0, component.handleClick.callCount);

			dom.triggerEvent(component.element.childNodes[0], 'click');
			assert.strictEqual(1, component.handleClick.callCount);
		});