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', 'async',
'js-cookie', 'js-cookie',
'security', 'security',
'split-grid',
'tinycon', 'tinycon',
'underscore', 'underscore',
'unorm', 'unorm',

5
src/package-lock.json generated
View file

@ -7933,6 +7933,11 @@
"memory-pager": "^1.0.2" "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": { "split2": {
"version": "3.2.2", "version": "3.2.2",
"resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz", "resolved": "https://registry.npmjs.org/split2/-/split2-3.2.2.tgz",

View file

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

View file

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

View file

@ -6,8 +6,6 @@ body {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
height: 100%; height: 100%;
display: flex;
flex-direction: row;
overflow: hidden; overflow: hidden;
} }
@ -15,8 +13,21 @@ body {
display: none; 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 { #iframe-container {
width: 80%;
height: 100%; height: 100%;
overflow: auto hidden; overflow: auto hidden;
} }
@ -30,11 +41,8 @@ body {
#mocha { #mocha {
font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
border-right: 2px solid #999;
flex: 1 auto;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
width:20%;
font-size:80%; font-size:80%;
} }

View file

@ -143,6 +143,14 @@ $(() => (async () => {
require.setLibraryURI(absUrl('../../javascripts/lib')); require.setLibraryURI(absUrl('../../javascripts/lib'));
require.setGlobalKeyPath('require'); 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, // 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 // 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 // require-kernel to use the wrapped .define() via require.setGlobalKeyPath(), and using the