feat: group node types by category in Custom Style editor

The Custom Style modal listed node types as a flat list. It now groups
them under category headers (Hardware, Virtualization, IoT, Zigbee,
Z-Wave, Personal, Generic) like the Add/Edit Node modal, and exposes the
Z-Wave node types for styling.

ha-relevant: yes
This commit is contained in:
Pouzor
2026-06-26 16:02:23 +02:00
parent 5b08d57124
commit ecf3cbdfe4
2 changed files with 56 additions and 35 deletions
@@ -37,6 +37,16 @@ describe('CustomStyleModal', () => {
expect(screen.getByText(/edge type from the list/i)).toBeDefined()
})
it('groups node types under category headers (incl. Zigbee and Z-Wave)', () => {
render(<CustomStyleModal open onClose={vi.fn()} />)
expect(screen.getByText('Hardware')).toBeDefined()
expect(screen.getByText('Zigbee')).toBeDefined()
expect(screen.getByText('Z-Wave')).toBeDefined()
// A Z-Wave node type is selectable from its category.
fireEvent.click(screen.getByRole('button', { name: /Z-Wave Controller/ }))
expect(screen.getByText(/Apply to existing Z-Wave Controller/)).toBeDefined()
})
it('selecting a node type opens the node editor', () => {
render(<CustomStyleModal open onClose={vi.fn()} />)
fireEvent.click(screen.getByRole('button', { name: 'Router' }))