feat: Enhance Notifications feature with accessibility improvements and test remediation

- Added aria-label attributes to buttons in Notifications component for better accessibility.
- Updated Notifications tests to use new button interactions and ensure proper functionality.
- Refactored notifications payload tests to mock API responses and validate payload transformations.
- Improved error handling and feedback in notification provider tests.
- Adjusted Telegram notification provider tests to streamline edit interactions.
This commit is contained in:
GitHub Actions
2026-03-11 15:33:12 +00:00
parent 2f76b4eadc
commit fd056c05a7
11 changed files with 1549 additions and 955 deletions
+3 -1
View File
@@ -703,12 +703,13 @@ const Notifications: FC = () => {
onClick={() => testMutation.mutate({ ...provider, type: normalizeProviderType(provider.type) })}
isLoading={testMutation.isPending}
title={t('notificationProviders.sendTest')}
aria-label={t('notificationProviders.sendTest')}
>
<Send className="w-4 h-4" />
</Button>
)}
{!isUnsupportedProviderType(provider.type) && (
<Button variant="secondary" size="sm" onClick={() => setEditingId(provider.id)}>
<Button variant="secondary" size="sm" onClick={() => setEditingId(provider.id)} aria-label={t('common.edit')}>
<Edit2 className="w-4 h-4" />
</Button>
)}
@@ -718,6 +719,7 @@ const Notifications: FC = () => {
onClick={() => {
if (confirm(t('notificationProviders.deleteConfirm'))) deleteMutation.mutate(provider.id);
}}
aria-label={t('common.delete')}
>
<Trash2 className="w-4 h-4" />
</Button>
@@ -446,13 +446,13 @@ describe('Notifications', () => {
it('submits provider test action from form using normalized discord type', async () => {
vi.mocked(notificationsApi.testProvider).mockResolvedValue()
setupMocks([baseProvider])
const user = userEvent.setup()
renderWithQueryClient(<Notifications />)
await user.click(await screen.findByTestId('add-provider-btn'))
await user.type(screen.getByTestId('provider-name'), 'Preview/Test Provider')
await user.type(screen.getByTestId('provider-url'), 'https://example.com/webhook')
const row = await screen.findByTestId(`provider-row-${baseProvider.id}`)
await user.click(within(row).getByRole('button', { name: /edit/i }))
await user.click(screen.getByTestId('provider-test-btn'))
@@ -568,13 +568,14 @@ describe('Notifications', () => {
it('shows error toast when test mutation fails', async () => {
vi.mocked(notificationsApi.testProvider).mockRejectedValue(new Error('Connection refused'))
setupMocks([baseProvider])
const user = userEvent.setup()
renderWithQueryClient(<Notifications />)
await user.click(await screen.findByTestId('add-provider-btn'))
await user.type(screen.getByTestId('provider-name'), 'Failing Provider')
await user.type(screen.getByTestId('provider-url'), 'https://example.com/webhook')
const row = await screen.findByTestId(`provider-row-${baseProvider.id}`)
await user.click(within(row).getByRole('button', { name: /edit/i }))
await user.click(screen.getByTestId('provider-test-btn'))
await waitFor(() => {
@@ -582,6 +583,15 @@ describe('Notifications', () => {
})
})
it('disables test button when provider is new (unsaved) and not email type', async () => {
const user = userEvent.setup()
renderWithQueryClient(<Notifications />)
await user.click(await screen.findByTestId('add-provider-btn'))
const testBtn = screen.getByTestId('provider-test-btn')
expect(testBtn).toBeDisabled()
})
it('shows JSON template selector for gotify provider', async () => {
const user = userEvent.setup()
renderWithQueryClient(<Notifications />)