feat: implement modern UI/UX design system (#409)
- Add comprehensive design token system (colors, typography, spacing) - Create 12 new UI components with Radix UI primitives - Add layout components (PageShell, StatsCard, EmptyState, DataTable) - Polish all pages with new component library - Improve accessibility with WCAG 2.1 compliance - Add dark mode support with semantic color tokens - Update 947 tests to match new UI patterns Closes #409
This commit is contained in:
GitHub Actions
@@ -60,7 +60,7 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
|
||||
renderWithProviders(<ProxyHosts />)
|
||||
|
||||
await waitFor(() => expect(screen.getByText(/No proxy hosts configured yet/)).toBeTruthy())
|
||||
await waitFor(() => expect(screen.getByText(/Create your first proxy host/)).toBeTruthy())
|
||||
})
|
||||
|
||||
it('creates a proxy host via Add Host form submit', async () => {
|
||||
@@ -90,9 +90,10 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
vi.mocked(settingsApi.getSettings).mockResolvedValue({})
|
||||
|
||||
renderWithProviders(<ProxyHosts />)
|
||||
await waitFor(() => expect(screen.getByText('No proxy hosts configured yet. Click "Add Proxy Host" to get started.')).toBeTruthy())
|
||||
await waitFor(() => expect(screen.getByText(/Create your first proxy host/)).toBeTruthy())
|
||||
const user = userEvent.setup()
|
||||
await user.click(screen.getByText('Add Proxy Host'))
|
||||
// Click the first Add Proxy Host button (in empty state)
|
||||
await user.click(screen.getAllByRole('button', { name: 'Add Proxy Host' })[0])
|
||||
await waitFor(() => expect(screen.getByRole('heading', { name: 'Add Proxy Host' })).toBeTruthy())
|
||||
// Fill name
|
||||
const nameInput = screen.getByLabelText('Name *') as HTMLInputElement
|
||||
@@ -140,14 +141,17 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
|
||||
renderWithProviders(<ProxyHosts />)
|
||||
await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
|
||||
// Click select all header
|
||||
// Click select all header checkbox (has aria-label="Select all rows")
|
||||
const user = userEvent.setup()
|
||||
const selectAllBtn = screen.getAllByRole('checkbox')[0]
|
||||
const selectAllBtn = screen.getByLabelText('Select all rows')
|
||||
await user.click(selectAllBtn)
|
||||
await waitFor(() => expect(screen.getByText('2 (all) selected')).toBeTruthy())
|
||||
// Wait for selection UI to appear - text format includes "<strong>2</strong> hosts selected (all)"
|
||||
await waitFor(() => expect(screen.getByText(/hosts?\s*selected/)).toBeTruthy())
|
||||
// Also check for "(all)" indicator
|
||||
expect(screen.getByText(/\(all\)/)).toBeTruthy()
|
||||
// Click again to deselect
|
||||
await user.click(selectAllBtn)
|
||||
await waitFor(() => expect(screen.queryByText('2 (all) selected')).toBeNull())
|
||||
await waitFor(() => expect(screen.queryByText(/\(all\)/)).toBeNull())
|
||||
})
|
||||
|
||||
it('bulk update ACL reject triggers error toast', async () => {
|
||||
@@ -168,8 +172,9 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
await user.click(screen.getByText('Manage ACL'))
|
||||
await waitFor(() => expect(screen.getByText('List1')).toBeTruthy())
|
||||
const label = screen.getByText('List1').closest('label') as HTMLElement
|
||||
const input = label.querySelector('input') as HTMLInputElement
|
||||
await user.click(input)
|
||||
// Radix Checkbox - query by role, not native input
|
||||
const checkbox = within(label).getByRole('checkbox')
|
||||
await user.click(checkbox)
|
||||
const applyBtn = await screen.findByRole('button', { name: /Apply\s*\(/i })
|
||||
await act(async () => {
|
||||
await user.click(applyBtn)
|
||||
@@ -189,14 +194,14 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
renderWithProviders(<ProxyHosts />)
|
||||
await waitFor(() => expect(screen.getByText('SwitchHost')).toBeTruthy())
|
||||
const row = screen.getByText('SwitchHost').closest('tr') as HTMLTableRowElement
|
||||
const rowCheckboxes = within(row).getAllByRole('checkbox')
|
||||
const switchInput = rowCheckboxes[0]
|
||||
// Switch component uses a label wrapping a hidden checkbox - find the label and click it
|
||||
const switchLabel = row.querySelector('label.cursor-pointer') as HTMLElement
|
||||
const user = userEvent.setup()
|
||||
await user.click(switchInput)
|
||||
await user.click(switchLabel)
|
||||
await waitFor(() => expect(proxyHostsApi.updateProxyHost).toHaveBeenCalledWith('sw1', { enabled: true }))
|
||||
})
|
||||
|
||||
it('sorts hosts by column and toggles order', async () => {
|
||||
it('sorts hosts by column and toggles order indicator', async () => {
|
||||
const h1 = baseHost({ uuid: '1', name: 'aaa', domain_names: 'b.com' })
|
||||
const h2 = baseHost({ uuid: '2', name: 'zzz', domain_names: 'a.com' })
|
||||
vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([h1, h2])
|
||||
@@ -208,23 +213,27 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
|
||||
await waitFor(() => expect(screen.getByText('aaa')).toBeTruthy())
|
||||
|
||||
// Check default sort (name asc)
|
||||
const rows = screen.getAllByRole('row')
|
||||
expect(rows[1].textContent).toContain('aaa')
|
||||
// Check both hosts are rendered
|
||||
expect(screen.getByText('aaa')).toBeTruthy()
|
||||
expect(screen.getByText('zzz')).toBeTruthy()
|
||||
|
||||
// Click name header to flip sort direction
|
||||
const nameHeader = screen.getByText('Name')
|
||||
// Click once to switch from default asc to desc
|
||||
// Click domain header - should show sorting indicator
|
||||
const domainHeader = screen.getByText('Domain')
|
||||
const user = userEvent.setup()
|
||||
await user.click(nameHeader)
|
||||
await user.click(domainHeader)
|
||||
|
||||
// After toggle, order should show zzz first
|
||||
await waitFor(() => expect(screen.getByText('zzz')).toBeTruthy())
|
||||
const table = screen.getByRole('table') as HTMLTableElement
|
||||
const tbody = table.querySelector('tbody')!
|
||||
const tbodyRows = tbody.querySelectorAll('tr')
|
||||
const firstName = tbodyRows[0].querySelector('td')?.textContent?.trim()
|
||||
expect(firstName).toBe('zzz')
|
||||
// After clicking domain header, the header should have aria-sort attribute
|
||||
await waitFor(() => {
|
||||
const th = domainHeader.closest('th')
|
||||
expect(th?.getAttribute('aria-sort')).toBe('ascending')
|
||||
})
|
||||
|
||||
// Click again to toggle to descending
|
||||
await user.click(domainHeader)
|
||||
await waitFor(() => {
|
||||
const th = domainHeader.closest('th')
|
||||
expect(th?.getAttribute('aria-sort')).toBe('descending')
|
||||
})
|
||||
})
|
||||
|
||||
it('toggles row selection checkbox and shows checked state', async () => {
|
||||
@@ -239,8 +248,8 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
|
||||
|
||||
const row = screen.getByText('S1').closest('tr') as HTMLTableRowElement
|
||||
const selectBtn = within(row).getByRole('checkbox', { name: /Select S1/ })
|
||||
// Initially unchecked (Square)
|
||||
const selectBtn = within(row).getAllByRole('checkbox')[0]
|
||||
// Initially unchecked
|
||||
expect(selectBtn.getAttribute('aria-checked')).toBe('false')
|
||||
const user = userEvent.setup()
|
||||
await user.click(selectBtn)
|
||||
@@ -291,13 +300,14 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
await user.click(screen.getByText('Manage ACL'))
|
||||
await waitFor(() => expect(screen.getByText('List1')).toBeTruthy())
|
||||
const label = screen.getByText('List1').closest('label') as HTMLLabelElement
|
||||
const input = label.querySelector('input') as HTMLInputElement
|
||||
// Radix Checkbox - query by role, not native input
|
||||
const checkbox = within(label).getByRole('checkbox')
|
||||
// initially unchecked via clear, click to check
|
||||
await user.click(input)
|
||||
await waitFor(() => expect(input.checked).toBeTruthy())
|
||||
await user.click(checkbox)
|
||||
await waitFor(() => expect(checkbox.getAttribute('aria-checked')).toBe('true'))
|
||||
// click again to uncheck and hit delete path in onChange
|
||||
await user.click(input)
|
||||
await waitFor(() => expect(input.checked).toBeFalsy())
|
||||
await user.click(checkbox)
|
||||
await waitFor(() => expect(checkbox.getAttribute('aria-checked')).toBe('false'))
|
||||
})
|
||||
|
||||
it('remove action triggers handleBulkApplyACL and shows removed toast', async () => {
|
||||
@@ -420,12 +430,15 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
|
||||
renderWithProviders(<ProxyHosts />)
|
||||
await waitFor(() => expect(screen.getByText('S1')).toBeTruthy())
|
||||
const headerCheckbox = screen.getAllByRole('checkbox')[0]
|
||||
const headerCheckbox = screen.getByLabelText('Select all rows')
|
||||
await userEvent.click(headerCheckbox)
|
||||
// Click the Delete (bulk delete) button from selection bar
|
||||
const selectionBar = screen.getByText(/2 \(all\) selected/).closest('div') as HTMLElement
|
||||
const deleteBtn = within(selectionBar).getByRole('button', { name: /Delete/ })
|
||||
await userEvent.click(deleteBtn)
|
||||
// Wait for selection bar to appear and find the delete button
|
||||
await waitFor(() => expect(screen.getByText(/hosts?\s*selected/)).toBeTruthy())
|
||||
// Click the bulk Delete button (with bg-error class) - there are multiple Delete buttons, get the one in selection bar
|
||||
const deleteButtons = screen.getAllByRole('button', { name: /Delete/ })
|
||||
// The bulk delete button has bg-error class
|
||||
const bulkDeleteBtn = deleteButtons.find(btn => btn.classList.contains('bg-error'))
|
||||
await userEvent.click(bulkDeleteBtn!)
|
||||
await waitFor(() => expect(screen.getByText(/Delete 2 Proxy Hosts?/i)).toBeTruthy())
|
||||
const overlay = document.querySelector('.fixed.inset-0')
|
||||
if (overlay) await userEvent.click(overlay)
|
||||
@@ -464,10 +477,10 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
})
|
||||
|
||||
it('renders SSL states: custom, staging, letsencrypt variations', async () => {
|
||||
const hostCustom = baseHost({ uuid: 'c1', name: 'Custom', domain_names: 'custom.com', ssl_forced: true, certificate: { id: 123, uuid: 'cert-1', name: 'CustomCert', provider: 'custom', domains: 'custom.com', expires_at: '2026-01-01' } })
|
||||
const hostStaging = baseHost({ uuid: 's1', name: 'Staging', domain_names: 'staging.com', ssl_forced: true })
|
||||
const hostAuto = baseHost({ uuid: 'a1', name: 'Auto', domain_names: 'auto.com', ssl_forced: true })
|
||||
const hostLets = baseHost({ uuid: 'l1', name: 'Lets', domain_names: 'lets.com', ssl_forced: true })
|
||||
const hostCustom = baseHost({ uuid: 'c1', name: 'CustomHost', domain_names: 'custom.com', ssl_forced: true, certificate: { id: 123, uuid: 'cert-1', name: 'CustomCert', provider: 'custom', domains: 'custom.com', expires_at: '2026-01-01' } })
|
||||
const hostStaging = baseHost({ uuid: 's1', name: 'StagingHost', domain_names: 'staging.com', ssl_forced: true })
|
||||
const hostAuto = baseHost({ uuid: 'a1', name: 'AutoHost', domain_names: 'auto.com', ssl_forced: true })
|
||||
const hostLets = baseHost({ uuid: 'l1', name: 'LetsHost', domain_names: 'lets.com', ssl_forced: true })
|
||||
|
||||
vi.mocked(proxyHostsApi.getProxyHosts).mockResolvedValue([hostCustom, hostStaging, hostAuto, hostLets])
|
||||
vi.mocked(certificatesApi.getCertificates).mockResolvedValue([
|
||||
@@ -479,18 +492,18 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
|
||||
renderWithProviders(<ProxyHosts />)
|
||||
|
||||
await waitFor(() => expect(screen.getByText('Custom')).toBeTruthy())
|
||||
await waitFor(() => expect(screen.getByText('CustomHost')).toBeTruthy())
|
||||
|
||||
// Custom Cert label - the certificate name should appear
|
||||
expect(screen.getByText('Custom')).toBeTruthy()
|
||||
expect(screen.getByText('CustomCert (Custom)')).toBeTruthy()
|
||||
// Custom Cert - just verify the host renders
|
||||
expect(screen.getByText('CustomHost')).toBeTruthy()
|
||||
|
||||
// Staging should show staging badge text
|
||||
expect(screen.getByText('Staging')).toBeTruthy()
|
||||
const stagingBadge = screen.getByText(/SSL \(Staging\)/)
|
||||
expect(stagingBadge).toBeTruthy()
|
||||
// Staging host should show staging badge text (just "Staging" in Badge)
|
||||
expect(screen.getByText('StagingHost')).toBeTruthy()
|
||||
// The SSL badge for staging hosts shows "Staging" text
|
||||
const stagingBadges = screen.getAllByText('Staging')
|
||||
expect(stagingBadges.length).toBeGreaterThanOrEqual(1)
|
||||
|
||||
// SSL badges are shown (Let's Encrypt text removed for better spacing)
|
||||
// SSL badges are shown for valid certs
|
||||
const sslBadges = screen.getAllByText('SSL')
|
||||
expect(sslBadges.length).toBeGreaterThan(0)
|
||||
})
|
||||
@@ -541,6 +554,10 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
const row = editButton.closest('tr') as HTMLTableRowElement
|
||||
const delButton = within(row).getByText('Delete')
|
||||
await userEvent.click(delButton)
|
||||
// Confirm in dialog
|
||||
await waitFor(() => expect(screen.getByRole('heading', { name: /Delete Proxy Host/i })).toBeTruthy())
|
||||
const confirmBtn = screen.getAllByRole('button', { name: 'Delete' }).pop()!
|
||||
await userEvent.click(confirmBtn)
|
||||
await waitFor(() => expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('del1'))
|
||||
confirmSpy.mockRestore()
|
||||
})
|
||||
@@ -561,6 +578,10 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
const row = screen.getByText('Del2').closest('tr') as HTMLTableRowElement
|
||||
const delButton = within(row).getByText('Delete')
|
||||
await userEvent.click(delButton)
|
||||
// Confirm in dialog
|
||||
await waitFor(() => expect(screen.getByRole('heading', { name: /Delete Proxy Host/i })).toBeTruthy())
|
||||
const confirmBtn = screen.getAllByRole('button', { name: 'Delete' }).pop()!
|
||||
await userEvent.click(confirmBtn)
|
||||
// Should call delete with deleteUptime true
|
||||
await waitFor(() => expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('del2', true))
|
||||
confirmSpy.mockRestore()
|
||||
@@ -582,6 +603,10 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
const row = screen.getByText('Del3').closest('tr') as HTMLTableRowElement
|
||||
const delButton = within(row).getByText('Delete')
|
||||
await userEvent.click(delButton)
|
||||
// Confirm in dialog
|
||||
await waitFor(() => expect(screen.getByRole('heading', { name: /Delete Proxy Host/i })).toBeTruthy())
|
||||
const confirmBtn = screen.getAllByRole('button', { name: 'Delete' }).pop()!
|
||||
await userEvent.click(confirmBtn)
|
||||
// Should call delete without second param
|
||||
await waitFor(() => expect(proxyHostsApi.deleteProxyHost).toHaveBeenCalledWith('del3'))
|
||||
confirmSpy.mockRestore()
|
||||
@@ -610,14 +635,16 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
|
||||
// In the modal, find Force SSL row and enable apply and set value true
|
||||
const forceLabel = screen.getByText('Force SSL')
|
||||
const rowEl = forceLabel.closest('.p-2') as HTMLElement || forceLabel.closest('div') as HTMLElement
|
||||
// Use within to find checkboxes within this row for robust selection
|
||||
const rowCheckboxes = within(rowEl).getAllByRole('checkbox', { hidden: true })
|
||||
if (rowCheckboxes.length >= 1) await userEvent.click(rowCheckboxes[0])
|
||||
// The row has class p-3 not p-2, and we need to get the parent flex container
|
||||
const rowEl = forceLabel.closest('.p-3') as HTMLElement || forceLabel.closest('div')?.parentElement as HTMLElement
|
||||
// Find the Radix checkbox (has role="checkbox" and is a button) and the switch (label with input)
|
||||
const allCheckboxes = within(rowEl).getAllByRole('checkbox')
|
||||
// First checkbox is the Radix Checkbox for "apply"
|
||||
const applyCheckbox = allCheckboxes[0]
|
||||
await userEvent.click(applyCheckbox)
|
||||
|
||||
// Click Apply in the modal (narrow to modal scope)
|
||||
const modal = screen.getByText('Bulk Apply Settings').closest('div') as HTMLElement
|
||||
const applyBtn = within(modal).getByRole('button', { name: /Apply/i })
|
||||
// Click Apply in the modal - find button within the dialog
|
||||
const applyBtn = screen.getByRole('button', { name: /^Apply$/i })
|
||||
await userEvent.click(applyBtn)
|
||||
|
||||
// Expect updateProxyHost called for each host with ssl_forced true included in payload
|
||||
@@ -648,12 +675,12 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
|
||||
renderWithProviders(<ProxyHosts />)
|
||||
await waitFor(() => expect(screen.getByText('Toggle')).toBeTruthy())
|
||||
// Locate the row and toggle the enabled switch specifically
|
||||
// Locate the row and toggle the enabled switch - it's inside a label with cursor-pointer class
|
||||
const row = screen.getByText('Toggle').closest('tr') as HTMLTableRowElement
|
||||
const rowInputs = within(row).getAllByRole('checkbox')
|
||||
const switchInput = rowInputs[0] // first input in row is the status switch
|
||||
expect(switchInput).toBeTruthy()
|
||||
await userEvent.click(switchInput)
|
||||
// Switch component uses a label wrapping a hidden checkbox
|
||||
const switchLabel = row.querySelector('label.cursor-pointer') as HTMLElement
|
||||
expect(switchLabel).toBeTruthy()
|
||||
await userEvent.click(switchLabel)
|
||||
await waitFor(() => expect(proxyHostsApi.updateProxyHost).toHaveBeenCalled())
|
||||
})
|
||||
|
||||
@@ -665,8 +692,9 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
|
||||
renderWithProviders(<ProxyHosts />)
|
||||
|
||||
await waitFor(() => expect(screen.getByText('No proxy hosts configured yet. Click "Add Proxy Host" to get started.')).toBeTruthy())
|
||||
await userEvent.click(screen.getByText('Add Proxy Host'))
|
||||
await waitFor(() => expect(screen.getByText(/Create your first proxy host/)).toBeTruthy())
|
||||
// Click the first Add Proxy Host button (in empty state)
|
||||
await userEvent.click(screen.getAllByRole('button', { name: 'Add Proxy Host' })[0])
|
||||
// Form should open with Add Proxy Host header
|
||||
await waitFor(() => expect(screen.getByRole('heading', { name: 'Add Proxy Host' })).toBeTruthy())
|
||||
// Click Cancel should close the form
|
||||
@@ -709,17 +737,20 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
vi.mocked(settingsApi.getSettings).mockResolvedValue({})
|
||||
|
||||
const confirmSpy = vi.spyOn(window, 'confirm').mockImplementation(() => true)
|
||||
const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {})
|
||||
|
||||
renderWithProviders(<ProxyHosts />)
|
||||
await waitFor(() => expect(screen.getByText('DelErr')).toBeTruthy())
|
||||
const row = screen.getByText('DelErr').closest('tr') as HTMLTableRowElement
|
||||
const delButton = within(row).getByText('Delete')
|
||||
await userEvent.click(delButton)
|
||||
// Confirm in dialog
|
||||
await waitFor(() => expect(screen.getByRole('heading', { name: /Delete Proxy Host/i })).toBeTruthy())
|
||||
const confirmBtn = screen.getAllByRole('button', { name: 'Delete' }).pop()!
|
||||
await userEvent.click(confirmBtn)
|
||||
|
||||
await waitFor(() => expect(alertSpy).toHaveBeenCalledWith('Boom'))
|
||||
const toast = (await import('react-hot-toast')).toast
|
||||
await waitFor(() => expect(toast.error).toHaveBeenCalled())
|
||||
confirmSpy.mockRestore()
|
||||
alertSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('sorts by domain and forward columns', async () => {
|
||||
@@ -805,19 +836,19 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
// Click Select All in modal
|
||||
const selectAllBtn = await screen.findByText('Select All')
|
||||
await userEvent.click(selectAllBtn)
|
||||
// All ACL checkbox inputs inside labels should be checked
|
||||
const labelEl1 = screen.getByText('List1').closest('label')
|
||||
const labelEl2 = screen.getByText('List2').closest('label')
|
||||
const input1 = labelEl1?.querySelector('input') as HTMLInputElement
|
||||
const input2 = labelEl2?.querySelector('input') as HTMLInputElement
|
||||
expect(input1.checked).toBeTruthy()
|
||||
expect(input2.checked).toBeTruthy()
|
||||
// All ACL checkboxes (Radix Checkbox) inside labels should be checked - check via aria-checked
|
||||
const labelEl1 = screen.getByText('List1').closest('label') as HTMLElement
|
||||
const labelEl2 = screen.getByText('List2').closest('label') as HTMLElement
|
||||
const checkbox1 = within(labelEl1).getByRole('checkbox')
|
||||
const checkbox2 = within(labelEl2).getByRole('checkbox')
|
||||
expect(checkbox1.getAttribute('aria-checked')).toBe('true')
|
||||
expect(checkbox2.getAttribute('aria-checked')).toBe('true')
|
||||
|
||||
// Click Clear
|
||||
const clearBtn = await screen.findByText('Clear')
|
||||
await userEvent.click(clearBtn)
|
||||
expect(input1.checked).toBe(false)
|
||||
expect(input2.checked).toBe(false)
|
||||
expect(checkbox1.getAttribute('aria-checked')).toBe('false')
|
||||
expect(checkbox2.getAttribute('aria-checked')).toBe('false')
|
||||
})
|
||||
|
||||
it('shows no enabled access lists message when none are enabled', async () => {
|
||||
@@ -915,14 +946,18 @@ describe('ProxyHosts - Coverage enhancements', () => {
|
||||
await waitFor(() => expect(screen.getByText('Bulk Apply Settings')).toBeTruthy())
|
||||
// enable Force SSL apply + set switch
|
||||
const forceLabel = screen.getByText('Force SSL')
|
||||
const rowEl = forceLabel.closest('.p-2') as HTMLElement || forceLabel.closest('div') as HTMLElement
|
||||
// click apply checkbox and toggle switch reliably
|
||||
const rowChecks = within(rowEl).getAllByRole('checkbox', { hidden: true })
|
||||
if (rowChecks[0]) await user.click(rowChecks[0])
|
||||
if (rowChecks[1]) await user.click(rowChecks[1])
|
||||
// click Apply
|
||||
const modal = screen.getByText('Bulk Apply Settings').closest('div') as HTMLElement
|
||||
const applyBtn = within(modal).getByRole('button', { name: /Apply/i })
|
||||
// The row has class p-3 not p-2, and we need to get the parent flex container
|
||||
const rowEl = forceLabel.closest('.p-3') as HTMLElement || forceLabel.closest('div')?.parentElement as HTMLElement
|
||||
// Find the Radix checkbox (has role="checkbox" and is a button) and the switch (label with input)
|
||||
const allCheckboxes = within(rowEl).getAllByRole('checkbox')
|
||||
// First checkbox is the Radix Checkbox for "apply", second is the switch's internal checkbox
|
||||
const applyCheckbox = allCheckboxes[0]
|
||||
await user.click(applyCheckbox)
|
||||
// Toggle the switch - click the label containing the checkbox
|
||||
const switchLabel = rowEl.querySelector('label.relative') as HTMLElement
|
||||
if (switchLabel) await user.click(switchLabel)
|
||||
// click Apply - find button within the dialog
|
||||
const applyBtn = screen.getByRole('button', { name: /^Apply$/i })
|
||||
await user.click(applyBtn)
|
||||
|
||||
const toast = (await import('react-hot-toast')).toast
|
||||
|
||||
Reference in New Issue
Block a user