js-shell-emulator
Version:
JS Shell Emulator is a dead simple JavaScript library for emulating a terminal environment
144 lines (119 loc) • 4.24 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsShell.js manual test</title>
<style>
.customized-line {
font-weight: bold;
background-color: #ff9292;
color: black;
}
#restart-btn {
display: none;
}
</style>
</head>
<body>
<h1>jsShell.js manual test suite</h1>
<div id="shell-1"></div>
<div id="shell-2-container"></div>
<div id="shell-3"></div>
<div id="shell-4"></div>
<button id="restart-btn" onclick="startTestSuite()">Restart test suite</button>
<br/>
<br/>
<script type="module">
import { JsShell } from './jsShell.js';
const startTestSuite = async() => {
const t2Container = document.getElementById('shell-2-container');
t2Container.innerHTML = '';
const restartBtn = document.getElementById('restart-btn');
restartBtn.style.display = 'none';
const sh1 = new JsShell('shell-1');
sh1.setHeight('100px')
.setWidth('100%')
.print('Hello, world! I\'m shell-1')
.setPrompt('> ');
const name = await sh1.input('What\'s your name?');
sh1.print(`Welcome, ${name}`);
const sh3 = new JsShell('#shell-3', {
height: '150px',
width: '100%',
backgroundColor: '#f1f2f5',
textColor: 'black'
}).setVisible(false);
const sh2Element = document.createElement('div');
sh2Element.id = 'shell-2';
const sh2 = new JsShell(sh2Element);
sh2.setHeight('150px')
.setWidth('100%')
.setBackgroundColor('blue');
t2Container.appendChild(sh2.html);
sh2.print('Hello again! I\'m shell-2.')
.print('I\'ll ask you a few tasks to ensure the module is still working fine.');
await sh2.pause('PRESS ANY KEY IF THAT\'S OK FOR YOU');
sh2.print('Great!');
await sh2.type('I can write...');
await JsShell.sleep(500);
await sh2.type('on a single line. ');
await JsShell.sleep(500);
sh2.write('Cool isn\'t it?');
await JsShell.sleep(500);
sh2.newLine()
.newLine()
.print('But also break a few lines')
.newLine()
.newLine()
.newLine()
.print('Impressive.. uh?');
await JsShell.sleep(500);
sh3.setVisible(true)
.print('Hi, I\'m shell-3.')
.printHTML('<strong class=\'customized-line\'>Here\'s a customized HTML tag.</strong>')
.printHTML('<a href="https://github.com/francoisburdy/js-shell-emulator">Github Link</a>');
const password = await sh3.password('Enter password (a fake one! I\'ll display it):');
sh3.print(`Your password is: ${password}`)
.print('Please go back to shell-2');
sh2.clear()
.focus()
.setPrompt('> ');
await sh2.expect(['next'], 'type "next" please', 'try again');
sh2.print('thanks');
const sh4 = new JsShell('shell-4', {
fontFamily: 'monospace',
cursorType: 'thin',
cursorSpeed: 400
});
sh4.setHeight('180px')
.setWidth('100%')
.setBackgroundColor('darkblue')
.print('Hi, I\'m shell-4')
.setPrompt('$ ');
await sh4.expect(
['done', 'stop'],
'I expect you to type any command that <strong>IS NOT</strong> "done" or "stop", multiple times. Can you do that?',
'Thank you. You can do that again, or use "stop" to proceed.'
);
sh4.clear()
.setBackgroundColor('#ffc700')
.setTextColor('black')
.print('Thanks!')
.setPrompt('> ');
const didConfirm = await sh4.confirm('Now check the DevTools console, there should be no JavaScript error. Is that ok?');
if (didConfirm) {
sh4.setBackgroundColor('#00c142')
.print('Amazing! Tests passed. Good bye!');
} else {
sh4.setBackgroundColor('red')
.setTextColor('white')
.printHTML('<strong>Damned...would you please open an issue on the <a href=\'https://github.com/francoisburdy/js-shell-emulator\'>GitHub repo</a>?</strong>');
}
restartBtn.style.display = 'block';
};
window.startTestSuite = startTestSuite;
startTestSuite();
</script>
</body>
</html>