v0.1.0

frontend/components/letterfeed/__tests__/AddNewsletterDialog.test.tsx

@@ -0,0 +1,74 @@
+import React from "react"
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { AddNewsletterDialog } from "../AddNewsletterDialog"
+import * as api from "@/lib/api"
+
+// Mock the API module
+jest.mock("@/lib/api", () => ({
+  ...jest.requireActual("@/lib/api"),
+  createNewsletter: jest.fn(),
+}))
+
+const mockedApi = api as jest.Mocked<typeof api>
+
+describe("AddNewsletterDialog", () => {
+  const handleOpenChange = jest.fn()
+  const handleSuccess = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it("allows user to fill out the form and submit", async () => {
+    mockedApi.createNewsletter.mockResolvedValueOnce({
+      id: 1,
+      name: "My New Newsletter",
+      is_active: true,
+      senders: [{ id: 1, email: "test@example.com", newsletter_id: 1 }],
+      entries_count: 0,
+    })
+
+    render(<AddNewsletterDialog isOpen={true} onOpenChange={handleOpenChange} onSuccess={handleSuccess} />)
+
+    // Fill out the form
+    fireEvent.change(screen.getByLabelText(/Newsletter Name/i), { target: { value: "My New Newsletter" } })
+    fireEvent.change(screen.getByPlaceholderText(/Enter email address/i), { target: { value: "test@example.com" } })
+
+    // Submit the form
+    fireEvent.click(screen.getByRole("button", { name: /Register Newsletter/i }))
+
+    // Wait for the async operation to complete
+    await waitFor(() => {
+      expect(mockedApi.createNewsletter).toHaveBeenCalledWith({
+        name: "My New Newsletter",
+        sender_emails: ["test@example.com"],
+      })
+      expect(handleSuccess).toHaveBeenCalledTimes(1)
+      expect(handleOpenChange).toHaveBeenCalledWith(false)
+    })
+  })
+
+  it("allows adding and removing email fields", () => {
+    render(<AddNewsletterDialog isOpen={true} onOpenChange={() => {}} onSuccess={() => {}} />)
+
+    // Initial state
+    expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(1)
+
+    // Add another email
+    fireEvent.click(screen.getByRole("button", { name: /Add Another Email/i }))
+    expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(2)
+
+    // Remove the first email
+    fireEvent.click(screen.getAllByRole("button", { name: /Remove/i })[0])
+    expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(1)
+  })
+
+  it("closes the dialog when cancel is clicked", () => {
+    render(<AddNewsletterDialog isOpen={true} onOpenChange={handleOpenChange} onSuccess={handleSuccess} />)
+
+    fireEvent.click(screen.getByRole("button", { name: /Cancel/i }))
+    expect(handleOpenChange).toHaveBeenCalledWith(false)
+    expect(handleSuccess).not.toHaveBeenCalled()
+  })
+})