Adding tests, bumping packages with audit warnings

2025-12-09 00:35:46 +02:00
parent 58363c2c1d
commit b8d4208caf
7 changed files with 2183 additions and 467 deletions
--- a/test/ui.test.ts
+++ b/test/ui.test.ts
@@ -0,0 +1,106 @@
+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');
+    });
+});