diff --git a/src/components/certificate-delete-dialog/CertificateDeleteDialog.test.tsx b/src/components/certificate-delete-dialog/CertificateDeleteDialog.test.tsx
new file mode 100644
index 00000000..f5f8b50b
--- /dev/null
+++ b/src/components/certificate-delete-dialog/CertificateDeleteDialog.test.tsx
@@ -0,0 +1,52 @@
+import { render, userEvent } from "@testing";
+import { CertificateDeleteDialog } from "./CertificateDeleteDialog";
+
+describe("", () => {
+ const certificateName = "Certificate Name";
+ const certificateId = "1";
+
+ it("Should render and handle buttons click", async () => {
+ const handleClose = vi.fn();
+ const handleDelete = vi.fn((data) => data);
+
+ const { getAllByRole, getByText } = render(
+
+ );
+
+ expect(
+ getByText(`Are you sure you want to delete “${certificateName}”?`)
+ ).toBeInTheDocument();
+
+ const buttons = getAllByRole("button");
+
+ // Cancel button
+ await userEvent.click(buttons[0]);
+
+ expect(handleClose).toBeCalledTimes(1);
+
+ // Delete button
+ await userEvent.click(buttons[1]);
+
+ expect(handleDelete).toBeCalledTimes(1);
+ expect(handleDelete).toBeCalledWith(certificateId);
+ });
+
+ it("Should render loading", async () => {
+ const { getByText } = render(
+
+ );
+
+ expect(getByText(/Deleting certificate/)).toBeInTheDocument();
+ });
+});