Update tests

src/courseware/course/Sidebar.jsx

@@ -1,17 +1,23 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Icon } from '@edx/paragon';
 import { ArrowBackIos, Close } from '@edx/paragon/icons';
+
 import messages from './messages';
-import useWindowSize, { responsiveBreakpoints } from '../../generic/tabs/useWindowSize';
 import { useModel } from '../../generic/model-store';
+import useWindowSize, { responsiveBreakpoints } from '../../generic/tabs/useWindowSize';
 import UpgradeCard from '../../generic/upgrade-card/UpgradeCard';
 
 function Sidebar({
-  intl, toggleSidebar, courseId,
+  intl, toggleSidebar,
 }) {
+  const {
+    courseId,
+  } = useSelector(state => state.courseware);
+
   const course = useModel('coursewareMeta', courseId);
 
   const {
@@ -62,7 +68,6 @@ function Sidebar({
 
 Sidebar.propTypes = {
   intl: intlShape.isRequired,
-  courseId: PropTypes.string.isRequired,
   toggleSidebar: PropTypes.func,
 };
 

src/courseware/course/Sidebar.test.jsx

@@ -1,43 +1,72 @@
 import React from 'react';
 import { Factory } from 'rosie';
+import MockAdapter from 'axios-mock-adapter';
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { fetchCourse } from '../data';
 import {
-  render, initializeTestStore, screen, fireEvent, waitFor,
+  render, initializeMockApp, screen, fireEvent, waitFor,
 } from '../../setupTest';
+import initializeStore from '../../store';
+import { appendBrowserTimezoneToUrl, executeThunk } from '../../utils';
 import Sidebar from './Sidebar';
 import useWindowSize from '../../generic/tabs/useWindowSize';
 
+initializeMockApp();
 jest.mock('../../generic/tabs/useWindowSize');
+jest.mock('@edx/frontend-platform/analytics');
 
 describe('Sidebar', () => {
   let mockData;
-  const courseMetadata = Factory.build('courseMetadata');
+  let axiosMock;
+  let store;
+
+  const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+  const defaultMetadata = Factory.build('courseMetadata', { id: courseId });
+  let courseMetadataUrl = `${getConfig().LMS_BASE_URL}/api/courseware/course/${defaultMetadata.id}`;
+  courseMetadataUrl = appendBrowserTimezoneToUrl(courseMetadataUrl);
+
+  function setMetadata(attributes, options) {
+    const courseMetadata = Factory.build('courseMetadata', { id: courseId, ...attributes }, options);
+    axiosMock.onGet(courseMetadataUrl).reply(200, courseMetadata);
+  }
+
+  async function fetchAndRender(component) {
+    await executeThunk(fetchCourse(defaultMetadata.id), store.dispatch);
+    render(component, { store });
+  }
 
   beforeEach(async () => {
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onGet(courseMetadataUrl).reply(200, defaultMetadata);
     mockData = {
       toggleSidebar: () => {},
     };
   });
 
-  beforeAll(async () => {
-    await initializeTestStore({ courseMetadata, excludeFetchCourse: true, excludeFetchSequence: true });
-  });
-
   it('renders sidebar', async () => {
     useWindowSize.mockReturnValue({ width: 1200, height: 422 });
-    const { container } = render(<Sidebar {...mockData} />);
-
-    expect(container).toBeInTheDocument();
-    expect(container).toHaveTextContent('Notifications');
-    expect(container).not.toHaveTextContent('Back to course');
+    await fetchAndRender(<Sidebar />);
+    expect(screen.getByText('Notifications')).toBeInTheDocument();
+    expect(screen.queryByText('Back to course')).not.toBeInTheDocument();
   });
 
-  it('renders no notifications message', async () => {
-    // REV-2130 TODO: add conditional if no expiration box/upgradeable
-    const testData = { ...mockData };
-    const { container } = render(<Sidebar {...testData} />);
+  it('renders upgrade card', async () => {
+    await fetchAndRender(<Sidebar />);
+    const upgradeCard = document.querySelector('.upgrade-card');
 
-    expect(container).toBeInTheDocument();
-    expect(container).toHaveTextContent('You have no new notifications at this time.');
+    expect(upgradeCard).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
+    expect(screen.queryByText('You have no new notifications at this time.')).not.toBeInTheDocument();
+  });
+
+  it('renders no notifications message if no verified mode', async () => {
+    setMetadata({ verified_mode: null });
+    await fetchAndRender(<Sidebar />);
+    expect(screen.queryByText('You have no new notifications at this time.')).toBeInTheDocument();
   });
 
   it('renders sidebar with full screen "Back to course" at response width', async () => {
@@ -47,7 +76,7 @@ describe('Sidebar', () => {
       ...mockData,
       toggleSidebar,
     };
-    render(<Sidebar {...testData} />);
+    await fetchAndRender(<Sidebar {...testData} />);
 
     const responsiveCloseButton = screen.getByRole('button', { name: 'Back to course' });
     await waitFor(() => expect(responsiveCloseButton).toBeInTheDocument());

src/courseware/course/sequence/Sequence.jsx

@@ -230,7 +230,6 @@ function Sequence({
         <Sidebar
           toggleSidebar={toggleSidebar}
           sidebarVisible={sidebarVisible}
-          courseId={courseId}
         />
       ) : null }
 

src/courseware/course/sequence/Sequence.test.jsx

@@ -134,6 +134,7 @@ describe('Sequence', () => {
     const testData = {
       ...mockData,
       sidebarVisible: true,
+      isValuePropCookieSet: true,
     };
 
     render(<Sequence {...testData} />);