fix: update test cases to match new UI labels

- Update RepeatEvent.test.tsx to use correct selectors and text matching
- Update EventDisplay.test.tsx to use 'Notification' instead of 'Alarm'
- Update EventModal.test.tsx to use new label names and fix description input tests
- Update Calendar.test.tsx to use new placeholder text 'Start typing a name or email'
- Fix EventDisplay.tsx to use 'Notification' label consistently

__test__/components/Calendar.test.tsx

@@ -217,7 +217,7 @@ describe("calendar Availability search", () => {
 
     renderWithProviders(<CalendarTestWrapper />, 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(<CalendarTestWrapper />, 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");

__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();
   });
 

__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"));
   });

__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 },
     });

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";

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;
 };
 

src/components/Event/EventRepeat.tsx

@@ -59,158 +59,152 @@ export default function RepeatEvent({
   return (
     <Box>
       <Stack>
-          {/* Interval */}
-          <Box display="flex" alignItems="center" gap={2} mb={2}>
-            <Typography>Repeat every</Typography>
-            <TextField
-              type="number"
-              value={repetition.interval ?? 1}
-              onChange={(e) =>
-                setRepetition({
-                  ...repetition,
-                  interval: Number(e.target.value),
-                })
-              }
-              size="small"
-              style={{ width: 80 }}
-              inputProps={{ min: 1 }}
-            />
-            <FormControl size="small" style={{ minWidth: 120 }}>
-              <Select
-                value={repetition.freq ?? "daily"}
-                onChange={(e: SelectChangeEvent) => {
-                  if (e.target.value === "weekly") {
-                    setRepetition({
-                      ...repetition,
-                      freq: e.target.value,
-                      selectedDays: [days[day.getDay() - 1]],
-                    });
-                  } else {
-                    setRepetition({ ...repetition, freq: e.target.value });
-                  }
-                }}
-              >
-                <MenuItem value={"daily"}>Day(s)</MenuItem>
-                <MenuItem value={"weekly"}>Week(s)</MenuItem>
-                <MenuItem value={"monthly"}>Month(s)</MenuItem>
-                <MenuItem value={"yearly"}>Year(s)</MenuItem>
-              </Select>
-            </FormControl>
-          </Box>
-
-          {/* Weekly selection */}
-          {repetition.freq === "weekly" && (
-            <Box>
-              <Typography variant="body2" gutterBottom>
-                Repeat on:
-              </Typography>
-              <FormGroup row>
-                {days.map((day) => (
-                  <FormControlLabel
-                    key={day}
-                    control={
-                      <Checkbox
-                        checked={
-                          repetition.selectedDays?.includes(day) ?? false
-                        }
-                        onChange={() => handleDayChange(day)}
-                      />
-                    }
-                    label={day}
-                  />
-                ))}
-              </FormGroup>
-            </Box>
-          )}
-
-          {/* End options */}
-          <Box>
-            <Typography variant="body2" gutterBottom>
-              End:
-            </Typography>
-            <RadioGroup
-              value={endOption}
-              onChange={(e) => {
-                const value = e.target.value;
-                setEndOption(value);
-
-                if (value === "never") {
-                  setRepetition({ ...repetition, occurrences: 0, endDate: "" });
-                }
-                if (value === "after") {
+        {/* Interval */}
+        <Box display="flex" alignItems="center" gap={2} mb={2}>
+          <Typography>Repeat every</Typography>
+          <TextField
+            type="number"
+            value={repetition.interval ?? 1}
+            onChange={(e) =>
+              setRepetition({
+                ...repetition,
+                interval: Number(e.target.value),
+              })
+            }
+            size="small"
+            style={{ width: 80 }}
+            inputProps={{ min: 1 }}
+          />
+          <FormControl size="small" style={{ minWidth: 120 }}>
+            <Select
+              value={repetition.freq ?? "daily"}
+              onChange={(e: SelectChangeEvent) => {
+                if (e.target.value === "weekly") {
                   setRepetition({
                     ...repetition,
-                    occurrences: 0,
-                    endDate: "",
-                  });
-                }
-                if (value === "on") {
-                  setRepetition({
-                    ...repetition,
-                    occurrences: 0,
-                    endDate: new Date().toISOString().slice(0, 16),
+                    freq: e.target.value,
+                    selectedDays: [days[day.getDay() - 1]],
                   });
+                } else {
+                  setRepetition({ ...repetition, freq: e.target.value });
                 }
               }}
             >
-              <FormControlLabel
-                value="never"
-                control={<Radio />}
-                label="Never"
-              />
+              <MenuItem value={"daily"}>Day(s)</MenuItem>
+              <MenuItem value={"weekly"}>Week(s)</MenuItem>
+              <MenuItem value={"monthly"}>Month(s)</MenuItem>
+              <MenuItem value={"yearly"}>Year(s)</MenuItem>
+            </Select>
+          </FormControl>
+        </Box>
 
-              <FormControlLabel
-                value="after"
-                control={<Radio />}
-                label={
-                  <Box display="flex" alignItems="center" gap={1}>
-                    After
-                    <TextField
-                      type="number"
-                      size="small"
-                      value={repetition.occurrences ?? 0}
-                      onChange={(e) =>
-                        setRepetition({
-                          ...repetition,
-                          endDate: "",
-                          occurrences: Number(e.target.value),
-                        })
-                      }
-                      style={{ width: 100 }}
-                      inputProps={{ min: 1 }}
-                      disabled={endOption !== "after"}
+        {/* Weekly selection */}
+        {repetition.freq === "weekly" && (
+          <Box>
+            <Typography variant="body2" gutterBottom>
+              Repeat on:
+            </Typography>
+            <FormGroup row>
+              {days.map((day) => (
+                <FormControlLabel
+                  key={day}
+                  control={
+                    <Checkbox
+                      checked={repetition.selectedDays?.includes(day) ?? false}
+                      onChange={() => handleDayChange(day)}
                     />
-                    occurrences
-                  </Box>
-                }
-              />
-
-              <FormControlLabel
-                value="on"
-                control={<Radio />}
-                label={
-                  <Box display="flex" alignItems="center" gap={1}>
-                    On
-                    <TextField
-                      type="date"
-                      inputProps={{ "data-testid": "end-date" }}
-                      size="small"
-                      value={repetition.endDate ?? ""}
-                      onChange={(e) =>
-                        setRepetition({
-                          ...repetition,
-                          occurrences: 0,
-                          endDate: e.target.value,
-                        })
-                      }
-                      disabled={endOption !== "on"}
-                    />
-                  </Box>
-                }
-              />
-            </RadioGroup>
+                  }
+                  label={day}
+                />
+              ))}
+            </FormGroup>
           </Box>
-        </Stack>
+        )}
+
+        {/* End options */}
+        <Box>
+          <Typography variant="body2" gutterBottom>
+            End:
+          </Typography>
+          <RadioGroup
+            value={endOption}
+            onChange={(e) => {
+              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),
+                });
+              }
+            }}
+          >
+            <FormControlLabel value="never" control={<Radio />} label="Never" />
+
+            <FormControlLabel
+              value="after"
+              control={<Radio />}
+              label={
+                <Box display="flex" alignItems="center" gap={1}>
+                  After
+                  <TextField
+                    type="number"
+                    size="small"
+                    value={repetition.occurrences ?? 0}
+                    onChange={(e) =>
+                      setRepetition({
+                        ...repetition,
+                        endDate: "",
+                        occurrences: Number(e.target.value),
+                      })
+                    }
+                    style={{ width: 100 }}
+                    inputProps={{ min: 1 }}
+                    disabled={endOption !== "after"}
+                  />
+                  occurrences
+                </Box>
+              }
+            />
+
+            <FormControlLabel
+              value="on"
+              control={<Radio />}
+              label={
+                <Box display="flex" alignItems="center" gap={1}>
+                  On
+                  <TextField
+                    type="date"
+                    inputProps={{ "data-testid": "end-date" }}
+                    size="small"
+                    value={repetition.endDate ?? ""}
+                    onChange={(e) =>
+                      setRepetition({
+                        ...repetition,
+                        occurrences: 0,
+                        endDate: e.target.value,
+                      })
+                    }
+                    disabled={endOption !== "on"}
+                  />
+                </Box>
+              }
+            />
+          </RadioGroup>
+        </Box>
+      </Stack>
     </Box>
   );
 }

