diff --git a/src/components/ConfirmModal.test.jsx b/src/components/ConfirmModal.test.jsx
index 0311ed1..1ccce7b 100644
--- a/src/components/ConfirmModal.test.jsx
+++ b/src/components/ConfirmModal.test.jsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
import { ConfirmModal } from './ConfirmModal';
jest.unmock('@openedx/paragon');
@@ -14,12 +14,30 @@ describe('ConfirmModal', () => {
onCancel: jest.fn().mockName('this.props.onCancel'),
onConfirm: jest.fn().mockName('this.props.onConfirm'),
};
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
it('should not render content when modal is closed', () => {
const { queryByText } = render();
expect(queryByText(props.content)).toBeNull();
});
+
it('should display content when modal is open', () => {
const { getByText } = render();
expect(getByText(props.content)).toBeInTheDocument();
});
+
+ it('should call onCancel when cancel button is clicked', () => {
+ render();
+ fireEvent.click(screen.getByText(props.cancelText));
+ expect(props.onCancel).toHaveBeenCalledTimes(1);
+ });
+
+ it('should call onConfirm when confirm button is clicked', () => {
+ render();
+ fireEvent.click(screen.getByText(props.confirmText));
+ expect(props.onConfirm).toHaveBeenCalledTimes(1);
+ });
});
diff --git a/src/components/FilePreview/BaseRenderers/PDFRenderer.test.jsx b/src/components/FilePreview/BaseRenderers/PDFRenderer.test.jsx
index d4c996c..fc8cc80 100644
--- a/src/components/FilePreview/BaseRenderers/PDFRenderer.test.jsx
+++ b/src/components/FilePreview/BaseRenderers/PDFRenderer.test.jsx
@@ -1,20 +1,29 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { Document, Page } from 'react-pdf';
+import { render } from '@testing-library/react';
+import PropTypes from 'prop-types';
import PDFRenderer from './PDFRenderer';
-
import * as hooks from './pdfHooks';
jest.mock('react-pdf', () => ({
pdfjs: { GlobalWorkerOptions: {} },
- Document: () => 'Document',
- Page: () => 'Page',
+ Document: jest.fn(),
+ Page: jest.fn(),
}));
+Document.mockImplementation((props) => {props.children}
);
+Document.propTypes = {
+ children: PropTypes.node,
+};
+
+Page.mockImplementation(() => Page Content
);
+
jest.mock('./pdfHooks', () => ({
rendererHooks: jest.fn(),
}));
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
describe('PDF Renderer Component', () => {
const props = {
url: 'some_url.pdf',
@@ -33,25 +42,45 @@ describe('PDF Renderer Component', () => {
onNextPageButtonClick: jest.fn().mockName('hooks.onNextPageButtonClick'),
onPrevPageButtonClick: jest.fn().mockName('hooks.onPrevPageButtonClick'),
hasNext: true,
- hasPref: false,
+ hasPrev: false,
};
beforeEach(() => {
jest.clearAllMocks();
});
- describe('snapshots', () => {
- test('first page, prev is disabled', () => {
+
+ describe('rendering', () => {
+ it('should render the PDF document with navigation controls', () => {
hooks.rendererHooks.mockReturnValue(hookProps);
- expect(shallow().snapshot).toMatchSnapshot();
+ const { getByTestId, getAllByText, container } = render();
+ expect(getByTestId('pdf-document')).toBeInTheDocument();
+ expect(getByTestId('pdf-page')).toBeInTheDocument();
+ expect(container.querySelector('input[type="number"]')).toBeInTheDocument();
+ expect(getAllByText(/Page/).length).toBeGreaterThan(0);
+ expect(getAllByText(`of ${hookProps.numPages}`).length).toBeGreaterThan(0);
});
- test('on last page, next is disabled', () => {
+
+ it('should have disabled previous button when on the first page', () => {
+ hooks.rendererHooks.mockReturnValue({
+ ...hookProps,
+ hasPrev: false,
+ });
+
+ const { container } = render();
+ const prevButton = container.querySelector('button[aria-label="previous pdf page"]');
+ expect(prevButton).toBeDisabled();
+ });
+
+ it('should have disabled next button when on the last page', () => {
hooks.rendererHooks.mockReturnValue({
...hookProps,
- pageNumber: hookProps.numPages,
hasNext: false,
hasPrev: true,
});
- expect(shallow().snapshot).toMatchSnapshot();
+
+ const { container } = render();
+ const nextButton = container.querySelector('button[aria-label="next pdf page"]');
+ expect(nextButton).toBeDisabled();
});
});
});
diff --git a/src/components/FilePreview/BaseRenderers/TXTRenderer.test.jsx b/src/components/FilePreview/BaseRenderers/TXTRenderer.test.jsx
index 43f8224..46ee11f 100644
--- a/src/components/FilePreview/BaseRenderers/TXTRenderer.test.jsx
+++ b/src/components/FilePreview/BaseRenderers/TXTRenderer.test.jsx
@@ -1,23 +1,41 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render } from '@testing-library/react';
import TXTRenderer from './TXTRenderer';
jest.mock('./textHooks', () => {
- const content = 'test-content';
+ const mockRendererHooks = jest.fn().mockReturnValue({ content: 'test-content' });
return {
- content,
- rendererHooks: (args) => ({ content, rendererHooks: args }),
+ rendererHooks: mockRendererHooks,
};
});
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
+const textHooks = require('./textHooks');
+
describe('TXT Renderer Component', () => {
const props = {
url: 'some_url.txt',
onError: jest.fn().mockName('this.props.onError'),
onSuccess: jest.fn().mockName('this.props.onSuccess'),
};
- test('snapshot', () => {
- expect(shallow().snapshot).toMatchSnapshot();
+
+ beforeEach(() => {
+ textHooks.rendererHooks.mockClear();
+ });
+
+ it('renders the text content in a pre element', () => {
+ const { getByText, container } = render();
+ expect(getByText('test-content')).toBeInTheDocument();
+ expect(container.querySelector('pre')).toHaveClass('txt-renderer');
+ });
+
+ it('passes the correct props to rendererHooks', () => {
+ render();
+ expect(textHooks.rendererHooks).toHaveBeenCalledWith({
+ url: props.url,
+ onError: props.onError,
+ onSuccess: props.onSuccess,
+ });
});
});
diff --git a/src/components/FilePreview/BaseRenderers/__snapshots__/PDFRenderer.test.jsx.snap b/src/components/FilePreview/BaseRenderers/__snapshots__/PDFRenderer.test.jsx.snap
deleted file mode 100644
index 1cffd01..0000000
--- a/src/components/FilePreview/BaseRenderers/__snapshots__/PDFRenderer.test.jsx.snap
+++ /dev/null
@@ -1,137 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PDF Renderer Component snapshots first page, prev is disabled 1`] = `
-
-
-
-
-
-
-
-
- Page
-
-
-
- of
- 10
-
-
-
-
-
-
-
-
-
-
-
-
- Page
-
-
-
- of
- 10
-
-
-
-
-
- test-content
-
-`;
diff --git a/src/components/Head/__snapshots__/index.test.jsx.snap b/src/components/Head/__snapshots__/index.test.jsx.snap
deleted file mode 100644
index ceb42a5..0000000
--- a/src/components/Head/__snapshots__/index.test.jsx.snap
+++ /dev/null
@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Head snapshot 1`] = `
-
-
- ORA staff grading | site-name
-
-
-
-`;
diff --git a/src/components/Head/index.test.jsx b/src/components/Head/index.test.jsx
index 977cc21..d1d8d55 100644
--- a/src/components/Head/index.test.jsx
+++ b/src/components/Head/index.test.jsx
@@ -1,25 +1,48 @@
-import React from 'react';
-import { getConfig } from '@edx/frontend-platform';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render } from '@testing-library/react';
+import { Helmet } from 'react-helmet';
import Head from '.';
-jest.mock('react-helmet', () => ({
- Helmet: 'Helmet',
+jest.mock('@edx/frontend-platform/i18n', () => ({
+ useIntl: () => ({
+ formatMessage: (message, values) => {
+ if (message.defaultMessage && values) {
+ return message.defaultMessage.replace('{siteName}', values.siteName);
+ }
+ return message.defaultMessage || message.id;
+ },
+ }),
+ defineMessages: (messages) => messages,
}));
+jest.mock('react-helmet', () => ({
+ Helmet: jest.fn(),
+}));
+
+Helmet.mockImplementation(({ children }) => {children}
);
+
jest.mock('@edx/frontend-platform', () => ({
- getConfig: () => ({
+ getConfig: jest.fn().mockReturnValue({
SITE_NAME: 'site-name',
FAVICON_URL: 'favicon-url',
}),
}));
-describe('Head', () => {
- it('snapshot', () => {
- const el = shallow();
- expect(el.snapshot).toMatchSnapshot();
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
- expect(el.instance.findByType('title')[0].el.children[0]).toContain(getConfig().SITE_NAME);
- expect(el.instance.findByType('link')[0].props.href).toEqual(getConfig().FAVICON_URL);
+describe('Head', () => {
+ it('should render page title with site name from config', () => {
+ const { container } = render( );
+ const titleElement = container.querySelector('title');
+ expect(titleElement).toBeInTheDocument();
+ expect(titleElement.textContent).toContain('ORA staff grading | site-name');
+ });
+
+ it('should render favicon link with URL from config', () => {
+ const { container } = render(