136 lines
3.7 KiB
JavaScript
136 lines
3.7 KiB
JavaScript
import { MemoryRouter } from 'react-router';
|
|
import { Factory } from 'rosie';
|
|
|
|
import {
|
|
initializeMockApp, initializeTestStore, render, screen,
|
|
} from '../../../../setupTest';
|
|
import { getIFrameUrl } from './urls';
|
|
import { views } from './constants';
|
|
import Unit from '.';
|
|
|
|
const defaultProps = {
|
|
courseId: 'test-course-id',
|
|
format: 'test-format',
|
|
onLoaded: jest.fn().mockName('props.onLoaded'),
|
|
id: 'unit-id',
|
|
isOriginalUserStaff: false,
|
|
isEnabledOutlineSidebar: false,
|
|
renderUnitNavigation: jest.fn(enabled => enabled && 'UnitNaviagtion'),
|
|
};
|
|
|
|
const unit = {
|
|
id: 'unit-id',
|
|
title: 'unit-title',
|
|
bookmarked: false,
|
|
bookmarkedUpdateState: 'pending',
|
|
};
|
|
|
|
let store;
|
|
|
|
const renderComponent = (props) => {
|
|
render(
|
|
<MemoryRouter initialEntries={[{ pathname: `/course/${props.courseID}` }]}>
|
|
<Unit {...props} />
|
|
</MemoryRouter>,
|
|
{ store, wrapWithRouter: false },
|
|
);
|
|
};
|
|
|
|
initializeMockApp();
|
|
|
|
async function setupStoreState() {
|
|
const courseMetadata = Factory.build('courseMetadata');
|
|
const unitBlocks = [Factory.build(
|
|
'block',
|
|
{ type: 'vertical', ...unit },
|
|
{ courseId: courseMetadata.id },
|
|
)];
|
|
|
|
store = await initializeTestStore({ courseMetadata, unitBlocks });
|
|
}
|
|
|
|
describe('<Unit />', () => {
|
|
beforeEach(async () => {
|
|
await setupStoreState();
|
|
});
|
|
|
|
describe('unit title', () => {
|
|
it('has two children', () => {
|
|
renderComponent(defaultProps);
|
|
const unitTitleWrapper = screen.getByTestId('org.openedx.frontend.learning.unit_title.v1').children[0];
|
|
|
|
expect(unitTitleWrapper.children).toHaveLength(3);
|
|
});
|
|
|
|
it('renders bookmark button', () => {
|
|
renderComponent(defaultProps);
|
|
|
|
expect(screen.getByText('Bookmark this page')).toBeInTheDocument();
|
|
});
|
|
|
|
it('does not render unit navigation buttons', () => {
|
|
renderComponent(defaultProps);
|
|
|
|
const nextButton = screen.queryByText('UnitNaviagtion');
|
|
|
|
expect(nextButton).toBeNull();
|
|
});
|
|
|
|
it('renders unit navigation buttons when isEnabledOutlineSidebar is true', () => {
|
|
const props = { ...defaultProps, isEnabledOutlineSidebar: true };
|
|
renderComponent(props);
|
|
|
|
const nextButton = screen.getByText('UnitNaviagtion');
|
|
|
|
expect(nextButton).toBeVisible();
|
|
});
|
|
|
|
// Test for accessibility compliance: unit title must be an h1 (heading level 1) as the page's primary heading
|
|
// for screen reader and accessibility compliance.
|
|
// See: https://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/create_html_component.html#the-visual-editor
|
|
// JIRA: https://2u-internal.atlassian.net/browse/AU-2135
|
|
it('renders unit title as h1 heading for accessibility', () => {
|
|
renderComponent(defaultProps);
|
|
|
|
const unitTitle = screen.getByRole('heading', { level: 1 });
|
|
|
|
expect(unitTitle).toBeInTheDocument();
|
|
expect(unitTitle.tagName).toBe('H1');
|
|
});
|
|
});
|
|
|
|
describe('UnitSuspense', () => {
|
|
it('renders loading message', () => {
|
|
renderComponent(defaultProps);
|
|
|
|
expect(screen.getByText('Loading', { exact: false })).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('ContentIFrame', () => {
|
|
let iframe;
|
|
beforeEach(() => {
|
|
renderComponent(defaultProps);
|
|
iframe = screen.getByTestId('content-iframe-test-id');
|
|
});
|
|
|
|
it('renders content iframe', () => {
|
|
expect(iframe).toBeVisible();
|
|
});
|
|
|
|
it('generates correct iframeUrl', () => {
|
|
expect(iframe.getAttribute('src')).toEqual(getIFrameUrl({
|
|
id: defaultProps.id,
|
|
view: views.student,
|
|
format: defaultProps.format,
|
|
examAccess: {
|
|
accessToken: '',
|
|
blockAccess: false,
|
|
},
|
|
jumpToId: null,
|
|
preview: 0,
|
|
}));
|
|
});
|
|
});
|
|
});
|