test: Add more tests

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

@@ -11,10 +11,9 @@ const CoursewareSearchForm = ({
     onSubmit={onSubmit}
     onChange={onChange}
     submitButtonLocation="external"
-    className="courseware-search-bar"
-    data-testid="courseware-search-bar"
+    className="courseware-search-form"
   >
-    <div className="pgn__searchfield_wrapper">
+    <div className="pgn__searchfield_wrapper" data-testid="courseware-search-form">
       <SearchField.Label />
       <SearchField.Input placeholder={placeholder} />
       <SearchField.ClearButton />

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

@@ -5,23 +5,52 @@ import {
   render,
   screen,
   waitFor,
+  fireEvent,
 } from '../../setupTest';
 import CoursewareSearchForm from './CoursewareSearchForm';
 
-function renderComponent() {
-  const { container } = render(<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());
+    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(() => {
-      expect(screen.queryByTestId('courseware-search-bar')).toBeInTheDocument();
+      const element = screen.queryAllByText('Search')[0];
+      fireEvent.click(element);
+      expect(onSubmitHandlerMock).toHaveBeenCalledTimes(1);
     });
   });