Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

enhancement/2-node-server #4

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

enhancement/2-node-server #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
.DS_Store
.package-lock.json

/node_modules
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
"description": "classroom for understanding tests",
"main": "app.js",
"scripts": {
"start": "node ./server",
"test": "./node_modules/karma/bin/karma start"
},
"repository": {
Expand All @@ -21,6 +22,7 @@
},
"homepage": "https://github.com/blacklabel/highcharts-tests#readme",
"dependencies": {
"ejs": "^3.1.8",
"express": "^4.18.1",
"highcharts": "^10.1.0",
"qunit": "^2.19.1"
Expand Down
30 changes: 30 additions & 0 deletions server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// Server to listing tests

const path = require('path'),
fs = require('fs'),
express = require('express'),
app = express(),
testsPath = path.join(__dirname, './tests'),
getListOfTests = (urlPath) => fs.readdirSync(urlPath).filter(file => {
return fs.statSync(path.join(urlPath, file)).isDirectory();
});

app.use(express.static(testsPath));
app.set('view engine', 'ejs');

app.get('/', async (req, res) => {
const tests = getListOfTests(testsPath),
currentTest = tests[0];

res.render("index", { tests, currentTest })
});

app.get('/tests', async (req, res) => {
const tests = getListOfTests(testsPath);

res.send(tests)
});

app.listen(process.env.PORT || 3000, () => {
console.log('Classroom server available at: http://localhost:3000');
});
24 changes: 18 additions & 6 deletions tests/initial-test/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.19.1.css">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Initial test</title>

<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.19.1.css">
<script src="https://code.jquery.com/qunit/qunit-2.19.1.js"></script>

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

</head>
<body>
<script src="https://code.jquery.com/qunit/qunit-2.19.1.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>

<div id="qunit"></div>
<div id="qunit" style="position: static;"></div>
<div id="qunit-fixture"></div>
<div id="container" style = "margin-top: 500px;"></div>
<div id="container"></div>

<script src="./demo.js"></script>

</body>
</html>
24 changes: 18 additions & 6 deletions tests/not-working-test/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.19.1.css">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Not working test</title>

<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.19.1.css">
<script src="https://code.jquery.com/qunit/qunit-2.19.1.js"></script>

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

</head>
<body>
<script src="https://code.jquery.com/qunit/qunit-2.19.1.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>

<div id="qunit"></div>
<div id="qunit" style="position: static;"></div>
<div id="qunit-fixture"></div>
<div id="container" style = "margin-top: 500px;"></div>
<div id="container"></div>

<script src="./demo.js"></script>

</body>
</html>
220 changes: 220 additions & 0 deletions views/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,220 @@
<!-- Server page html template -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="https://blacklabel.pl/favicon-32x32.png?v=073247181cd3c88f602aa97547efb7c1" type="image/png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<title>QUnit tests</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
scrollbar-width: thin;
scrollbar-color: #ccc #eee;
}
*::-webkit-scrollbar {
width: 8px;
}
*::-webkit-scrollbar-track {
background: #eee;
}
*::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 5px;
}
*, *:before, *:after { box-sizing: inherit; }
html{
height: 100%;
box-sizing: border-box;
}
body {
overflow: hidden;
min-height: 100%;
padding: 0;
margin: 0;
display: flex;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
}
.material-symbols-rounded {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24
}
.panel {
width: 300px;
box-shadow: 0px 1px 5px 0px #676767;
padding: 16px 16px 0 16px;
display: flex;
flex-direction: column;
}
.panel__header {
display: flex;
margin-bottom: 32px;
align-items: center;
}
.logo {
width: 80px;
height: 80px;
margin-right: 24px;
}
.title {
display: flex;
flex-direction: column;
margin: 0;
}
.title__top {
font-size: 28px;
font-weight: 900;
}
.title__bottom {
font-size: 22px;
line-height: 16px;
font-weight: 200;
}
.nav-header {
display: flex;
}
.nav-header span {
margin-right: 8px;
}
.nav {
overflow-y: auto;
height: calc(100vh - 16px - 80px - 32px - 24px - 16px);
margin: 16px -8px 0 0;
padding: 0 8px 0 0;
}
.nav ul {
display: flex;
flex-direction: column;
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li { margin: 4px 0; }
.nav li a {
padding: 8px;
background-color: #eee;
border-radius: 5px;
text-decoration: none;
color: black;
display: flex;
}
.nav li a:hover { background-color: #ddd; }
.nav a.active { color: #1e40af; }
.nav li a .folder {
margin-right: 8px;
}
.nav li a .play {
margin-left: auto;
opacity: 0;
transition: all ease-in-out 0.1s;
}
.nav li a:hover .play {
margin-left: auto;
opacity: 1;
}
.nav li a:active .play {
transform: translateX(2px);
}
.list-info {
color: #676767;
text-align: center;
font-size: 14px;
margin: 8px 0;
}
.main { width: calc(100% - 300px);}
.main__frame {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<aside class="panel">
<header class="panel__header">
<img class="logo" src="https://blacklabel.pl/static/logo-b8320f2fcb210385f51bfecca7dfb131.png" alt="BlackLabel">
<h1 class="title">
<div class="title__top">QUnit tests</div>
<div class="title__bottom">Classroom</div>
</h1>
</header>
<div class="nav-header">
<span class="material-symbols-rounded">folder_open</span>tests/
</div>
<nav class="nav">
<ul>
<% tests.forEach(element => { %>
<li><a href="#" data-id="<%= element %>" <% if(element === currentTest) { %> class="active" <% } %>>
<span class="material-symbols-rounded folder">folder</span>
<%= element %>
<span class="material-symbols-rounded play">play_circle</span>
</a></li>
<% }) %>
</ul>
<div class="list-info">New tests will appear here after creating their folders.</div>
</nav>
</aside>
<main class="main">
<iframe class="main__frame" src="./<%= currentTest %>/demo.html" frameborder="0"></iframe>
</main>
<script>
let data = [];

function linksLogic() {
const links = document.querySelectorAll('.nav ul li a'),
frame = document.querySelector('.main__frame');

links.forEach(link => data.push(link.dataset.id));

links.forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();

const prevSelectedLink = document.querySelector('a.active');
if (prevSelectedLink) prevSelectedLink.classList.remove('active');

link.classList.add('active');
frame.src = `./${link.dataset.id}/demo.html`;
});
});
};
linksLogic();

setInterval(() => {
async function checkFolders() {
const response = await fetch('/tests'),
newData = await response.json();

if (data.length !== newData.length) {
const listContainer = document.querySelector('.nav ul'),
activeLink = document.querySelector('a.active');
list = [];

newData.forEach(element => {
list.push(`
<li>
<a href="#" data-id="${element}" ${element === activeLink.dataset.id ? 'class="active"' : ''}>
<span class="material-symbols-rounded folder">folder</span>
${element}
<span class="material-symbols-rounded play">play_circle</span>
</a>
</li>
`);
});

listContainer.innerHTML = list.join('');

data = [];
linksLogic();
}
}
checkFolders();
}, 3000);
</script>
</body>
</html>