From c80ab5d94470ffc015fef7c2203cdc90ec8643fd Mon Sep 17 00:00:00 2001
From: Adel Hassan <sean.dashals@gmail.com>
Date: Fri, 8 May 2020 15:22:46 -0500
Subject: [PATCH] Added icon to honors sections

---
 .../SectionSelect/SectionSelect.css           |  2 +
 .../SectionSelect/SectionSelect.tsx           |  2 +
 .../src/tests/ui/CourseSelectCard.test.tsx    | 58 ++++++++++++++++++-
 3 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/autoscheduler/frontend/src/components/SchedulingPage/CourseSelectColumn/CourseSelectCard/ExpandedCourseCard/SectionSelect/SectionSelect.css b/autoscheduler/frontend/src/components/SchedulingPage/CourseSelectColumn/CourseSelectCard/ExpandedCourseCard/SectionSelect/SectionSelect.css
index ec24ea8cd..ae1cfca3d 100644
--- a/autoscheduler/frontend/src/components/SchedulingPage/CourseSelectColumn/CourseSelectCard/ExpandedCourseCard/SectionSelect/SectionSelect.css
+++ b/autoscheduler/frontend/src/components/SchedulingPage/CourseSelectColumn/CourseSelectCard/ExpandedCourseCard/SectionSelect/SectionSelect.css
@@ -34,6 +34,8 @@
     /* position is sticky by default, which prevents the first instructor name from scrolling 
        with the rest of the SectionSelect */
     position: initial;
+    display: flex;
+    align-items: center;
 }
 
 .gray-text {
diff --git a/autoscheduler/frontend/src/components/SchedulingPage/CourseSelectColumn/CourseSelectCard/ExpandedCourseCard/SectionSelect/SectionSelect.tsx b/autoscheduler/frontend/src/components/SchedulingPage/CourseSelectColumn/CourseSelectCard/ExpandedCourseCard/SectionSelect/SectionSelect.tsx
index d22e508a1..a51334da3 100644
--- a/autoscheduler/frontend/src/components/SchedulingPage/CourseSelectColumn/CourseSelectCard/ExpandedCourseCard/SectionSelect/SectionSelect.tsx
+++ b/autoscheduler/frontend/src/components/SchedulingPage/CourseSelectColumn/CourseSelectCard/ExpandedCourseCard/SectionSelect/SectionSelect.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   List, ListItemText, ListItem, Checkbox, ListItemIcon, Typography, ListSubheader,
 } from '@material-ui/core';
+import HonorsIcon from '@material-ui/icons/School';
 import { useSelector, useDispatch } from 'react-redux';
 import Meeting, { MeetingType } from '../../../../../../types/Meeting';
 import { formatTime } from '../../../../../../timeUtil';
@@ -69,6 +70,7 @@ const SectionSelect: React.FC<SectionSelectProps> = ({ id }): JSX.Element => {
         ? (
           <ListSubheader disableGutters className={styles.listSubheaderDense}>
             {section.instructor.name}
+            {section.honors ? <HonorsIcon titleAccess="honors" /> : null}
           </ListSubheader>
         )
         : null;
diff --git a/autoscheduler/frontend/src/tests/ui/CourseSelectCard.test.tsx b/autoscheduler/frontend/src/tests/ui/CourseSelectCard.test.tsx
index 71370a0de..bc709f46c 100644
--- a/autoscheduler/frontend/src/tests/ui/CourseSelectCard.test.tsx
+++ b/autoscheduler/frontend/src/tests/ui/CourseSelectCard.test.tsx
@@ -133,6 +133,63 @@ describe('Course Select Card UI', () => {
     });
   });
 
+  describe('handles honors icon', () => {
+    test('by showing it for honors sections', async () => {
+      // arrange
+      fetchMock.mockResponseOnce(JSON.stringify({ // api/course/search
+        results: ['MATH 151'],
+      }));
+      fetchMock.mockImplementationOnce(testFetch); // api/sections
+
+      const store = createStore(autoSchedulerReducer, applyMiddleware(thunk));
+      store.dispatch(setTerm('201931'));
+      const {
+        getByText, getByLabelText, findByText, findByTitle,
+      } = render(
+        <Provider store={store}><CourseSelectCard id={0} /></Provider>,
+      );
+
+      // act
+      fireEvent.change(getByLabelText('Course'), { target: { value: 'M' } });
+      fireEvent.click(await findByText('MATH 151'));
+
+      // switch to sections view
+      fireEvent.click(getByText('Section'));
+      const honorsIcon = await findByTitle('honors');
+
+      // assert
+      expect(honorsIcon).toBeInTheDocument();
+    });
+
+    test('by hiding it for regular sections', async () => {
+      // arrange
+      fetchMock.mockResponseOnce(JSON.stringify({ // api/course/search
+        results: ['CSCE 121'],
+      }));
+      fetchMock.mockImplementationOnce(testFetch); // api/sections
+
+      const store = createStore(autoSchedulerReducer, applyMiddleware(thunk));
+      store.dispatch(setTerm('201931'));
+      const {
+        getByText, getByLabelText, findByText, queryByTitle,
+      } = render(
+        <Provider store={store}><CourseSelectCard id={0} /></Provider>,
+      );
+
+      // act
+      fireEvent.change(getByLabelText('Course'), { target: { value: 'C' } });
+      fireEvent.click(await findByText('CSCE 121'));
+
+      // switch to sections view
+      fireEvent.click(getByText('Section'));
+      await findByText((cont, el) => ignoreInvisible(cont, el, '501'));
+      const honorsIcon = queryByTitle('honors');
+
+      // assert
+      expect(honorsIcon).not.toBeInTheDocument();
+    });
+  });
+
   describe('does not fetch inappropriately', () => {
     describe('when we search and go to the Sections tab', () => {
       test('and collapse then expand the card', async () => {
@@ -335,7 +392,6 @@ describe('Course Select Card UI', () => {
     });
   });
 
-
   describe('hides the placeholder text', () => {
     test('when the customization filter is Basic and there are honors sections', async () => {
       // arrange