gui.do
Barazo default frontend
barazo.forum
1import { describe, it, expect, vi } from 'vitest'
2import { render, screen } from '@testing-library/react'
3import { axe } from 'vitest-axe'
4import { TopicMetaFields } from './topic-meta-fields'
5import type { CategoryTreeNode } from '@/lib/api/types'
6
7const COMMUNITY_DID = 'did:plc:test'
8const NOW = '2026-01-01T00:00:00.000Z'
9
10const treeCategories: CategoryTreeNode[] = [
11 {
12 id: 'cat-1',
13 slug: 'general',
14 name: 'General',
15 description: null,
16 parentId: null,
17 sortOrder: 0,
18 communityDid: COMMUNITY_DID,
19 maturityRating: 'safe',
20 createdAt: NOW,
21 updatedAt: NOW,
22 children: [],
23 },
24 {
25 id: 'cat-2',
26 slug: 'dev',
27 name: 'Development',
28 description: null,
29 parentId: null,
30 sortOrder: 1,
31 communityDid: COMMUNITY_DID,
32 maturityRating: 'safe',
33 createdAt: NOW,
34 updatedAt: NOW,
35 children: [
36 {
37 id: 'cat-3',
38 slug: 'frontend',
39 name: 'Frontend',
40 description: null,
41 parentId: 'cat-2',
42 sortOrder: 0,
43 communityDid: COMMUNITY_DID,
44 maturityRating: 'safe',
45 createdAt: NOW,
46 updatedAt: NOW,
47 children: [],
48 },
49 ],
50 },
51]
52
53describe('TopicMetaFields', () => {
54 const defaultProps = {
55 title: '',
56 category: '',
57 tagInput: '',
58 categories: treeCategories,
59 errors: {},
60 onTitleChange: vi.fn(),
61 onCategoryChange: vi.fn(),
62 onTagInputChange: vi.fn(),
63 }
64
65 it('renders category options with hierarchy indentation', () => {
66 render(<TopicMetaFields {...defaultProps} />)
67 const select = screen.getByLabelText(/category/i) as HTMLSelectElement
68 const options = Array.from(select.options)
69 // First is placeholder
70 expect(options[0]).toHaveTextContent('Select a category')
71 // "General" at root
72 expect(options[1]).toHaveTextContent('General')
73 // "Development" at root
74 expect(options[2]).toHaveTextContent('Development')
75 // "Frontend" indented under Development (contains non-breaking spaces)
76 const frontendOption = options[3]
77 expect(frontendOption?.textContent).toContain('Frontend')
78 expect(frontendOption?.value).toBe('frontend')
79 })
80
81 it('passes axe accessibility check', async () => {
82 const { container } = render(<TopicMetaFields {...defaultProps} />)
83 const results = await axe(container)
84 expect(results).toHaveNoViolations()
85 })
86})