test: improve tests and address feedback

Author: diana-villalvazo-wgu

src/containers/ListView/ListError.test.jsx

@@ -1,9 +1,13 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { selectors, thunkActions } from 'data/redux';
 import { ListError, mapDispatchToProps, mapStateToProps } from './ListError';
+import messages from './messages';
 
 jest.unmock('@openedx/paragon');
 jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
 
 jest.mock('data/redux', () => ({
   selectors: {
@@ -34,30 +38,31 @@ describe('ListError component', () => {
 
   describe('behavior', () => {
     it('renders error alert with proper styling', () => {
-      render(<ListError {...props} />);
+      render(<IntlProvider locale="en" messages={{}}><ListError {...props} /></IntlProvider>);
       const alert = screen.getByRole('alert');
       expect(alert).toBeInTheDocument();
       expect(alert).toHaveClass('alert-danger');
     });
 
     it('displays error heading and message', () => {
-      render(<ListError {...props} />);
+      render(<IntlProvider locale="en" messages={{}}><ListError {...props} /></IntlProvider>);
       const heading = screen.getByRole('alert').querySelector('.alert-heading');
       expect(heading).toBeInTheDocument();
-      expect(heading).toHaveTextContent('FormattedMessage');
+      expect(heading).toHaveTextContent(messages.loadErrorHeading.defaultMessage);
     });
 
     it('displays try again button', () => {
-      render(<ListError {...props} />);
+      render(<IntlProvider locale="en" messages={{}}><ListError {...props} /></IntlProvider>);
       const button = screen.getByRole('button');
       expect(button).toBeInTheDocument();
       expect(button).toHaveClass('btn-primary');
     });
 
-    it('calls initializeApp when try again button is clicked', () => {
-      render(<ListError {...props} />);
+    it('calls initializeApp when try again button is clicked', async () => {
+      render(<IntlProvider locale="en" messages={{}}><ListError {...props} /></IntlProvider>);
+      const user = userEvent.setup();
       const button = screen.getByRole('button');
-      fireEvent.click(button);
+      await user.click(button);
       expect(props.initializeApp).toHaveBeenCalledTimes(1);
     });
   });

src/containers/ListView/index.test.jsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { selectors, thunkActions } from 'data/redux';
 import { RequestKeys } from 'data/constants/requests';
 
 import { formatMessage } from 'testUtils';
 import { ListView, mapStateToProps, mapDispatchToProps } from '.';
+import messages from './messages';
 
 jest.unmock('@openedx/paragon');
 jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
 
 jest.mock('containers/ReviewModal', () => {
   const ReviewModal = () => <div data-testid="review-modal">ReviewModal</div>;
@@ -105,18 +108,18 @@ describe('ListView component', () => {
     });
 
     it('displays loading spinner and message when not loaded and no error', () => {
-      render(<ListView {...props} />);
+      render(<IntlProvider locale="en" messages={{}}><ListView {...props} /></IntlProvider>);
 
       // Check for loading message
-      expect(screen.getByText('FormattedMessage')).toBeInTheDocument();
+      expect(screen.getByText(messages.loadingResponses.defaultMessage)).toBeInTheDocument();
 
       // Check for spinner by finding element with spinner class
       const spinner = document.querySelector('.pgn__spinner');
       expect(spinner).toBeInTheDocument();
     });
 
     it('displays ListViewBreadcrumb and SubmissionsTable when loaded with data', () => {
-      render(<ListView {...props} isLoaded />);
+      render(<IntlProvider locale="en" messages={{}}><ListView {...props} isLoaded /></IntlProvider>);
 
       expect(
         screen.getByText('Back to all open responses'),
@@ -126,7 +129,7 @@ describe('ListView component', () => {
     });
 
     it('displays EmptySubmission component when loaded but has no submission data', () => {
-      render(<ListView {...props} isLoaded isEmptySubmissionData />);
+      render(<IntlProvider locale="en" messages={{}}><ListView {...props} isLoaded isEmptySubmissionData /></IntlProvider>);
 
       expect(
         screen.getByRole('heading', { name: 'Nothing here yet' }),
@@ -143,7 +146,7 @@ describe('ListView component', () => {
     });
 
     it('displays ListError component when there is an error', () => {
-      render(<ListView {...props} hasError />);
+      render(<IntlProvider locale="en" messages={{}}><ListView {...props} hasError /></IntlProvider>);
 
       expect(
         screen.getByRole('button', { name: 'Reload submissions' }),
@@ -152,18 +155,18 @@ describe('ListView component', () => {
     });
 
     it('always displays ReviewModal component regardless of state', () => {
-      const { rerender } = render(<ListView {...props} />);
+      const { rerender } = render(<IntlProvider locale="en" messages={{}}><ListView {...props} /></IntlProvider>);
       expect(screen.getByText('ReviewModal')).toBeInTheDocument();
 
-      rerender(<ListView {...props} isLoaded />);
+      rerender(<IntlProvider locale="en" messages={{}}><ListView {...props} isLoaded /></IntlProvider>);
       expect(screen.getByText('ReviewModal')).toBeInTheDocument();
 
-      rerender(<ListView {...props} hasError />);
+      rerender(<IntlProvider locale="en" messages={{}}><ListView {...props} hasError /></IntlProvider>);
       expect(screen.getByText('ReviewModal')).toBeInTheDocument();
     });
 
     it('calls initializeApp on component mount', () => {
-      render(<ListView {...props} />);
+      render(<IntlProvider locale="en" messages={{}}><ListView {...props} /></IntlProvider>);
       expect(props.initializeApp).toHaveBeenCalledTimes(1);
     });
   });