solid-ui/src/components/menu/Menu.test.ts at 3063e96f5050c8e2e1fb03058622121bc1ed06aa · SolidOS/solid-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import { describe, it, expect } from 'vitest'
import './Menu.ts'

describe('solid-ui-menu syncItems', () => {
  function createMenu () {
    const menu = document.createElement('solid-ui-menu')
    menu.setAttribute('placement', 'bottom-end')

    const trigger = document.createElement('button')
    trigger.setAttribute('slot', 'trigger')
    menu.appendChild(trigger)

    return menu
  }

  it('renders children on first sync', async () => {
    const menu = createMenu()

    const child1 = document.createElement('div')
    child1.textContent = 'Item 1'
    menu.appendChild(child1)

    const child2 = document.createElement('div')
    child2.textContent = 'Item 2'
    menu.appendChild(child2)

    document.body.appendChild(menu)
    await menu.updateComplete

    // Children should be assigned slot attributes
    expect(child1.getAttribute('slot')).toBe('menu-item-0')
    expect(child2.getAttribute('slot')).toBe('menu-item-1')

    // Trigger should keep its slot
    const trigger = menu.querySelector('[slot="trigger"]')
    expect(trigger?.getAttribute('slot')).toBe('trigger')

    document.body.removeChild(menu)
  })

  it('keeps children after re-sync (regression: second sync cleared items)', async () => {
    const menu = createMenu()

    const child1 = document.createElement('div')
    child1.textContent = 'Item 1'
    menu.appendChild(child1)

    document.body.appendChild(menu)
    await menu.updateComplete

    // First sync assigned slots
    expect(child1.getAttribute('slot')).toBe('menu-item-0')

    // Trigger a re-sync by adding another child (MutationObserver)
    const child2 = document.createElement('div')
    child2.textContent = 'Item 2'
    menu.appendChild(child2)
    await menu.updateComplete

    // Both children should still have valid slot assignments
    expect(child1.getAttribute('slot')).toBe('menu-item-0')
    expect(child2.getAttribute('slot')).toBe('menu-item-1')

    document.body.removeChild(menu)
  })

  it('excludes trigger element from items', async () => {
    const menu = createMenu()
    document.body.appendChild(menu)

    const child = document.createElement('div')
    child.textContent = 'Only Item'
    menu.appendChild(child)
    await menu.updateComplete

    expect(child.getAttribute('slot')).toBe('menu-item-0')

    // Trigger should not have been re-assigned
    const trigger = menu.querySelector('[slot="trigger"]')
    expect(trigger?.getAttribute('slot')).toBe('trigger')

    document.body.removeChild(menu)
  })

  it('propagates disabled state to dropdown items', async () => {
    const menu = createMenu()

    const child = document.createElement('div')
    child.textContent = 'Disabled Item'
    child.setAttribute('disabled', '')
    menu.appendChild(child)

    document.body.appendChild(menu)
    await menu.updateComplete

    const dropdownItem = menu.shadowRoot?.querySelector('wa-dropdown-item') as HTMLElement & { disabled?: boolean }
    expect(dropdownItem?.disabled).toBe(true)

    document.body.removeChild(menu)
  })
})