Restructured library.

2019-03-22 12:54:57 +01:00
parent 1bc2deb4d3
commit d1efeeffa6
1912 changed files with 21424 additions and 21383 deletions
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+	<link rel="stylesheet" href="../css/doctest.css">
+	<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../lib/3rdparty/all.js"></script>
+	<script src="all.js"></script>
+</head>
+<body onload="Doctest.run()" >
+<h1>
+	Events
+</h1>
+<p>
+For functional tests it can be useful to simulate event or record and playback events.
+This module provides basic support for extracting data from events and serializing
+events into a JSON format that allows to save and load sequences of events.
+</p>
+<p>
+Let's look at an example of a HTML structure with click handlers. The click
+handler actions log messages that can be tested.</p>
+<pre><code class="html">
+    &lt;div&gt;
+        &lt;img id="women" src="examples/women.jpeg"
+            onclick="record(event); Doctest.log('Lady clicked')"/&gt;
+        &lt;video id="movie" width="270" data-zoomcap="Kugellaufuhr"
+            onclick="record(event); Doctest.log('Movie clicked')"
+            controls&gt;
+            &lt;source src="examples/movie.mp4" type="video/mp4"&gt;
+        &lt;/vide&gt;
+    &lt;/div&gt;
+</code></pre>
+<div id="example" class="interactive"
+    style="position:relative; width: 100%; border: 1px solid lightgray">
+    <img style="margin:8px" id="women" src="examples/women.jpeg"
+         onclick="record(event); Doctest.log('Lady clicked')"/>
+    <video id="movie" style="margin:8px" width="250" data-zoomcap="Kugellaufuhr"
+        onclick="record(event); Doctest.log('Movie clicked')"
+        onmousedown="record(event)"
+        onmouseup="record(event)"
+        controls>
+        <source src="examples/movie.mp4" type="video/mp4">
+    </video>
+</div>
+<button onclick="eventRecorder.stopRecording(); eventRecorder.startReplay()">Replay</button>
+<script class="doctest">
+
+    var eventRecorder = new EventRecorder()
+
+    function record(event) {
+        let target = event.target
+        target.style.boxShadow = "0px 5px 10px gray"
+        setTimeout(() => target.style.boxShadow = "", 1000)
+        eventRecorder.record(event)
+    }
+
+    let womenSel = Events.selector(women)
+    let movieSel = Events.selector(movie)
+
+    Events.simulateEvent('click', MouseEvent, { targetSelector: womenSel})
+    Events.simulateEvent('click', MouseEvent, { targetSelector: movieSel})
+
+    Doctest.expectLog('Lady clicked',
+                        'Movie clicked')
+
+</script>
+<h2>
+	References
+</h2>
+<ul>
+    <li><a href="https://gist.github.com/iahu/aafc2492d83d70e42c98">Safari Touch Emulator</a></li>
+    <li><a href="https://www.reddit.com/r/javascript/comments/2laqaf/how_to_trigger_a_touch_event/">How to Trigger Touch Events</a></li>
+</ul>
+
+</body>