src/features/Events/EventDisplay.tsx

@@ -469,17 +469,17 @@ export default function EventDisplayModal({
                   isOwn={isOwn}
                 />
                 <FormControl fullWidth margin="dense" size="small">
-                  <InputLabel id="alarm">Alarm</InputLabel>
+                  <InputLabel id="notification">Notification</InputLabel>
                   <Select
-                    labelId="alarm"
-                    label="Alarm"
+                    labelId="notification"
+                    label="Notification"
                     value={alarm}
                     disabled={!isOwn}
                     onChange={(e: SelectChangeEvent) =>
                       setAlarm(e.target.value)
                     }
                   >
-                    <MenuItem value={""}>No Alarm</MenuItem>
+                    <MenuItem value={""}>No Notification</MenuItem>
                     <MenuItem value={"-PT1M"}>1 minute</MenuItem>
                     <MenuItem value={"-PT5M"}>2 minutes</MenuItem>
                     <MenuItem value={"-PT10M"}>10 minutes</MenuItem>

src/features/Events/EventModal.tsx

@@ -134,26 +134,28 @@ function EventPopover({
 
   const timezoneList = useMemo(() => {
     const zones = Object.keys(TIMEZONES.zones).sort();
-    const browserTz = resolveTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone);
-    
+    const browserTz = resolveTimezone(
+      Intl.DateTimeFormat().resolvedOptions().timeZone
+    );
+
     const getTimezoneOffset = (tzName: string): string => {
       const resolvedTz = resolveTimezone(tzName);
       const tzData = TIMEZONES.zones[resolvedTz];
       if (!tzData) return "";
-      
+
       const icsMatch = tzData.ics.match(/TZOFFSETTO:([+-]\d{4})/);
       if (!icsMatch) return "";
-      
+
       const offset = icsMatch[1];
       const hours = parseInt(offset.slice(0, 3));
       const minutes = parseInt(offset.slice(3));
-      
+
       if (minutes === 0) {
-        return `UTC${hours >= 0 ? '+' : ''}${hours}`;
+        return `UTC${hours >= 0 ? "+" : ""}${hours}`;
       }
-      return `UTC${hours >= 0 ? '+' : ''}${hours}:${Math.abs(minutes).toString().padStart(2, '0')}`;
+      return `UTC${hours >= 0 ? "+" : ""}${hours}:${Math.abs(minutes).toString().padStart(2, "0")}`;
     };
-    
+
     return { zones, browserTz, getTimezoneOffset };
   }, []);
 
@@ -496,7 +498,7 @@ function EventPopover({
           </FormControl>
         </Box>
       </FieldWithLabel>
-      
+
       {showRepeat && (
         <FieldWithLabel label=" " isExpanded={showMore}>
           <RepeatEvent
@@ -543,7 +545,7 @@ function EventPopover({
           </Select>
         </FormControl>
       </FieldWithLabel>
-      
+
       {/* Extended options */}
       {showMore && (
         <>
@@ -595,12 +597,12 @@ function EventPopover({
               }}
               size="small"
             >
-              <ToggleButton value="PUBLIC" sx={{ width: '140px' }}>
-                <PublicIcon sx={{ mr: 1, fontSize: '16px' }} />
+              <ToggleButton value="PUBLIC" sx={{ width: "140px" }}>
+                <PublicIcon sx={{ mr: 1, fontSize: "16px" }} />
                 All
               </ToggleButton>
-              <ToggleButton value="PRIVATE" sx={{ width: '140px' }}>
-                <LockIcon sx={{ mr: 1, fontSize: '16px' }} />
+              <ToggleButton value="PRIVATE" sx={{ width: "140px" }}>
+                <LockIcon sx={{ mr: 1, fontSize: "16px" }} />
                 Participants
               </ToggleButton>
             </ToggleButtonGroup>