From b94173c0f165ba3aaa0876ea13f7eefcaeb946b5 Mon Sep 17 00:00:00 2001 From: Mio Date: Fri, 28 Feb 2025 13:26:58 -0800 Subject: [PATCH 1/2] feat: added announcement schema and create announcement page --- __tests__/CreateAnnouncement.test.tsx | 80 ++++++++++++++ src/app/createAnnouncement/page.tsx | 153 ++++++++++++++++++++++++++ src/database/announcementSchema.ts | 16 +++ 3 files changed, 249 insertions(+) create mode 100644 __tests__/CreateAnnouncement.test.tsx create mode 100644 src/app/createAnnouncement/page.tsx create mode 100644 src/database/announcementSchema.ts diff --git a/__tests__/CreateAnnouncement.test.tsx b/__tests__/CreateAnnouncement.test.tsx new file mode 100644 index 0000000..5c8d6dd --- /dev/null +++ b/__tests__/CreateAnnouncement.test.tsx @@ -0,0 +1,80 @@ +/** + * @jest-environment jsdom + */ + +import React from "react"; +import "@testing-library/jest-dom"; +import { render, screen, fireEvent, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import CreateAnnouncement from "@/app/createAnnouncement/page"; + +describe("CreateAnnouncement", () => { + it("renders the form correctly", () => { + render(); + + expect(screen.getByText("New Message")).toBeInTheDocument(); + expect(screen.getByLabelText("Send to")).toBeInTheDocument(); + expect(screen.getByLabelText("Subject")).toBeInTheDocument(); + expect(screen.getByLabelText("Message")).toBeInTheDocument(); + expect(screen.getByRole("button", { name: /Send/i })).toBeInTheDocument(); + expect(screen.getByRole("button", { name: /Cancel/i })).toBeInTheDocument(); + }); + + it("updates form fields when user types", async () => { + render(); + + const recipientsInput = screen.getByPlaceholderText("Find recipients") as HTMLInputElement; + const subjectInput = screen.getByPlaceholderText("Subject line here") as HTMLInputElement; + const messageInput = screen.getByPlaceholderText("Type your message here...") as HTMLTextAreaElement; + + await userEvent.type(recipientsInput, "testUser"); + await userEvent.type(subjectInput, "Meeting Update"); + await userEvent.type(messageInput, "Hello everyone, please note the meeting time change."); + + expect(recipientsInput.value).toBe("testUser"); + expect(subjectInput.value).toBe("Meeting Update"); + expect(messageInput.value).toBe("Hello everyone, please note the meeting time change."); + }); + + it("handles file selection correctly", () => { + render(); + + const fileInput = screen.getByLabelText(/Add attachment/i); + const file = new File(["sample content"], "sample.txt", { type: "text/plain" }); + + fireEvent.change(fileInput, { target: { files: [file] } }); + + // Check if the file name appears correctly + const attachmentText = screen.getByText("sample.txt"); + expect(attachmentText).toBeInTheDocument(); + }); + + it("handles form submission correctly", () => { + const logSpy = jest.spyOn(console, "log").mockImplementation(); + + // Render the component + render(); + + const recipientsInput = screen.getByPlaceholderText(/Find recipients/i); + const subjectInput = screen.getByPlaceholderText(/Subject line here/i); + const messageTextarea = screen.getByPlaceholderText(/Type your message here/i); + + fireEvent.change(recipientsInput, { target: { value: "Test User" } }); + fireEvent.change(subjectInput, { target: { value: "Test Subject" } }); + fireEvent.change(messageTextarea, { target: { value: "Test Message" } }); + + // Simulate form submission + const submitButton = screen.getByRole("button", { name: /Send/i }); + fireEvent.click(submitButton); + + // Check if console.log was called with the correct form data + expect(logSpy).toHaveBeenCalledWith("Submitted Data: ", { + recipients: "Test User", + subject: "Test Subject", + message: "Test Message", + attachment: null, + }); + + logSpy.mockRestore(); + }); +}); diff --git a/src/app/createAnnouncement/page.tsx b/src/app/createAnnouncement/page.tsx new file mode 100644 index 0000000..03b52b8 --- /dev/null +++ b/src/app/createAnnouncement/page.tsx @@ -0,0 +1,153 @@ +"use client"; + +import { useState } from "react"; +import { + Box, + Button, + FormControl, + FormLabel, + Input, + Textarea, + VStack, + IconButton, + HStack, + useToast, + Flex, + Text, +} from "@chakra-ui/react"; +import { AttachmentIcon } from "@chakra-ui/icons"; + +const CreateAnnouncement = () => { + type AnnouncementData = { + recipients: string; + subject: string; + message: string; + attachment: File | null; + }; + + const [formData, setFormData] = useState({ + recipients: "", + subject: "", + message: "", + attachment: null, // Make sure this is 'attachment' + }); + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: value, + })); + }; + + const handleFileChange = (e: React.ChangeEvent) => { + if (e.target.files && e.target.files[0]) { + setFormData((prev) => ({ + ...prev, + attachment: e.target.files![0], + })); + } + }; + + const handleSubmit = () => { + console.log("Submitted Data: ", formData); + }; + + return ( + + + + New Message + + + Send to + + + + Subject + + + + Message +