Manual Testing: Certificate Deletion UX Enhancement #897
Description
Manual Testing: Certificate Deletion UX Enhancement
Description
Manual test plan for expanded certificate deletion. Focuses on edge cases and race conditions that automated E2E tests cannot fully cover.
Pre-requisites
- A running Charon instance with certificates in various states:
- At least one expired Let's Encrypt certificate not attached to a proxy host
- At least one custom (uploaded) certificate not attached to a proxy host
- At least one certificate attached to a proxy host (in use)
- At least one valid (non-expired) Let's Encrypt production certificate not in use
- Access to the Charon Certificates page
Test Cases
Happy Path
- Delete expired LE cert not in use: Click the delete button on an expired Let's Encrypt certificate that is not attached to any proxy host. Confirm in the dialog. Certificate disappears from the list and a success toast appears.
- Delete custom cert not in use: Click the delete button on an uploaded custom certificate not attached to any host. Confirm. Certificate is removed with a success toast.
- Delete staging cert not in use: Click the delete button on a staging certificate not attached to any host. Confirm. Certificate is removed with a success toast.
Delete Prevention
- In-use cert shows disabled button: Find a certificate attached to a proxy host. Verify the delete button is visible but disabled.
- In-use cert tooltip: Hover over the disabled delete button. A tooltip should explain that the certificate is in use and cannot be deleted.
- Valid LE cert hides delete button: Find a valid (non-expired) Let's Encrypt production certificate not attached to any host. Verify no delete button is shown — Charon manages these automatically.
Confirmation Dialog
- Cancel does not delete: Click the delete button on a deletable certificate. In the confirmation dialog, click Cancel. The certificate should remain in the list.
- Escape key closes dialog: Open the confirmation dialog. Press Escape. The dialog closes and the certificate remains.
- Click overlay closes dialog: Open the confirmation dialog. Click outside the dialog (on the overlay). The dialog closes and the certificate remains.
- Confirm deletes: Open the confirmation dialog. Click the Delete/Confirm button. The certificate is removed and a success toast appears.
Keyboard Navigation
- Tab through dialog: Open the confirmation dialog. Press Tab to move focus between the Cancel and Delete buttons. Focus order should be logical (Cancel → Delete or Delete → Cancel).
- Enter activates focused button: Tab to the Cancel button and press Enter — dialog closes, certificate remains. Repeat with the Delete button — certificate is removed.
- Focus trap: With the dialog open, Tab should cycle within the dialog and not escape to the page behind it.
Edge Cases & Race Conditions
- Rapid double-click on delete: Quickly double-click the delete button. Only one confirmation dialog should appear. Only one delete request should be sent.
- Cert becomes in-use between dialog open and confirm: Open the delete dialog for a certificate. In another tab, attach that certificate to a proxy host. Return and confirm deletion. The server should return a 409 error and the UI should show an appropriate error message — the certificate should remain.
- Delete when backup may fail (low disk space): If testable, simulate low disk space. Attempt a deletion. The server creates a backup before deleting — verify the error is surfaced to the user if the backup fails.
- Network error during delete: Open the delete dialog and disconnect from the network (or throttle to offline in DevTools). Confirm deletion. An error message should appear and the certificate should remain.
Visual & UX Consistency
- Dialog styling: The confirmation dialog should match the application theme (dark/light mode).
- Toast messages: Success and error toasts should appear in the expected position and auto-dismiss.
- List updates without full reload: After a successful deletion, the certificate list should update without requiring a page refresh.
Related
Auto-created from certificate-delete-manual-test.md