134 lines
4.9 KiB
JavaScript
134 lines
4.9 KiB
JavaScript
import { Provider } from 'react-redux';
|
|
import { render, waitFor } from '@testing-library/react';
|
|
import userEvent from '@testing-library/user-event';
|
|
import { initializeMockApp } from '@edx/frontend-platform';
|
|
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
|
import MockAdapter from 'axios-mock-adapter';
|
|
import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
|
|
|
|
import { executeThunk } from '../../../utils';
|
|
import initializeStore from '../../../store';
|
|
import { MODE_STATES } from '../../data/constants';
|
|
import { getCertificatesApiUrl, getUpdateCertificateApiUrl } from '../../data/api';
|
|
import { fetchCertificates, updateCertificateActiveStatus } from '../../data/thunks';
|
|
import { certificatesDataMock } from '../../__mocks__';
|
|
import messages from '../../messages';
|
|
import HeaderButtons from './HeaderButtons';
|
|
|
|
let axiosMock;
|
|
let store;
|
|
const courseId = 'course-123';
|
|
|
|
const renderComponent = (props) => render(
|
|
<Provider store={store} messages={{}}>
|
|
<IntlProvider locale="en">
|
|
<HeaderButtons {...props} />
|
|
</IntlProvider>
|
|
</Provider>,
|
|
);
|
|
|
|
const initialState = {
|
|
certificates: {
|
|
certificatesData: {},
|
|
componentMode: MODE_STATES.editAll,
|
|
},
|
|
};
|
|
|
|
describe('HeaderButtons Component', () => {
|
|
beforeEach(async () => {
|
|
initializeMockApp({
|
|
authenticatedUser: {
|
|
userId: 3,
|
|
username: 'abc123',
|
|
administrator: true,
|
|
roles: [],
|
|
},
|
|
});
|
|
store = initializeStore(initialState);
|
|
axiosMock = new MockAdapter(getAuthenticatedHttpClient());
|
|
axiosMock
|
|
.onGet(getCertificatesApiUrl(courseId))
|
|
.reply(200, certificatesDataMock);
|
|
await executeThunk(fetchCertificates(courseId), store.dispatch);
|
|
});
|
|
|
|
it('updates preview URL param based on selected dropdown item', async () => {
|
|
const user = userEvent.setup();
|
|
const { getByRole } = renderComponent();
|
|
const previewLink = getByRole('link', { name: messages.headingActionsPreview.defaultMessage });
|
|
|
|
expect(previewLink).toHaveAttribute('href', expect.stringContaining(certificatesDataMock.courseModes[0]));
|
|
|
|
const dropdownButton = getByRole('button', { name: certificatesDataMock.courseModes[0] });
|
|
await user.click(dropdownButton);
|
|
|
|
const verifiedMode = await getByRole('button', { name: certificatesDataMock.courseModes[1] });
|
|
await user.click(verifiedMode);
|
|
|
|
await waitFor(() => {
|
|
expect(previewLink).toHaveAttribute('href', expect.stringContaining(certificatesDataMock.courseModes[1]));
|
|
});
|
|
});
|
|
|
|
it('activates certificate when button is clicked', async () => {
|
|
const user = userEvent.setup();
|
|
const newCertificateData = {
|
|
...certificatesDataMock,
|
|
isActive: true,
|
|
};
|
|
|
|
const { getByRole, queryByRole } = renderComponent();
|
|
|
|
const activationButton = getByRole('button', { name: messages.headingActionsActivate.defaultMessage });
|
|
await user.click(activationButton);
|
|
|
|
axiosMock.onPost(
|
|
getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
|
|
).reply(200);
|
|
await executeThunk(updateCertificateActiveStatus(courseId), store.dispatch);
|
|
axiosMock
|
|
.onGet(getCertificatesApiUrl(courseId))
|
|
.reply(200, newCertificateData);
|
|
await executeThunk(fetchCertificates(courseId), store.dispatch);
|
|
|
|
await waitFor(() => {
|
|
expect(store.getState().certificates.certificatesData.isActive).toBe(true);
|
|
expect(getByRole('button', { name: messages.headingActionsDeactivate.defaultMessage })).toBeInTheDocument();
|
|
expect(queryByRole('button', { name: messages.headingActionsActivate.defaultMessage })).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
it('deactivates certificate when button is clicked', async () => {
|
|
const user = userEvent.setup();
|
|
axiosMock
|
|
.onGet(getCertificatesApiUrl(courseId))
|
|
.reply(200, { ...certificatesDataMock, isActive: true });
|
|
await executeThunk(fetchCertificates(courseId), store.dispatch);
|
|
|
|
const newCertificateData = {
|
|
...certificatesDataMock,
|
|
isActive: false,
|
|
};
|
|
|
|
const { getByRole, queryByRole } = renderComponent();
|
|
|
|
const deactivateButton = getByRole('button', { name: messages.headingActionsDeactivate.defaultMessage });
|
|
await user.click(deactivateButton);
|
|
|
|
axiosMock.onPost(
|
|
getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
|
|
).reply(200);
|
|
await executeThunk(updateCertificateActiveStatus(courseId), store.dispatch);
|
|
axiosMock
|
|
.onGet(getCertificatesApiUrl(courseId))
|
|
.reply(200, newCertificateData);
|
|
await executeThunk(fetchCertificates(courseId), store.dispatch);
|
|
|
|
await waitFor(() => {
|
|
expect(store.getState().certificates.certificatesData.isActive).toBe(false);
|
|
expect(getByRole('button', { name: messages.headingActionsActivate.defaultMessage })).toBeInTheDocument();
|
|
expect(queryByRole('button', { name: messages.headingActionsDeactivate.defaultMessage })).not.toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|