Added Courseware Search container popover UI (#1212)

* feat: Added Courseware Search container popover

* chore: Added unit tests for CoursewareSearch and CoursewareSearchToggle

* chore: Updated unit test for CourseTabsNavigation

* chore: Partial coverage on Courseware Search Hooks

* chore: Finished Courseware Search Hooks unit testing

* fix: Fixed an overlook that caused a conditional hook

* fix: Reduced bounce timeout on scroll/resize to 100ms

* chore: Updated snapshots

* chore: Moved @testing-library/react-hooks dep to DEV

* chore: Minor adjustments on unit tests

* chore: Fixed test issue

package.json

@@ -71,6 +71,7 @@
     "@pact-foundation/pact": "^11.0.2",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "13.5.0",
     "axios-mock-adapter": "1.20.0",
     "copy-webpack-plugin": "^11.0.0",

src/course-home/courseware-search/CoursewareSearch.jsx

@@ -1,25 +1,90 @@
-import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import React from 'react';
+import { useDispatch } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, Icon } from '@edx/paragon';
-import { Search } from '@edx/paragon/icons';
+import {
+  Close,
+} from '@edx/paragon/icons';
+import { setShowSearch } from '../data/slice';
+import { useElementBoundingBox, useLockScroll } from './hooks';
 import messages from './messages';
-import { fetchCoursewareSearchSettings } from '../data/thunks';
 
-const CoursewareSearch = ({ intl, ...rest }) => {
-  const { courseId } = useParams();
-  const [enabled, setEnabled] = useState(false);
+const CoursewareSearch = ({ intl, ...sectionProps }) => {
+  const dispatch = useDispatch();
 
-  useEffect(() => {
-    fetchCoursewareSearchSettings(courseId).then(response => setEnabled(response.enabled));
-  }, [courseId]);
+  useLockScroll();
 
-  if (!enabled) { return null; }
+  const info = useElementBoundingBox('courseTabsNavigation');
+  const top = info ? `${Math.floor(info.top)}px` : 0;
 
   return (
-    <Button variant="tertiary" size="sm" className="p-1 mt-2 mr-2 rounded-lg" aria-label={intl.formatMessage(messages.searchOpenAction)} data-testid="courseware-search-button" {...rest}>
-      <Icon src={Search} />
-    </Button>
+    <section className="courseware-search" style={{ '--modal-top-position': top }} data-testid="courseware-search-section" {...sectionProps}>
+      <div className="courseware-search__close">
+        <Button
+          variant="tertiary"
+          className="p-1"
+          aria-label={intl.formatMessage(messages.searchCloseAction)}
+          onClick={() => dispatch(setShowSearch(false))}
+          data-testid="courseware-search-close-button"
+        ><Icon src={Close} />
+        </Button>
+      </div>
+      <div className="courseware-search__outer-content">
+        <div className="courseware-search__content" style={{ height: '999px' }}>
+          <h2>{intl.formatMessage(messages.searchModuleTitle)}</h2>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper rutrum odio quis congue.
+            Duis sodales nibh et sapien elementum fermentum. Quisque magna urna, gravida at gravida et,
+            ultricies vel massa.Aliquam in vehicula dolor, id scelerisque felis.
+            Morbi posuere scelerisque tincidunt. Proin et gravida tortor. Vestibulum vel orci vulputate,
+            gravida justo eu, varius dolor. Etiam viverra diam sed est tincidunt, et aliquam est efficitur.
+            Donec imperdiet eros quis est condimentum faucibus.
+          </p>
+          <p>
+            In mattis, tellus ut lacinia viverra, ligula ex sagittis ex, sed mollis ex enim ut velit.
+            Nunc elementum, risus eget feugiat scelerisque, sapien felis laoreet nisl, ut pharetra neque
+            lorem a elit. Maecenas elementum, metus fringilla suscipit imperdiet, mi nunc efficitur elit,
+            sed consequat massa magna sit amet dui. Curabitur ultrices nisi vel lorem scelerisque, pharetra
+            luctus nunc pulvinar. Morbi aliquam ante eget arcu condimentum consectetur. Fusce faucibus lacus
+            sed pretium ultrices. Curabitur neque lacus, elementum convallis augue placerat, gravida
+            scelerisque ipsum. Donec bibendum lectus id ullamcorper sodales. Integer quis ante facilisis erat
+            maximus viverra. Nunc rutrum posuere lectus, aliquam congue odio blandit nec. Phasellus placerat,
+            magna non bibendum lacinia, tortor orci vulputate dui, vitae imperdiet turpis dui nec tortor.
+            Praesent porttitor mollis diam ut gravida. Praesent vitae felis dignissim sem accumsan dignissim.
+            Fusce ullamcorper bibendum ante ac pellentesque. Aliquam sed leo vel leo pellentesque cursus a at risus.
+            Donec sollicitudin maximus diam, sit amet molestie sapien commodo at.
+          </p>
+          <p>
+            Cras ornare pulvinar est id rhoncus. Aenean ut risus magna. Fusce cursus pulvinar dui ut egestas.
+            Quisque condimentum risus non mi sagittis, eu facilisis enim hendrerit. Integer faucibus dapibus rutrum.
+            Nullam vitae mollis tortor, eu lacinia mi. Nunc commodo ex id eros hendrerit, vel interdum augue tristique.
+            Suspendisse ullamcorper, purus in vestibulum auctor, justo nisi finibus dolor,
+            nec dignissim arcu enim a augue.
+          </p>
+          <p>
+            Fusce vel libero odio. Orci varius natoque penatibus et magnis dis parturient montes,
+            nascetur ridiculus mus. Pellentesque at varius turpis. Ut pulvinar efficitur congue. Vivamus cursus,
+            purus at aliquet malesuada, felis quam blandit dolor, a interdum justo est semper augue.
+            In eu lectus sit amet est pellentesque porta vel eget magna. Morbi sollicitudin turpis vitae faucibus
+            pulvinar. Etiam placerat pulvinar porta.
+          </p>
+          <p>
+            Suspendisse mattis eget felis non sagittis. Nulla facilisi. In bibendum cursus purus, non venenatis tellus
+            dignissim sit amet. Phasellus volutpat ipsum turpis, non imperdiet nisi elementum a. Nunc mollis, sapien
+            cursus vehicula consectetur, nunc turpis pulvinar mauris, at varius justo mi egestas nisi. Fusce semper
+            sapien in orci rhoncus ornare. Donec maximus mi eu pulvinar convallis.
+          </p>
+          <p>
+            Nullam tortor sem, hendrerit eu sapien ac, venenatis rhoncus ligula. Donec nibh leo, venenatis sed interdum
+            ac, pharetra sed nibh. Orci varius natoque penatibus et magnis dis parturient montes,
+            nascetur ridiculus mus. Sed congue risus eu mattis condimentum. In id nulla sit amet magna suscipit
+            consectetur. Nullam vitae augue felis. In consequat tempus diam, a eleifend ante bibendum ac.
+            Vivamus mi orci, fermentum ac viverra quis, tristique a ipsum. Morbi imperdiet porta sem, in sollicitudin
+            risus dignissim at. Nulla dapibus iaculis vestibulum.
+          </p>
+        </div>
+      </div>
+    </section>
   );
 };
 

src/course-home/courseware-search/CoursewareSearch.test.jsx

@@ -1,18 +1,27 @@
 import React from 'react';
 import {
-  act,
+  fireEvent,
   initializeMockApp,
   render,
   screen,
-  waitFor,
 } from '../../setupTest';
-import { fetchCoursewareSearchSettings } from '../data/thunks';
 import { CoursewareSearch } from './index';
+import { setShowSearch } from '../data/slice';
+import { useElementBoundingBox, useLockScroll } from './hooks';
 
-jest.mock('../data/thunks');
+const mockDispatch = jest.fn();
 
-function renderComponent() {
-  const { container } = render(<CoursewareSearch />);
+jest.mock('./hooks');
+jest.mock('../data/slice');
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => mockDispatch,
+}));
+
+const tabsTopPosition = 128;
+
+function renderComponent(props = {}) {
+  const { container } = render(<CoursewareSearch {...props} />);
   return container;
 }
 
@@ -21,26 +30,55 @@ describe('CoursewareSearch', () => {
     initializeMockApp();
   });
 
-  beforeEach(() => {
+  afterEach(() => {
     jest.clearAllMocks();
   });
 
-  it('Should not render when the waffle flag is disabled', async () => {
-    fetchCoursewareSearchSettings.mockImplementation(() => Promise.resolve({ enabled: false }));
+  describe('when rendering normally', () => {
+    beforeAll(() => {
+      useElementBoundingBox.mockImplementation(() => ({ top: tabsTopPosition }));
+    });
+
+    beforeEach(() => {
+      renderComponent();
+    });
+
+    it('Should use useElementBoundingBox() and useLockScroll() hooks', () => {
+      expect(useElementBoundingBox).toBeCalledTimes(1);
+      expect(useLockScroll).toBeCalledTimes(1);
+    });
 
-    await act(async () => renderComponent());
-    await waitFor(() => {
-      expect(fetchCoursewareSearchSettings).toHaveBeenCalledTimes(1);
-      expect(screen.queryByTestId('courseware-search-button')).not.toBeInTheDocument();
+    it('Should have a "--modal-top-position" CSS variable matching the CourseTabsNavigation top position', () => {
+      const section = screen.getByTestId('courseware-search-section');
+      expect(section.style.getPropertyValue('--modal-top-position')).toBe(`${tabsTopPosition}px`);
+    });
+
+    it('Should dispatch setShowSearch(true) when clicking the close button', () => {
+      const button = screen.getByTestId('courseware-search-close-button');
+      fireEvent.click(button);
+
+      expect(mockDispatch).toHaveBeenCalledTimes(1);
+      expect(setShowSearch).toHaveBeenCalledTimes(1);
+      expect(setShowSearch).toHaveBeenCalledWith(false);
     });
   });
 
-  it('Should render when the waffle flag is enabled', async () => {
-    fetchCoursewareSearchSettings.mockImplementation(() => Promise.resolve({ enabled: true }));
-    await act(async () => renderComponent());
-    await waitFor(() => {
-      expect(fetchCoursewareSearchSettings).toHaveBeenCalledTimes(1);
-      expect(screen.queryByTestId('courseware-search-button')).toBeInTheDocument();
+  describe('when CourseTabsNavigation is not present', () => {
+    it('Should use "--modal-top-position: 0" if  nce element is not present', () => {
+      useElementBoundingBox.mockImplementation(() => undefined);
+      renderComponent();
+
+      const section = screen.getByTestId('courseware-search-section');
+      expect(section.style.getPropertyValue('--modal-top-position')).toBe('0');
+    });
+  });
+
+  describe('when passing extra props', () => {
+    it('Should pass on extra props to section element', () => {
+      renderComponent({ foo: 'bar' });
+
+      const section = screen.getByTestId('courseware-search-section');
+      expect(section).toHaveAttribute('foo', 'bar');
     });
   });
 });

src/course-home/courseware-search/CoursewareSearchToggle.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button, Icon } from '@edx/paragon';
+import { Search } from '@edx/paragon/icons';
+import { useDispatch } from 'react-redux';
+import { setShowSearch } from '../data/slice';
+import messages from './messages';
+import { useCoursewareSearchFeatureFlag } from './hooks';
+
+const CoursewareSearchToggle = ({
+  intl,
+}) => {
+  const dispatch = useDispatch();
+  const enabled = useCoursewareSearchFeatureFlag();
+
+  if (!enabled) { return null; }
+
+  return (
+    <div className="courseware-searc-toggle">
+      <Button
+        variant="tertiary"
+        size="sm"
+        className="p-1 mt-2 mr-2 rounded-lg"
+        aria-label={intl.formatMessage(messages.searchOpenAction)}
+        onClick={() => dispatch(setShowSearch(true))}
+        data-testid="courseware-search-open-button"
+      >
+        <Icon src={Search} />
+      </Button>
+    </div>
+  );
+};
+
+CoursewareSearchToggle.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CoursewareSearchToggle);