Skip to content

Commit 5a3b4b5

Browse files
leslieyip02leslieyip02
committed
feat: add optimiser form unit tests
1 parent b717cf8 commit 5a3b4b5

File tree

6 files changed

+228
-3
lines changed

6 files changed

+228
-3
lines changed

‎website/src/views/optimiser/OptimiserForm/OptimiserFreeDayConflicts.test.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { mount } from 'enzyme';
2+
import { defaultTutorialOption } from 'test-utils/optimiser';
3+
import OptimiserFreeDayConflicts from './OptimiserFreeDayConflicts';
4+
5+
describe('OptimiserFreeDayConflicts', () => {
6+
it('should show a warning when there are conflicts', () => {
7+
const freeDayConflicts = [
8+
{
9+
moduleCode: defaultTutorialOption.moduleCode,
10+
lessonType: defaultTutorialOption.lessonType,
11+
displayText: defaultTutorialOption.displayText,
12+
days: ['Monday', 'Tuesday'],
13+
},
14+
];
15+
const wrapper = mount(<OptimiserFreeDayConflicts freeDayConflicts={freeDayConflicts} />);
16+
expect(wrapper.text().includes('Free Day Conflicts')).toBe(true);
17+
expect(wrapper.text().includes(defaultTutorialOption.displayText)).toBe(true);
18+
});
19+
20+
it('should not render when there are no conflicts', () => {
21+
const wrapper = mount(<OptimiserFreeDayConflicts freeDayConflicts={[]} />);
22+
expect(wrapper.isEmptyRender()).toBe(true);
23+
});
24+
});

‎website/src/views/optimiser/OptimiserForm/OptimiserFreeDaySelect.test.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import useOptimiserForm from 'views/hooks/useOptimiserForm';
2+
import { mount } from 'enzyme';
3+
import OptimiserFreeDaySelect from './OptimiserFreeDaySelect';
4+
5+
import styles from './OptimiserFreeDaySelect.scss';
6+
7+
jest.mock('./OptimiserFormTooltip', () => ({
8+
__esModule: true,
9+
default: () => <div />,
10+
}));
11+
12+
describe('OptimiserLessonOptionSelect', () => {
13+
type Props = {
14+
hasSaturday: boolean;
15+
};
16+
17+
const Helper: React.FC<Props> = ({ hasSaturday }) => {
18+
const optimiserFormFields = useOptimiserForm();
19+
return (
20+
<OptimiserFreeDaySelect hasSaturday={hasSaturday} optimiserFormFields={optimiserFormFields} />
21+
);
22+
};
23+
24+
it('should not show saturday', () => {
25+
const wrapper = mount(<Helper hasSaturday={false} />);
26+
expect(wrapper.text().includes('Monday')).toBe(true);
27+
expect(wrapper.text().includes('Tuesday')).toBe(true);
28+
expect(wrapper.text().includes('Wednesday')).toBe(true);
29+
expect(wrapper.text().includes('Thursday')).toBe(true);
30+
expect(wrapper.text().includes('Friday')).toBe(true);
31+
expect(wrapper.text().includes('Saturday')).toBe(false);
32+
});
33+
34+
it('should show saturday', () => {
35+
const wrapper = mount(<Helper hasSaturday />);
36+
expect(wrapper.text().includes('Monday')).toBe(true);
37+
expect(wrapper.text().includes('Tuesday')).toBe(true);
38+
expect(wrapper.text().includes('Wednesday')).toBe(true);
39+
expect(wrapper.text().includes('Thursday')).toBe(true);
40+
expect(wrapper.text().includes('Friday')).toBe(true);
41+
expect(wrapper.text().includes('Saturday')).toBe(true);
42+
});
43+
44+
it('should toggle the selected day', () => {
45+
const wrapper = mount(<Helper hasSaturday={false} />);
46+
const monday = wrapper.find(`.${styles.freeDaysButton}`).at(0);
47+
expect(monday.hasClass('active')).toBe(false);
48+
monday.simulate('click');
49+
expect(wrapper.find(`.${styles.freeDaysButton}`).at(0).hasClass('active')).toBe(true);
50+
monday.simulate('click');
51+
expect(wrapper.find(`.${styles.freeDaysButton}`).at(0).hasClass('active')).toBe(false);
52+
});
53+
});

‎website/src/views/optimiser/OptimiserForm/OptimiserFreeDaySelect.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ const OptimiserFreeDaySelect: React.FC<Props> = ({ hasSaturday, optimiserFormFie
3636
<div className={styles.freeDaysButtons}>
3737
{days.map((day) => (
3838
<button
39+
key={day}
3940
type="button"
4041
className={classNames(styles.freeDaysButton, { active: freeDays.has(day) })}
4142
onClick={() => toggleDay(day)}

‎website/src/views/optimiser/OptimiserForm/OptimiserLessonOptionSelect.test.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { LessonOption } from 'types/optimiser';
2+
import useOptimiserForm from 'views/hooks/useOptimiserForm';
3+
import { mount } from 'enzyme';
4+
import { defaultLectureOption, defaultTutorialOption } from 'test-utils/optimiser';
5+
import OptimiserLessonOptionSelect from './OptimiserLessonOptionSelect';
6+
7+
import styles from './OptimiserLessonOptionSelect.scss';
8+
9+
jest.mock('./OptimiserFormTooltip', () => ({
10+
__esModule: true,
11+
default: () => <div />,
12+
}));
13+
14+
describe('OptimiserLessonOptionSelect', () => {
15+
type Props = {
16+
lessonOptions: LessonOption[];
17+
};
18+
19+
const Helper: React.FC<Props> = ({ lessonOptions }) => {
20+
const optimiserFormFields = useOptimiserForm();
21+
return (
22+
<OptimiserLessonOptionSelect
23+
lessonOptions={lessonOptions}
24+
optimiserFormFields={optimiserFormFields}
25+
/>
26+
);
27+
};
28+
29+
it('should show a warning when there are no lesson options', () => {
30+
const wrapper = mount(<Helper lessonOptions={[]} />);
31+
expect(wrapper.text().includes('No Lessons Found')).toBe(true);
32+
expect(wrapper.find(`.${styles.lessonButtons}`).exists()).toBe(false);
33+
});
34+
35+
it('should show all lesson options', () => {
36+
const lessonOptions = [defaultLectureOption, defaultTutorialOption];
37+
const wrapper = mount(<Helper lessonOptions={lessonOptions} />);
38+
expect(wrapper.text().includes('No Lessons Found')).toBe(false);
39+
expect(wrapper.find(`.${styles.lessonButtons}`).exists()).toBe(true);
40+
expect(wrapper.find(`.${styles.lessonButton}`)).toHaveLength(2);
41+
expect(wrapper.text().includes(defaultLectureOption.displayText)).toBe(true);
42+
expect(wrapper.text().includes(defaultTutorialOption.displayText)).toBe(true);
43+
});
44+
45+
it('should toggle lesson option', () => {
46+
const lessonOptions = [defaultLectureOption];
47+
const wrapper = mount(<Helper lessonOptions={lessonOptions} />);
48+
const lectureButton = wrapper.find(`.${styles.lessonButton}`);
49+
expect(lectureButton).toHaveLength(1);
50+
expect(wrapper.find(`.${styles.selected}`).exists()).toBe(false);
51+
expect(wrapper.find(`.${styles.unselected}`).exists()).toBe(true);
52+
53+
lectureButton.simulate('click');
54+
expect(wrapper.find(`.${styles.selected}`).exists()).toBe(true);
55+
expect(wrapper.find(`.${styles.unselected}`).exists()).toBe(false);
56+
57+
lectureButton.simulate('click');
58+
expect(wrapper.find(`.${styles.selected}`).exists()).toBe(false);
59+
expect(wrapper.find(`.${styles.unselected}`).exists()).toBe(true);
60+
});
61+
});

‎website/src/views/optimiser/OptimiserForm/OptimiserTimeRangeSelect.test.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { mount } from 'enzyme';
2+
import useOptimiserForm from 'views/hooks/useOptimiserForm';
3+
import {
4+
OptimiserLessonTimeRangeSelect,
5+
OptimiserLunchTimeRangeSelect,
6+
OptimiserTimeRangeSelect,
7+
TimeRangeSelectProps,
8+
} from './OptimiserTimeRangeSelect';
9+
10+
jest.mock('./OptimiserFormTooltip', () => ({
11+
__esModule: true,
12+
default: () => <div />,
13+
}));
14+
15+
describe('OptimiserTimeRangeSelect', () => {
16+
it('should call setTime when valuue is changed', () => {
17+
const setTime = jest.fn();
18+
const props: TimeRangeSelectProps = {
19+
currentValue: '0800',
20+
timeValues: ['0800', '0830', '0900'],
21+
setTime,
22+
};
23+
const wrapper = mount(<OptimiserTimeRangeSelect {...props} />);
24+
const dropdown = wrapper.find('select');
25+
expect(dropdown.exists()).toBe(true);
26+
expect(dropdown.props().value).toEqual('0800');
27+
dropdown.simulate('change', { target: { value: '0830' } });
28+
expect(setTime).toHaveBeenCalledTimes(1);
29+
expect(setTime).toHaveBeenCalledWith('0830');
30+
});
31+
});
32+
33+
describe('OptimiserLessonTimeRangeSelect', () => {
34+
const Helper: React.FC = () => {
35+
const optimiserFormFields = useOptimiserForm();
36+
return <OptimiserLessonTimeRangeSelect optimiserFormFields={optimiserFormFields} />;
37+
};
38+
39+
it('should update the lesson time range', () => {
40+
const wrapper = mount(<Helper />);
41+
const dropdowns = wrapper.find('select');
42+
expect(dropdowns).toHaveLength(2);
43+
44+
expect(dropdowns.at(0).props().value).toEqual('0800');
45+
expect(dropdowns.at(1).props().value).toEqual('1900');
46+
47+
dropdowns.at(0).simulate('change', { target: { value: '0830' } });
48+
expect(wrapper.find('select').at(0).props().value).toEqual('0830');
49+
expect(wrapper.find('select').at(1).props().value).toEqual('1900');
50+
51+
dropdowns.at(1).simulate('change', { target: { value: '1200' } });
52+
expect(wrapper.find('select').at(0).props().value).toEqual('0830');
53+
expect(wrapper.find('select').at(1).props().value).toEqual('1200');
54+
});
55+
});
56+
57+
describe('OptimiserLunchTimeRangeSelect', () => {
58+
const Helper: React.FC = () => {
59+
const optimiserFormFields = useOptimiserForm();
60+
return <OptimiserLunchTimeRangeSelect optimiserFormFields={optimiserFormFields} />;
61+
};
62+
63+
it('should update the lunch time range', () => {
64+
const wrapper = mount(<Helper />);
65+
const dropdowns = wrapper.find('select');
66+
expect(dropdowns).toHaveLength(2);
67+
68+
expect(dropdowns.at(0).props().value).toEqual('1200');
69+
expect(dropdowns.at(1).props().value).toEqual('1400');
70+
71+
dropdowns.at(0).simulate('change', { target: { value: '1100' } });
72+
expect(wrapper.find('select').at(0).props().value).toEqual('1100');
73+
expect(wrapper.find('select').at(1).props().value).toEqual('1400');
74+
75+
dropdowns.at(1).simulate('change', { target: { value: '1700' } });
76+
expect(wrapper.find('select').at(0).props().value).toEqual('1100');
77+
expect(wrapper.find('select').at(1).props().value).toEqual('1700');
78+
});
79+
});

‎website/src/views/optimiser/OptimiserForm/OptimiserTimeRangeSelect.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { useCallback } from 'react';
22
import { getOptimiserTime, getTimeValues } from 'utils/optimiser';
33
import { LessonTime } from 'types/modules';
44
import { OptimiserFormFields } from 'views/hooks/useOptimiserForm';
5+
import OptimiserFormTooltip from './OptimiserFormTooltip';
56

67
import styles from './OptimiserTimeRangeSelect.scss';
7-
import OptimiserFormTooltip from './OptimiserFormTooltip';
88

99
type TimeRangeSelectProps = {
1010
currentValue: LessonTime;
@@ -23,7 +23,9 @@ const OptimiserTimeRangeSelect: React.FC<TimeRangeSelectProps> = ({
2323
onChange={(e) => setTime(e.target.value)}
2424
>
2525
{timeValues.map((value) => (
26-
<option value={value}>{getOptimiserTime(value)}</option>
26+
<option key={value} value={value}>
27+
{getOptimiserTime(value)}
28+
</option>
2729
))}
2830
</select>
2931
);
@@ -147,4 +149,9 @@ const OptimiserLunchTimeRangeSelect: React.FC<LunchTimeRangeSelectProps> = ({
147149
);
148150
};
149151

150-
export { OptimiserLessonTimeRangeSelect, OptimiserLunchTimeRangeSelect };
152+
export {
153+
TimeRangeSelectProps,
154+
OptimiserTimeRangeSelect,
155+
OptimiserLessonTimeRangeSelect,
156+
OptimiserLunchTimeRangeSelect,
157+
};

0 commit comments

Comments
 (0)