106 lines
5.5 KiB
TypeScript
106 lines
5.5 KiB
TypeScript
import assert from 'assert';
|
|
import fs from 'fs';
|
|
import path from 'path';
|
|
|
|
describe('UI tests', () => {
|
|
let html: string;
|
|
|
|
before(async () => {
|
|
// Load the HTML file
|
|
const htmlPath = path.join(__dirname, '../public/index.html');
|
|
html = fs.readFileSync(htmlPath, 'utf8');
|
|
});
|
|
|
|
it('HTML structure is valid and properly semantic', () => {
|
|
// DOCTYPE and language
|
|
assert.ok(html.includes('<!DOCTYPE html>'), 'DOCTYPE declaration present');
|
|
assert.ok(html.match(/<html\s+lang="en">/), 'HTML element with lang attribute');
|
|
|
|
// Head section - metadata and critical dependencies
|
|
assert.ok(html.includes('<head>'), 'Head section exists');
|
|
assert.ok(html.includes('<title>WildDuck Aliases</title>'), 'Title element with correct text');
|
|
assert.ok(html.includes('content="Aliases for Wild Duck"'), 'Description meta tag present');
|
|
assert.ok(html.includes('name="viewport"'), 'Viewport meta tag for responsiveness');
|
|
assert.ok(html.includes('content="width=device-width, initial-scale=1"'), 'Viewport allows responsive design');
|
|
|
|
// Bootstrap integration
|
|
assert.ok(html.includes('bootstrap@5.3.2/dist/css/bootstrap.min.css'), 'Bootstrap CSS linked with version');
|
|
assert.ok(html.match(/integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV\/Dwwykc2MPK8M2HN"/),
|
|
'Bootstrap CSS has SRI integrity check');
|
|
assert.ok(html.includes('bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js'), 'Bootstrap JS bundle linked');
|
|
assert.ok(html.match(/integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN\/o0jlpcV8Qyq46cDfL"/),
|
|
'Bootstrap JS has SRI integrity check');
|
|
|
|
// Template engine
|
|
assert.ok(html.includes('handlebars@latest/dist/handlebars.js'), 'Handlebars library linked');
|
|
|
|
// Application script
|
|
assert.ok(html.includes('src="index.js"'), 'Application JS file referenced');
|
|
assert.ok(html.includes('async'), 'Script tag has async attribute for non-blocking load');
|
|
|
|
// Body structure - semantic layout
|
|
assert.ok(html.includes('<body>'), 'Body element exists');
|
|
assert.ok(html.includes('class="wrapper"'), 'Wrapper container for layout');
|
|
assert.ok(html.includes('class="header"'), 'Header section');
|
|
assert.ok(html.includes('id="container"'), 'Main container for dynamic content');
|
|
|
|
// Image and heading
|
|
assert.ok(html.includes('class="logo"'), 'Logo image with class');
|
|
assert.ok(html.includes('src="logo.jpg"'), 'Logo source specified');
|
|
assert.ok(html.includes('<h1>WildDuck Aliases</h1>'), 'Main heading with correct text');
|
|
|
|
// Ensure no structural errors (closing tags)
|
|
const bodyCount = (html.match(/<body>/g) || []).length;
|
|
const bodyCloseCount = (html.match(/<\/body>/g) || []).length;
|
|
assert.strictEqual(bodyCount, bodyCloseCount, 'Body tags properly closed');
|
|
|
|
const htmlCount = (html.match(/<html/g) || []).length;
|
|
const htmlCloseCount = (html.match(/<\/html>/g) || []).length;
|
|
assert.strictEqual(htmlCount, htmlCloseCount, 'HTML tags properly closed');
|
|
});
|
|
|
|
it('JavaScript file exists and has expected functions', () => {
|
|
const jsPath = path.join(__dirname, '../public/index.js');
|
|
const js = fs.readFileSync(jsPath, 'utf8');
|
|
|
|
assert.ok(js.includes('function renderAliases'), 'renderAliases function exists');
|
|
assert.ok(js.includes('function createAlias'), 'createAlias function exists');
|
|
assert.ok(js.includes('function deleteAlias'), 'deleteAlias function exists');
|
|
assert.ok(js.includes('function copyToClipboard'), 'copyToClipboard function exists');
|
|
assert.ok(js.includes('fetch(\'/aliases\')'), 'Initial fetch call exists');
|
|
});
|
|
|
|
it('CSS defines valid styling for page layout and responsiveness', () => {
|
|
const styleMatch = html.match(/<style>([\s\S]*?)<\/style>/);
|
|
assert.ok(styleMatch, 'Style block exists');
|
|
const styles = styleMatch[1];
|
|
|
|
// Universal reset - critical for consistent styling
|
|
assert.ok(/\*\s*{[\s\S]*?margin:\s*0[\s\S]*?padding:\s*0[\s\S]*?box-sizing:\s*border-box/.test(styles),
|
|
'Universal reset defines margin, padding, and box-sizing');
|
|
|
|
// HTML/Body layout - ensures proper container sizing
|
|
assert.ok(/html\s*{[\s\S]*?height:\s*100%/.test(styles),
|
|
'HTML height set to 100%');
|
|
assert.ok(/body\s*{[\s\S]*?min-height:\s*100%[\s\S]*?display:\s*flex[\s\S]*?justify-content:\s*center/.test(styles),
|
|
'Body uses flexbox for centering (min-height, display, justify-content)');
|
|
|
|
// Logo responsive styling
|
|
assert.ok(/img\.logo\s*{[\s\S]*?display:\s*block[\s\S]*?width:\s*30%[\s\S]*?max-width:\s*100%[\s\S]*?max-height:\s*100%/.test(styles),
|
|
'Logo is block-level and responsive with width/max constraints');
|
|
|
|
// Text alignment
|
|
assert.ok(/\.wrapper\s*{[\s\S]*?text-align:\s*center/.test(styles),
|
|
'Wrapper centers text content');
|
|
assert.ok(/\.table\s*{[\s\S]*?text-align:\s*left/.test(styles),
|
|
'Table content is left-aligned for readability');
|
|
|
|
// Container spacing
|
|
assert.ok(/#container\s*{[\s\S]*?padding-top:\s*50px/.test(styles),
|
|
'Container has top padding for spacing');
|
|
|
|
// Bootstrap CSS is loaded
|
|
assert.ok(html.includes('bootstrap@5.3.2/dist/css/bootstrap.min.css'),
|
|
'Bootstrap CSS is linked from CDN');
|
|
});
|
|
}); |