16085146972

Committed 05 Jul 2025 05:54AM UTC coverage: 74.359% (+58.3%) from 16.097%

Build # 16085146972

Build Type

Pull #240

github

Committed by

web-flow

Commit Message

Merge 111fef750 into d4b0cd3a3

Pull Request Pull Request #240: Add Tests for Components

Coverage Stats

796 of 908 branches covered (87.67%)

Branch coverage included in aggregate %.

5003 of 5047 new or added lines in 22 files covered. (99.13%)

6454 of 8842 relevant lines covered (72.99%)

1.58 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

97.25

/src/components/navigation/__tests__/Header.test.js

import { render, screen } from '@testing-library/svelte';
import { expect, test, describe, vi, beforeEach, afterEach } from 'vitest';
import Header from '../Header.svelte';

// Mock environment variables
vi.mock('$env/static/public', () => ({
        PUBLIC_OBA_REGION_NAME: 'Test Region',
        PUBLIC_OBA_LOGO_URL: '/test-logo.png',
        PUBLIC_NAV_BAR_LINKS: '{"Home": "/", "About": "/about"}'
}));

// Mock ThemeSwitcher component
vi.mock('$lib/ThemeSwitch/ThemeSwitcher.svelte', () => ({
        default: () => '<div data-testid="theme-switcher">Theme Switcher</div>'
}));

// Mock MobileMenu component
vi.mock('../MobileMenu.svelte', () => ({
        default: () => '<div data-testid="mobile-menu">Mobile Menu</div>'
}));

describe('Header', () => {
        beforeEach(() => {
                // Mock ResizeObserver
                global.ResizeObserver = vi.fn().mockImplementation(() => ({
                        observe: vi.fn(),
                        unobserve: vi.fn(),
                        disconnect: vi.fn()
                }));
        });

        afterEach(() => {
                vi.restoreAllMocks();
        });

        test('renders header with logo and region name', () => {
                render(Header);

                // Check for logo
                const logo = screen.getByAltText('Test Region');
                expect(logo).toBeInTheDocument();
                expect(logo).toHaveAttribute('src', '/test-logo.png');

                // Check for region name
                expect(screen.getByText('Test Region')).toBeInTheDocument();
        });

        test('logo and region name are clickable links', () => {
                render(Header);

                const links = screen.getAllByRole('link', { name: /test region/i });
                expect(links).toHaveLength(2); // One for logo, one for text

                // Both should link to home
                links.forEach((link) => {
                        expect(link).toHaveAttribute('href', '/');
                });
        });

        test('has proper semantic structure', () => {
                render(Header);

                // Should have main header content
                const headerContent = screen.getByText('Test Region');
                expect(headerContent).toBeInTheDocument();

                // Should have clickable elements
                const button = screen.getByRole('button');
                expect(button).toBeInTheDocument();
        });

        test('displays mobile menu toggle button', () => {
                render(Header);

                const toggleButton = screen.getByRole('button');
                expect(toggleButton).toHaveAttribute('aria-label', 'Toggle navigation menu');
        });

        test('renders without navigation links when PUBLIC_NAV_BAR_LINKS is empty', () => {
                // This test will use the mocked empty value
                vi.doMock('$env/static/public', () => ({
                        PUBLIC_OBA_REGION_NAME: 'Test Region',
                        PUBLIC_OBA_LOGO_URL: '/test-logo.png',
                        PUBLIC_NAV_BAR_LINKS: ''
                }));

                render(Header);

                // Should still render logo and region name
                expect(screen.getByText('Test Region')).toBeInTheDocument();
        });

        test('has accessible logo with proper alt text', () => {
                render(Header);

                const logo = screen.getByRole('img');
                expect(logo).toHaveAttribute('alt', 'Test Region');
                expect(logo).toBeVisible();
        });

        test('logo container has proper styling classes', () => {
                render(Header);

                const logoContainer = screen.getByText('Test Region').closest('div');
                expect(logoContainer).toHaveClass('flex', 'items-center', 'justify-center', 'gap-x-2');
        });

        test('header has proper CSS classes for styling', () => {
                const { container } = render(Header);

                const header = container.querySelector('div');
                expect(header).toHaveClass(
                        'bg-blur-md',
                        'flex',
                        'items-center',
                        'justify-between',
                        'border-b',
                        'border-gray-500',
                        'bg-white/80',
                        'px-4',
                        'dark:bg-black',
                        'dark:text-white'
                );
        });

        test('region name link has proper styling', () => {
                render(Header);

                const regionLinks = screen.getAllByRole('link', { name: /test region/i });
                const textLink = regionLinks.find((link) => link.textContent === 'Test Region');
                expect(textLink).toHaveClass('block', 'text-xl', 'font-extrabold');
        });
});

