137 | {subtitle} 138 |
139 | {/if} 140 | 141 | {#if content_text} 142 |{content_text}
144 |{code}58 | {description} 59 |
60 | 61 | -------------------------------------------------------------------------------- /src/lib/components/docs-search.svelte.test.ts: -------------------------------------------------------------------------------- 1 | import { page } from '@vitest/browser/context'; 2 | import { describe, expect, test, vi } from 'vitest'; 3 | import { render } from 'vitest-browser-svelte'; 4 | import DocsSearch from './docs-search.svelte'; 5 | 6 | // Mock fetch for API calls - use vi.stubGlobal for better CI compatibility 7 | const mock_fetch = vi.fn(); 8 | vi.stubGlobal('fetch', mock_fetch); 9 | 10 | describe('DocsSearch', () => { 11 | describe('Initial Rendering', () => { 12 | test('should render search input', async () => { 13 | render(DocsSearch); 14 | 15 | await expect 16 | .element(page.getByLabelText('Search Documentation')) 17 | .toBeInTheDocument(); 18 | 19 | await expect 20 | .element(page.getByTestId('docs-search-input')) 21 | .toBeInTheDocument(); 22 | }); 23 | 24 | test('should show search placeholder', async () => { 25 | render(DocsSearch); 26 | 27 | const input = page.getByTestId('docs-search-input'); 28 | await expect 29 | .element(input) 30 | .toHaveAttribute( 31 | 'placeholder', 32 | 'Search topics, examples, patterns...', 33 | ); 34 | }); 35 | }); 36 | 37 | describe('Search Functionality', () => { 38 | test.skip('should show loading spinner when searching', async () => { 39 | // TODO: Loading spinner doesn't have test ID and page.locator() not available 40 | // Skip for now - would need to add data-testid to loading spinner in component 41 | }); 42 | 43 | test.skip('should show clear button when text is entered', async () => { 44 | // TODO: This component uses native search input clear functionality 45 | // Skip this test as there's no custom clear button 46 | }); 47 | 48 | test.skip('should clear search when clear button is clicked', async () => { 49 | // TODO: This component uses native search input clear functionality 50 | // Skip this test as there's no custom clear button 51 | }); 52 | }); 53 | 54 | describe('Search Results', () => { 55 | test.skip('should show search results after typing', async () => { 56 | // TODO: This test requires proper async handling with API 57 | // Skip for now due to timing issues with debounced search + API calls 58 | }); 59 | 60 | test.skip('should show no results message when no matches found', async () => { 61 | // TODO: Test no results state with API 62 | }); 63 | }); 64 | 65 | describe('Keyboard Shortcuts', () => { 66 | test('should show keyboard shortcut hint', async () => { 67 | render(DocsSearch); 68 | 69 | await expect 70 | .element(page.getByText('Ctrl')) 71 | .toBeInTheDocument(); 72 | 73 | await expect.element(page.getByText('k')).toBeInTheDocument(); 74 | }); 75 | 76 | test.skip('should focus input on Ctrl+K', async () => { 77 | // TODO: Test keyboard shortcuts - requires proper event simulation 78 | // Skip for now due to complexity of testing global keyboard events 79 | }); 80 | 81 | test.skip('should clear search on Escape', async () => { 82 | // TODO: Test escape key functionality 83 | }); 84 | }); 85 | 86 | describe('Accessibility', () => { 87 | test('should have proper labels and ARIA attributes', async () => { 88 | render(DocsSearch); 89 | 90 | const input = page.getByTestId('docs-search-input'); 91 | await expect 92 | .element(input) 93 | .toHaveAttribute('id', 'docs-search'); 94 | 95 | const label = page.getByText('Search Documentation'); 96 | await expect.element(label).toBeInTheDocument(); 97 | }); 98 | 99 | test.skip('should have clear button with proper aria-label', async () => { 100 | // TODO: This component uses native search input clear functionality 101 | // Skip this test as there's no custom clear button 102 | }); 103 | }); 104 | }); 105 | -------------------------------------------------------------------------------- /src/lib/components/docs-toc.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 53 | 54 | 65 | -------------------------------------------------------------------------------- /src/lib/components/feature-card.svelte: -------------------------------------------------------------------------------- 1 | 46 | 47 |59 | {description} 60 |
61 | {#if badges.length > 0} 62 |21 | The page you're looking for doesn't exist or has been moved. 22 |
23 |
41 | Interactive todo demonstration for testing form actions
42 |
43 | Now using local storage with comprehensive testing
45 | capabilities
47 |
22 | Search across all content: documentation, examples, and 23 | components. 24 |
25 |38 | Search only documentation topics and guides. 39 |
40 |53 | Search only testing examples and code snippets. 54 |
55 |68 | Search only UI components and their examples. 69 |
70 |84 | Press ⌘ + 85 | K 86 | (or Ctrl + 87 | K) to focus any search input. 88 |
89 |90 | Press Esc to clear the search and 91 | unfocus. 92 |
93 |
51 | A modern, feature-rich todo application with local storage
52 |
53 | Perfect for testing user interactions and data
55 | persistence
57 |
121 | This todo manager includes comprehensive test attributes and 122 | is designed to demonstrate various testing scenarios 123 | including user interactions, data persistence, and state 124 | management. 125 |
126 |