open release/palm.1/backport search

package.json

@@ -69,6 +69,7 @@
     "@pact-foundation/pact": "9.17.3",
     "@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

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button, Icon } from '@edx/paragon';
+import {
+  Close,
+} from '@edx/paragon/icons';
+import { setShowSearch } from '../data/slice';
+import { useElementBoundingBox, useLockScroll } from './hooks';
+import messages from './messages';
+
+import CoursewareSearchForm from './CoursewareSearchForm';
+import CoursewareSearchResults from './CoursewareSearchResults';
+import mockedData from './test-data/mockedResults';
+
+const CoursewareSearch = ({ intl, ...sectionProps }) => {
+  const [results, setResults] = useState();
+  const dispatch = useDispatch();
+
+  useLockScroll();
+
+  const info = useElementBoundingBox('courseTabsNavigation');
+  const top = info ? `${Math.floor(info.top)}px` : 0;
+
+  const handleSubmit = (search) => {
+    if (!search) {
+      setResults(undefined);
+      return;
+    }
+
+    setResults(search.toLowerCase() !== 'lorem ipsum' ? mockedData : []);
+  };
+
+  return (
+    <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">
+          <h2>{intl.formatMessage(messages.searchModuleTitle)}</h2>
+          <CoursewareSearchForm
+            onSubmit={handleSubmit}
+            placeholder={intl.formatMessage(messages.searchBarPlaceholderText)}
+          />
+          {results !== undefined ? (
+            <CoursewareSearchResults results={results} />
+          ) : null}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+CoursewareSearch.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CoursewareSearch);

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import {
+  fireEvent,
+  initializeMockApp,
+  render,
+  screen,
+} from '../../setupTest';
+import { CoursewareSearch } from './index';
+import { setShowSearch } from '../data/slice';
+import { useElementBoundingBox, useLockScroll } from './hooks';
+
+const mockDispatch = jest.fn();
+
+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;
+}
+
+describe('CoursewareSearch', () => {
+  beforeAll(async () => {
+    initializeMockApp();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  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);
+    });
+
+    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);
+    });
+  });
+
+  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/CoursewareSearchForm.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SearchField } from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+const CoursewareSearchForm = ({
+  onSubmit,
+  onChange,
+  placeholder,
+}) => (
+  <SearchField.Advanced
+    onSubmit={onSubmit}
+    onChange={onChange}
+    submitButtonLocation="external"
+    className="courseware-search-form"
+  >
+    <div className="pgn__searchfield_wrapper" data-testid="courseware-search-form">
+      <SearchField.Label />
+      <SearchField.Input placeholder={placeholder} />
+      <SearchField.ClearButton />
+    </div>
+    <SearchField.SubmitButton submitButtonLocation="external" />
+  </SearchField.Advanced>
+);
+
+CoursewareSearchForm.propTypes = {
+  onSubmit: PropTypes.func,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.string,
+};
+
+CoursewareSearchForm.defaultProps = {
+  onSubmit: undefined,
+  onChange: undefined,
+  placeholder: undefined,
+};
+
+export default CoursewareSearchForm;

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  act,
+  initializeMockApp,
+  render,
+  screen,
+  waitFor,
+  fireEvent,
+} from '../../setupTest';
+import CoursewareSearchForm from './CoursewareSearchForm';
+
+function renderComponent(placeholder, onSubmit, onChange) {
+  const { container } = render(<CoursewareSearchForm
+    placeholder={placeholder}
+    onSubmit={onSubmit}
+    onChange={onChange}
+  />);
+  return container;
+}
+
+describe('CoursewareSearchToggle', () => {
+  const placeholderText = 'Search for courseware';
+  let onSubmitHandlerMock;
+  let onChangeHandlerMock;
+
+  beforeAll(async () => {
+    onChangeHandlerMock = jest.fn();
+    onSubmitHandlerMock = jest.fn();
+    initializeMockApp();
+  });
+
+  it('should render', async () => {
+    await act(async () => renderComponent(placeholderText, onSubmitHandlerMock, onChangeHandlerMock));
+    await waitFor(() => {
+      expect(screen.queryByTestId('courseware-search-form')).toBeInTheDocument();
+    });
+  });
+
+  it('should call onChange handler when input changes', async () => {
+    await act(async () => renderComponent(placeholderText, onSubmitHandlerMock, onChangeHandlerMock));
+    await waitFor(() => {
+      const element = screen.queryByPlaceholderText(placeholderText);
+      fireEvent.change(element, { target: { value: 'test' } });
+      expect(onChangeHandlerMock).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should call onSubmit handler when submit is clicked', async () => {
+    await act(async () => renderComponent(placeholderText, onSubmitHandlerMock, onChangeHandlerMock));
+    await waitFor(() => {
+      const element = screen.queryAllByText('Search')[0];
+      fireEvent.click(element);
+      expect(onSubmitHandlerMock).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+});