@planningcenter/sweetest-alert 0.1.0

package/tests/sweetest_alert.test.jsx

@@ -0,0 +1,254 @@
+import React from "react"
+import { screen, fireEvent, waitFor, act } from "@testing-library/react"
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest"
+import { SweetestAlert } from "../src/sweetest_alert.tsx"
+
+describe("SweetestAlert", () => {
+  const mockConfirm = vi.fn()
+  const mockCancel = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    document.querySelectorAll("dialog.pco-sweetest-alert").forEach((dialog) => dialog.remove())
+  })
+
+  afterEach(() => {
+    document.querySelectorAll("dialog.pco-sweetest-alert").forEach((dialog) => dialog.remove())
+  })
+
+  describe("Initial Render", () => {
+    beforeEach(async () => {
+      await act(async () => {
+        SweetestAlert({
+          title: "Test Title",
+          content: "Test content",
+          confirm: mockConfirm,
+          cancel: mockCancel,
+        })
+      })
+    })
+
+    it("creates and displays a modal dialog", () => {
+      const dialog = document.querySelector("dialog.pco-sweetest-alert")
+      expect(dialog).toBeInTheDocument()
+      expect(dialog).toHaveAttribute("open")
+    })
+
+    it("displays the provided title as a heading", () => {
+      expect(screen.getByRole("heading", { name: "Test Title" })).toBeInTheDocument()
+    })
+
+    it("displays the content text in the dialog body", () => {
+      expect(screen.getByText("Test content")).toBeInTheDocument()
+    })
+
+    it("displays a cancel button", () => {
+      expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument()
+    })
+
+    it("displays a confirm button with default label", () => {
+      expect(screen.getByRole("button", { name: "Okay" })).toBeInTheDocument()
+    })
+
+    it("displays a warning icon when no type is specified", () => {
+      const icon = document.querySelector(".pco-sweetest-alert__icon.pco-sweetest-alert--warning")
+      expect(icon).toBeInTheDocument()
+      expect(icon.querySelector("path")).toBeInTheDocument()
+    })
+  })
+
+  describe("Alert Types", () => {
+    it("displays success icon when type is set to success", async () => {
+      await act(async () => {
+        SweetestAlert({
+          title: "Success",
+          content: "Success content",
+          type: "success",
+        })
+      })
+
+      const icon = document.querySelector(".pco-sweetest-alert__icon.pco-sweetest-alert--success")
+      expect(icon).toBeInTheDocument()
+      expect(icon.querySelector("path")).toBeInTheDocument()
+    })
+
+    it("displays error icon when type is set to error", async () => {
+      await act(async () => {
+        SweetestAlert({
+          title: "Error",
+          content: "Error content",
+          type: "error",
+        })
+      })
+
+      const icon = document.querySelector(".pco-sweetest-alert__icon.pco-sweetest-alert--error")
+      expect(icon).toBeInTheDocument()
+      expect(icon.querySelector("path")).toBeInTheDocument()
+    })
+
+    it("displays info icon when type is set to info", async () => {
+      await act(async () => {
+        SweetestAlert({
+          title: "Info",
+          content: "Info content",
+          type: "info",
+        })
+      })
+
+      const icon = document.querySelector(".pco-sweetest-alert__icon.pco-sweetest-alert--info")
+      expect(icon).toBeInTheDocument()
+      expect(icon.querySelector("path")).toBeInTheDocument()
+    })
+
+    it("displays red warning icon and delete button kind when type is set to danger", async () => {
+      await act(async () => {
+        SweetestAlert({
+          title: "Danger",
+          content: "Danger content",
+          type: "danger",
+        })
+      })
+
+      const icon = document.querySelector(".pco-sweetest-alert__icon.pco-sweetest-alert--danger")
+      expect(icon).toBeInTheDocument()
+      expect(icon.querySelector("path")).toBeInTheDocument()
+
+      const button = document.querySelector(".tds-btn.tds-btn--delete")
+      expect(button).toBeInTheDocument()
+    })
+  })
+
+  describe("Button Interactions", () => {
+    beforeEach(async () => {
+      await act(async () => {
+        SweetestAlert({
+          title: "Interactive Test",
+          content: "Test content",
+          confirm: mockConfirm,
+          cancel: mockCancel,
+        })
+      })
+    })
+
+    it("executes confirm callback and removes dialog when confirm button is clicked", async () => {
+      const confirmButton = screen.getByRole("button", { name: "Okay" })
+      fireEvent.click(confirmButton)
+
+      await waitFor(() => {
+        expect(mockConfirm).toHaveBeenCalledTimes(1)
+      })
+
+      // Dialog should be removed from DOM
+      await waitFor(() => {
+        expect(document.querySelector("dialog.pco-sweetest-alert")).not.toBeInTheDocument()
+      })
+    })
+
+    it("executes cancel callback and removes dialog when cancel button is clicked", async () => {
+      const cancelButton = screen.getByRole("button", { name: "Cancel" })
+      fireEvent.click(cancelButton)
+
+      await waitFor(() => {
+        expect(mockCancel).toHaveBeenCalledTimes(1)
+      })
+
+      // Dialog should be removed from DOM
+      await waitFor(() => {
+        expect(document.querySelector("dialog.pco-sweetest-alert")).not.toBeInTheDocument()
+      })
+    })
+
+    it("executes cancel callback and removes dialog when escape key is pressed", async () => {
+      const dialog = document.querySelector("dialog.pco-sweetest-alert")
+
+      // Simulate pressing Escape key which triggers the dialog's close event
+      fireEvent.keyDown(dialog, { key: "Escape", code: "Escape" })
+
+      // Manually trigger the close event since jsdom doesn't handle native dialog behavior
+      fireEvent(dialog, new Event("close"))
+
+      await waitFor(() => {
+        expect(mockCancel).toHaveBeenCalledTimes(1)
+      })
+
+      // Dialog should be removed from DOM
+      await waitFor(() => {
+        expect(document.querySelector("dialog.pco-sweetest-alert")).not.toBeInTheDocument()
+      })
+    })
+  })
+
+  describe("Custom Button Labels", () => {
+    beforeEach(async () => {
+      await act(async () => {
+        SweetestAlert({
+          title: "Custom Buttons",
+          content: "Test content",
+          confirmButton: "Yes please",
+          confirm: mockConfirm,
+          cancel: mockCancel,
+        })
+      })
+    })
+
+    it("displays custom confirm button text when confirmButton prop is provided", () => {
+      expect(screen.getByRole("button", { name: "Yes please" })).toBeInTheDocument()
+    })
+  })
+
+  describe("Hide Cancel Button", () => {
+    beforeEach(async () => {
+      await act(async () => {
+        SweetestAlert({
+          title: "Custom Buttons",
+          content: "Test content",
+          confirm: mockConfirm,
+          cancel: mockCancel,
+          hideCancel: true,
+        })
+      })
+    })
+
+    it("does not display cancel button when hideCancel is true", () => {
+      expect(screen.queryByRole("button", { name: "Cancel" })).not.toBeInTheDocument()
+    })
+  })
+
+  describe("Renders HTML instead of text content", () => {
+    it("renders content property as HTML", async () => {
+      await act(async () => {
+        const HtmlFrag = () => {
+          return <strong>Test content</strong>
+        }
+
+        SweetestAlert({
+          title: "Custom HTML",
+          content: <HtmlFrag />,
+          confirm: mockConfirm,
+          cancel: mockCancel,
+        })
+      })
+
+      expect(screen.getByText("Test content")).toBeInTheDocument()
+      expect(screen.getByText("Test content").tagName).toBe("STRONG")
+    })
+
+    it("does not render content property as HTML", async () => {
+      await act(async () => {
+        SweetestAlert({
+          title: "Custom HTML",
+          content: "<strong>Test content</strong>",
+          confirm: mockConfirm,
+          cancel: mockCancel,
+        })
+      })
+
+      // Test that escaped HTML is displayed
+      expect(screen.getByText("<strong>Test content</strong>")).toBeInTheDocument()
+
+      // Test that actual HTML element is NOT created by checking there's no strong element
+      const strongElement = document.querySelector("strong")
+      expect(strongElement).not.toBeInTheDocument()
+    })
+  })
+})

package/tests/test-setup.ts

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom'
+import { vi, beforeAll } from 'vitest'
+
+// Mock dialog.showModal() method which is not available in jsdom
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = vi.fn(function (this: HTMLDialogElement) {
+    this.open = true
+  })
+
+  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+    this.open = false
+  })
+})

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es2024",
+    "module": "esnext",
+    "lib": ["es2024", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "allowJs": true,
+    "checkJs": false,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*", "tests/sweetest_alert.test.jsx", "tests/test-setup.ts"],
+  "exclude": ["node_modules"]
+}

package/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  root: './docs',
+  server: {
+    port: 3000,
+    open: true
+  }
+})

package/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './tests/test-setup.ts',
+  },
+})