1	import { render, screen } from '@testing-library/svelte';	1✔
2	import { expect, test, describe, vi, beforeEach, afterEach } from 'vitest';	1✔
3	import Header from '../Header.svelte';
4
5	// Mock environment variables	1✔
6	vi.mock('$env/static/public', () => ({
7	PUBLIC_OBA_REGION_NAME: 'Test Region',
8	PUBLIC_OBA_LOGO_URL: '/test-logo.png',
9	PUBLIC_NAV_BAR_LINKS: '{"Home": "/", "About": "/about"}'
10	}));
11
12	// Mock ThemeSwitcher component	1✔
13	vi.mock('$lib/ThemeSwitch/ThemeSwitcher.svelte', () => ({
14	default: () => '<div data-testid="theme-switcher">Theme Switcher</div>'
15	}));
16
17	// Mock MobileMenu component	1✔
18	vi.mock('../MobileMenu.svelte', () => ({
19	default: () => '<div data-testid="mobile-menu">Mobile Menu</div>'
20	}));
21
22	describe('Header', () => {	1✔
23	beforeEach(() => {	1✔
24	// Mock ResizeObserver	9✔
25	global.ResizeObserver = vi.fn().mockImplementation(() => ({	9✔
26	observe: vi.fn(),	9✔
27	unobserve: vi.fn(),	9✔
28	disconnect: vi.fn()	9✔
29	}));	9✔
30	});	1✔
31
32	afterEach(() => {	1✔
33	vi.restoreAllMocks();	9✔
34	});	1✔
35
36	test('renders header with logo and region name', () => {	1✔
37	render(Header);	1✔
38
39	// Check for logo	1✔
40	const logo = screen.getByAltText('Test Region');	1✔
41	expect(logo).toBeInTheDocument();	1✔
42	expect(logo).toHaveAttribute('src', '/test-logo.png');	1✔
43
44	// Check for region name	1✔
45	expect(screen.getByText('Test Region')).toBeInTheDocument();	1✔
46	});	1✔
47
48	test('logo and region name are clickable links', () => {	1✔
49	render(Header);	1✔
50
51	const links = screen.getAllByRole('link', { name: /test region/i });	1✔
52	expect(links).toHaveLength(2); // One for logo, one for text	1✔
53
54	// Both should link to home	1✔
55	links.forEach((link) => {	1✔
56	expect(link).toHaveAttribute('href', '/');	2✔
57	});	1✔
58	});	1✔
59
60	test('has proper semantic structure', () => {	1✔
61	render(Header);	1✔
62
63	// Should have main header content	1✔
64	const headerContent = screen.getByText('Test Region');	1✔
65	expect(headerContent).toBeInTheDocument();	1✔
66
67	// Should have clickable elements	1✔
68	const button = screen.getByRole('button');	1✔
69	expect(button).toBeInTheDocument();	1✔
70	});	1✔
71
72	test('displays mobile menu toggle button', () => {	1✔
73	render(Header);	1✔
74
75	const toggleButton = screen.getByRole('button');	1✔
76	expect(toggleButton).toHaveAttribute('aria-label', 'Toggle navigation menu');	1✔
77	});	1✔
78
79	test('renders without navigation links when PUBLIC_NAV_BAR_LINKS is empty', () => {	1✔
80	// This test will use the mocked empty value	1✔
81	vi.doMock('$env/static/public', () => ({	1✔
NEW 82	PUBLIC_OBA_REGION_NAME: 'Test Region',	×
NEW 83	PUBLIC_OBA_LOGO_URL: '/test-logo.png',	×
NEW 84	PUBLIC_NAV_BAR_LINKS: ''	×
85	}));	1✔
86
87	render(Header);	1✔
88
89	// Should still render logo and region name	1✔
90	expect(screen.getByText('Test Region')).toBeInTheDocument();	1✔
91	});	1✔
92
93	test('has accessible logo with proper alt text', () => {	1✔
94	render(Header);	1✔
95
96	const logo = screen.getByRole('img');	1✔
97	expect(logo).toHaveAttribute('alt', 'Test Region');	1✔
98	expect(logo).toBeVisible();	1✔
99	});	1✔
100
101	test('logo container has proper styling classes', () => {	1✔
102	render(Header);	1✔
103
104	const logoContainer = screen.getByText('Test Region').closest('div');	1✔
105	expect(logoContainer).toHaveClass('flex', 'items-center', 'justify-center', 'gap-x-2');	1✔
106	});	1✔
107
108	test('header has proper CSS classes for styling', () => {	1✔
109	const { container } = render(Header);	1✔
110
111	const header = container.querySelector('div');	1✔
112	expect(header).toHaveClass(	1✔
113	'bg-blur-md',	1✔
114	'flex',	1✔
115	'items-center',	1✔
116	'justify-between',	1✔
117	'border-b',	1✔
118	'border-gray-500',	1✔
119	'bg-white/80',	1✔
120	'px-4',	1✔
121	'dark:bg-black',	1✔
122	'dark:text-white'	1✔
123	);	1✔
124	});	1✔
125
126	test('region name link has proper styling', () => {	1✔
127	render(Header);	1✔
128
129	const regionLinks = screen.getAllByRole('link', { name: /test region/i });	1✔
130	const textLink = regionLinks.find((link) => link.textContent === 'Test Region');	1✔
131	expect(textLink).toHaveClass('block', 'text-xl', 'font-extrabold');	1✔
132	});	1✔
133	});	1✔

OneBusAway / wayfinder / 16085146972

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous