diff --git a/__test__/components/Calendar.test.tsx b/__test__/components/Calendar.test.tsx index 50abad8..7560a5a 100644 --- a/__test__/components/Calendar.test.tsx +++ b/__test__/components/Calendar.test.tsx @@ -217,7 +217,7 @@ describe("calendar Availability search", () => { renderWithProviders(, preloadedState); - const input = screen.getByPlaceholderText(/search user/i); + const input = screen.getByPlaceholderText(/start typing a name or email/i); userEvent.type(input, "New"); const option = await screen.findByText("New User"); @@ -242,7 +242,7 @@ describe("calendar Availability search", () => { }); renderWithProviders(, preloadedState); - const input = screen.getByPlaceholderText(/search user/i); + const input = screen.getByPlaceholderText(/start typing a name or email/i); userEvent.type(input, "Alice"); const option = await screen.findByText("Alice"); diff --git a/__test__/components/RepeatEvent.test.tsx b/__test__/components/RepeatEvent.test.tsx index a17608d..e268e39 100644 --- a/__test__/components/RepeatEvent.test.tsx +++ b/__test__/components/RepeatEvent.test.tsx @@ -118,7 +118,7 @@ async function setupEventPopover( fireEvent.click(showMoreButton); } }); - const select = screen.getByLabelText(/repetition/i); + const select = screen.getByLabelText(/repeat/i); userEvent.click(select); return jest.spyOn(apiUtils, "api"); @@ -155,13 +155,15 @@ async function expectRRule(expected: any) { describe("RepeatEvent", () => { it("renders with no repetition by default", () => { setupRepeatEvent(); - expect(screen.getByLabelText(/repetition/i)).toBeInTheDocument(); - expect(screen.queryByText(/daily/i)).not.toBeInTheDocument(); + expect(screen.getByText(/Repeat every/i)).toBeInTheDocument(); + // Check that the select exists and has default value + const select = screen.getByRole("combobox"); + expect(select).toBeInTheDocument(); }); it("allows selecting repetition frequency", async () => { const { setRepetition } = setupRepeatEvent(); - const select = screen.getByLabelText(/repetition/i); + const select = screen.getByRole("combobox"); act(() => { userEvent.click(select); }); @@ -176,7 +178,7 @@ describe("RepeatEvent", () => { it("renders interval input when frequency is selected", () => { setupRepeatEvent({ freq: "daily", interval: 2 }); - expect(screen.getByText(/interval/i)).toBeInTheDocument(); + expect(screen.getByText(/Repeat every/i)).toBeInTheDocument(); expect(screen.getByDisplayValue("2")).toBeInTheDocument(); }); diff --git a/__test__/features/Events/EventDisplay.test.tsx b/__test__/features/Events/EventDisplay.test.tsx index cb51add..ba79165 100644 --- a/__test__/features/Events/EventDisplay.test.tsx +++ b/__test__/features/Events/EventDisplay.test.tsx @@ -1039,9 +1039,9 @@ describe("Event Full Display", () => { }); await waitFor(() => { - expect(screen.getByLabelText(/Alarm/i)).toBeInTheDocument(); - expect(screen.getByLabelText(/Repetition/i)).toBeInTheDocument(); - expect(screen.getByLabelText(/Visibility/i)).toBeInTheDocument(); + expect(screen.getByLabelText(/Notification/i)).toBeInTheDocument(); + expect(screen.getByLabelText(/Repeat/i)).toBeInTheDocument(); + expect(screen.getByText(/Visible to/i)).toBeInTheDocument(); }); fireEvent.click(screen.getByText("Show Less")); }); diff --git a/__test__/features/Events/EventModal.test.tsx b/__test__/features/Events/EventModal.test.tsx index 59eef8f..14f3474 100644 --- a/__test__/features/Events/EventModal.test.tsx +++ b/__test__/features/Events/EventModal.test.tsx @@ -116,10 +116,9 @@ describe("EventPopover", () => { const titleInput = screen.getByRole("textbox", { name: /title/i }); expect(titleInput).toBeInTheDocument(); - const descriptionInput = screen.getByRole("textbox", { - name: /description/i, - }); - expect(descriptionInput).toBeInTheDocument(); + // Description input is only visible after clicking "Add description" button + const addDescriptionButton = screen.getByText("Add description"); + expect(addDescriptionButton).toBeInTheDocument(); const calendarSelect = screen.getByRole("combobox", { name: /calendar/i }); expect(calendarSelect).toBeInTheDocument(); @@ -135,9 +134,9 @@ describe("EventPopover", () => { // Extended labels appear expect(screen.getAllByText("Repeat")).toHaveLength(1); - expect(screen.getAllByText("Alarm")).toHaveLength(1); - expect(screen.getAllByText("Visibility")).toHaveLength(1); - expect(screen.getAllByText("Show as")).toHaveLength(1); + expect(screen.getAllByText("Notification")).toHaveLength(1); + expect(screen.getAllByText("Visible to")).toHaveLength(1); + expect(screen.getAllByText("Show me as")).toHaveLength(1); }); it("fills start from selectedRange", () => { @@ -160,6 +159,9 @@ describe("EventPopover", () => { }); expect(screen.getByLabelText("Title")).toHaveValue("My Event"); + // Click "Add description" button first + fireEvent.click(screen.getByText("Add description")); + fireEvent.change(screen.getByLabelText("Description"), { target: { value: "Event Description" }, }); @@ -190,7 +192,7 @@ describe("EventPopover", () => { fireEvent.change(screen.getByLabelText("Title"), { target: { value: "newEvent" }, }); - const select = screen.getByLabelText("Search user"); + const select = screen.getByLabelText("Start typing a name or email"); act(() => { select.focus(); @@ -275,6 +277,8 @@ describe("EventPopover", () => { target: { value: newEvent.end.split("T")[0] }, }); + // Click "Add description" button first + fireEvent.click(screen.getByText("Add description")); fireEvent.change(screen.getByLabelText("Description"), { target: { value: newEvent.description }, }); diff --git a/src/components/Calendar/CalendarSelection.tsx b/src/components/Calendar/CalendarSelection.tsx index 550dc6f..59d02c8 100644 --- a/src/components/Calendar/CalendarSelection.tsx +++ b/src/components/Calendar/CalendarSelection.tsx @@ -9,7 +9,6 @@ import CalendarPopover from "./CalendarModal"; import { Calendars } from "../../features/Calendars/CalendarTypes"; import MoreVertIcon from "@mui/icons-material/MoreVert"; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; -import CalendarSearch from "./CalendarSearch"; import IconButton from "@mui/material/IconButton"; import Checkbox from "@mui/material/Checkbox"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; diff --git a/src/components/Calendar/utils/calendarUtils.ts b/src/components/Calendar/utils/calendarUtils.ts index 4510ef0..88dc632 100644 --- a/src/components/Calendar/utils/calendarUtils.ts +++ b/src/components/Calendar/utils/calendarUtils.ts @@ -6,7 +6,7 @@ import { getCalendarDetailAsync } from "../../../features/Calendars/CalendarSlic export const updateSlotLabelVisibility = (currentTime: Date) => { const slotLabels = document.querySelectorAll(".fc-timegrid-slot-label"); const isCurrentWeekOrDay = checkIfCurrentWeekOrDay(); - + if (!isCurrentWeekOrDay) { slotLabels.forEach((label) => { const labelElement = label as HTMLElement; @@ -42,12 +42,14 @@ export const updateSlotLabelVisibility = (currentTime: Date) => { const checkIfCurrentWeekOrDay = (): boolean => { const todayColumn = document.querySelector(".fc-day-today"); - + if (!todayColumn) { return false; } - const nowIndicator = document.querySelector(".fc-timegrid-now-indicator-arrow"); + const nowIndicator = document.querySelector( + ".fc-timegrid-now-indicator-arrow" + ); return !!nowIndicator; }; diff --git a/src/components/Event/EventRepeat.tsx b/src/components/Event/EventRepeat.tsx index 5bf6011..0b19074 100644 --- a/src/components/Event/EventRepeat.tsx +++ b/src/components/Event/EventRepeat.tsx @@ -59,158 +59,152 @@ export default function RepeatEvent({ return ( - {/* Interval */} - - Repeat every - - setRepetition({ - ...repetition, - interval: Number(e.target.value), - }) - } - size="small" - style={{ width: 80 }} - inputProps={{ min: 1 }} - /> - - - - - - {/* Weekly selection */} - {repetition.freq === "weekly" && ( - - - Repeat on: - - - {days.map((day) => ( - handleDayChange(day)} - /> - } - label={day} - /> - ))} - - - )} - - {/* End options */} - - - End: - - { - const value = e.target.value; - setEndOption(value); - - if (value === "never") { - setRepetition({ ...repetition, occurrences: 0, endDate: "" }); - } - if (value === "after") { + {/* Interval */} + + Repeat every + + setRepetition({ + ...repetition, + interval: Number(e.target.value), + }) + } + size="small" + style={{ width: 80 }} + inputProps={{ min: 1 }} + /> + + + + - } - label={ - - After - - setRepetition({ - ...repetition, - endDate: "", - occurrences: Number(e.target.value), - }) - } - style={{ width: 100 }} - inputProps={{ min: 1 }} - disabled={endOption !== "after"} + {/* Weekly selection */} + {repetition.freq === "weekly" && ( + + + Repeat on: + + + {days.map((day) => ( + handleDayChange(day)} /> - occurrences - - } - /> - - } - label={ - - On - - setRepetition({ - ...repetition, - occurrences: 0, - endDate: e.target.value, - }) - } - disabled={endOption !== "on"} - /> - - } - /> - + } + label={day} + /> + ))} + - + )} + + {/* End options */} + + + End: + + { + const value = e.target.value; + setEndOption(value); + + if (value === "never") { + setRepetition({ ...repetition, occurrences: 0, endDate: "" }); + } + if (value === "after") { + setRepetition({ + ...repetition, + occurrences: 0, + endDate: "", + }); + } + if (value === "on") { + setRepetition({ + ...repetition, + occurrences: 0, + endDate: new Date().toISOString().slice(0, 16), + }); + } + }} + > + } label="Never" /> + + } + label={ + + After + + setRepetition({ + ...repetition, + endDate: "", + occurrences: Number(e.target.value), + }) + } + style={{ width: 100 }} + inputProps={{ min: 1 }} + disabled={endOption !== "after"} + /> + occurrences + + } + /> + + } + label={ + + On + + setRepetition({ + ...repetition, + occurrences: 0, + endDate: e.target.value, + }) + } + disabled={endOption !== "on"} + /> + + } + /> + + + ); } diff --git a/src/features/Events/EventDisplay.tsx b/src/features/Events/EventDisplay.tsx index b95b188..ce20d37 100644 --- a/src/features/Events/EventDisplay.tsx +++ b/src/features/Events/EventDisplay.tsx @@ -469,17 +469,17 @@ export default function EventDisplayModal({ isOwn={isOwn} /> - Alarm + Notification