IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Added minimal navigation breadcrumbs to doctests.

Browse Source
This commit is contained in:
Uwe Oestermeier
2023-05-09 13:25:39 +02:00
parent 13e0473328
commit 9501264f08
71 changed files with 5700 additions and 5332 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/events.html
+67 -61
View File
@@ -1,26 +1,25 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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>
</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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
</head>
<body onload="Doctest.run()">
<h1><a href="index.html">lib.</a>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;
@@ -31,46 +30,53 @@ handler actions log messages that can be tested.</p>
&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">
<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()
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)
}
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)
let womenSel = Events.selector(women)
let movieSel = Events.selector(movie)
Events.simulateEvent('click', MouseEvent, { targetSelector: womenSel })
Events.simulateEvent('click', MouseEvent, { targetSelector: movieSel })
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>
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>
</html>