Some checks failed
- Create tests/frontend/utils/format.test.js with 24 tests for formatting utilities - Create tests/frontend/ui/downloads.test.js with 10 tests for DOM rendering functions - Update vitest.config.js to support jsdom environment for frontend tests - All 34 tests pass and cover edge cases (null, zero, large numbers, DOM structure)
101 lines
3.9 KiB
JavaScript
101 lines
3.9 KiB
JavaScript
// Copyright (c) 2026 Gordon Bolton. MIT License.
|
|
/**
|
|
* @vitest-environment jsdom
|
|
* Tests for client/src/ui/downloads.js
|
|
*
|
|
* Verifies DOM rendering functions for tag badges and client logos.
|
|
* Uses jsdom to create and assert DOM structure.
|
|
*/
|
|
|
|
import { renderTagBadges } from '../../../client/src/ui/downloads.js';
|
|
|
|
describe('renderTagBadges', () => {
|
|
it('returns empty fragment when showAll is false and no matchedUserTag', () => {
|
|
const result = renderTagBadges([], false, null);
|
|
expect(result).toBeTruthy();
|
|
expect(result.childNodes.length).toBe(0);
|
|
});
|
|
|
|
it('returns empty fragment when tagBadges is empty', () => {
|
|
const result = renderTagBadges([], true, null);
|
|
expect(result).toBeTruthy();
|
|
expect(result.childNodes.length).toBe(0);
|
|
});
|
|
|
|
it('renders single matched badge when matchedUserTag is provided', () => {
|
|
const result = renderTagBadges([], false, 'user1');
|
|
expect(result.childNodes.length).toBe(1);
|
|
const badge = result.childNodes[0];
|
|
expect(badge.className).toBe('download-user-badge');
|
|
expect(badge.textContent).toBe('user1');
|
|
});
|
|
|
|
it('renders unmatched badges when showAll is true', () => {
|
|
const tagBadges = [{ label: 'tag1', matchedUser: null }];
|
|
const result = renderTagBadges(tagBadges, true, null);
|
|
expect(result.childNodes.length).toBe(1);
|
|
const badge = result.childNodes[0];
|
|
expect(badge.className).toBe('download-user-badge unmatched');
|
|
expect(badge.textContent).toBe('tag1');
|
|
});
|
|
|
|
it('renders matched badges when showAll is true', () => {
|
|
const tagBadges = [{ label: 'tag1', matchedUser: 'user1' }];
|
|
const result = renderTagBadges(tagBadges, true, null);
|
|
expect(result.childNodes.length).toBe(1);
|
|
const badge = result.childNodes[0];
|
|
expect(badge.className).toBe('download-user-badge');
|
|
expect(badge.textContent).toBe('user1');
|
|
});
|
|
|
|
it('renders multiple badges in correct order (unmatched first)', () => {
|
|
const tagBadges = [
|
|
{ label: 'tag1', matchedUser: 'user1' },
|
|
{ label: 'tag2', matchedUser: null }
|
|
];
|
|
const result = renderTagBadges(tagBadges, true, null);
|
|
expect(result.childNodes.length).toBe(2);
|
|
expect(result.childNodes[0].textContent).toBe('tag2');
|
|
expect(result.childNodes[0].className).toBe('download-user-badge unmatched');
|
|
expect(result.childNodes[1].textContent).toBe('user1');
|
|
expect(result.childNodes[1].className).toBe('download-user-badge');
|
|
});
|
|
|
|
it('handles mixed matched and unmatched badges', () => {
|
|
const tagBadges = [
|
|
{ label: 'tag1', matchedUser: null },
|
|
{ label: 'tag2', matchedUser: 'user2' },
|
|
{ label: 'tag3', matchedUser: null }
|
|
];
|
|
const result = renderTagBadges(tagBadges, true, null);
|
|
expect(result.childNodes.length).toBe(3);
|
|
// Unmatched badges come first
|
|
expect(result.childNodes[0].className).toBe('download-user-badge unmatched');
|
|
expect(result.childNodes[0].textContent).toBe('tag1');
|
|
expect(result.childNodes[1].className).toBe('download-user-badge unmatched');
|
|
expect(result.childNodes[1].textContent).toBe('tag3');
|
|
// Matched badges come after
|
|
expect(result.childNodes[2].className).toBe('download-user-badge');
|
|
expect(result.childNodes[2].textContent).toBe('user2');
|
|
});
|
|
|
|
it('prefers matchedUserTag over tagBadges when showAll is false', () => {
|
|
const tagBadges = [{ label: 'tag1', matchedUser: 'user1' }];
|
|
const result = renderTagBadges(tagBadges, false, 'override');
|
|
expect(result.childNodes.length).toBe(1);
|
|
expect(result.childNodes[0].textContent).toBe('override');
|
|
});
|
|
|
|
it('handles null tagBadges gracefully', () => {
|
|
const result = renderTagBadges(null, true, null);
|
|
expect(result).toBeTruthy();
|
|
expect(result.childNodes.length).toBe(0);
|
|
});
|
|
|
|
it('handles undefined tagBadges gracefully', () => {
|
|
const result = renderTagBadges(undefined, true, null);
|
|
expect(result).toBeTruthy();
|
|
expect(result.childNodes.length).toBe(0);
|
|
});
|
|
});
|