Skip to content

Instantly share code, notes, and snippets.

@brianbancroft brianbancroft/README.md Secret
Last active Feb 27, 2019

Embed
What would you like to do?
Testcafe Tutorial Sandbox

Sandbox for Testcafe Introduction

This is the code that accompanies the testcafe tutorial for the sandbox application. The goal is to gloss over this part, and focus only on the testing.

<!DOCTYPE html>
<html>
<head>
<!-- LEAFLET STYLES -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/leaflet.css"
/>
<style>
header,
h2 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
header {
margin: 2vh 10vw;
width: 80vw;
text-align: center;
font-size: 20px;
}
.container {
display: flex;
flex-direction: row;
margin: 5vh 5vw;
}
#map {
border: 3px solid #888;
margin-left: 5vw;
width: 30vw;
height: 80vh;
}
.button-group-container {
width: 30vw;
margin-left: 5vw;
display: flex;
flex-direction: column;
}
.button-group-container button {
height: 29px;
width: 225px;
text-align: left;
text-transform: uppercase;
border-radius: 3px;
border: 2px solid #888;
color: #222;
font-weight: 500;
cursor: pointer;
}
.button-group-container button:before {
content: "· ";
}
.button-group {
display: flex;
flex-direction: row;
margin-bottom: 5px;
}
.button-status,
.button-not-engaged,
.button-engaged {
height: 25px;
width: 25px;
line-height: 25px;
text-align: center;
vertical-align: middle;
margin-left: 5px;
}
.button-not-engaged {
background-color: red;
border: 2px solid #888;
border-radius: 3px;
}
.button-not-engaged:before {
content: "𝗫";
}
.button-engaged {
background-color: green;
border: 2px solid #888;
border-radius: 3px;
}
.button-engaged:before {
content: "";
}
.infobox-label,
.infobox-value {
border: 2px solid #888;
border-radius: 3px;
text-align: center;
font-size: 11px;
font-weight: 500;
vertical-align: middle;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
user-select: none;
cursor: not-allowed;
}
.infobox-label {
height: 29px;
width: 165px;
margin-right: 5px;
}
.infobox-value {
width: 240px;
height: 27px;
}
</style>
</head>
<body>
<header><h2>Leaflet Acceptance Sandbox</h2></header>
<div class="container">
<div id="map"></div>
<div class="button-group-container">
<div class="button-group">
<button id="addLayer">Add OSM Layer</button>
<div
class="button-status button-not-engaged"
id="addLayerStatus"
></div>
</div>
<div class="button-group">
<button id="panMap">Pan Map</button>
<div class="button-status button-not-engaged" id="panMapStatus"></div>
</div>
<div class="button-group">
<button id="zoomMap">Zoom Map</button>
<div
class="button-status button-not-engaged"
id="zoomMapStatus"
></div>
</div>
<div class="button-group">
<button id="addCycleLayer">Add Open Cycle Map Layer</button>
<div
class="button-status button-not-engaged"
id="addCycleLayerStatus"
></div>
</div>
<div class="button-group">
<button id="addWMSLayer">Add WMS Layer</button>
<div
class="button-status button-not-engaged"
id="addWMSLayerStatus"
></div>
</div>
<div class="button-group">
<button id="addMarker">Add Marker Layer</button>
<div
class="button-status button-not-engaged"
id="addMarkerStatus"
></div>
</div>
<div class="button-group">
<button id="clickMarker">Click on Marker Layer</button>
<div
class="button-status button-not-engaged"
id="clickMarkerStatus"
></div>
</div>
<h2>Values for Integration Tests</h2>
<div class="button-group">
<div class="infobox-label">Map Centre</div>
<input class="infobox-value" id="mapCenter" />
</div>
<div class="button-group">
<div class="infobox-label">Zoom Level</div>
<input class="infobox-value" id="zoomLevel" />
</div>
<div class="button-group">
<div class="infobox-label">Maptiks Trackcode</div>
<input class="infobox-value" id="trackingCode" />
</div>
<div class="button-group">
<div class="infobox-label">Bounding Box</div>
<input class="infobox-value" id="mapBounds" />
</div>
<div class="button-group">
<div class="infobox-label">Marker Location</div>
<input class="infobox-value" id="markerLocation" />
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0/leaflet.js"></script>
<script src="./index.js"></script>
</body>
</html>
(function (L) {
const engageSwitch = elemId => {
document.querySelector(`${elemId}Status`).classList.add('button-engaged');
document.querySelector(`${elemId}Status`).classList.remove('button-not-engaged');
};
const updateInfoBoxes = () => {
document.querySelector('#mapCenter').value = [
parseFloat(map.getCenter().lng.toFixed(5)),
parseFloat(map.getCenter().lat.toFixed(5))
];
document.querySelector('#zoomLevel').value = map.getZoom();
document.querySelector('#mapBounds').value = [
parseFloat(map.getBounds()._southWest.lng.toFixed(5)),
parseFloat(map.getBounds()._southWest.lat.toFixed(5)),
parseFloat(map.getBounds()._northEast.lng.toFixed(5)),
parseFloat(map.getBounds()._northEast.lat.toFixed(5))
];
};
// Generates a random integer between 6 and 22
const randomZoomLevel = () => Math.floor(Math.random() * 16) + 6;
const randomLonLat = () => [
Math.floor(Math.random() * 360) - 180,
Math.floor(Math.random() * 180) - 90
];
[
'#addLayer',
'#zoomMap',
'#panMap',
'#addCycleLayer',
'#addMarker',
'#clickMarker'
].forEach(elem => {
document.querySelector(elem).addEventListener('click', () => {
engageSwitch(elem);
});
});
// MAP CONSTANTS
const defaultCenter = [51.42, -116.22];
let mapCenter = defaultCenter;
const osmLayer = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const cycleLayer = 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png';
const osmLayerAttribution =
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
const cycleLayerAttribution =
'Maps &copy; <a href="http://www.thunderforest.com/">Thunderforest</a>, Data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>';
// INITIALIZE MAP
const map = L.map('map', {
center: defaultCenter,
zoom: 13,
});
map.on('layeradd', updateInfoBoxes);
map.on('moveend', updateInfoBoxes);
map.on('zoomend', updateInfoBoxes);
// LAYER
L.tileLayer(osmLayer, {
attribution: osmLayerAttribution,
}).addTo(map);
// ADD LAYER TEST FUNCTIONALITY
document.querySelector('#addLayer').addEventListener('click', () => {
L.tileLayer(osmLayer, {
attribution: osmLayerAttribution
}).addTo(map);
});
// PAN MAP FUNCTIONALITY
document.querySelector('#panMap').addEventListener('click', () => {
mapCenter = randomLonLat();
map.panTo(mapCenter, {
animate: true
});
updateInfoBoxes();
});
// Zoom Map Functionality
document.querySelector('#zoomMap').addEventListener('click', () => {
map.setView(mapCenter, randomZoomLevel(), {
animate: false
});
});
// Add Open Cycle Map Layers
document.querySelector('#addCycleLayer').addEventListener('click', () => {
L.tileLayer(cycleLayer, {
attribution: cycleLayerAttribution
}).addTo(map);
});
// Add Marker Layers
let marker;
document.querySelector('#addMarker').addEventListener('click', () => {
marker = L.marker(defaultCenter).addTo(map);
document.querySelector('#markerLocation').value = defaultCenter.reverse();
});
// Click on Marker Layers
document.querySelector('#clickMarker').addEventListener('click', () => {
marker.fire('click');
});
}(window.L));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.