tests: Make the Mocha results area resizable

This commit is contained in:
Richard Hansen 2021-06-05 03:34:55 -04:00
parent c4239b6059
commit 45ca82fd9f
6 changed files with 34 additions and 8 deletions

View file

@ -41,6 +41,7 @@ const LIBRARY_WHITELIST = [
'async',
'js-cookie',
'security',
'split-grid',
'tinycon',
'underscore',
'unorm',

5
src/package-lock.json generated
View file

@ -7933,6 +7933,11 @@
"memory-pager": "^1.0.2"
}
},
"split-grid": {
"version": "1.0.11",
"resolved": "https://registry.npmjs.org/split-grid/-/split-grid-1.0.11.tgz",
"integrity": "sha512-ELtFtxc3r5we5GZfe6Fi0BFFxIi2M6BY1YEntBscKRDD3zx4JVHqx2VnTRSQu1BixCYSTH3MTjKd4esI2R7EgQ=="
},
"split2": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz",

View file

@ -65,6 +65,7 @@
"security": "1.0.0",
"semver": "5.7.1",
"socket.io": "^2.4.1",
"split-grid": "^1.0.11",
"terser": "^4.7.0",
"threads": "^1.4.0",
"tiny-worker": "^2.3.0",

View file

@ -8,8 +8,11 @@
</head>
<body>
<div id="console"></div>
<div id="mocha"></div>
<div id="iframe-container"></div>
<div id="split-view">
<div id="mocha"></div>
<div id="separator"></div>
<div id="iframe-container"></div>
</div>
<script src="../../static/js/require-kernel.js"></script>
<script src="../../static/js/vendors/jquery.js"></script>

View file

@ -6,8 +6,6 @@ body {
padding: 0px;
margin: 0px;
height: 100%;
display: flex;
flex-direction: row;
overflow: hidden;
}
@ -15,8 +13,21 @@ body {
display: none;
}
#split-view {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 20% 10px 1fr;
}
#separator {
grid-column: 2;
grid-row: 1/-1;
cursor: col-resize;
background-color: #999;
}
#iframe-container {
width: 80%;
height: 100%;
overflow: auto hidden;
}
@ -30,11 +41,8 @@ body {
#mocha {
font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
border-right: 2px solid #999;
flex: 1 auto;
height: 100%;
overflow: auto;
width:20%;
font-size:80%;
}

View file

@ -143,6 +143,14 @@ $(() => (async () => {
require.setLibraryURI(absUrl('../../javascripts/lib'));
require.setGlobalKeyPath('require');
const Split = require('split-grid/dist/split-grid.min');
new Split({
columnGutters: [{
track: 1,
element: document.getElementById('separator'),
}],
});
// This loads the test specs serially. While it is technically possible to load them in parallel,
// the code would be very complex (it involves wrapping require.define(), configuring
// require-kernel to use the wrapped .define() via require.setGlobalKeyPath(), and using the