feat: add exam selection component

package.json

@@ -62,6 +62,7 @@
     "@edx/reactifex": "^2.1.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "14.4.3",
     "axios": "^1.4.0",
     "axios-mock-adapter": "^1.21.4",
     "glob": "7.2.3",

src/pages/ExamsPage/__snapshots__/index.test.jsx.snap

@@ -8,12 +8,66 @@ Object {
       <div
         class="container-fluid"
       >
-        <div>
-          <ul>
-            <li>
-              exam1
-            </li>
-          </ul>
+        <div
+          class="container-fluid"
+          id="exam-selector"
+        >
+          <div
+            data-testid="exam_selection"
+          >
+            <div
+              class="pgn__menu-select"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                class="btn btn-outline-primary"
+                type="button"
+              >
+                Select an exam
+                <span
+                  class="pgn__icon btn-icon-after"
+                >
+                  <svg
+                    aria-hidden="true"
+                    fill="none"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </button>
+              <div
+                class="pgn__menu-select-popup"
+              >
+                <div
+                  style="position: absolute; left: 0px; top: 0px; z-index: 2000;"
+                >
+                  <div
+                    data-focus-guard="true"
+                    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                    tabindex="-1"
+                  />
+                  <div
+                    data-focus-lock-disabled="disabled"
+                  />
+                  <div
+                    data-focus-guard="true"
+                    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                    tabindex="-1"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
         <div>
           <nav
@@ -434,12 +488,66 @@ Object {
     <div
       class="container-fluid"
     >
-      <div>
-        <ul>
-          <li>
-            exam1
-          </li>
-        </ul>
+      <div
+        class="container-fluid"
+        id="exam-selector"
+      >
+        <div
+          data-testid="exam_selection"
+        >
+          <div
+            class="pgn__menu-select"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="btn btn-outline-primary"
+              type="button"
+            >
+              Select an exam
+              <span
+                class="pgn__icon btn-icon-after"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="none"
+                  focusable="false"
+                  height="24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </button>
+            <div
+              class="pgn__menu-select-popup"
+            >
+              <div
+                style="position: absolute; left: 0px; top: 0px; z-index: 2000;"
+              >
+                <div
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="-1"
+                />
+                <div
+                  data-focus-lock-disabled="disabled"
+                />
+                <div
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="-1"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div>
         <nav

src/pages/ExamsPage/components/ExamSelection.jsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  MenuItem, SearchField,
+  SelectMenu,
+} from '@edx/paragon';
+import PropTypes from 'prop-types';
+
+import messages from '../messages';
+
+const ExamSelection = ({ exams, onSelect }) => {
+  const { formatMessage } = useIntl();
+  const [searchText, setSearchText] = useState('');
+
+  const getMenuItems = () => {
+    const menuItems = [
+      <MenuItem
+        key={0}
+        as={SearchField}
+        onChange={setSearchText}
+        placeholder={formatMessage(messages.examSelectPlaceholder)}
+        onSubmit={() => {}}
+      />,
+    ];
+    return menuItems.concat(exams.filter(exam => (
+      exam.name.toLowerCase().includes(searchText.toLowerCase())
+    )).map(
+      exam => <MenuItem key={exam.id} onClick={() => onSelect(exam.id)}>{exam.name}</MenuItem>,
+    ));
+  };
+
+  return (
+    <div data-testid="exam_selection">
+      <SelectMenu
+        defaultMessage={formatMessage(messages.examSelectDropdownLabel)}
+      >
+        { getMenuItems() }
+      </SelectMenu>
+    </div>
+  );
+};
+
+ExamSelection.propTypes = {
+  exams: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+  })).isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default ExamSelection;

src/pages/ExamsPage/components/ExamSelection.test.jsx

@@ -0,0 +1,57 @@
+import {
+  render, screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ExamSelection from './ExamSelection';
+
+// nomally mocked for unit tests but required for rendering/snapshots
+jest.unmock('react');
+
+const renderWithoutError = (component) => {
+  // there is an error thrown inside the SelectMenu component by the
+  // popover library. This is a workaround to avoid polluting our output
+  // with that error message. Issue: https://github.com/floating-ui/react-popper/issues/350
+  jest.spyOn(console, 'error').mockImplementation(() => {});
+  const rendered = render(component);
+  console.error.mockRestore(); // eslint-disable-line no-console
+  return rendered;
+};
+
+describe('ExamSelection', () => {
+  const defaultExams = [
+    { id: 19, name: 'exam1' },
+    { id: 27, name: 'exam2' },
+    { id: 42, name: 'exam3' },
+  ];
+  const mockHandleSelectExam = jest.fn();
+  test('component matches snapshot', () => {
+    expect(renderWithoutError(
+      <ExamSelection exams={defaultExams} onSelect={mockHandleSelectExam} />,
+    )).toMatchSnapshot();
+  });
+  it('lists each exam in the dropdown', async () => {
+    renderWithoutError(<ExamSelection exams={defaultExams} onSelect={mockHandleSelectExam} />);
+    screen.getByText('Select an exam').click();
+    defaultExams.forEach((exam) => {
+      expect(screen.getByText(exam.name)).toBeInTheDocument();
+    });
+  });
+  it('filters the dropdown by search text', async () => {
+    const user = userEvent.setup();
+    renderWithoutError(<ExamSelection exams={defaultExams} onSelect={mockHandleSelectExam} />);
+    screen.getByText('Select an exam').click();
+    const input = screen.getByPlaceholderText('Search for an exam...');
+    await user.type(input, 'exam1');
+    expect(screen.getByText('exam1')).toBeInTheDocument();
+    expect(screen.queryByText('exam2')).not.toBeInTheDocument();
+    expect(screen.queryByText('exam3')).not.toBeInTheDocument();
+  });
+  it('calls onSelect when an exam is selected', () => {
+    renderWithoutError(<ExamSelection exams={defaultExams} onSelect={mockHandleSelectExam} />);
+    screen.getByText('Select an exam').click();
+    screen.getByText('exam2').click();
+    expect(mockHandleSelectExam).toHaveBeenCalledTimes(1);
+    expect(mockHandleSelectExam).toHaveBeenCalledWith(27);
+  });
+});