- Set up Vitest for unit testing with jsdom - Add test setup with Web Audio API and requestAnimationFrame mocks - Create initial test suites for DOM and animations modules - Add test scripts to package.json (test, test:ui, test:run, coverage) - Update CI workflow to include test execution - Create CONTRIBUTING.md with conventional commits guidelines - Create SECURITY.md with security policy - Update ESLint config to support test files - All tests passing (8/8) Co-authored-by: ZaneThePython <102631678+ZaneThePython@users.noreply.github.com>
70 lines
2.0 KiB
JavaScript
70 lines
2.0 KiB
JavaScript
import { describe, it, expect, beforeEach } from 'vitest';
|
|
import { DOM, getNavElements, getMainElements } from '../assets/js/modules/dom.js';
|
|
|
|
describe('DOM Module', () => {
|
|
beforeEach(() => {
|
|
// Setup basic HTML structure
|
|
document.body.innerHTML = `
|
|
<div class="container">
|
|
<div class="avatar">Avatar</div>
|
|
<h1 class="brand-name">ZaneDev</h1>
|
|
<p class="tagline">Tagline</p>
|
|
<nav class="navigation">
|
|
<a href="#" class="nav-button">Button 1</a>
|
|
<a href="#" class="nav-button">Button 2</a>
|
|
</nav>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
describe('DOM utility', () => {
|
|
it('should cache and retrieve elements', () => {
|
|
const avatar = DOM.get('.avatar');
|
|
expect(avatar).toBeTruthy();
|
|
expect(avatar.textContent).toBe('Avatar');
|
|
|
|
// Should return cached version on second call
|
|
const avatarAgain = DOM.get('.avatar');
|
|
expect(avatarAgain).toBe(avatar);
|
|
});
|
|
|
|
it('should get all elements matching selector', () => {
|
|
const buttons = DOM.getAll('.nav-button');
|
|
expect(buttons).toHaveLength(2);
|
|
});
|
|
|
|
it('should clear cache', () => {
|
|
DOM.get('.avatar');
|
|
expect(Object.keys(DOM.cache).length).toBeGreaterThan(0);
|
|
|
|
DOM.clearCache();
|
|
expect(Object.keys(DOM.cache).length).toBe(0);
|
|
});
|
|
});
|
|
|
|
describe('getMainElements', () => {
|
|
it('should return main UI elements', () => {
|
|
const elements = getMainElements();
|
|
|
|
expect(elements.avatar).toBeTruthy();
|
|
expect(elements.brandName).toBeTruthy();
|
|
expect(elements.tagline).toBeTruthy();
|
|
});
|
|
});
|
|
|
|
describe('getNavElements', () => {
|
|
it('should return navigation elements', () => {
|
|
// Add required elements for navigation
|
|
document.body.innerHTML += `
|
|
<div class="content-section"></div>
|
|
<button class="close-button">Close</button>
|
|
`;
|
|
|
|
const elements = getNavElements();
|
|
|
|
expect(elements.navButtons).toBeTruthy();
|
|
expect(elements.navButtons.length).toBeGreaterThan(0);
|
|
});
|
|
});
|
|
});
|