From 1327022b9ece8564271507d0ac53bd102fbb1155 Mon Sep 17 00:00:00 2001
From: David Nuon <davidnuongm@gmail.com>
Date: Tue, 24 Oct 2023 12:32:43 -0700
Subject: [PATCH] test: Add more tests

---
 .../CoursewareSearchForm.jsx                  |  5 +--
 .../CoursewareSearchForm.test.jsx             | 37 +++++++++++++++++--
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/course-home/courseware-search/CoursewareSearchForm.jsx b/src/course-home/courseware-search/CoursewareSearchForm.jsx
index 954a9b40ad..2cc78d51de 100644
--- a/src/course-home/courseware-search/CoursewareSearchForm.jsx
+++ b/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 />
diff --git a/src/course-home/courseware-search/CoursewareSearchForm.test.jsx b/src/course-home/courseware-search/CoursewareSearchForm.test.jsx
index 5617d2b0e2..0c41d74dba 100644
--- a/src/course-home/courseware-search/CoursewareSearchForm.test.jsx
+++ b/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);
     });
   });