diff --git a/src/course-home/courseware-search/CoursewareSearch.jsx b/src/course-home/courseware-search/CoursewareSearch.jsx index 452d24b2e8..d66820ef2b 100644 --- a/src/course-home/courseware-search/CoursewareSearch.jsx +++ b/src/course-home/courseware-search/CoursewareSearch.jsx @@ -9,6 +9,8 @@ import { setShowSearch } from '../data/slice'; import { useElementBoundingBox, useLockScroll } from './hooks'; import messages from './messages'; +import CoursewareSearchForm from './CoursewareSearchForm'; + const CoursewareSearch = ({ intl, ...sectionProps }) => { const dispatch = useDispatch(); @@ -31,7 +33,9 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
-

{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;