siesta-lite
Version:
Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers
139 lines (104 loc) • 5.06 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js">/*
Siesta 5.6.1
Copyright(c) 2009-2022 Bryntum AB
https://bryntum.com/contact
https://bryntum.com/products/siesta/license
*/
<span id='Siesta-Recorder-Role-CanRecordPointOfInterest'>/**
</span>@class Siesta.Recorder.Role.CanRecordPointOfInterest
A mixin, providing the feature of recording the "moveCursorTo" event, when cursor is moved over certain
"point of interest", which can be specified as an array of CSS selectors: {@link #moveCursorToSelectors}.
This feature ensures that cursor is following the same path, activating the same UI elements as during recording
session, like menu items, various hover elements etc.
*/
Role('Siesta.Recorder.Role.CanRecordPointOfInterest', {
does : Siesta.Util.Role.CanMergeArrayAttributeFromClassHierarchy,
has : {
<span id='Siesta-Recorder-Role-CanRecordPointOfInterest-cfg-moveCursorToSelectors'> /**
</span> * @cfg {Array[String]} moveCursorToSelectors An array of strings with CSS selectors. If the mouse is
* moved upon a target, matching any of these selectors, a `moveCursorTo` will be recorded.
*
* Used with {@link #recordPointsOfInterest} option.
*/
moveCursorToSelectors : Joose.I.Array,
pointOfInterestSelector : null,
<span id='Siesta-Recorder-Role-CanRecordPointOfInterest-cfg-recordPointsOfInterest'> /**
</span> * @cfg {Boolean} recordPointsOfInterest Set this option to `true` to enable recording of "points of interest",
* specified with the {@link #moveCursorToSelectors} CSS selectors
*
* This is useful in lots of scenarios, for example when triggering a menu item to show. You cannot click the menu item right away,
* since it's hidden until you move the cursor over the top-level menu header.
*
* So if you will add the CSS selector for the top-level menu header in this config, recorder will insert `moveCursorTo` actions
* every time mouse hovers it. This makes recording complex scenarios more robust.
*/
recordPointsOfInterest : true,
lastPointOfInterestEl : null
},
override : {
initialize : function (cfg) {
// will be merged from all the base classes, and also prepended with the possible config value, passed by the user
this.moveCursorToSelectors = this.mergeArrayAttributeFromClassHierarchy('moveCursorToSelectors', cfg)
this.pointOfInterestSelector = this.recordPointsOfInterest ? this.moveCursorToSelectors.join(',') : null
if (this.pointOfInterestSelector) this.recordMouseMove = true
this.SUPERARG(arguments)
},
onStart : function () {
this.SUPERARG(arguments)
if (this.pointOfInterestSelector) {
this.lastPointOfInterestEl = null;
}
},
onStop : function () {
this.SUPERARG(arguments)
if (this.pointOfInterestSelector) {
this.lastPointOfInterestEl = null;
}
},
processBodyMouseOver : function(e) {
this.SUPERARG(arguments)
var pointOfInterestSelector = this.pointOfInterestSelector
if (!pointOfInterestSelector) return
var pointOfInterestEl = e.target;
if (
this.matches(pointOfInterestEl, pointOfInterestSelector)
|| (pointOfInterestEl = this.closest(e.target, pointOfInterestSelector, 10))
) {
if (pointOfInterestEl !== this.lastPointOfInterestEl) {
this.lastPointOfInterestEl = pointOfInterestEl
// note, that `moveCursorTo` action is still recorded with real target of the event,
// which may be different from the `pointOfInterestEl`
this.addMoveCursorAction(e)
}
}
},
processBodyMouseOut : function (e) {
this.SUPERARG(arguments)
if (!this.pointOfInterestSelector || !this.lastPointOfInterestEl) return
if (!this.contains(this.lastPointOfInterestEl, e.target)) {
this.lastPointOfInterestEl = null
}
}
}
// eof methods
});
</pre>
</body>
</html>