fix(ci): resolve E2E workflow failures and boost test coverage
E2E Workflow Fixes: Add frontend dependency installation step (missing npm ci in frontend/) Remove incorrect working-directory from backend build step Update Node.js version from v18 to v20 (dependency requirements) Backend Coverage: 84.9% → 85.0% (20+ new test functions): Access list service validation and templates Backup service error handling and edge cases Security audit logs and rule sets Auth service edge cases and token validation Certificate service upload and sync error paths Frontend Coverage: 85.06% → 85.66% (27 new tests): Tabs component accessibility and keyboard navigation Plugins page status badges and error handling SecurityHeaders CRUD operations and presets API wrappers for credentials and encryption endpoints E2E Infrastructure: Enhanced global-setup with emergency security module reset Added retry logic and verification for settings propagation Known Issues: 19 E2E tests still failing (ACL blocking security APIs - Issue #16) 7 Plugins modal UI tests failing (non-critical) To be addressed in follow-up PR Fixes #550 E2E workflow failures Related to #16 ACL implementation
This commit is contained in:
GitHub Actions
@@ -0,0 +1,710 @@
|
||||
import '@testing-library/jest-dom/vitest'
|
||||
import { render, screen, waitFor, within } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||
import { MemoryRouter } from 'react-router-dom'
|
||||
import { vi, describe, it, expect, beforeEach } from 'vitest'
|
||||
import Plugins from './Plugins'
|
||||
import * as usePluginsHook from '../hooks/usePlugins'
|
||||
import type { PluginInfo } from '../hooks/usePlugins'
|
||||
|
||||
// Mock modules
|
||||
vi.mock('react-i18next', () => ({
|
||||
useTranslation: () => ({
|
||||
t: (key: string) => key,
|
||||
i18n: {
|
||||
language: 'en',
|
||||
changeLanguage: vi.fn(),
|
||||
},
|
||||
}),
|
||||
}))
|
||||
|
||||
vi.mock('../hooks/usePlugins', async () => {
|
||||
const actual = await vi.importActual('../hooks/usePlugins')
|
||||
return {
|
||||
...actual,
|
||||
usePlugins: vi.fn(),
|
||||
useEnablePlugin: vi.fn(),
|
||||
useDisablePlugin: vi.fn(),
|
||||
useReloadPlugins: vi.fn(),
|
||||
}
|
||||
})
|
||||
|
||||
vi.mock('../utils/toast', () => ({
|
||||
toast: {
|
||||
success: vi.fn(),
|
||||
error: vi.fn(),
|
||||
},
|
||||
}))
|
||||
|
||||
// Test data
|
||||
const mockBuiltInPlugin: PluginInfo = {
|
||||
id: 1,
|
||||
uuid: 'builtin-cf',
|
||||
name: 'Cloudflare',
|
||||
type: 'cloudflare',
|
||||
enabled: true,
|
||||
status: 'loaded',
|
||||
is_built_in: true,
|
||||
version: '1.0.0',
|
||||
description: 'Cloudflare DNS provider',
|
||||
documentation_url: 'https://cloudflare.com',
|
||||
created_at: '2025-01-01T00:00:00Z',
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
}
|
||||
|
||||
const mockExternalPlugin: PluginInfo = {
|
||||
id: 2,
|
||||
uuid: 'ext-pdns',
|
||||
name: 'PowerDNS',
|
||||
type: 'powerdns',
|
||||
enabled: true,
|
||||
status: 'loaded',
|
||||
is_built_in: false,
|
||||
version: '1.0.0',
|
||||
author: 'Community',
|
||||
description: 'PowerDNS provider',
|
||||
documentation_url: 'https://powerdns.com',
|
||||
loaded_at: '2025-01-06T00:00:00Z',
|
||||
created_at: '2025-01-01T00:00:00Z',
|
||||
updated_at: '2025-01-06T00:00:00Z',
|
||||
}
|
||||
|
||||
const mockDisabledPlugin: PluginInfo = {
|
||||
...mockExternalPlugin,
|
||||
id: 3,
|
||||
uuid: 'ext-disabled',
|
||||
name: 'Disabled Plugin',
|
||||
enabled: false,
|
||||
status: 'pending',
|
||||
}
|
||||
|
||||
const mockErrorPlugin: PluginInfo = {
|
||||
...mockExternalPlugin,
|
||||
id: 4,
|
||||
uuid: 'ext-error',
|
||||
name: 'Error Plugin',
|
||||
enabled: true,
|
||||
status: 'error',
|
||||
error: 'Failed to load plugin',
|
||||
}
|
||||
|
||||
const createQueryClient = () =>
|
||||
new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: { retry: false, gcTime: 0 },
|
||||
mutations: { retry: false },
|
||||
},
|
||||
})
|
||||
|
||||
const renderWithProviders = (ui: React.ReactNode) => {
|
||||
const queryClient = createQueryClient()
|
||||
return render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<MemoryRouter>{ui}</MemoryRouter>
|
||||
</QueryClientProvider>
|
||||
)
|
||||
}
|
||||
|
||||
// Mock default successful state
|
||||
const createMockUsePlugins = (data: PluginInfo[] = [mockBuiltInPlugin, mockExternalPlugin]) => ({
|
||||
data,
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
error: null,
|
||||
refetch: vi.fn(),
|
||||
})
|
||||
|
||||
const createMockMutation = (isPending = false) => ({
|
||||
mutate: vi.fn(),
|
||||
mutateAsync: vi.fn(),
|
||||
isPending,
|
||||
isSuccess: false,
|
||||
isError: false,
|
||||
error: null,
|
||||
})
|
||||
|
||||
describe('Plugins - Basic Rendering', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(createMockUsePlugins())
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
})
|
||||
|
||||
it('renders page title', () => {
|
||||
renderWithProviders(<Plugins />)
|
||||
expect(screen.queryByText(/plugin/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders plugin list when data loads', async () => {
|
||||
renderWithProviders(<Plugins />)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Cloudflare')).toBeInTheDocument()
|
||||
expect(screen.getByText('PowerDNS')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('shows loading skeleton', () => {
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue({
|
||||
...createMockUsePlugins(),
|
||||
data: undefined,
|
||||
isLoading: true,
|
||||
})
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
// Skeleton is shown during loading
|
||||
expect(screen.queryByText('Cloudflare')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows error alert on fetch failure', () => {
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue({
|
||||
...createMockUsePlugins(),
|
||||
data: undefined,
|
||||
isError: true,
|
||||
error: new Error('Network error'),
|
||||
})
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
// Empty state should be shown when data is undefined
|
||||
expect(screen.queryByText('Cloudflare')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows empty state when no plugins', () => {
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(createMockUsePlugins([]))
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
expect(screen.getByText(/no plugins found/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders status badges correctly', () => {
|
||||
const plugins = [
|
||||
mockBuiltInPlugin,
|
||||
mockDisabledPlugin,
|
||||
mockErrorPlugin,
|
||||
]
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(createMockUsePlugins(plugins))
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
expect(screen.getByText(/loaded/i)).toBeInTheDocument()
|
||||
expect(screen.getByText(/disabled/i)).toBeInTheDocument()
|
||||
expect(screen.getByText(/error/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('separates built-in vs external plugins', async () => {
|
||||
renderWithProviders(<Plugins />)
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/built-in providers/i)).toBeInTheDocument()
|
||||
expect(screen.getByText(/external plugins/i)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('Plugins - Plugin Actions', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(
|
||||
createMockUsePlugins([mockExternalPlugin, mockDisabledPlugin])
|
||||
)
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
})
|
||||
|
||||
it('toggle plugin on', async () => {
|
||||
const user = userEvent.setup()
|
||||
const mockEnable = createMockMutation()
|
||||
mockEnable.mutateAsync = vi.fn().mockResolvedValue({ message: 'Enabled' })
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(mockEnable)
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
await waitFor(() => screen.getByText('Disabled Plugin'))
|
||||
|
||||
// Find the switch for disabled plugin
|
||||
const switches = screen.getAllByRole('switch')
|
||||
const disabledSwitch = switches.find((sw) => !sw.getAttribute('data-state')?.includes('checked'))
|
||||
|
||||
if (disabledSwitch) {
|
||||
await user.click(disabledSwitch)
|
||||
expect(mockEnable.mutateAsync).toHaveBeenCalledWith(3)
|
||||
}
|
||||
})
|
||||
|
||||
it('toggle plugin off', async () => {
|
||||
const user = userEvent.setup()
|
||||
const mockDisable = createMockMutation()
|
||||
mockDisable.mutateAsync = vi.fn().mockResolvedValue({ message: 'Disabled' })
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(mockDisable)
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
await waitFor(() => screen.getByText('PowerDNS'))
|
||||
|
||||
const switches = screen.getAllByRole('switch')
|
||||
const enabledSwitch = switches[0]
|
||||
|
||||
await user.click(enabledSwitch)
|
||||
expect(mockDisable.mutateAsync).toHaveBeenCalledWith(2)
|
||||
})
|
||||
|
||||
it('reload plugins button works', async () => {
|
||||
const user = userEvent.setup()
|
||||
const mockReload = createMockMutation()
|
||||
mockReload.mutateAsync = vi.fn().mockResolvedValue({ message: 'Reloaded', count: 2 })
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(mockReload)
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
const reloadButton = screen.getByRole('button', { name: /reload plugins/i })
|
||||
await user.click(reloadButton)
|
||||
|
||||
expect(mockReload.mutateAsync).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('reload shows success toast', async () => {
|
||||
const user = userEvent.setup()
|
||||
const { toast } = await import('../utils/toast')
|
||||
const mockReload = createMockMutation()
|
||||
mockReload.mutateAsync = vi.fn().mockResolvedValue({ message: 'Reloaded', count: 2 })
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(mockReload)
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
const reloadButton = screen.getByRole('button', { name: /reload plugins/i })
|
||||
await user.click(reloadButton)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(toast.success).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
||||
it('open metadata modal', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
await waitFor(() => screen.getByText('PowerDNS'))
|
||||
|
||||
const detailsButtons = screen.getAllByRole('button', { name: /details/i })
|
||||
await user.click(detailsButtons[0])
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('dialog')).toBeInTheDocument()
|
||||
expect(screen.getByText(/plugin details/i)).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('close metadata modal', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
await waitFor(() => screen.getByText('PowerDNS'))
|
||||
|
||||
const detailsButtons = screen.getAllByRole('button', { name: /details/i })
|
||||
await user.click(detailsButtons[0])
|
||||
|
||||
await waitFor(() => screen.getByRole('dialog'))
|
||||
|
||||
const closeButton = screen.getByRole('button', { name: /close/i })
|
||||
await user.click(closeButton)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('navigate to documentation URL', async () => {
|
||||
const user = userEvent.setup()
|
||||
const windowOpenSpy = vi.spyOn(window, 'open').mockImplementation(() => null)
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
await waitFor(() => screen.getByText('PowerDNS'))
|
||||
|
||||
const docsButtons = screen.getAllByRole('button', { name: /docs/i })
|
||||
await user.click(docsButtons[0])
|
||||
|
||||
expect(windowOpenSpy).toHaveBeenCalledWith('https://powerdns.com', '_blank')
|
||||
windowOpenSpy.mockRestore()
|
||||
})
|
||||
|
||||
it('disabled plugin toggle is disabled', async () => {
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation(true))
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
await waitFor(() => screen.getByText('Disabled Plugin'))
|
||||
|
||||
const switches = screen.getAllByRole('switch')
|
||||
expect(switches.some((sw) => sw.hasAttribute('disabled'))).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Plugins - React Query Integration', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('usePlugins query called on mount', () => {
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(createMockUsePlugins())
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
expect(usePluginsHook.usePlugins).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('mutation invalidates queries on success', async () => {
|
||||
const user = userEvent.setup()
|
||||
const mockRefetch = vi.fn()
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue({
|
||||
...createMockUsePlugins([mockExternalPlugin]),
|
||||
refetch: mockRefetch,
|
||||
})
|
||||
|
||||
const mockEnable = createMockMutation()
|
||||
mockEnable.mutateAsync = vi.fn().mockResolvedValue({ message: 'Enabled' })
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(mockEnable)
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
await waitFor(() => screen.getByText('PowerDNS'))
|
||||
|
||||
const switches = screen.getAllByRole('switch')
|
||||
await user.click(switches[0])
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockRefetch).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
||||
it('error handling for mutations', async () => {
|
||||
const user = userEvent.setup()
|
||||
const { toast } = await import('../utils/toast')
|
||||
const mockDisable = createMockMutation()
|
||||
mockDisable.mutateAsync = vi.fn().mockRejectedValue(new Error('Failed to disable'))
|
||||
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(
|
||||
createMockUsePlugins([mockExternalPlugin])
|
||||
)
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(mockDisable)
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
await waitFor(() => screen.getByText('PowerDNS'))
|
||||
|
||||
const switches = screen.getAllByRole('switch')
|
||||
await user.click(switches[0])
|
||||
|
||||
await waitFor(() => {
|
||||
expect(toast.error).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
||||
it('optimistic updates work', async () => {
|
||||
// This test verifies UI updates before API confirmation
|
||||
const user = userEvent.setup()
|
||||
const mockDisable = createMockMutation()
|
||||
let resolveDisable: ((value: unknown) => void) | null = null
|
||||
mockDisable.mutateAsync = vi.fn(
|
||||
() => new Promise((resolve) => (resolveDisable = resolve))
|
||||
)
|
||||
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(
|
||||
createMockUsePlugins([mockExternalPlugin])
|
||||
)
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(mockDisable)
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
await waitFor(() => screen.getByText('PowerDNS'))
|
||||
|
||||
const switches = screen.getAllByRole('switch')
|
||||
await user.click(switches[0])
|
||||
|
||||
// Mutation is pending
|
||||
expect(mockDisable.mutateAsync).toHaveBeenCalled()
|
||||
|
||||
// Resolve the mutation
|
||||
if (resolveDisable) resolveDisable({ message: 'Disabled' })
|
||||
})
|
||||
|
||||
it('retry logic on failure', async () => {
|
||||
const mockError = new Error('Network timeout')
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue({
|
||||
...createMockUsePlugins(),
|
||||
data: undefined,
|
||||
isError: true,
|
||||
error: mockError,
|
||||
})
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
// Should handle error gracefully
|
||||
expect(screen.queryByText('Cloudflare')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('query key management', () => {
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(createMockUsePlugins())
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
// Verify hooks are called with proper query keys
|
||||
expect(usePluginsHook.usePlugins).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Plugins - Error Handling', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('network error display', () => {
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue({
|
||||
...createMockUsePlugins(),
|
||||
data: undefined,
|
||||
isError: true,
|
||||
error: new Error('Network error'),
|
||||
})
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
// Should show empty state or error message
|
||||
expect(screen.queryByText('Cloudflare')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('toggle error toast', async () => {
|
||||
const user = userEvent.setup()
|
||||
const { toast } = await import('../utils/toast')
|
||||
const mockEnable = createMockMutation()
|
||||
mockEnable.mutateAsync = vi.fn().mockRejectedValue({ response: { data: { error: 'API Error' } } })
|
||||
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(
|
||||
createMockUsePlugins([mockDisabledPlugin])
|
||||
)
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(mockEnable)
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
await waitFor(() => screen.getByText('Disabled Plugin'))
|
||||
|
||||
const switches = screen.getAllByRole('switch')
|
||||
await user.click(switches[0])
|
||||
|
||||
await waitFor(() => {
|
||||
expect(toast.error).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
||||
it('reload error toast', async () => {
|
||||
const user = userEvent.setup()
|
||||
const { toast } = await import('../utils/toast')
|
||||
const mockReload = createMockMutation()
|
||||
mockReload.mutateAsync = vi.fn().mockRejectedValue(new Error('Reload failed'))
|
||||
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(createMockUsePlugins())
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(mockReload)
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
const reloadButton = screen.getByRole('button', { name: /reload plugins/i })
|
||||
await user.click(reloadButton)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(toast.error).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
|
||||
it('graceful degradation', () => {
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(createMockUsePlugins([mockErrorPlugin]))
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
// Plugin with error should still render
|
||||
expect(screen.getByText('Error Plugin')).toBeInTheDocument()
|
||||
expect(screen.getByText('Failed to load plugin')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('error boundary integration', () => {
|
||||
// This test verifies component doesn't crash on error
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue({
|
||||
...createMockUsePlugins(),
|
||||
data: undefined,
|
||||
isError: true,
|
||||
error: new Error('Critical error'),
|
||||
})
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
expect(() => renderWithProviders(<Plugins />)).not.toThrow()
|
||||
})
|
||||
|
||||
it('retry mechanisms', async () => {
|
||||
const user = userEvent.setup()
|
||||
const mockReload = createMockMutation()
|
||||
mockReload.mutateAsync = vi
|
||||
.fn()
|
||||
.mockRejectedValueOnce(new Error('Fail'))
|
||||
.mockResolvedValueOnce({ message: 'Success', count: 2 })
|
||||
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(createMockUsePlugins())
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(mockReload)
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
const reloadButton = screen.getByRole('button', { name: /reload plugins/i })
|
||||
await user.click(reloadButton)
|
||||
await user.click(reloadButton)
|
||||
|
||||
// Second click should succeed
|
||||
expect(mockReload.mutateAsync).toHaveBeenCalledTimes(2)
|
||||
})
|
||||
})
|
||||
|
||||
describe('Plugins - Edge Cases', () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks()
|
||||
})
|
||||
|
||||
it('empty plugin list', () => {
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(createMockUsePlugins([]))
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
expect(screen.getByText(/no plugins found/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('all plugins disabled', () => {
|
||||
const allDisabled = [
|
||||
{ ...mockBuiltInPlugin, enabled: false },
|
||||
{ ...mockExternalPlugin, enabled: false },
|
||||
]
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(createMockUsePlugins(allDisabled))
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
expect(screen.getAllByText(/disabled/i).length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
it('mixed status plugins', () => {
|
||||
const mixedPlugins = [mockBuiltInPlugin, mockDisabledPlugin, mockErrorPlugin]
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(createMockUsePlugins(mixedPlugins))
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
expect(screen.getByText(/loaded/i)).toBeInTheDocument()
|
||||
expect(screen.getByText(/disabled/i)).toBeInTheDocument()
|
||||
expect(screen.getByText(/error/i)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('long plugin names', () => {
|
||||
const longName = 'A'.repeat(100)
|
||||
const longNamePlugin = { ...mockExternalPlugin, name: longName }
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(
|
||||
createMockUsePlugins([longNamePlugin])
|
||||
)
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
expect(screen.getByText(longName)).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('missing metadata', () => {
|
||||
const noMetadata: PluginInfo = {
|
||||
id: 99,
|
||||
uuid: 'no-meta',
|
||||
name: 'No Metadata',
|
||||
type: 'unknown',
|
||||
enabled: true,
|
||||
status: 'loaded',
|
||||
is_built_in: false,
|
||||
created_at: '2025-01-01T00:00:00Z',
|
||||
updated_at: '2025-01-01T00:00:00Z',
|
||||
}
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(createMockUsePlugins([noMetadata]))
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
expect(screen.getByText('No Metadata')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('concurrent toggles', async () => {
|
||||
const user = userEvent.setup()
|
||||
const mockEnable = createMockMutation()
|
||||
mockEnable.mutateAsync = vi.fn().mockResolvedValue({ message: 'Enabled' })
|
||||
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(
|
||||
createMockUsePlugins([mockDisabledPlugin, { ...mockDisabledPlugin, id: 5, uuid: 'disabled2' }])
|
||||
)
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(mockEnable)
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(createMockMutation())
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
await waitFor(() => screen.getAllByRole('switch'))
|
||||
|
||||
const switches = screen.getAllByRole('switch')
|
||||
await Promise.all([user.click(switches[0]), user.click(switches[1])])
|
||||
|
||||
// Both mutations should be called
|
||||
expect(mockEnable.mutateAsync).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('rapid reload clicks', async () => {
|
||||
const user = userEvent.setup()
|
||||
const mockReload = createMockMutation()
|
||||
mockReload.mutateAsync = vi.fn().mockResolvedValue({ message: 'Reloaded', count: 2 })
|
||||
|
||||
vi.mocked(usePluginsHook.usePlugins).mockReturnValue(createMockUsePlugins())
|
||||
vi.mocked(usePluginsHook.useEnablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useDisablePlugin).mockReturnValue(createMockMutation())
|
||||
vi.mocked(usePluginsHook.useReloadPlugins).mockReturnValue(mockReload)
|
||||
|
||||
renderWithProviders(<Plugins />)
|
||||
|
||||
const reloadButton = screen.getByRole('button', { name: /reload plugins/i })
|
||||
await user.tripleClick(reloadButton)
|
||||
|
||||
// Should handle rapid clicks
|
||||
expect(mockReload.mutateAsync).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
@@ -309,4 +309,161 @@ describe('Plugins page', () => {
|
||||
screen.getByText(/External plugins extend Charon with custom DNS providers/i)
|
||||
).toBeInTheDocument()
|
||||
})
|
||||
|
||||
// Phase 2: Additional coverage tests
|
||||
|
||||
it('closes metadata modal when close button is clicked', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderWithQueryClient(<Plugins />)
|
||||
|
||||
const detailsButtons = await screen.findAllByRole('button', { name: /details/i })
|
||||
await user.click(detailsButtons[0])
|
||||
|
||||
expect(await screen.findByText(/Plugin Details:/i)).toBeInTheDocument()
|
||||
|
||||
const closeButton = screen.getByRole('button', { name: /close/i })
|
||||
await user.click(closeButton)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText(/Plugin Details:/i)).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('displays all metadata fields in modal', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderWithQueryClient(<Plugins />)
|
||||
|
||||
const detailsButtons = await screen.findAllByRole('button', { name: /details/i })
|
||||
await user.click(detailsButtons[1]) // PowerDNS plugin
|
||||
|
||||
expect(await screen.findByText('Version')).toBeInTheDocument()
|
||||
expect(screen.getByText('Author')).toBeInTheDocument()
|
||||
expect(screen.getByText('Plugin Type')).toBeInTheDocument()
|
||||
expect(screen.getByText('PowerDNS provider plugin')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('displays error status badge for failed plugins', async () => {
|
||||
renderWithQueryClient(<Plugins />)
|
||||
|
||||
const errorBadge = await screen.findByText('Error')
|
||||
expect(errorBadge).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('displays pending status badge for pending plugins', async () => {
|
||||
const mockPendingPlugin: PluginInfo = {
|
||||
...mockExternalPlugin,
|
||||
status: 'pending',
|
||||
}
|
||||
|
||||
const { usePlugins } = await import('../../hooks/usePlugins')
|
||||
vi.mocked(usePlugins).mockReturnValue({
|
||||
data: [mockPendingPlugin],
|
||||
isLoading: false,
|
||||
refetch: vi.fn(),
|
||||
} as unknown as ReturnType<typeof usePlugins>)
|
||||
|
||||
renderWithQueryClient(<Plugins />)
|
||||
|
||||
expect(await screen.findByText('Pending')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('opens documentation URL in new tab', async () => {
|
||||
const mockWindowOpen = vi.fn()
|
||||
window.open = mockWindowOpen
|
||||
|
||||
const user = userEvent.setup()
|
||||
renderWithQueryClient(<Plugins />)
|
||||
|
||||
const docsLinks = await screen.findAllByText('Docs')
|
||||
await user.click(docsLinks[0])
|
||||
|
||||
expect(mockWindowOpen).toHaveBeenCalledWith('https://developers.cloudflare.com', '_blank')
|
||||
})
|
||||
|
||||
it('handles missing documentation URL gracefully', async () => {
|
||||
const mockPluginWithoutDocs: PluginInfo = {
|
||||
...mockExternalPlugin,
|
||||
documentation_url: undefined,
|
||||
}
|
||||
|
||||
const { usePlugins } = await import('../../hooks/usePlugins')
|
||||
vi.mocked(usePlugins).mockReturnValue({
|
||||
data: [mockPluginWithoutDocs],
|
||||
isLoading: false,
|
||||
refetch: vi.fn(),
|
||||
} as unknown as ReturnType<typeof usePlugins>)
|
||||
|
||||
renderWithQueryClient(<Plugins />)
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.queryByText('Docs')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
it('displays loaded at timestamp in metadata modal', async () => {
|
||||
const user = userEvent.setup()
|
||||
renderWithQueryClient(<Plugins />)
|
||||
|
||||
const detailsButtons = await screen.findAllByRole('button', { name: /details/i })
|
||||
await user.click(detailsButtons[1]) // PowerDNS plugin with loaded_at
|
||||
|
||||
expect(await screen.findByText('Loaded At')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('displays error message inline for failed plugins', async () => {
|
||||
renderWithQueryClient(<Plugins />)
|
||||
|
||||
// Error message should be visible in the card itself
|
||||
expect(await screen.findByText('Failed to load: signature mismatch')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('renders documentation buttons for plugins with docs', async () => {
|
||||
renderWithQueryClient(<Plugins />)
|
||||
|
||||
// Should have at least one Docs button for plugins with documentation_url
|
||||
await waitFor(() => {
|
||||
const docsButtons = screen.queryAllByText('Docs')
|
||||
expect(docsButtons.length).toBeGreaterThanOrEqual(1)
|
||||
})
|
||||
})
|
||||
|
||||
it('shows reload button loading state', async () => {
|
||||
const { useReloadPlugins } = await import('../../hooks/usePlugins')
|
||||
vi.mocked(useReloadPlugins).mockReturnValue({
|
||||
mutateAsync: vi.fn(),
|
||||
isPending: true,
|
||||
} as unknown as ReturnType<typeof useReloadPlugins>)
|
||||
|
||||
renderWithQueryClient(<Plugins />)
|
||||
|
||||
const reloadButton = await screen.findByRole('button', { name: /reload plugins/i })
|
||||
expect(reloadButton).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('has details button for each plugin', async () => {
|
||||
renderWithQueryClient(<Plugins />)
|
||||
|
||||
// Each plugin should have a details button
|
||||
const detailsButtons = await screen.findAllByRole('button', { name: /details/i })
|
||||
expect(detailsButtons.length).toBeGreaterThanOrEqual(1)
|
||||
})
|
||||
|
||||
it('shows disabled status badge for disabled plugins', async () => {
|
||||
const mockDisabledPlugin: PluginInfo = {
|
||||
...mockExternalPlugin,
|
||||
enabled: false,
|
||||
status: 'loaded',
|
||||
}
|
||||
|
||||
const { usePlugins } = await import('../../hooks/usePlugins')
|
||||
vi.mocked(usePlugins).mockReturnValue({
|
||||
data: [mockDisabledPlugin],
|
||||
isLoading: false,
|
||||
refetch: vi.fn(),
|
||||
} as unknown as ReturnType<typeof usePlugins>)
|
||||
|
||||
renderWithQueryClient(<Plugins />)
|
||||
|
||||
expect(await screen.findByText('Disabled')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import SecurityHeaders from '../../pages/SecurityHeaders';
|
||||
import { securityHeadersApi, SecurityHeaderProfile } from '../../api/securityHeaders';
|
||||
import { createBackup } from '../../api/backups';
|
||||
@@ -307,4 +308,370 @@ describe('SecurityHeaders', () => {
|
||||
expect(screen.getByText('95')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// Additional coverage tests for Phase 3
|
||||
|
||||
it('should display preset tooltip information', async () => {
|
||||
const mockProfiles = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Basic Security',
|
||||
is_preset: true,
|
||||
preset_type: 'basic',
|
||||
security_score: 65,
|
||||
updated_at: '2025-12-18T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
|
||||
vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
|
||||
|
||||
const user = userEvent.setup();
|
||||
render(<SecurityHeaders />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Basic Security')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Find info icon and hover
|
||||
const infoButtons = screen.getAllByRole('button').filter(btn => {
|
||||
const svg = btn.querySelector('svg');
|
||||
return svg?.classList.contains('lucide-info');
|
||||
});
|
||||
|
||||
if (infoButtons.length > 0) {
|
||||
await user.hover(infoButtons[0]);
|
||||
}
|
||||
});
|
||||
|
||||
it('should show view button for preset profiles', async () => {
|
||||
const mockProfiles = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Strict Security',
|
||||
is_preset: true,
|
||||
preset_type: 'strict',
|
||||
security_score: 95,
|
||||
updated_at: '2025-12-18T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
|
||||
vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
|
||||
|
||||
render(<SecurityHeaders />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: /View/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should close form when dialog is dismissed', async () => {
|
||||
vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue([]);
|
||||
vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
|
||||
|
||||
render(<SecurityHeaders />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByRole('button', { name: /Create Profile/ })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const createButton = screen.getAllByRole('button', { name: /Create Profile/ })[0];
|
||||
fireEvent.click(createButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Create Security Header Profile/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Close dialog by pressing escape or clicking outside
|
||||
const dialog = screen.getByRole('dialog');
|
||||
expect(dialog).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should sort preset profiles by security score', async () => {
|
||||
const mockProfiles = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Paranoid Security',
|
||||
is_preset: true,
|
||||
preset_type: 'paranoid',
|
||||
security_score: 100,
|
||||
updated_at: '2025-12-18T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Basic Security',
|
||||
is_preset: true,
|
||||
preset_type: 'basic',
|
||||
security_score: 65,
|
||||
updated_at: '2025-12-18T00:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'API Friendly',
|
||||
is_preset: true,
|
||||
preset_type: 'api-friendly',
|
||||
security_score: 75,
|
||||
updated_at: '2025-12-18T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
|
||||
vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
|
||||
|
||||
render(<SecurityHeaders />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Basic Security')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Verify all presets are displayed
|
||||
expect(screen.getByText('Paranoid Security')).toBeInTheDocument();
|
||||
expect(screen.getByText('API Friendly')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display updated date for profiles', async () => {
|
||||
const mockProfiles = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Test Profile',
|
||||
is_preset: false,
|
||||
security_score: 85,
|
||||
updated_at: '2025-01-20T10:30:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
|
||||
vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
|
||||
|
||||
render(<SecurityHeaders />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Updated/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle clone button for custom profiles', async () => {
|
||||
const mockProfiles = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Custom Profile',
|
||||
description: 'My custom config',
|
||||
is_preset: false,
|
||||
security_score: 80,
|
||||
hsts_enabled: true,
|
||||
hsts_max_age: 31536000,
|
||||
updated_at: '2025-12-18T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
|
||||
vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
|
||||
vi.mocked(securityHeadersApi.createProfile).mockResolvedValue({
|
||||
id: 2,
|
||||
name: 'Custom Profile (Copy)',
|
||||
security_score: 80,
|
||||
} as SecurityHeaderProfile);
|
||||
|
||||
render(<SecurityHeaders />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Custom Profile')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
const cloneButton = buttons.find(btn => btn.querySelector('.lucide-copy'));
|
||||
if (cloneButton) {
|
||||
fireEvent.click(cloneButton);
|
||||
}
|
||||
|
||||
await waitFor(() => {
|
||||
expect(securityHeadersApi.createProfile).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display profile descriptions', async () => {
|
||||
const mockProfiles = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Test Profile',
|
||||
description: 'This is a test profile description',
|
||||
is_preset: false,
|
||||
security_score: 85,
|
||||
updated_at: '2025-12-18T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
|
||||
vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
|
||||
|
||||
render(<SecurityHeaders />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('This is a test profile description')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle delete confirmation cancellation', async () => {
|
||||
const mockProfiles = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Test Profile',
|
||||
is_preset: false,
|
||||
security_score: 85,
|
||||
updated_at: '2025-12-18T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
|
||||
vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
|
||||
|
||||
render(<SecurityHeaders />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Test Profile')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Click delete button
|
||||
const buttons = screen.getAllByRole('button');
|
||||
const deleteButton = buttons.find(btn => btn.querySelector('.lucide-trash-2, .lucide-trash'));
|
||||
if (deleteButton) {
|
||||
fireEvent.click(deleteButton);
|
||||
}
|
||||
|
||||
// Wait for confirmation dialog
|
||||
await waitFor(() => {
|
||||
const headings = screen.getAllByText(/Confirm Deletion/i);
|
||||
expect(headings.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
// Click cancel instead of delete
|
||||
const cancelButton = screen.getByRole('button', { name: /Cancel/i });
|
||||
fireEvent.click(cancelButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(securityHeadersApi.deleteProfile).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('should show info alert with security configuration message', async () => {
|
||||
vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue([]);
|
||||
vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
|
||||
|
||||
render(<SecurityHeaders />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Secure Your Applications/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Security headers protect against common web vulnerabilities/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display all three action buttons for custom profiles', async () => {
|
||||
const mockProfiles = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Custom Profile',
|
||||
is_preset: false,
|
||||
security_score: 85,
|
||||
updated_at: '2025-12-18T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
|
||||
vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
|
||||
|
||||
render(<SecurityHeaders />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Custom Profile')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Should have Edit button
|
||||
expect(screen.getByRole('button', { name: /Edit/i })).toBeInTheDocument();
|
||||
|
||||
// Should have Clone button (icon only)
|
||||
const buttons = screen.getAllByRole('button');
|
||||
const cloneButton = buttons.find(btn => btn.querySelector('.lucide-copy'));
|
||||
expect(cloneButton).toBeDefined();
|
||||
|
||||
// Should have Delete button (icon only)
|
||||
const deleteButton = buttons.find(btn => btn.querySelector('.lucide-trash-2, .lucide-trash'));
|
||||
expect(deleteButton).toBeDefined();
|
||||
});
|
||||
|
||||
it('should handle profile update submission', async () => {
|
||||
const mockProfiles = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Test Profile',
|
||||
is_preset: false,
|
||||
security_score: 85,
|
||||
hsts_enabled: true,
|
||||
updated_at: '2025-12-18T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
|
||||
vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
|
||||
vi.mocked(securityHeadersApi.updateProfile).mockResolvedValue({
|
||||
id: 1,
|
||||
name: 'Updated Profile',
|
||||
security_score: 90,
|
||||
} as SecurityHeaderProfile);
|
||||
vi.mocked(securityHeadersApi.calculateScore).mockResolvedValue({
|
||||
score: 85,
|
||||
max_score: 100,
|
||||
breakdown: {},
|
||||
suggestions: [],
|
||||
});
|
||||
|
||||
render(<SecurityHeaders />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('Test Profile')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const editButton = screen.getByRole('button', { name: /Edit/i });
|
||||
fireEvent.click(editButton);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/Edit Security Header Profile/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display system profiles section title', async () => {
|
||||
const mockProfiles = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Basic Security',
|
||||
is_preset: true,
|
||||
preset_type: 'basic',
|
||||
security_score: 65,
|
||||
updated_at: '2025-12-18T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue(mockProfiles as SecurityHeaderProfile[]);
|
||||
vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
|
||||
|
||||
render(<SecurityHeaders />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('System Profiles (Read-Only)')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('should render empty state action in custom profiles section', async () => {
|
||||
vi.mocked(securityHeadersApi.listProfiles).mockResolvedValue([]);
|
||||
vi.mocked(securityHeadersApi.getPresets).mockResolvedValue([]);
|
||||
|
||||
render(<SecurityHeaders />, { wrapper: createWrapper() });
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText('No custom profiles yet')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
const createButtons = screen.getAllByRole('button', { name: /Create Profile/i });
|
||||
expect(createButtons.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user