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 declaration present'); assert.ok(html.match(//), 'HTML element with lang attribute'); // Head section - metadata and critical dependencies assert.ok(html.includes(''), 'Head section exists'); assert.ok(html.includes('WildDuck Aliases'), '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 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('

WildDuck Aliases

'), 'Main heading with correct text'); // Ensure no structural errors (closing tags) const bodyCount = (html.match(//g) || []).length; const bodyCloseCount = (html.match(/<\/body>/g) || []).length; assert.strictEqual(bodyCount, bodyCloseCount, 'Body tags properly closed'); const htmlCount = (html.match(//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(/