-
{intl.formatMessage(messages.searchModuleTitle)}
+
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,
diff --git a/src/course-home/courseware-search/CoursewareSearchForm.jsx b/src/course-home/courseware-search/CoursewareSearchForm.jsx
new file mode 100644
index 0000000000..eac3b35db0
--- /dev/null
+++ b/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,
+}) => (
+
+
+
+
+
+
+
+
+);
+
+CoursewareSearchForm.propTypes = {
+ onSubmit: PropTypes.func,
+ onChange: PropTypes.func,
+ placeholder: PropTypes.string,
+};
+
+CoursewareSearchForm.defaultProps = {
+ onSubmit: undefined,
+ onChange: undefined,
+ placeholder: undefined,
+};
+
+export default CoursewareSearchForm;
diff --git a/src/course-home/courseware-search/CoursewareSearchForm.test.jsx b/src/course-home/courseware-search/CoursewareSearchForm.test.jsx
new file mode 100644
index 0000000000..84601c67f6
--- /dev/null
+++ b/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();
+ 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();
+ });
+});
diff --git a/src/course-home/courseware-search/messages.js b/src/course-home/courseware-search/messages.js
index dee1753bb3..b1c3752af5 100644
--- a/src/course-home/courseware-search/messages.js
+++ b/src/course-home/courseware-search/messages.js
@@ -16,6 +16,11 @@ const messages = defineMessages({
defaultMessage: 'Search this course',
description: 'Title for the Courseware Search module.',
},
+ searchBarPlaceholderText: {
+ id: 'learn.coursewareSerch.searchBarPlaceholderText',
+ defaultMessage: 'Search',
+ description: 'Placeholder text for the Courseware Search input control',
+ },
});
export default messages;