diff --git a/src/courseware/course/Sidebar.jsx b/src/courseware/course/Sidebar.jsx
index a89373ff..4721e9d0 100644
--- a/src/courseware/course/Sidebar.jsx
+++ b/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,
};
diff --git a/src/courseware/course/Sidebar.test.jsx b/src/courseware/course/Sidebar.test.jsx
index 2fda5c02..fdb4473b 100644
--- a/src/courseware/course/Sidebar.test.jsx
+++ b/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();
-
- expect(container).toBeInTheDocument();
- expect(container).toHaveTextContent('Notifications');
- expect(container).not.toHaveTextContent('Back to course');
+ await fetchAndRender();
+ 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();
+ it('renders upgrade card', async () => {
+ await fetchAndRender();
+ 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();
+ 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();
+ await fetchAndRender();
const responsiveCloseButton = screen.getByRole('button', { name: 'Back to course' });
await waitFor(() => expect(responsiveCloseButton).toBeInTheDocument());
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index 6977992a..5b7d3de2 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -230,7 +230,6 @@ function Sequence({
) : null }
diff --git a/src/courseware/course/sequence/Sequence.test.jsx b/src/courseware/course/sequence/Sequence.test.jsx
index 7ba6363c..f602cec3 100644
--- a/src/courseware/course/sequence/Sequence.test.jsx
+++ b/src/courseware/course/sequence/Sequence.test.jsx
@@ -134,6 +134,7 @@ describe('Sequence', () => {
const testData = {
...mockData,
sidebarVisible: true,
+ isValuePropCookieSet: true,
};
render();