Test your AI Agents with the all-new Agent to Agent Testing Platform.Learn More
How to use handleEvent method in storybook-root
Best JavaScript code snippet using storybook-root
mousewheelhandler_test.js
Source:mousewheelhandler_test.js 
...68 WEBKIT: false69 };70 createHandlerAndListen();71 // Non-gecko, non-webkit events get wheelDelta divided by -40 to get detail.72 handleEvent(createFakeMouseWheelEvent(DEFAULT_TYPE, 120));73 assertMouseWheelEvent(-3, 0, -3);74 handleEvent(createFakeMouseWheelEvent(DEFAULT_TYPE, -120));75 assertMouseWheelEvent(3, 0, 3);76 handleEvent(createFakeMouseWheelEvent(DEFAULT_TYPE, 1200));77 assertMouseWheelEvent(-30, 0, -30);78}79function testNullBody() {80 goog.userAgent = {81 OPERA: false,82 IE: true,83 GECKO: false,84 CAMINO: false,85 WEBKIT: false86 };87 var documentObjectWithNoBody = { };88 goog.testing.events.mixinListenable(documentObjectWithNoBody);89 mouseWheelHandler =90 new goog.events.MouseWheelHandler(documentObjectWithNoBody);91}92function testGeckoStyleMouseWheel() {93 goog.userAgent = {94 OPERA: false,95 IE: false,96 GECKO: true,97 CAMINO: false,98 WEBKIT: false99 };100 createHandlerAndListen();101 handleEvent(createFakeMouseWheelEvent(GECKO_TYPE, null, 3));102 assertMouseWheelEvent(3, 0, 3);103 handleEvent(createFakeMouseWheelEvent(GECKO_TYPE, null, -12));104 assertMouseWheelEvent(-12, 0, -12);105 // Really big values should get truncated to +-3.106 handleEvent(createFakeMouseWheelEvent(GECKO_TYPE, null, 1200));107 assertMouseWheelEvent(3, 0, 3);108 handleEvent(createFakeMouseWheelEvent(GECKO_TYPE, null, -1200));109 assertMouseWheelEvent(-3, 0, -3);110 // Test scrolling with the additional axis property.111 handleEvent(createFakeMouseWheelEvent(GECKO_TYPE, null, 3, VERTICAL));112 assertMouseWheelEvent(3, 0, 3);113 handleEvent(createFakeMouseWheelEvent(GECKO_TYPE, null, 3, HORIZONTAL));114 assertMouseWheelEvent(3, 3, 0);115 handleEvent(createFakeMouseWheelEvent(GECKO_TYPE, null, -3, HORIZONTAL));116 assertMouseWheelEvent(-3, -3, 0);117}118function testWebkitStyleMouseWheel_ieStyle() {119 goog.userAgent = {120 OPERA: false,121 IE: false,122 GECKO: false,123 CAMINO: false,124 WEBKIT: true,125 WINDOWS: true126 };127 createHandlerAndListen();128 // IE-style Webkit events get wheelDelta divided by -40 to get detail.129 handleEvent(createFakeWebkitMouseWheelEvent(-40, 0));130 assertMouseWheelEvent(1, 1, 0);131 handleEvent(createFakeWebkitMouseWheelEvent(120, 0));132 assertMouseWheelEvent(-3, -3, 0);133 handleEvent(createFakeWebkitMouseWheelEvent(0, 120));134 assertMouseWheelEvent(-3, 0, -3);135 handleEvent(createFakeWebkitMouseWheelEvent(0, -40));136 assertMouseWheelEvent(1, 0, 1);137 handleEvent(createFakeWebkitMouseWheelEvent(80, -40));138 assertMouseWheelEvent(-2, -2, 1);139}140function testWebkitStyleMouseWheel_ieStyleOnLinux() {141 goog.userAgent = {142 OPERA: false,143 IE: false,144 GECKO: false,145 CAMINO: false,146 WEBKIT: true,147 WINDOWS: false,148 LINUX: true149 };150 runWebKitContinousAndDiscreteEventsTest();151}152function testWebkitStyleMouseWheel_ieStyleOnMac() {153 goog.userAgent = {154 OPERA: false,155 IE: false,156 GECKO: false,157 CAMINO: false,158 WEBKIT: true,159 WINDOWS: false,160 MAC: true161 };162 runWebKitContinousAndDiscreteEventsTest();163}164function runWebKitContinousAndDiscreteEventsTest() {165 goog.userAgent.isVersionOrHigher = goog.functions.TRUE;166 createHandlerAndListen();167 // IE-style wheel events.168 handleEvent(createFakeWebkitMouseWheelEvent(0, -40));169 assertMouseWheelEvent(1, 0, 1);170 handleEvent(createFakeWebkitMouseWheelEvent(80, -40));171 assertMouseWheelEvent(-2, -2, 1);172 // Even in Webkit versions that usually behave in IE style, sometimes wheel173 // events don't behave; this has been observed for instance with Macbook174 // and Chrome OS touchpads in Webkit 534.10+.175 handleEvent(createFakeWebkitMouseWheelEvent(-3, 5));176 assertMouseWheelEvent(-5, 3, -5);177 handleEvent(createFakeWebkitMouseWheelEvent(4, -7));178 assertMouseWheelEvent(7, -4, 7);179}180function testWebkitStyleMouseWheel_nonIeStyle() {181 goog.userAgent = {182 OPERA: false,183 IE: false,184 GECKO: false,185 CAMINO: false,186 WEBKIT: true,187 WINDOWS: false188 };189 goog.userAgent.isVersionOrHigher = goog.functions.FALSE;190 createHandlerAndListen();191 // non-IE-style Webkit events do not get wheelDelta scaled192 handleEvent(createFakeWebkitMouseWheelEvent(-1, 0));193 assertMouseWheelEvent(1, 1, 0);194 handleEvent(createFakeWebkitMouseWheelEvent(3, 0));195 assertMouseWheelEvent(-3, -3, 0);196 handleEvent(createFakeWebkitMouseWheelEvent(0, 3));197 assertMouseWheelEvent(-3, 0, -3);198 handleEvent(createFakeWebkitMouseWheelEvent(0, -1));199 assertMouseWheelEvent(1, 0, 1);200 handleEvent(createFakeWebkitMouseWheelEvent(2, -1));201 assertMouseWheelEvent(-2, -2, 1);202}203function testMaxDeltaX() {204 goog.userAgent = {205 OPERA: false,206 IE: false,207 GECKO: false,208 CAMINO: false,209 WEBKIT: true,210 WINDOWS: true211 };212 createHandlerAndListen();213 // IE-style Webkit events get wheelDelta divided by -40 to get detail.214 handleEvent(createFakeWebkitMouseWheelEvent(-120, 0));215 assertMouseWheelEvent(3, 3, 0);216 mouseWheelHandler.setMaxDeltaX(3);217 mouseWheelHandlerRtl.setMaxDeltaX(3);218 handleEvent(createFakeWebkitMouseWheelEvent(-120, 0));219 assertMouseWheelEvent(3, 3, 0);220 mouseWheelHandler.setMaxDeltaX(2);221 mouseWheelHandlerRtl.setMaxDeltaX(2);222 handleEvent(createFakeWebkitMouseWheelEvent(-120, 0));223 assertMouseWheelEvent(3, 2, 0);224 handleEvent(createFakeWebkitMouseWheelEvent(0, -120));225 assertMouseWheelEvent(3, 0, 3);226}227function testMaxDeltaY() {228 goog.userAgent = {229 OPERA: false,230 IE: false,231 GECKO: false,232 CAMINO: false,233 WEBKIT: true,234 WINDOWS: true235 };236 createHandlerAndListen();237 // IE-style Webkit events get wheelDelta divided by -40 to get detail.238 handleEvent(createFakeWebkitMouseWheelEvent(0, -120));239 assertMouseWheelEvent(3, 0, 3);240 mouseWheelHandler.setMaxDeltaY(3);241 mouseWheelHandlerRtl.setMaxDeltaY(3);242 handleEvent(createFakeWebkitMouseWheelEvent(0, -120));243 assertMouseWheelEvent(3, 0, 3);244 mouseWheelHandler.setMaxDeltaY(2);245 mouseWheelHandlerRtl.setMaxDeltaY(2);246 handleEvent(createFakeWebkitMouseWheelEvent(0, -120));247 assertMouseWheelEvent(3, 0, 2);248 handleEvent(createFakeWebkitMouseWheelEvent(-120, 0));249 assertMouseWheelEvent(3, 3, 0);250}251// Be sure to call this after setting up goog.userAgent mock and not before.252function createHandlerAndListen() {253 mouseWheelHandler = new goog.events.MouseWheelHandler(254 goog.dom.getElement('foo'));255 goog.events.listen(mouseWheelHandler,256 goog.events.MouseWheelHandler.EventType.MOUSEWHEEL,257 function(e) { mouseWheelEvent = e; });258 mouseWheelHandlerRtl = new goog.events.MouseWheelHandler(259 goog.dom.getElement('fooRtl'));260 goog.events.listen(mouseWheelHandlerRtl,261 goog.events.MouseWheelHandler.EventType.MOUSEWHEEL,262 function(e) { mouseWheelEventRtl = e; });263}264function handleEvent(event) {265 mouseWheelHandler.handleEvent(event);266 mouseWheelHandlerRtl.handleEvent(event);267}268function assertMouseWheelEvent(expectedDetail, expectedDeltaX,269 expectedDeltaY) {270 assertTrue('event should be non-null', !!mouseWheelEvent);271 assertTrue('event should have correct JS type',272 mouseWheelEvent instanceof goog.events.MouseWheelEvent);273 assertEquals('event should have correct detail property',274 expectedDetail, mouseWheelEvent.detail);275 assertEquals('event should have correct deltaX property',276 expectedDeltaX, mouseWheelEvent.deltaX);277 assertEquals('event should have correct deltaY property',278 expectedDeltaY, mouseWheelEvent.deltaY);279 // RTL280 assertTrue('event should be non-null', !!mouseWheelEventRtl);...
drawer.spec.js
Source:drawer.spec.js
...25 });26 /** @test {handleEvent/0.5} */27 it('handleEvent should return 0.5 if clicked in the middle of wrapper', function() {28 const {right, width} = drawer.wrapper.getBoundingClientRect();29 expect(drawer.handleEvent({clientX: right - width / 2}, true)).toBeWithinRange(0.49, 0.51); // because 0.1 + 0.2 !== 0.330 });31 /** @test {handleEvent/0.9} */32 it('handleEvent should return 0.9 if clicked 10% from the end', function() {33 const {right, width} = drawer.wrapper.getBoundingClientRect();34 expect(drawer.handleEvent({clientX: right - width / 10}, true)).toBeWithinRange(0.89, 0.91); // because 0.1 + 0.2 !== 0.335 });36 /** @test {handleEvent/left} */37 it('handleEvent should return 0 if clicked on wrapper left position', function() {38 const {left} = drawer.wrapper.getBoundingClientRect();39 expect(drawer.handleEvent({clientX: left}, true)).toBe(0);40 });41 /** @test {handleEvent/left-1} */42 it('handleEvent should return 0 if clicked on wrapper left position -1px', function() {43 const {left} = drawer.wrapper.getBoundingClientRect();44 expect(drawer.handleEvent({clientX: left - 1}, true)).toBe(0);45 });46 /** @test {handleEvent/left+1} */47 it('handleEvent should not return 0 if clicked on wrapper left position +1px', function() {48 const {left} = drawer.wrapper.getBoundingClientRect();49 expect(drawer.handleEvent({clientX: left + 1}, true)).not.toBe(0);50 expect(drawer.handleEvent({clientX: left + 1}, true)).toBeGreaterThan(0);51 });52 /** @test {handleEvent/right} */53 it('handleEvent should return 1 if clicked on wrapper right position', function() {54 const {right} = drawer.wrapper.getBoundingClientRect();55 expect(drawer.handleEvent({clientX: right}, true)).toBeCloseTo(1, 3);56 });57 /** @test {handleEvent/right+1} */58 it('handleEvent should return 1 if clicked on wrapper right position +1px', function() {59 const {right} = drawer.wrapper.getBoundingClientRect();60 expect(drawer.handleEvent({clientX: right + 1}, true)).toBe(1);61 });62 /** @test {handleEvent/right-1} */63 it('handleEvent should not return 1 if clicked on wrapper right position -1px', function() {64 const {right} = drawer.wrapper.getBoundingClientRect();65 expect(drawer.handleEvent({clientX: right - 1}, true)).not.toBe(1);66 expect(drawer.handleEvent({clientX: right - 1}, true)).toBeLessThan(1);67 });68});69/** @test {Drawer} */70describe('Drawer/vertical:', function() {71 let container;72 let drawer;73 beforeEach(function() {74 container = TestHelpers.createElement();75 container.style.display = 'flex';76 container.style.height = '800px';77 drawer = new Drawer(container, {vertical: true, fillParent: false});78 drawer.createWrapper();79 });80 afterEach(function() {81 if (drawer) {82 drawer.destroy();83 }84 TestHelpers.removeElement(container);85 });86 /** @test {wrapper} */87 it('wrapper should exist and have correct tagName', function() {88 expect(drawer.wrapper).toBeTruthy();89 expect(drawer.wrapper.tagName.toLowerCase()).toBe('wave');90 });91 /** @test {handleEvent/0.5} */92 it('handleEvent should return 0.5 if clicked in the middle of wrapper', function() {93 const {right, width} = drawer.wrapper.getBoundingClientRect();94 expect(drawer.handleEvent({clientY: right - width / 2}, true)).toBeWithinRange(0.49, 0.51); // because 0.1 + 0.2 !== 0.395 });96 /** @test {handleEvent/0.9} */97 it('handleEvent should return 0.9 if clicked 10% from the end', function() {98 const {right, width} = drawer.wrapper.getBoundingClientRect();99 expect(drawer.handleEvent({clientY: right - width / 10}, true)).toBeWithinRange(0.89, 0.91); // because 0.1 + 0.2 !== 0.3100 });101 /** @test {handleEvent/left} */102 it('handleEvent should return 0 if clicked on wrapper left position', function() {103 const {left} = drawer.wrapper.getBoundingClientRect();104 expect(drawer.handleEvent({clientY: left}, true)).toBe(0);105 });106 /** @test {handleEvent/left-1} */107 it('handleEvent should return 0 if clicked on wrapper left position -1px', function() {108 const {left} = drawer.wrapper.getBoundingClientRect();109 expect(drawer.handleEvent({clientY: left - 1}, true)).toBe(0);110 });111 /** @test {handleEvent/left+1} */112 it('handleEvent should not return 0 if clicked on wrapper left position +1px', function() {113 const {left} = drawer.wrapper.getBoundingClientRect();114 expect(drawer.handleEvent({clientY: left + 1}, true)).not.toBe(0);115 expect(drawer.handleEvent({clientY: left + 1}, true)).toBeGreaterThan(0);116 });117 /** @test {handleEvent/right} */118 it('handleEvent should return 1 if clicked on wrapper right position', function() {119 const bbox = drawer.wrapper.getBoundingClientRect();120 expect(drawer.handleEvent({clientY: bbox.right}, true)).toBeCloseTo(1, 3);121 });122 /** @test {handleEvent/right+1} */123 it('handleEvent should return 1 if clicked on wrapper right position +1px', function() {124 const {right} = drawer.wrapper.getBoundingClientRect();125 expect(drawer.handleEvent({clientY: right + 1}, true)).toBe(1);126 });127 /** @test {handleEvent/right-1} */128 it('handleEvent should not return 1 if clicked on wrapper right position -1px', function() {129 const {right} = drawer.wrapper.getBoundingClientRect();130 expect(drawer.handleEvent({clientY: right - 1}, true)).not.toBe(1);131 expect(drawer.handleEvent({clientY: right - 1}, true)).toBeLessThan(1);132 });...
touch.js
Source:touch.js
1demos.TouchImpl = Ext.extend(Ext.Panel, {2 initComponent : function() {3 this.logger = new Ext.Panel({4 id: 'logger',5 scroll: 'vertical',6 styleHtmlContent: true,7 dockedItems: [{8 dock: 'top',9 xtype: 'toolbar',10 title: 'Event Log',11 ui: 'light'12 }],13 html: '<span>Try using gestures on the area to the right to see how events are fired.</span>'14 });15 this.info = new Ext.Component({16 xtype: 'component',17 styleHtmlContent: true,18 scroll: 'vertical',19 html: '<p>Sencha Touch comes with a multitude of touch events available on components. Included touch events that can be used are:</p><ul><li>touchstart</li><li>touchmove</li><li>touchend</li><li>touchdown</li><li>scrollstart</li><li>scroll</li><li>scrollend</li><li>tap</li><li>tapstart</li><li>tapcancel</li><li>doubletap</li><li>taphold</li><li>swipe</li><li>pinch</li><li>pinchstart</li><li>pinchend</li></ul>'20 });21 this.touchPad = new demos.TouchImpl.TouchPad({22 listeners: {23 log: this.onLog,24 scope: this25 }26 });27 if (!Ext.is.Phone) {28 this.layout = 'fit';29 this.logger.flex = 1;30 this.info.flex = 1.5;31 this.dockedItems = [{32 dock: 'left',33 width: 250,34 id: 'touchinfopanel',35 layout: {36 type: 'vbox',37 align: 'stretch'38 },39 items: [this.info, this.logger]40 }];41 this.items = [this.touchPad];42 }43 else {44 this.layout = 'card';45 this.logger.flex = 1;46 this.touchPad.flex = 1;47 this.infoCard = new Ext.Container({48 scroll: 'vertical',49 items: [{50 xtype: 'button',51 ui: 'confirm',52 text: 'Console',53 style: 'margin: 10px;',54 handler: this.onConsoleButtonTap,55 scope: this56 }, {57 xtype: 'component',58 styleHtmlContent: true,59 html: '<p>Sencha Touch comes with a multitude of touch events available on components. Included touch events that can be used are:</p><ul><li>touchstart</li><li>touchmove</li><li>touchend</li><li>scrollstart</li><li>scroll</li><li>scrollend</li><li>singletap</li><li>tap</li><li>doubletap</li><li>taphold</li><li>swipe</li><li>pinch</li></ul>'60 }]61 });62 this.touchCard = new Ext.Container({63 layout: {64 type: 'vbox',65 align: 'stretch'66 },67 items: [this.touchPad, this.logger]68 });69 this.items = [this.infoCard, this.touchCard];70 }71 demos.TouchImpl.superclass.initComponent.call(this);72 },73 onConsoleButtonTap : function() {74 this.setActiveItem(this.touchCard, 'slide');75 },76 onLog : function(type, e) {77 var loggerEl = this.logger.body;78 if (!this.started) {79 loggerEl.select('span').remove();80 this.started = true;81 }82 switch (type) {83 default:84 loggerEl.first().insertFirst({85 tag: 'p',86 html: type,87 style: 'margin: 0'88 });89 loggerEl.select('p:nth-child(50)').remove();90 break;91 }92 }93});94demos.TouchImpl.TouchPad = Ext.extend(Ext.Component, {95 id: 'touchpad',96 html: 'Touch here!',97 initComponent : function() {98 this.addEvents('log');99 demos.TouchImpl.TouchPad.superclass.initComponent.call(this);100 },101 afterRender: function() {102 demos.TouchImpl.TouchPad.superclass.afterRender.call(this);103 this.mon(this.el, {104 touchstart: this.handleEvent,105 touchend: this.handleEvent,106 touchmove: this.handleEvent,107 touchdown: this.handleEvent,108 dragstart: this.handleEvent,109 drag: this.handleEvent,110 dragend: this.handleEvent,111 singletap: this.handleEvent,112 tap: this.handleEvent,113 doubletap: this.handleEvent,114 taphold: this.handleEvent,115 tapcancel: this.handleEvent,116 swipe: this.handleEvent,117 pinch: this.handleEvent,118 pinchstart: this.handleEvent,119 pinchend: this.handleEvent,120 scope: this121 });122 },123 handleEvent: function(e) {124 this.fireEvent('log', e.type, e);125 }126});...
SpriteEvents.js
Source:SpriteEvents.js
1/**2 * A draw container {@link Ext.AbstractPlugin plugin} that adds ability to listen3 * to sprite events. For example:4 *5 * var drawContainer = Ext.create('Ext.draw.Container', {6 * plugins: ['spriteevents'],7 * renderTo: Ext.getBody(),8 * width: 200,9 * height: 200,10 * sprites: [{11 * type: 'circle',12 * fillStyle: '#79BB3F',13 * r: 50,14 * x: 100,15 * y: 10016 * }],17 * listeners: {18 * spriteclick: function (item, event) {19 * var sprite = item && item.sprite;20 * if (sprite) {21 * sprite.setAttributes({fillStyle: 'red'});22 sprite.getSurface().renderFrame();23 * }24 * }25 * }26 * });27 */28Ext.define('Ext.draw.plugin.SpriteEvents', {29 extend: 'Ext.plugin.Abstract',30 alias: 'plugin.spriteevents',31 requires: ['Ext.draw.PathUtil'],32 /**33 * @event spritemousemove34 * Fires when the mouse is moved on a sprite.35 * @param {Object} sprite36 * @param {Event} event37 */38 /**39 * @event spritemouseup40 * Fires when a mouseup event occurs on a sprite.41 * @param {Object} sprite42 * @param {Event} event43 */44 /**45 * @event spritemousedown46 * Fires when a mousedown event occurs on a sprite.47 * @param {Object} sprite48 * @param {Event} event49 */50 /**51 * @event spritemouseover52 * Fires when the mouse enters a sprite.53 * @param {Object} sprite54 * @param {Event} event55 */56 /**57 * @event spritemouseout58 * Fires when the mouse exits a sprite.59 * @param {Object} sprite60 * @param {Event} event61 */62 /**63 * @event spriteclick64 * Fires when a click event occurs on a sprite.65 * @param {Object} sprite66 * @param {Event} event67 */68 /**69 * @event spritedblclick70 * Fires when a double click event occurs on a sprite.71 * @param {Object} sprite72 * @param {Event} event73 */74 /**75 * @event spritetap76 * Fires when a tap event occurs on a sprite.77 * @param {Object} sprite78 * @param {Event} event79 */80 mouseMoveEvents: {81 mousemove: true,82 mouseover: true,83 mouseout: true84 },85 spriteMouseMoveEvents: {86 spritemousemove: true,87 spritemouseover: true,88 spritemouseout: true89 },90 init: function (drawContainer) {91 var handleEvent = 'handleEvent';92 this.drawContainer = drawContainer;93 drawContainer.addElementListener({94 click: handleEvent,95 dblclick: handleEvent,96 mousedown: handleEvent,97 mousemove: handleEvent,98 mouseup: handleEvent,99 mouseover: handleEvent,100 mouseout: handleEvent,101 // run our handlers before user code102 priority: 1001,103 scope: this104 });105 },106 hasSpriteMouseMoveListeners: function () {107 var listeners = this.drawContainer.hasListeners,108 name;109 for (name in this.spriteMouseMoveEvents) {110 if (name in listeners) {111 return true;112 }113 }114 return false;115 },116 hitTestEvent: function (e) {117 var items = this.drawContainer.getItems(),118 surface, sprite, i;119 for (i = items.length - 1; i >= 0; i--) {120 surface = items.get(i);121 sprite = surface.hitTestEvent(e);122 if (sprite) {123 return sprite;124 }125 }126 return null;127 },128 handleEvent: function (e) {129 var me = this,130 drawContainer = me.drawContainer,131 isMouseMoveEvent = e.type in me.mouseMoveEvents,132 lastSprite = me.lastSprite,133 sprite;134 if (isMouseMoveEvent && !me.hasSpriteMouseMoveListeners()) {135 return;136 }137 sprite = me.hitTestEvent(e);138 if (isMouseMoveEvent && !Ext.Object.equals(sprite, lastSprite)) {139 if (lastSprite) {140 drawContainer.fireEvent('spritemouseout', lastSprite, e);141 }142 if (sprite) {143 drawContainer.fireEvent('spritemouseover', sprite, e);144 }145 }146 if (sprite) {147 drawContainer.fireEvent('sprite' + e.type, sprite, e);148 }149 me.lastSprite = sprite;150 }...
UserDetails.js
Source:UserDetails.js
1import { Link } from 'react-router-dom';2function CustomInput(props) {3 return (4 <div className="input-group mb-3">5 <span className="input-group-text">{props.spantext || props.val}</span>6 <input type="text" id={props.val} className="form-control" onChange={props.handleEvent} />7 </div>8 )9}10export default function UserDetails(props) {11 return (12 <div className="App mt-5">13 <CustomInput val="Name" handleEvent={props.handleEvent} />14 <CustomInput val="Desiginition" handleEvent={props.handleEvent} />15 <CustomInput val="Company" handleEvent={props.handleEvent} />16 <CustomInput val="Mobile" handleEvent={props.handleEvent} />17 <CustomInput val="E-mail" handleEvent={props.handleEvent} />18 <CustomInput val="Location" handleEvent={props.handleEvent} />19 <span>Education</span>20 <CustomInput val="SSLC-school" spantext="CLASS-X-School" handleEvent={props.handleEvent} />21 <CustomInput val="SSLC-percentage" spantext="CLASS-X-Percentage" handleEvent={props.handleEvent} />22 <CustomInput val="SSLC-yop" spantext="CLASS-X-Year-Of-Passing" handleEvent={props.handleEvent} />23 <CustomInput val="HSC-school" spantext="CLASS-XII-School" handleEvent={props.handleEvent} />24 <CustomInput val="HSC-percentage" spantext="CLASS-XII-Percentage" handleEvent={props.handleEvent} />25 <CustomInput val="HSC-yop" spantext="CLASS-XII-Year-Of-Passing" handleEvent={props.handleEvent} />26 <span>Msys HR</span>27 <div className="form-group">28 <small className="form-text text-muted">Accepted values 1-5</small>29 </div>30 <CustomInput val="Communication" handleEvent={props.handleEvent} />31 <CustomInput val="Competancy" handleEvent={props.handleEvent} />32 <CustomInput val="Situation-Handeling" handleEvent={props.handleEvent} />33 <CustomInput val="Technical-Skills" handleEvent={props.handleEvent} />34 <CustomInput val="Behavior" handleEvent={props.handleEvent} />35 <span>OJT Performance</span>36 <CustomInput val="Project-Summary" handleEvent={props.handleEvent} />37 <CustomInput val="Supervisor-Comment" handleEvent={props.handleEvent} />38 <CustomInput val="Manager's-Comment" handleEvent={props.handleEvent} />39 <CustomInput val="Peers-Comment" handleEvent={props.handleEvent} />40 <span>Training Scorecard</span>41 <div className="form-group">42 <small className="form-text text-muted">Accepted values 1-10</small>43 </div>44 <CustomInput val="Behavioural-skill" handleEvent={props.handleEvent} />45 <CustomInput val="soft-skill" handleEvent={props.handleEvent} />46 <CustomInput val="business-skill" handleEvent={props.handleEvent} />47 <span>Technical Skill</span>48 <div className="form-group">49 <small className="form-text text-muted">Accepted values 1-10 for skill values</small>50 </div>51 <div className="form-group mb-3">52 <div className="input-group">53 <span className="input-group-text">Skill-Names</span>54 <textarea id="Skill-Names" className="form-control" onChange={props.handleEvent} rows="4" />55 </div>56 <small className="form-text text-muted">All skill names should be seperated by ','. eg. "HTML,CSS,JS,React,NodeJS,Mongo,Express,MERN"</small>57 </div>58 <div className="form-group mb-3">59 <div className="input-group">60 <span className="input-group-text">Skill-Values</span>61 <textarea id="Skill-Values" className="form-control" onChange={props.handleEvent} rows="4" />62 </div>63 <small className="form-text text-muted">All skill values should be seperated by ','. eg. "1,2,3,4,5,6,7,8"</small>64 </div>65 <div className="input-group mb-3">66 <input type="file" className="form-control" id="inputGroupFile02" onChange={(event) => props.updateImage(event.target.files[0])} />67 <label className="input-group-text" htmlFor="inputGroupFile02">Upload</label>68 </div>69 <div className="text-center mb-5">70 <Link to='/resume'>71 <button type="button" className="btn btn-primary " onClick={() => console.log(props.data)}>Submit</button>72 </Link>73 </div>74 </div>75 )...
helpers.js
Source:helpers.js
1/* exported addEvent, removeEvent, getChildren, setAttributes, addClass, removeClass, forEach */2/**3 * Add Event4 * fn arg can be an object or a function, thanks to handleEvent5 * read more at: http://www.thecssninja.com/javascript/handleevent6 *7 * @param {element} element8 * @param {event} event9 * @param {Function} fn10 * @param {boolean} bubbling11 */12var addEvent = function (el, evt, fn, bubble) {13 if ("addEventListener" in el) {14 // BBOS6 doesn't support handleEvent, catch and polyfill15 try {16 el.addEventListener(evt, fn, bubble);17 } catch (e) {18 if (typeof fn === "object" && fn.handleEvent) {19 el.addEventListener(evt, function (e) {20 // Bind fn as this and set first arg as event object21 fn.handleEvent.call(fn, e);22 }, bubble);23 } else {24 throw e;25 }26 }27 } else if ("attachEvent" in el) {28 // check if the callback is an object and contains handleEvent29 if (typeof fn === "object" && fn.handleEvent) {30 el.attachEvent("on" + evt, function () {31 // Bind fn as this32 fn.handleEvent.call(fn);33 });34 } else {35 el.attachEvent("on" + evt, fn);36 }37 }38 },39 /**40 * Remove Event41 *42 * @param {element} element43 * @param {event} event44 * @param {Function} fn45 * @param {boolean} bubbling46 */47 removeEvent = function (el, evt, fn, bubble) {48 if ("removeEventListener" in el) {49 try {50 el.removeEventListener(evt, fn, bubble);51 } catch (e) {52 if (typeof fn === "object" && fn.handleEvent) {53 el.removeEventListener(evt, function (e) {54 fn.handleEvent.call(fn, e);55 }, bubble);56 } else {57 throw e;58 }59 }60 } else if ("detachEvent" in el) {61 if (typeof fn === "object" && fn.handleEvent) {62 el.detachEvent("on" + evt, function () {63 fn.handleEvent.call(fn);64 });65 } else {66 el.detachEvent("on" + evt, fn);67 }68 }69 },70 /**71 * Get the children of any element72 *73 * @param {element}74 * @return {array} Returns matching elements in an array75 */76 getChildren = function (e) {77 if (e.children.length < 1) {78 throw new Error("The Nav container has no containing elements");79 }80 // Store all children in array81 var children = [];82 // Loop through children and store in array if child != TextNode83 for (var i = 0; i < e.children.length; i++) {84 if (e.children[i].nodeType === 1) {85 children.push(e.children[i]);86 }87 }88 return children;89 },90 /**91 * Sets multiple attributes at once92 *93 * @param {element} element94 * @param {attrs} attrs95 */96 setAttributes = function (el, attrs) {97 for (var key in attrs) {98 el.setAttribute(key, attrs[key]);99 }100 },101 /**102 * Adds a class to any element103 *104 * @param {element} element105 * @param {string} class106 */107 addClass = function (el, cls) {108 if (el.className.indexOf(cls) !== 0) {109 el.className += " " + cls;110 el.className = el.className.replace(/(^\s*)|(\s*$)/g,"");111 }112 },113 /**114 * Remove a class from any element115 *116 * @param {element} element117 * @param {string} class118 */119 removeClass = function (el, cls) {120 var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");121 el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");122 },123 /**124 * forEach method that passes back the stuff we need125 *126 * @param {array} array127 * @param {Function} callback128 * @param {scope} scope129 */130 forEach = function (array, callback, scope) {131 for (var i = 0; i < array.length; i++) {132 callback.call(scope, i, array[i]);133 }...
irc.js
Source:irc.js
...16 client.addListener('registered', () => {17 onSuccess();18 });19 client.addListener('message', (nick, to, text) => {20 handleEvent('message', { from: nick, to, message: text });21 });22 client.addListener('names', (channel, nicknames) => {23 handleEvent('user_list', { channel, nicknames });24 });25 client.addListener('topic', (channel, topic, nickname) => {26 handleEvent('topic', { channel, topic, nickname });27 });28 client.addListener('join', (channel, nickname) => {29 handleEvent('join', { channel, nickname });30 });31 client.addListener('part', (channel, nickname) => {32 handleEvent('part', { channel, nickname });33 });34 client.addListener('quit', (nickname, reason) => {35 handleEvent('quit', { nickname, reason });36 });37 client.addListener('kick', (channel, nickname, by, reason) => {38 handleEvent('kick', { channel, nickname, by, reason });39 });40 client.addListener('nick', (oldnick, newnick) => {41 handleEvent('nick', { oldnick, newnick });42 });43 client.addListener('invite', (channel, from) => {44 handleEvent('invited', { oldnick, newnick });45 });46 client.addListener('+mode', (channel, by, mode, argument) => {47 handleEvent('+mode', { channel, by, mode, argument });48 });49 client.addListener('-mode', (channel, by, mode, argument) => {50 handleEvent('-mode', { channel, by, mode, argument });51 });52 client.addListener('whois', ({ nick, user, realname, host }) => {53 handleEvent('whois', { nickname: nick, user, name: realname, host });54 });55 client.addListener('error', function(message) {56 console.log('error: ', message);57 handleEvent('error', { message });58 });59}60function isUserConnectionActive(userId, handleEvent) {61 if (!clients[userId]) {62 handleEvent('disconnected', {});63 return false;64 }65 return true;66}67module.exports.say = function (userId, to, message, handleEvent) {68 if (!isUserConnectionActive(userId, handleEvent)) {69 return;70 }71 clients[userId].say(to, message);72}73module.exports.join = function (userId, channel, handleEvent) {74 if (!isUserConnectionActive(userId, handleEvent)) {75 return;76 }77 clients[userId].join(channel);78}79module.exports.part = function (userId, channel, handleEvent) {80 if (!isUserConnectionActive(userId, handleEvent)) {81 return;82 }83 clients[userId].part(channel);84}85module.exports.disconnect = function (userId, handleEvent) {86 if (clients[userId]) {87 clients[userId].disconnect();88 clients[userId] = undefined;89 handleEvent('disconnected', {});90 }91}92module.exports.send = function (userId, command, args, handleEvent) {93 if (!isUserConnectionActive(userId, handleEvent)) {94 return;95 }96 let argList = args.split(' ');97 if (argList.length >= 1 && argList[0].startsWith('#')) {98 argList = [...argList.splice(0, 1), argList.join(' ')];99 }100 clients[userId].send(command, ...argList);...
calculator.js
Source:calculator.js
1import React, { useState } from 'react';2import './calculator.css';3import calculate from '../logic/calculate';4import '../App.css';5const Calculator = () => {6 const [state, setState] = useState({7 total: 0,8 next: null,9 operation: null,10 });11 const handleEvent = (e) => {12 setState({ ...state, ...calculate(state, e.target.name) });13 };14 return (15 <div className="calculatorSection">16 <h1>Let's do some math!</h1>17 <div className="calc">18 <p className="result">19 <span>{state.total}</span>20 <span>{state.operation}</span>21 <span>{state.next}</span>22 </p>23 <div className="calculator">24 <button type="button" className="grayButton" name="AC" onClick={handleEvent}>AC</button>25 <button type="button" className="grayButton" name="+/-" onClick={handleEvent}>+/-</button>26 <button type="button" className="grayButton" name="%" onClick={handleEvent}>% </button>27 <button type="button" className="orangeButton" name="÷" onClick={handleEvent}>÷</button>28 <button type="button" className="grayButton" name="7" onClick={handleEvent}>7</button>29 <button type="button" className="grayButton" name="8" onClick={handleEvent}>8</button>30 <button type="button" className="grayButton" name="9" onClick={handleEvent}>9</button>31 <button type="button" className="orangeButton" name="x" onClick={handleEvent}>x</button>32 <button type="button" className="grayButton" name="4" onClick={handleEvent}>4</button>33 <button type="button" className="grayButton" name="5" onClick={handleEvent}>5</button>34 <button type="button" className="grayButton" name="6" onClick={handleEvent}>6</button>35 <button type="button" className="orangeButton" name="-" onClick={handleEvent}>-</button>36 <button type="button" className="grayButton" name="1" onClick={handleEvent}>1</button>37 <button type="button" className="grayButton" name="2" onClick={handleEvent}>2</button>38 <button type="button" className="grayButton" name="3" onClick={handleEvent}>3</button>39 <button type="button" className="orangeButton" name="+" onClick={handleEvent}>+</button>40 <button type="button" className="grayButton-0" name="0" onClick={handleEvent}>0</button>41 <button type="button" className="grayButton" name="." onClick={handleEvent}>.</button>42 <button type="button" className="orangeButton" name="=" onClick={handleEvent}>=</button>43 </div>44 </div>45 </div>46 );47};...
Using AI Code Generation
1const storybookRoot = document.getElementById("storybook-root");2storybookRoot.addEventListener("message", handleEvent);3function handleEvent(event) {4 console.log(event);5 storybookRoot.removeEventListener("message", handleEvent);6}7const storybookRoot = document.getElementById("storybook-root");8const iframe = document.createElement("iframe");9storybookRoot.appendChild(iframe);10iframe.src = "./storybook.html";11const div = document.createElement("div");12document.body.appendChild(div);13div.id = "storybook";14div.innerHTML = "Hello World";15const storybook = document.getElementById("storybook");16const iframe = document.createElement("iframe");17storybook.appendChild(iframe);18iframe.src = "./iframe.html";19const div = document.createElement("div");20document.body.appendChild(div);21div.id = "iframe";22div.innerHTML = "Hello World";23const storybookRoot = document.getElementById("storybook-root");24const iframe = document.createElement("iframe");
Automation Testing Tutorials
Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-root automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
