101 messages mobile

.env

@@ -1,5 +1,5 @@
 # create local copy of this file and rename to .env.local
 # make sure to add .env.local to .gitignore!!
-MONGO_URI={mongo-uri-here}
+# MONGO_URI={mongo-uri-here}
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_YW11c2luZy1zZWFzbmFpbC01OS5jbGVyay5hY2NvdW50cy5kZXYk
 NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL=/signupredirect

__tests__/CreateAnnouncement.test.tsx

@@ -7,6 +7,7 @@ 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";
+import { act } from "react";
 
 jest.mock("@clerk/nextjs", () => ({
   ClerkProvider: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
@@ -29,71 +30,94 @@ jest.mock("@clerk/nextjs", () => ({
   }),
 }));
 
+beforeAll(() => {
+  global.fetch = jest.fn(() =>
+    Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve([{ name: "Test User", email: "test@example.com", role: "admin" }]),
+    }),
+  ) as jest.Mock;
+});
+
 describe("CreateAnnouncement", () => {
-  it("renders the form correctly", () => {
-    render(<CreateAnnouncement />);
+  it("renders the form correctly", async () => {
+    await act(async () => {
+      render(<CreateAnnouncement />);
+    });
 
     expect(screen.getByText("New Message")).toBeInTheDocument();
-    expect(screen.getByLabelText("Send to")).toBeInTheDocument();
+    expect(screen.getByText("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: "Send" })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: /Cancel/i })).toBeInTheDocument();
   });
 
   it("updates form fields when user types", async () => {
-    render(<CreateAnnouncement />);
+    await act(async () => {
+      render(<CreateAnnouncement />);
+    });
 
-    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(<CreateAnnouncement />);
+  it("handles file selection correctly", async () => {
+    await act(async () => {
+      render(<CreateAnnouncement />);
+    });
+
+    const fileInput = screen.getByTestId("file-upload");
 
-    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", () => {
+  it("submits form with correct data", async () => {
     const logSpy = jest.spyOn(console, "log").mockImplementation();
 
-    // Render the component
-    render(<CreateAnnouncement />);
+    await act(async () => {
+      render(<CreateAnnouncement />);
+    });
+
+    const sendToAllButton = screen.getByRole("button", { name: "Send to All" });
+    await act(async () => {
+      fireEvent.click(sendToAllButton);
+    });
 
-    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" } });
+    await act(async () => {
+      fireEvent.change(subjectInput, { target: { value: "Test Subject" } });
+      fireEvent.change(messageTextarea, { target: { value: "Test Message" } });
+    });
+
+    const submitButton = screen.getByRole("button", { name: /^Send$/ });
 
-    // Simulate form submission
-    const submitButton = screen.getByRole("button", { name: /Send/i });
-    fireEvent.click(submitButton);
+    await act(async () => {
+      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,
+    await waitFor(() => {
+      expect(logSpy).toHaveBeenCalledWith(
+        "Submitted Data: ",
+        expect.objectContaining({
+          subject: "Test Subject",
+          message: "Test Message",
+          attachment: null,
+        }),
+      );
     });
 
     logSpy.mockRestore();

src/app/api/user/route.ts

@@ -3,7 +3,7 @@ import connectDB from "@/database/db";
 import User, { IUser } from "@/database/userSchema";
 
 // get all users
-export async function GET(request: Request) {
+export async function GET(request: NextRequest) {
   await connectDB();
 
   try {

src/app/createAnnouncement/announcement.module.css

@@ -0,0 +1,25 @@
+
+
+.recipientSection {
+  width: 100%;
+}
+
+.buttonRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.checkboxContainer {
+  max-height: 150px;
+  overflow-y: auto;
+  border: 1px solid #ffffff;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}