Skip to content

Commit cbf071d

Browse files
sobariusobariu
authored
425 bug available soon text aligned weird sometimes (#476)
* added whiteSpace adjustments to RoomBoxHeading style line 89 * implemented test but doesnt work * Updated test, still does not work * Made a new file for RoomAvailabilityBox component to test the room directly, implemented test that passes * removed RoomAvailabilityBox component declared in BuildingDrawer * removed package-lock.json from the root folder
1 parent 7aefe96 commit cbf071d

File tree

3 files changed

+160
-115
lines changed

3 files changed

+160
-115
lines changed

‎frontend/__tests__/RoomAvailabilityBox.test.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import "@testing-library/jest-dom";
2+
3+
import { render, screen } from "@testing-library/react";
4+
import React from "react";
5+
6+
import RoomAvailabilityBox from "../views/RoomAvailabilityBox";
7+
8+
describe("RoomAvailabilityBox", () => {
9+
test('renders "Available Soon" without wrapping', () => {
10+
// Mock roomStatus representing "available soon" status
11+
const roomStatus = {
12+
status: "soon" as const,
13+
endtime: new Date().toISOString(),
14+
};
15+
16+
// Render RoomAvailabilityBox with mock data
17+
render(
18+
<RoomAvailabilityBox
19+
roomNumber="334"
20+
buildingId="K-G14"
21+
roomStatus={roomStatus}
22+
/>
23+
);
24+
25+
const availableSoonText = screen.getByText(/available soon/i);
26+
expect(availableSoonText).toBeInTheDocument();
27+
// check if there is wrapping of the text, if offsetWidth < scrollWidth,
28+
// then there is wrapping involved because the total width of the content
29+
// is overflowing (i.e. some of the content is not visible)
30+
const isWrapping =
31+
availableSoonText.offsetWidth < availableSoonText.scrollWidth;
32+
expect(isWrapping).toBe(false);
33+
});
34+
});

‎frontend/views/BuildingDrawer.tsx

+5-115
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { RoomStatus } from "@common/types";
2-
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
31
import CloseIcon from "@mui/icons-material/Close";
42
import { Typography, TypographyProps, useMediaQuery } from "@mui/material";
53
import Box, { BoxProps } from "@mui/material/Box";
@@ -13,19 +11,18 @@ import { DesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
1311
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
1412
import { TimePicker } from "@mui/x-date-pickers/TimePicker";
1513
import Image, { ImageProps } from "next/image";
16-
import Link from "next/link";
1714
import React from "react";
1815

1916
import Button from "../components/Button";
2017
import useBuildingStatus from "../hooks/useBuildingStatus";
21-
import useRoom from "../hooks/useRoom";
2218
import {
2319
selectCurrentBuilding,
2420
setCurrentBuilding,
2521
} from "../redux/currentBuildingSlice";
2622
import { selectDatetime, setDatetime } from "../redux/datetimeSlice";
2723
import { useDispatch, useSelector } from "../redux/hooks";
2824
import toSydneyTime from "../utils/toSydneyTime";
25+
import RoomAvailabilityBox from "./RoomAvailabilityBox";
2926

3027
const AppBox = styled(Box)(({ theme }) => ({
3128
boxShadow: "none",
@@ -63,37 +60,6 @@ const RoomBox = styled(Box)<BoxProps>(({ theme }) => ({
6360
padding: theme.spacing(0.5),
6461
}));
6562

66-
const IndiviRoomBox = styled(Box)<BoxProps>(({ theme }) => ({
67-
display: "flex",
68-
flexDirection: "row",
69-
justifyContent: "space-between",
70-
alignItems: "center",
71-
borderRadius: 10,
72-
height: 70,
73-
fontSize: 20,
74-
fontWeight: 500,
75-
backgroundColor: "#FFFFFF",
76-
color: "black",
77-
padding: theme.spacing(2, 2, 2, 3),
78-
margin: theme.spacing(1.5, 1),
79-
"&:hover": {
80-
border: "1px solid",
81-
borderColor: theme.palette.primary.main,
82-
cursor: "pointer",
83-
},
84-
}));
85-
86-
const RoomBoxHeading = styled(Typography)<TypographyProps>(({ theme }) => ({
87-
fontSize: 16,
88-
fontWeight: 500,
89-
}));
90-
91-
const RoomBoxSubheading = styled(Typography)<TypographyProps>(({ theme }) => ({
92-
fontSize: 12,
93-
fontWeight: 400,
94-
paddingTop: 1,
95-
}));
96-
9763
export const drawerWidth = 400;
9864
const drawerWidthMobile = "100%";
9965

@@ -105,7 +71,9 @@ const BuildingDrawer: React.FC<{ open: boolean }> = ({ open }) => {
10571
const theme = useTheme();
10672
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
10773

108-
if (!building || !open) return <></>;
74+
if (!building || !open) {
75+
return <></>;
76+
}
10977

11078
const onClose = () => dispatch(setCurrentBuilding(null));
11179

@@ -121,85 +89,6 @@ const BuildingDrawer: React.FC<{ open: boolean }> = ({ open }) => {
12189
/>
12290
);
12391

124-
const RoomAvailabilityBox: React.FC<{
125-
roomNumber: string;
126-
roomStatus: RoomStatus;
127-
}> = ({ roomNumber, roomStatus }) => {
128-
const date = new Date(roomStatus.endtime);
129-
const hoursMinutes = date.toLocaleTimeString("en-AU", {
130-
hour: "2-digit",
131-
minute: "2-digit",
132-
hour12: true,
133-
});
134-
135-
const roomStatusColor = {
136-
free: "#2AA300",
137-
busy: "#D30000",
138-
soon: "#ffa600",
139-
};
140-
141-
const roomStatusMessage = {
142-
free: "Available",
143-
busy: "Unavailable",
144-
soon: "Available Soon",
145-
};
146-
147-
const untilMessage = {
148-
free: hoursMinutes == "Invalid Date" ? "" : "until " + hoursMinutes,
149-
busy: hoursMinutes == "Invalid Date" ? "" : "until " + hoursMinutes,
150-
soon: "at " + hoursMinutes,
151-
};
152-
153-
const { room } = useRoom(`${building.id}-${roomNumber}`);
154-
155-
return (
156-
<Link href={`/room/${building.id}-${roomNumber}`}>
157-
<IndiviRoomBox>
158-
<Box
159-
sx={{
160-
display: "flex",
161-
flexDirection: "column",
162-
alignItems: "flex-start",
163-
paddingRight: 1,
164-
}}
165-
>
166-
<RoomBoxHeading>{roomNumber}</RoomBoxHeading>
167-
<RoomBoxSubheading>{!room ? "" : room.name}</RoomBoxSubheading>
168-
</Box>
169-
<Box
170-
sx={{
171-
display: "flex",
172-
flexDirection: "row",
173-
justifyContent: "space-around",
174-
alignItems: "center",
175-
}}
176-
>
177-
<Box
178-
sx={{
179-
display: "flex",
180-
flexDirection: "column",
181-
alignItems: "flex-end",
182-
paddingRight: 1,
183-
}}
184-
>
185-
<RoomBoxHeading
186-
sx={{ color: roomStatusColor[roomStatus.status] }}
187-
>
188-
{roomStatusMessage[roomStatus.status]}
189-
</RoomBoxHeading>
190-
<RoomBoxSubheading
191-
sx={{ color: roomStatusColor[roomStatus.status] }}
192-
>
193-
{untilMessage[roomStatus.status]}
194-
</RoomBoxSubheading>
195-
</Box>
196-
<ChevronRightIcon style={{ color: "grey" }} />
197-
</Box>
198-
</IndiviRoomBox>
199-
</Link>
200-
);
201-
};
202-
20392
return (
20493
<Drawer
20594
sx={{
@@ -290,6 +179,7 @@ const BuildingDrawer: React.FC<{ open: boolean }> = ({ open }) => {
290179
key={roomNumber}
291180
roomNumber={roomNumber}
292181
roomStatus={rooms[roomNumber]}
182+
buildingId={building.id}
293183
/>
294184
))
295185
) : (

‎frontend/views/RoomAvailabilityBox.tsx

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import { RoomStatus } from "@common/types";
2+
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
3+
import { Typography, TypographyProps } from "@mui/material";
4+
import Box, { BoxProps } from "@mui/material/Box";
5+
import { styled } from "@mui/material/styles";
6+
import Link from "next/link";
7+
import React from "react";
8+
9+
import useRoom from "../hooks/useRoom";
10+
11+
const IndiviRoomBox = styled(Box)<BoxProps>(({ theme }) => ({
12+
display: "flex",
13+
flexDirection: "row",
14+
justifyContent: "space-between",
15+
alignItems: "center",
16+
borderRadius: 10,
17+
height: 70,
18+
fontSize: 20,
19+
fontWeight: 500,
20+
backgroundColor: "#FFFFFF",
21+
color: "black",
22+
padding: theme.spacing(2, 2, 2, 3),
23+
margin: theme.spacing(1.5, 1),
24+
"&:hover": {
25+
border: "1px solid",
26+
borderColor: theme.palette.primary.main,
27+
cursor: "pointer",
28+
},
29+
}));
30+
31+
const RoomBoxHeading = styled(Typography)<TypographyProps>(({ theme }) => ({
32+
fontSize: 16,
33+
fontWeight: 500,
34+
whiteSpace: "nowrap",
35+
}));
36+
37+
const RoomBoxSubheading = styled(Typography)<TypographyProps>(({ theme }) => ({
38+
fontSize: 12,
39+
fontWeight: 400,
40+
paddingTop: 1,
41+
}));
42+
43+
const RoomAvailabilityBox: React.FC<{
44+
roomNumber: string;
45+
roomStatus: RoomStatus;
46+
buildingId: string;
47+
}> = ({ roomNumber, roomStatus, buildingId }) => {
48+
const date = new Date(roomStatus.endtime);
49+
const hoursMinutes = date.toLocaleTimeString("en-AU", {
50+
hour: "2-digit",
51+
minute: "2-digit",
52+
hour12: true,
53+
});
54+
55+
const roomStatusColor = {
56+
free: "#2AA300",
57+
busy: "#D30000",
58+
soon: "#ffa600",
59+
};
60+
61+
const roomStatusMessage = {
62+
free: "Available",
63+
busy: "Unavailable",
64+
soon: "Available Soon",
65+
};
66+
67+
const untilMessage = {
68+
free: hoursMinutes == "Invalid Date" ? "" : "until " + hoursMinutes,
69+
busy: hoursMinutes == "Invalid Date" ? "" : "until " + hoursMinutes,
70+
soon: "at " + hoursMinutes,
71+
};
72+
73+
const { room } = useRoom(`${buildingId}-${roomNumber}`);
74+
75+
return (
76+
<Link href={`/room/${buildingId}-${roomNumber}`}>
77+
<IndiviRoomBox>
78+
<Box
79+
sx={{
80+
display: "flex",
81+
flexDirection: "column",
82+
alignItems: "flex-start",
83+
paddingRight: 1,
84+
}}
85+
>
86+
<RoomBoxHeading>{roomNumber}</RoomBoxHeading>
87+
<RoomBoxSubheading>{!room ? "" : room.name}</RoomBoxSubheading>
88+
</Box>
89+
<Box
90+
sx={{
91+
display: "flex",
92+
flexDirection: "row",
93+
justifyContent: "space-around",
94+
alignItems: "center",
95+
}}
96+
>
97+
<Box
98+
sx={{
99+
display: "flex",
100+
flexDirection: "column",
101+
alignItems: "flex-end",
102+
paddingRight: 1,
103+
}}
104+
>
105+
<RoomBoxHeading sx={{ color: roomStatusColor[roomStatus.status] }}>
106+
{roomStatusMessage[roomStatus.status]}
107+
</RoomBoxHeading>
108+
<RoomBoxSubheading
109+
sx={{ color: roomStatusColor[roomStatus.status] }}
110+
>
111+
{untilMessage[roomStatus.status]}
112+
</RoomBoxSubheading>
113+
</Box>
114+
<ChevronRightIcon style={{ color: "grey" }} />
115+
</Box>
116+
</IndiviRoomBox>
117+
</Link>
118+
);
119+
};
120+
121+
export default RoomAvailabilityBox;

0 commit comments

Comments
 (0)