<!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no" /> <title>Doctests Functional Tests Flippable</title> <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css"> <link rel="stylesheet" href="../../css/doctest.css"> <script src="../3rdparty/highlight/highlight.pack.js"></script> <script src="../../dist/iwmlib.3rdparty.js"></script> <script src="../../dist/iwmlib.js"></script> <script src="../../dist/iwmlib.pixi.js"></script> </head> <body onload="Doctest.run();" > <h1> Functional Tests </h1> <p> If you want to test the UI in all functional aspects, it'is important to be able to simulate user interactions. Trdditionally this is mainly done by simulating key pressed and mouse events. For touch events the support is less common and often restricted to a platform (e.g. selendroid extends Selenium tests for Android browsers.) </p> <p>To achive basic touch support one must be able to programmatically generate touch events. This can simply be done by calling new TouchEvent, new PointerEvent, but it's more complex to hide the platform differences behind a consistent interface. To achive this goal we start to record touch and mouse events.</p> </p> <pre><code class="html"> <main id="main" class="container interactive" style="width: 100%; height:400px; border: 1px solid gray;"> <canvas id="canvasTest" draggable="false" style="position: absolute; z-index: 1000; user-select: none; pointer-events: none;"></canvas> <canvas id="canvasProduction" style="position: absolute; z-index: 500; user-select: none;"></canvas> </main> </code></pre> <h4 id="title" onclick="this.innerHTML = Date.now();">Changed by UITest</h4> <main id="main" class="container interactive" style="width: 900px; height: 400px; border: 1px solid gray;"> <canvas id="canvas" style="z-index: 500; user-select: none;"></canvas> </main> <script class="doctest"> // create app //-------------------- const app = new PIXIApp({ view: canvas, width: 900, height: 400 }).setup().run() window.app = app // listen for all events //-------------------- const eventTypes = ['click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'mouseupoutside', 'pointercancel', 'pointerdown', 'pointermove', 'pointerout', 'pointerover', 'pointertap', 'pointerup', 'pointerupoutside', 'rightclick', 'rightdown', 'rightup', 'rightupoutside', 'tap', 'touchcancel', 'touchend', 'touchendoutside', 'touchmove', 'touchstart'] eventTypes.forEach(eventType => { app.renderer.plugins.interaction.on(eventType, event => { if (!event.data.originalEvent.isTrusted) { //console.log('interactionmanager', eventType, event) } }) }) // scattercontainer //-------------------- const scatterContainer = new ScatterContainer(app.renderer, {}) app.scene.addChild(scatterContainer) // scatter //-------------------- const sprite1 = PIXI.Sprite.from('./assets/fruit-1.jpg') sprite1.interactive = true sprite1.scatter = new DisplayObjectScatter(sprite1, app.renderer, { x: 20, y: 120, startScale: 0.25, minScale: 0.2, maxScale: 1 }) scatterContainer.addChild(sprite1) // flippable //-------------------- const sprite2 = PIXI.Sprite.from('./assets/fruit-2.jpg') const flippable = new Flippable(sprite1, sprite2, app.renderer) // button1 //-------------------- const button1 = new Button({ x: 700, y: 20, label: 'Flip', type: 'checkbox', action: event => flippable.toggle() }) app.scene.addChild(button1) // customButton //-------------------- const customButton = new PIXI.Graphics() customButton.x = 600 customButton.y = 150 customButton.beginFill(0xfdc02f, 1) customButton.lineStyle(3, 0xda3749, 1) customButton.drawRect(0, 0, 200, 100) customButton.interactive = true customButton.on('pointerup', event => { console.log(1, event) flippable.toggle() }) app.scene.addChild(customButton) // UITest //-------------------- d3.timeout(() => { new UITest() .tap(app.view, [610, 160], 1) .tap(app.view, {x: 710, y: 30}, 1.3) .tap(app.view, button1, 2) .tap(app.view, button1, 2.5) .pan(app.view, [30, 130], 4, {onComplete: function(it) { //console.log('pan', this, it) }, to: [130, 200], duration: 1}) .pan(app.view, sprite1, 5.5, { bezier: [{x: 150, y: 220}, button1, [400, 300]], duration: 4 }) // .tap(title, [0, 0], 2, {eventTypes: 'click'}) // .tap(title, 5, {eventTypes: 'click'}) // .tap(title, {eventType: 'click'}) //.tap(document.getElementById('title'), {eventTypes: ['mousedown', 'mouseup']}) // .tap(document.getElementById('title'), [0, 0], {eventType: 'click'}) // .pinch(app.view, [[30, 130], [60, 130]], 2, { // duration: 4, // distance: 20 // // , // // to: [[10, 130], [60, 120]] // }) // .pinch(app.view, [[30, 130], [60, 130]], 2, { // duration: 4, // distance: 20, // to2: [60, 120] // }) .start() }, 1000) </script> <h2> References </h2> <ul> <li><a href="http://selendroid.io/gestures.html">Mobile Gestures</a></li> </ul> </body>