iwmlib/lib/pixi/flippable.test.html

166 lines
5.3 KiB
HTML

<!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>
<a href="../index.html">lib.</a><a href="index.html">pixi.</a>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">
&lt;main id="main" class="container interactive" style="width: 100%; height:400px; border: 1px solid gray;"&gt;
&lt;canvas id="canvasTest" draggable="false" style="position: absolute; z-index: 1000; user-select: none; pointer-events: none;"&gt;&lt;/canvas&gt;
&lt;canvas id="canvasProduction" style="position: absolute; z-index: 500; user-select: none;"&gt;&lt;/canvas&gt;
&lt;/main&gt;
</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>