test: full unit test for review problem estep content hook and change…

… it for test

package.json

@@ -35,6 +35,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@redux-beacon/segment": "^1.1.0",
     "@reduxjs/toolkit": "^1.6.1",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.0.0",
     "@zip.js/zip.js": "^2.4.6",
     "axios": "^0.27.0",

src/containers/ReviewProblemStepsModal/components/ReviewProblemStepActions/index.test.jsx

@@ -23,44 +23,44 @@ describe('ReviewProblemStepActions component', () => {
   });
 
   describe('Should render the correct titles', () => {
-    it('renders the correct email title', () => {
+    test('renders the correct email title', () => {
       expect(wrapper.find('[data-testid="email-title"]').text()).toEqual(
         formatMessage(messages.emailTitle),
       );
     });
 
-    it('renders the correct submission ID title', () => {
+    test('renders the correct submission ID title', () => {
       expect(wrapper.find('[data-testid="submission-id-title"]').text()).toEqual(
         formatMessage(messages.submissionIdTitle),
       );
     });
 
-    it('renders the correct submission date title', () => {
+    test('renders the correct submission date title', () => {
       expect(wrapper.find('[data-testid="submission-date-title"]').text()).toEqual(
         formatMessage(messages.submissionDateTitle),
       );
     });
 
-    it('renders the correct grade title', () => {
+    test('renders the correct grade title', () => {
       expect(wrapper.find('[data-testid="grade-title"]').text()).toEqual(
         formatMessage(messages.gradeTitle),
       );
     });
 
-    it('renders the correct grading status title', () => {
+    test('renders the correct grading status title', () => {
       expect(wrapper.find('[data-testid="grade-status-title"]').text()).toEqual(
         formatMessage(messages.gradingStatus),
       );
     });
 
-    it('renders the correct problem steps title', () => {
+    test('renders the correct problem steps title', () => {
       expect(wrapper.find('[data-testid="problem-steps-title"]').text()).toEqual(
         formatMessage(messages.problemStepsTitle),
       );
     });
   });
 
-  it('renders the correct props data', () => {
+  test('renders the correct props data', () => {
     expect(true).toBe(true);
     expect(wrapper.find('[data-testid="fullname-value"]').text()).toEqual('John Doe');
     expect(wrapper.find('[data-testid="username-value"]').text()).toEqual('john_20');

src/containers/ReviewProblemStepsModal/components/ReviewProblemStepsContent/components/AssessmentsTable/index.test.jsx

@@ -112,18 +112,18 @@ describe('AssessmentsTable component', () => {
       assessmentsList={mockDataTableData}
     />);
   });
-  it('renders without crashing', () => {
+  test('renders without crashing', () => {
     expect(el.exists()).toBe(true);
   });
 
-  it('renders the correct title', () => {
+  test('renders the correct title', () => {
     const h3Title = el.find('h3');
     expect(h3Title.text()).toBe(
       formatMessage(messages.assessmentsTableTitle),
     );
   });
 
-  it('should render assessment given button and assessment received button', () => {
+  test('should render assessment given button and assessment received button', () => {
     const assessmentReceivedButton = el.find('[data-testid="assessments-received-button"]');
     const assessmentGivenButton = el.find('[data-testid="assessments-given-button"]');
 
@@ -138,7 +138,7 @@ describe('AssessmentsTable component', () => {
     );
   });
 
-  it('should call the correct onClick handler when the "Received Assessments" button is clicked', () => {
+  test('should call the correct onClick handler when the "Received Assessments" button is clicked', () => {
     const assessmentReceivedButton = el.find('[data-testid="assessments-received-button"]');
     assessmentReceivedButton.simulate('click');
 
@@ -150,7 +150,7 @@ describe('AssessmentsTable component', () => {
     expect(handleReceivedAssessmentsSpy).toHaveBeenCalled();
   });
 
-  it('should call the correct onClick handler when the "Given Assessments" button is clicked', () => {
+  test('should call the correct onClick handler when the "Given Assessments" button is clicked', () => {
     const assessmentGivenButton = el.find('[data-testid="assessments-given-button"]');
 
     assessmentGivenButton.simulate('click');
@@ -181,52 +181,52 @@ describe('AssessmentsTable component', () => {
         columns = tableProps.columns;
       });
 
-      it('ID Assessment column', () => {
+      test('ID Assessment column', () => {
         expect(columns[0]).toEqual({
           Header: formatMessage(messages.idAssessmentColumnTitle),
           accessor: 'idAssessment',
         });
       });
-      it('Reviewer name or Learner name column', () => {
+      test('Reviewer name or Learner name column', () => {
         expect(columns[1]).toEqual({
           Header: formatMessage(messages.reviewerNameColumnTitle),
           accessor: 'reviewerName',
         });
       });
-      it('User name column', () => {
+      test('User name column', () => {
         expect(columns[2]).toEqual({
           Header: formatMessage(messages.usernameColumnTitle),
           accessor: 'userName',
         });
       });
-      it('Email column', () => {
+      test('Email column', () => {
         const emailColumn = tableProps.columns.find((column) => column.accessor === 'email');
         expect(emailColumn.Header).toBe(
           formatMessage(messages.emailColumnTitle),
         );
       });
-      it('Assessment date column', () => {
+      test('Assessment date column', () => {
         const assessmentDateColumn = tableProps.columns.find((column) => column.accessor === 'assessmentDate');
         expect(assessmentDateColumn.Header).toBe(
           formatMessage(messages.assessmentDateColumnTitle),
         );
       });
 
-      it('Assessment scores column', () => {
+      test('Assessment scores column', () => {
         const assessmentScoresColumn = tableProps.columns.find((column) => column.accessor === 'assessmentScores');
         expect(assessmentScoresColumn.Header).toBe(
           formatMessage(messages.assessmentScoresColumnTitle),
         );
       });
 
-      it('Problem step column', () => {
+      test('Problem step column', () => {
         const problemStepColumn = tableProps.columns.find((column) => column.accessor === 'problemStep');
         expect(problemStepColumn.Header).toBe(
           formatMessage(messages.problemStepColumnTitle),
         );
       });
 
-      it('Feedback column', () => {
+      test('Feedback column', () => {
         const feedbackColumn = tableProps.columns.find((column) => column.accessor === 'feedback');
         expect(feedbackColumn.Header).toBe(
           formatMessage(messages.feedbackColumnTitle),
@@ -246,12 +246,12 @@ describe('AssessmentsTable component', () => {
           Cell = () => assessmentScoresColumn.Cell({ value: assessmentScores });
         });
 
-        it('renders assessment scores correctly', () => {
+        test('renders assessment scores correctly', () => {
           const wrapper = shallow(<Cell />);
           expect(wrapper.find('li')).toHaveLength(2);
         });
 
-        it('renders assessment scores with correct values', () => {
+        test('renders assessment scores with correct values', () => {
           const wrapper = shallow(<Cell />);
           expect(wrapper.find('li').at(0).text()).toBe('Ideas: Fair (1)');
           expect(wrapper.find('li').at(1).text()).toBe('Content: Excellent (5)');
@@ -271,7 +271,7 @@ describe('AssessmentsTable component', () => {
           Cell = () => emailColumn.Cell({ value: email });
         });
 
-        it('renders Hyperlink with correct email', () => {
+        test('renders Hyperlink with correct email', () => {
           const wrapper = shallow(<Cell />);
           expect(wrapper.find(Hyperlink).prop('children')).toBe(emailValue);
         });
@@ -289,7 +289,7 @@ describe('AssessmentsTable component', () => {
           Cell = () => problemStepColumn.Cell({ value: problemStep });
         });
 
-        it('renders Button with correct status and title', () => {
+        test('renders Button with correct status and title', () => {
           const wrapper = shallow(<Cell />);
           expect(wrapper.find(Button).prop('children').props.status).toBe('graded');
           expect(wrapper.find(Button).prop('children').props.title).toBe('Staff');

src/containers/ReviewProblemStepsModal/components/ReviewProblemStepsContent/components/ErrorMessage/index.test.jsx

@@ -15,23 +15,23 @@ describe('ErrorMessage component', () => {
     wrapper = shallow(<ErrorMessage {...defaultProps} />);
   });
 
-  it('renders without crashing', () => {
+  test('renders without crashing', () => {
     expect(wrapper.exists()).toBe(true);
   });
 
-  it('renders an Alert component', () => {
+  test('renders an Alert component', () => {
     expect(wrapper.find(Alert)).toHaveLength(1);
   });
 
-  it('renders Alert with correct props', () => {
+  test('renders Alert with correct props', () => {
     const alertComponent = wrapper.find(Alert);
 
     expect(alertComponent.prop('variant')).toBe('danger');
     expect(alertComponent.prop('icon')).toBe(Info);
     expect(alertComponent.prop('stacked')).toBe(true);
   });
 
-  it('renders Alert.Heading with provided title', () => {
+  test('renders Alert.Heading with provided title', () => {
     const title = 'Error Title Testing';
     const message = 'Error Message';
     wrapper = shallow(<ErrorMessage title={title} message={message} />);
@@ -40,7 +40,7 @@ describe('ErrorMessage component', () => {
     expect(alertHeading.text()).toBe(title);
   });
 
-  it('renders message within the Alert', () => {
+  test('renders message within the Alert', () => {
     const title = 'Error Title';
     const message = 'Error Message Testing';
     wrapper = shallow(<ErrorMessage title={title} message={message} />);

src/containers/ReviewProblemStepsModal/components/ReviewProblemStepsContent/components/ResponsesList/components/ResponseItem/index.test.jsx

@@ -3,20 +3,20 @@ import { shallow, mount } from 'enzyme';
 import ResponseItem from '.';
 
 describe('ResponseItem component', () => {
-  it('renders without crashing', () => {
+  test('renders without crashing', () => {
     const wrapper = shallow(<ResponseItem title="Title" response="Response Content" />);
     expect(wrapper.exists()).toBe(true);
   });
 
-  it('displays the title and response', () => {
+  test('displays the title and response', () => {
     const title = 'Title';
     const response = 'Response Content';
     const wrapper = shallow(<ResponseItem title={title} response={response} />);
     expect(wrapper.find('h4').text()).toBe(title);
     expect(wrapper.find('.collapsible-body').text()).toBe(response);
   });
 
-  it('collapses when trigger is clicked twice', () => {
+  test('collapses when trigger is clicked twice', () => {
     const title = 'Title';
     const response = 'Response Content';
     const wrapper = mount(<ResponseItem title={title} response={response} />);

src/containers/ReviewProblemStepsModal/components/ReviewProblemStepsContent/components/ResponsesList/index.test.jsx

@@ -19,18 +19,18 @@ describe('ResponsesList component', () => {
     el = shallow(<ResponsesList intl={{ formatMessage }} {...defaultProps} />);
   });
 
-  it('renders without crashing', () => {
+  test('renders without crashing', () => {
     expect(el.exists()).toBe(true);
   });
 
-  it('renders the correct title', () => {
+  test('renders the correct title', () => {
     const h3Title = el.find('h3');
     expect(h3Title.text()).toBe(
       formatMessage(messages.responsesDetailListTitle),
     );
   });
 
-  it('list ordered button and list-grid-button must be rendered', () => {
+  test('list ordered button and list-grid-button must be rendered', () => {
     const formatListOrderedButton = el.find(
       '[data-testid="list-ordered-button"]',
     );
@@ -39,12 +39,12 @@ describe('ResponsesList component', () => {
     expect(formatListGridButton.exists()).toBe(true);
   });
 
-  it('When has isLoaded prop should show "Show Rubric" button" ', () => {
+  test('When has isLoaded prop should show "Show Rubric" button" ', () => {
     const showRubricButton = el.find('[data-testid="show-rubric-button"]');
     expect(showRubricButton.exists()).toBe(true);
   });
 
-  it('renders the list of responses', () => {
+  test('renders the list of responses', () => {
     const responsesList = [
       {
         id: 'adb123',
@@ -68,7 +68,7 @@ describe('ResponsesList component', () => {
     });
   });
 
-  it('should toggle list format when "list-ordered-button" is clicked', () => {
+  test('should toggle list format when "list-ordered-button" is clicked', () => {
     const listGridButton = el.find('[data-testid="list-grid-button"]');
 
     listGridButton.simulate('click');
@@ -83,7 +83,7 @@ describe('ResponsesList component', () => {
     expect(listOrderedButtonAfterListOrderedClick.prop('className')).toBe('mb-2 mb-sm-0 list__active');
   });
 
-  it('should toggle list format when "list-grid-button" is clicked', () => {
+  test('should toggle list format when "list-grid-button" is clicked', () => {
     const listOrderedButton = el.find('[data-testid="list-ordered-button"]');
 
     listOrderedButton.simulate('click');