166 lines
5.3 KiB
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">
|
|
<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>
|