eduvia/workavia-calendar-front
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update test cases to match new UI labels

Browse Source 
- 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
This commit is contained in:
lenhanphung
2025-10-02 14:18:32 +07:00
parent 3261479874
commit 4eb2c86771
9 changed files with 186 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Calendar/CalendarSelection.tsx
-1
View File
@@ -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
+5 -3
View File
@@ -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
+137 -143
View File
@@ -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>
);
}