UIREQ-876: UI tests replacement with RTL/Jest for CancelRequestDialog…

….js (#1069)

* UIREQ-876: Create Jest/RTL test for CancelRequestDialog.js

CHANGELOG.md

@@ -39,6 +39,7 @@
 * Fix inconsistency in RTL/Jest tests. Refs UIREQ-979.
 * Remove redundant ariaLabel prop. Refs UIREQ-972.
 * TLRs check circulation rules before request is placed. Refs UIREQ-960.
+* Create Jest/RTL test for CancelRequestDialog.js. Refs UIREQ-876.
 
 ## [8.0.2](https://github.com/folio-org/ui-requests/tree/v8.0.2) (2023-03-29)
 [Full Changelog](https://github.com/folio-org/ui-requests/compare/v8.0.1...v8.0.2)

src/CancelRequestDialog.js

@@ -150,6 +150,7 @@ class CancelRequestDialog extends React.Component {
  const footer = (
  <ModalFooter>
  <Button
+ data-testid="cancelRequestDialogCancel"
  data-test-confirm-cancel-request
  buttonStyle="primary"
  onClick={this.onCancelRequestHandler}
@@ -158,6 +159,7 @@ class CancelRequestDialog extends React.Component {
  <FormattedMessage id="stripes-core.button.confirm" />
  </Button>
  <Button
+ data-testid="cancelRequestDialogClose"
  data-test-cancel-cancel-request
  onClick={onClose}
  >
@@ -168,6 +170,7 @@ class CancelRequestDialog extends React.Component {
 
  return (
  <Modal
+ data-testid="cancelRequestDialog"
  data-test-cancel-request-modal
  label={<FormattedMessage id="ui-requests.cancel.modalLabel" />}
  open={open}
@@ -181,6 +184,7 @@ class CancelRequestDialog extends React.Component {
  />
  </p>
  <Select
+ data-testid="selectCancelationReason"
  data-test-select-cancelation-reason
  label={<FormattedMessage id="ui-requests.cancel.reasonLabel" />}
  dataOptions={reasons}
@@ -190,6 +194,7 @@ class CancelRequestDialog extends React.Component {
  <FormattedMessage id={additionalInfoPlaceholder}>
  {placeholder => (
  <TextArea
+ data-testid="additionalInfo"
  label={
  <FormattedMessage
  id="ui-requests.cancel.additionalInfoLabel"

src/CancelRequestDialog.test.js

@@ -0,0 +1,130 @@
+import {
+ fireEvent,
+ render,
+ screen,
+} from '@testing-library/react';
+
+import '../test/jest/__mock__';
+
+import CancelRequestDialog from './CancelRequestDialog';
+
+const labelIds = {
+ modalLabel: 'ui-requests.cancel.modalLabel',
+ modalText: 'ui-requests.cancel.requestWillBeCancelled',
+ cancelRequestDialogCancel: 'stripes-core.button.confirm',
+ cancelRequestDialogClose: 'stripes-core.button.back',
+};
+const testIds = {
+ cancelRequestDialog: 'cancelRequestDialog',
+ selectCancelationReason: 'selectCancelationReason',
+ additionalInfo: 'additionalInfo',
+ cancelRequestDialogCancel: 'cancelRequestDialogCancel',
+ cancelRequestDialogClose: 'cancelRequestDialogClose',
+};
+
+describe('CancelRequestDialog', () => {
+ const onCancelRequest = jest.fn();
+ const onClose = jest.fn();
+ const cancellationReasons = {
+ records: [{
+ id: '1',
+ name: 'cancellation reasons',
+ requiresAdditionalInformation: false,
+ }, {
+ id: '2',
+ name: 'other cancellation reasons',
+ requiresAdditionalInformation: true,
+ }],
+ };
+ const request = {
+ id: 'ad038163-7368-44e8-9057-c21bd2b9cd4c',
+ instance: {
+ title: 'request instance title',
+ },
+ };
+ const defaultProps = {
+ request,
+ onCancelRequest,
+ onClose,
+ open: true,
+ resources: {
+ cancellationReasons,
+ },
+ stripes: {
+ user: {
+ user: {
+ id: 'bd038163-7368-44e8-9057-c21bd2b9cd4c',
+ },
+ },
+ },
+ };
+
+ describe('CancelRequestDialog with request', () => {
+ beforeEach(() => {
+ render(
+ <CancelRequestDialog {...defaultProps} />
+ );
+ });
+
+ it('should render cancelRequestDialog', () => {
+ expect(screen.getByTestId(testIds.cancelRequestDialog)).toBeInTheDocument();
+ });
+
+ it('should render modal label', () => {
+ expect(screen.getByText(labelIds.modalLabel)).toBeInTheDocument();
+ });
+
+ it('should render modal text', () => {
+ expect(screen.getByText(labelIds.modalText)).toBeInTheDocument();
+ });
+
+ it('should render modal text value', () => {
+ expect(screen.getByText(request.instance.title)).toBeInTheDocument();
+ });
+
+ it('should render select cancelation reason', () => {
+ expect(screen.getByTestId(testIds.selectCancelationReason)).toBeInTheDocument();
+ });
+
+ it('should render additional info', () => {
+ expect(screen.getByTestId(testIds.additionalInfo)).toBeInTheDocument();
+ });
+
+ it('should render close button text', () => {
+ expect(screen.getByText(labelIds.cancelRequestDialogClose)).toBeInTheDocument();
+ });
+
+ it('should be called onClose after clicking on close button', () => {
+ fireEvent.click(screen.getByTestId(testIds.cancelRequestDialogClose));
+
+ expect(onClose).toBeCalled();
+ });
+
+ it('should render cancel button text', () => {
+ expect(screen.getByText(labelIds.cancelRequestDialogCancel)).toBeInTheDocument();
+ });
+
+ it('should be called onCancelRequest after clicking on cancel button', () => {
+ fireEvent.click(screen.getByTestId(testIds.cancelRequestDialogCancel));
+
+ expect(onCancelRequest).toBeCalled();
+ });
+ });
+
+ describe('CancelRequestDialog without request', () => {
+ const propsWithoutRequest = {
+ ...defaultProps,
+ request: null,
+ };
+
+ beforeEach(() => {
+ render(
+ <CancelRequestDialog {...propsWithoutRequest} />
+ );
+ });
+
+ it('should not render cancelRequestDialog', () => {
+ expect(screen.queryByTestId(testIds.cancelRequestDialog)).not.toBeInTheDocument();
+ });
+ });
+});

test/bigtest/tests/view-request-test.js

@@ -54,7 +54,7 @@ describe('View request page', () => {
  expect(viewRequest.patronComments.label.text).to.equal(translations.patronComments);
  });
 
- describe('Request cancelation', function () {
+ describe('Request cancellation', function () {
  describe('clicking the Actions menu on the Requests pane', function () {
  beforeEach(async () => {
  await requests.headerDropdown.click();

test/jest/__mock__/intl.mock.js

@@ -7,12 +7,25 @@ jest.mock('react-intl', () => {
 
  return {
  ...jest.requireActual('react-intl'),
- FormattedMessage: jest.fn(({ id, children }) => {
+ FormattedMessage: jest.fn(({ id, values, children }) => {
+ let valuesString = '';
+
  if (children) {
  return children([id]);
  }
 
- return id;
+ if (values) {
+ Object.keys(values).forEach((key) => {
+ valuesString += values[key];
+ });
+ }
+
+ return (
+ <>
+ {id}
+ {values && <span>{valuesString}</span>}
+ </>
+ );
  }),
  FormattedTime: jest.fn(({ value, children }) => {
  if (children) {

test/jest/__mock__/stripesComponents.mock.js

@@ -60,9 +60,10 @@ jest.mock('@folio/stripes-components', () => ({
  Modal: jest.fn(({
  children,
  footer,
- label
+ label,
+ 'data-testid': testId,
  }) => (
- <div>
+ <div data-testid={testId}>
  {label && label}
  {children}
  {footer}
@@ -128,8 +129,12 @@ jest.mock('@folio/stripes-components', () => ({
  {children}
  </div>
  )),
- Select: jest.fn(() => <div>Select</div>),
- TextArea: jest.fn(() => <div>TextArea</div>),
+ Select: jest.fn(({
+ 'data-testid': testId,
+ }) => <div data-testid={testId}>Select</div>),
+ TextArea: jest.fn(({
+ 'data-testid': testId,
+ }) => <div data-testid={testId}>TextArea</div>),
  TextField: jest.fn(({
  label,
  onChange,