test: transform snapshot into rtl test 1/2 (#1756)

* test: remove snapshots and use rtl tests

* test: improve coverage on search results test

Author: diana-villalvazo-wgu

src/__snapshots__/index.test.jsx.snap

@@ -5,6 +5,7 @@ import {
   screen,
 } from '../../setupTest';
 import CoursewareSearchEmpty from './CoursewareSearchEmpty';
+import messages from './messages';
 
 function renderComponent() {
   const { container } = render(<CoursewareSearchEmpty />);
@@ -16,9 +17,12 @@ describe('CoursewareSearchEmpty', () => {
     initializeMockApp();
   });
 
-  it('should match the snapshot', () => {
+  it('render empty results text and corresponding classes', () => {
     renderComponent();
-
-    expect(screen.getByTestId('no-results')).toMatchSnapshot();
+    const emptyText = screen.getByText(messages.searchResultsNone.defaultMessage);
+    expect(emptyText).toBeInTheDocument();
+    expect(emptyText).toHaveClass('courseware-search-results__empty');
+    expect(emptyText).toHaveAttribute('data-testid', 'no-results');
+    expect(emptyText.parentElement).toHaveClass('courseware-search-results');
   });
 });

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

@@ -7,6 +7,7 @@ import {
 import CoursewareSearchResults from './CoursewareSearchResults';
 import messages from './messages';
 import searchResultsFactory from './test-data/search-results-factory';
+import * as mock from './test-data/mocked-response.json';
 
 jest.mock('react-redux');
 
@@ -34,8 +35,53 @@ describe('CoursewareSearchResults', () => {
       renderComponent({ results });
     });
 
-    it('should match the snapshot', () => {
-      expect(screen.getByTestId('search-results')).toMatchSnapshot();
+    it('should render complete list', () => {
+      const courses = screen.getAllByRole('link');
+      expect(courses.length).toBe(mock.results.length);
+    });
+
+    it('should render correct link for internal course', () => {
+      const courses = screen.getAllByRole('link');
+      const firstCourse = courses[0];
+      const firstCourseTitle = firstCourse.querySelector('.courseware-search-results__title span');
+      expect(firstCourseTitle.innerHTML).toEqual(mock.results[0].data.content.display_name);
+      expect(firstCourse.href).toContain(mock.results[0].data.url);
+      expect(firstCourse).not.toHaveAttribute('target', '_blank');
+      expect(firstCourse).not.toHaveAttribute('rel', 'nofollow');
+    });
+
+    it('should render correct link if is External url course', () => {
+      const courses = screen.getAllByRole('link');
+      const externalCourse = courses[courses.length - 1];
+      const externalCourseTitle = externalCourse.querySelector('.courseware-search-results__title span');
+      expect(externalCourseTitle.innerHTML).toEqual(mock.results[mock.results.length - 1].data.content.display_name);
+      expect(externalCourse.href).toContain(mock.results[mock.results.length - 1].data.url);
+      expect(externalCourse).toHaveAttribute('target', '_blank');
+      expect(externalCourse).toHaveAttribute('rel', 'nofollow');
+      const icon = externalCourse.querySelector('svg');
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('should render location breadcrumbs', () => {
+      const breadcrumbs = screen.getAllByText(mock.results[0].data.location[0]);
+      expect(breadcrumbs.length).toBeGreaterThan(0);
+      const firstBreadcrumb = breadcrumbs[0].closest('li');
+      expect(firstBreadcrumb).toBeInTheDocument();
+      expect(firstBreadcrumb.querySelector('div').textContent).toBe(mock.results[0].data.location[0]);
+      expect(firstBreadcrumb.nextSibling.querySelector('div').textContent).toBe(mock.results[0].data.location[1]);
+    });
+  });
+
+  describe('when results are provided with content hits', () => {
+    beforeEach(() => {
+      const { results } = searchResultsFactory('Passing');
+      renderComponent({ results });
+    });
+
+    it('should render content hits', () => {
+      const contentHits = screen.getByText('1');
+      expect(contentHits).toBeInTheDocument();
+      expect(contentHits.tagName).toBe('EM');
     });
   });
 });