Merge pull request #177 from Vincit/ilkka-duration-startingtime-tests…

…-and-more

Ilkka duration startingtime and duration custom buttons & tests and more

frontend/src/components/BookingDrawer/BookingDrawer.tsx

@@ -356,9 +356,7 @@ const BookingDrawer = (props: Props) => {
 
                     <DurationPicker
                         bookingDuration={duration}
-                        setBookingDuration={setBookingDuration}
                         onChange={handleDurationChange}
-                        title="quick duration selection"
                         setExpandDurationTimePickerDrawer={
                             setExpandDurationTimePickerDrawer
                         }
@@ -403,12 +401,12 @@ const BookingDrawer = (props: Props) => {
                     </Row>
                     <Row>
                         <DrawerButtonSecondary
-                            aria-label="until next meeting"
+                            aria-label="Book the whole free slot"
                             onClick={() =>
                                 handleUntilNext(getTimeAvailableMinutes(room))
                             }
                         >
-                            Until next meeting
+                            Book the whole free slot
                         </DrawerButtonSecondary>
                     </Row>
                     <Row>

frontend/src/components/BookingDrawer/DurationPicker.test.tsx

@@ -0,0 +1,67 @@
+/**
+ * @vitest-environment happy-dom
+ */
+
+// @ts-nocheck
+import {
+    vi,
+    expect,
+    describe,
+    it,
+    beforeEach,
+    afterEach,
+    beforeAll,
+    afterAll
+} from 'vitest';
+
+// @ts-nocheck
+import React from 'react';
+import ReactDOM, { unmountComponentAtNode } from 'react-dom';
+import { DateTime } from 'luxon';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import DurationPicker from './DurationPicker';
+
+let container = null;
+
+const testObj = {
+    setExpandDurationTimePickerDrawer: (arg) => {}
+};
+
+describe('Duration selection', () => {
+    beforeEach(() => {
+        // Setup a DOM element as a render target
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        // Cleanup on exiting
+        container.remove();
+        container = null;
+    });
+
+    test('Custom duration can be selected', async () => {
+        const handleDurationChange = vi.fn();
+
+        const spy = vi.spyOn(testObj, 'setExpandDurationTimePickerDrawer');
+
+        render(
+            <DurationPicker
+                bookingDuration={0}
+                onChange={handleDurationChange}
+                setExpandDurationTimePickerDrawer={spy}
+                additionalDuration={0}
+            />,
+            container
+        );
+
+        const customButton = screen.queryByTestId('DurationPickerCustom');
+
+        fireEvent.click(customButton);
+
+        expect(testObj.setExpandDurationTimePickerDrawer).toBeCalledTimes(1);
+        expect(testObj.setExpandDurationTimePickerDrawer).toHaveBeenCalledWith(
+            true
+        );
+    });
+});

frontend/src/components/BookingDrawer/DurationPicker.tsx

@@ -15,19 +15,15 @@ const DurationButtonGroup = styled(ToggleButtonGroup)(() => ({
 
 type DurationPickerProps = {
     onChange: (duration: number) => void;
-    title: string;
     bookingDuration: number;
-    setBookingDuration: (dur: number) => void;
     setExpandDurationTimePickerDrawer: (show: boolean) => void;
     additionalDuration: number;
 };
 
 const DurationPicker = (props: DurationPickerProps) => {
     const {
         onChange,
-        title,
         bookingDuration,
-        setBookingDuration,
         setExpandDurationTimePickerDrawer,
         additionalDuration
     } = props;

frontend/src/components/BookingView/StartingTimePicker.tsx

@@ -3,6 +3,12 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { Box, styled, Typography } from '@mui/material';
 import { DateTime } from 'luxon';
+import {
+    getHourMinute,
+    timeFormat,
+    timeToHalfAndFullHours,
+    formatTimeToHalfAndFullHours
+} from '../util/Time';
 
 const StartingTimeButton = styled(ToggleButton)(() => ({
     padding: '8px 16px'
@@ -15,44 +21,6 @@ type StartingTimePickerProps = {
     setExpandTimePickerDrawer: (kia: boolean) => void;
 };
 
-const timeFormat = (h: number, m: number) => {
-    return h.toString() + ':' + (m < 10 ? '0' + m.toString() : m.toString());
-};
-
-const timeToHalfAndFullHours = (
-    startingTime: DateTime,
-    addition: number
-): any => {
-    let timeObj = DateTime.fromObject({
-        hour: Number(startingTime.hour),
-        minute: Number(startingTime.minute),
-        second: 0
-    })
-        .plus({ minutes: addition })
-        .toObject();
-
-    if (timeObj.minute! < 30) {
-        timeObj.minute = 30;
-    } else if (timeObj.minute! > 30) {
-        timeObj = DateTime.fromObject({
-            hour: Number(timeObj.hour),
-            minute: 0,
-            second: 0
-        })
-            .plus({ hours: 1 })
-            .toObject();
-    }
-    return timeObj;
-};
-
-const formatTimeToHalfAndFullHours = (
-    startingTime: DateTime,
-    addition: number
-) => {
-    const timeObj = timeToHalfAndFullHours(startingTime, addition);
-    return timeFormat(timeObj.hour!, timeObj.minute!);
-};
-
 const StartingTimePicker = (props: StartingTimePickerProps) => {
     const { title, startingTime, setStartingTime, setExpandTimePickerDrawer } =
         props;

frontend/src/components/CurrentBooking/AlterBookingDrawer.tsx

@@ -353,10 +353,10 @@ const AlterBookingDrawer = (props: Props) => {
                     </Row>
                     <Row>
                         <DrawerButtonSecondary
-                            aria-label="until next meeting"
+                            aria-label="Book the whole free slot"
                             onClick={handleUntilNextMeeting}
                         >
-                            Until next meeting
+                            Book the whole free slot
                         </DrawerButtonSecondary>
                     </Row>
                     {booking &&

frontend/src/components/DurationTimePickerDrawer/DurationTimePickerDrawer.test.tsx

@@ -0,0 +1,104 @@
+/**
+ * @vitest-environment happy-dom
+ */
+
+// @ts-nocheck
+import {
+    vi,
+    expect,
+    describe,
+    it,
+    beforeEach,
+    afterEach,
+    beforeAll,
+    afterAll
+} from 'vitest';
+
+// @ts-nocheck
+import React from 'react';
+import ReactDOM, { unmountComponentAtNode } from 'react-dom';
+import { DateTime } from 'luxon';
+import {
+    fireEvent,
+    render,
+    screen,
+    waitFor,
+    getByLabelText,
+    getByText
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import DurationTimePickerDrawer from './DurationTimePickerDrawer';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
+import { prettyDOM } from '@testing-library/dom';
+
+let container = null;
+
+const testObj = {
+    setExpandDurationTimePickerDrawer: (arg) => {},
+    setBookingDuration: vi.fn()
+};
+
+describe('Duration selection from picker', () => {
+    beforeEach(() => {
+        // Setup a DOM element as a render target
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        // Cleanup on exiting
+        container.remove();
+        container = null;
+    });
+
+    test('test with value 01:45 is selected when confirmed', () => {
+        const handleDurationChange = vi.fn();
+
+        const spy = vi.spyOn(testObj, 'setExpandDurationTimePickerDrawer');
+        const spyDur = vi.spyOn(testObj, 'setBookingDuration');
+
+        const mm = 300;
+        const maxDur = dayjs()
+            .minute(mm % 60)
+            .hour(Math.floor(mm / 60));
+
+        render(
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <DurationTimePickerDrawer
+                    open={true}
+                    toggle={(newOpen: any) =>
+                        setExpandDurationTimePickerDrawer(newOpen)
+                    }
+                    bookingDuration={0}
+                    setBookingDuration={testObj.setBookingDuration}
+                    setExpandDurationTimePickerDrawer={
+                        testObj.setExpandDurationTimePickerDrawer
+                    }
+                    maxDuration={maxDur}
+                />
+            </LocalizationProvider>,
+            container
+        );
+
+        const clock = screen.getByTestId('CustomDurationClock');
+        const minutes = getByLabelText(clock, 'Select minutes');
+        const min45 = getByText(minutes, '45');
+        fireEvent.click(min45);
+        const hours = getByLabelText(clock, 'Select hours');
+        const hour1 = getByText(hours, '01');
+        fireEvent.click(hour1);
+
+        const btn = screen.getByRole('button');
+
+        fireEvent.click(btn);
+
+        expect(testObj.setExpandDurationTimePickerDrawer).toBeCalledTimes(1);
+        expect(testObj.setExpandDurationTimePickerDrawer).toHaveBeenCalledWith(
+            false
+        );
+        expect(testObj.setBookingDuration).toBeCalledTimes(1);
+        expect(testObj.setBookingDuration).toHaveBeenCalledWith(105);
+    });
+});

frontend/src/components/DurationTimePickerDrawer/DurationTimePickerDrawer.tsx

@@ -100,6 +100,7 @@ const DurationTimePickerDrawer = (props: DurationTimePickerDrawerProps) => {
                             ampm={false}
                             value={dayjs(nowDate() + ' ' + time)}
                             maxTime={maxDuration}
+                            data-testid="CustomDurationClock"
                         />
                     </BoxForm>
                     <Row>