Skip to content

Commit

Permalink
UIREQMED-64: Create a solution to not display "Are you sure?" when no…
Browse files Browse the repository at this point in the history 
… changes have been made, increase code coverage (#79)
  • Loading branch information
@artem-blazhko
artem-blazhko authored Dec 5, 2024
1 parent c69ba12 commit edfb198
Show file tree
Hide file tree
Showing 10 changed files with 280 additions and 101 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

## 2.1.0 (IN PROGRESS)
* Minor improvements and code fixes. Refs UIREQMED-65.
* Create a solution to not display "Are you sure?" modal when no changes have been made, increase code coverage. Refs UIREQMED-64.

## [2.0.0] (https://github.com/folio-org/ui-requests-mediated/tree/v2.0.0) (2024-11-30)
[Full Changelog](https://github.com/folio-org/ui-requests-mediated/compare/v1.1.0...v2.0.0)
Expand Down
5 changes: 4 additions & 1 deletion src/components/ConfirmItem/ConfirmItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,10 @@ const ConfirmItem = ({
defaultWidth="fill"
paneTitle={<FormattedMessage id="ui-requests-mediated.confirmItem.mainSection.paneTitle" />}
>
<form onSubmit={onSubmit}>
<form
data-testid="confirmItemForm"
onSubmit={onSubmit}
>
<Row>
<Col xs={9} sm={4}>
<Field
Expand Down
28 changes: 28 additions & 0 deletions src/components/ConfirmItem/ConfirmItem.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Field } from 'react-final-form';
import {
render,
screen,
fireEvent,
} from '@folio/jest-config-stripes/testing-library/react';
import {
Button,
Expand All @@ -27,6 +28,7 @@ const testIds = {
confirmItemPaneSet: 'confirmItemPaneSet',
navigationMenuPane: 'navigationMenuPane',
confirmItemPane: 'confirmItemPane',
confirmItemForm: 'confirmItemForm',
};
const labelIds = {
paneTitle: 'ui-requests-mediated.confirmItem.mainSection.paneTitle',
Expand All @@ -39,6 +41,9 @@ const basicProps = {
confirmItemType: CONFIRM_ITEM_TYPES.CONFIRM_ITEM_ARRIVAL,
contentData: [],
handleSubmit: jest.fn(),
form: {
change: jest.fn(),
},
};

describe('ConfirmItem', () => {
Expand Down Expand Up @@ -104,4 +109,27 @@ describe('ConfirmItem', () => {
contentData: basicProps.contentData,
}), {});
});

describe('Form submitting', () => {
const submitEvent = {
stopPropagation: jest.fn(),
preventDefault: jest.fn(),
};

beforeEach(() => {
const confirmItemForm = screen.getByTestId(testIds.confirmItemForm);

fireEvent.submit(confirmItemForm, submitEvent);
});

it('should handle data submitting', () => {
expect(basicProps.handleSubmit).toHaveBeenCalled();
});

it('should reset item barcode', () => {
const expectedArgs = ['itemBarcode', ''];

expect(basicProps.form.change).toHaveBeenCalledWith(...expectedArgs);
});
});
});
80 changes: 47 additions & 33 deletions src/components/MediatedRequestsActivities/components/RequestForm/RequestForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Field } from 'react-final-form';
import { FormattedMessage } from 'react-intl';
import { isEmpty } from 'lodash';
import {
isEmpty,
set,
} from 'lodash';

import {
Accordion,
Expand Down Expand Up @@ -45,7 +48,6 @@ import {
handleKeyCommand,
getPatronGroup,
getTlrSettings,
isSubmittingButtonDisabled,
resetFieldState,
getFulfillmentTypeOptions,
getDefaultRequestPreferences,
Expand Down Expand Up @@ -91,7 +93,6 @@ class RequestForm extends React.Component {
}),
}).isRequired,
setRequest: PropTypes.func,
pristine: PropTypes.bool,
submitting: PropTypes.bool,
patronGroups: PropTypes.arrayOf(PropTypes.object),
selectedItem: PropTypes.object,
Expand All @@ -101,7 +102,6 @@ class RequestForm extends React.Component {
};

static defaultProps = {
pristine: true,
submitting: false,
};

Expand Down Expand Up @@ -130,6 +130,7 @@ class RequestForm extends React.Component {
titleLevelRequestsFeatureEnabled,
};
this.accordionStatusRef = React.createRef();
this.editMediatedRequestData = {};
}

componentDidMount() {
Expand Down Expand Up @@ -162,7 +163,6 @@ class RequestForm extends React.Component {

getRequestDataForEditing = (request = this.props.request) => {
const {
form,
onSetSelectedProxy,
onSetSelectedInstance,
onSetSelectedItem,
Expand All @@ -171,13 +171,15 @@ class RequestForm extends React.Component {
const isTlr = request.requestLevel === MEDIATED_REQUEST_LEVEL.TITLE;

if (isTlr && request.instance?.hrid) {
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.INSTANCE_HRID, request.instance.hrid);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.INSTANCE_HRID, request.instance.hrid);
} else if (request.item?.barcode) {
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.ITEM_BARCODE, request.item.barcode);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.ITEM_BARCODE, request.item.barcode);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.ITEM_ID, request.itemId);
}

form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.REQUESTER_BARCODE, request.requester?.barcode);
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.PATRON_COMMENTS, request.patronComments);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.REQUESTER_ID, request.requesterId);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.REQUESTER_BARCODE, request.requester?.barcode);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.PATRON_COMMENTS, request.patronComments);

Promise.allSettled([
isTlr ? this.findInstance(request.instanceId, false) : this.findItem(RESOURCE_KEYS.ID, request.itemId, false, false),
Expand All @@ -200,7 +202,7 @@ class RequestForm extends React.Component {
}

if (isProxyFunctionalityAvailable() && request.proxy) {
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.PROXY_USER_ID, request.proxyUserId);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.PROXY_USER_ID, request.proxyUserId);
onSetSelectedProxy(request.proxy);
}

Expand Down Expand Up @@ -696,11 +698,15 @@ class RequestForm extends React.Component {
});
}

setEditFormValue = (fieldName, value) => {
const { form } = this.props;

form.change(fieldName, value);
set(this.editMediatedRequestData, fieldName, value);
};

setRequestPreferencesForEditing = (resourceId, requesterId, isTlr, request) => {
const {
form,
selectedUser,
} = this.props;
const { selectedUser } = this.props;

if (resourceId && requesterId) {
const resourceType = isTlr ? ID_TYPE_MAP.INSTANCE_ID : ID_TYPE_MAP.ITEM_ID;
Expand All @@ -714,52 +720,62 @@ class RequestForm extends React.Component {
const requestTypes = response[1]?.value;

if (requestTypes?.[request.requestType]) { // when request type, fulfilment preference, pickup sp/delivery address were saved before
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.REQUEST_TYPE, request.requestType);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.REQUEST_TYPE, request.requestType);

if (request.fulfillmentPreference === FULFILMENT_TYPES.HOLD_SHELF) {
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.FULFILLMENT_PREFERENCE, request.fulfillmentPreference);
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.DELIVERY_ADDRESS_TYPE_ID, requestPreferences.defaultDeliveryAddressTypeId);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.FULFILLMENT_PREFERENCE, request.fulfillmentPreference);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.DELIVERY_ADDRESS_TYPE_ID, requestPreferences.defaultDeliveryAddressTypeId);
this.setState({ hasDelivery: requestPreferences.hasDelivery });

// check if previously saved service point exists in list of available service points
const selectedServicePoint = requestTypes[request.requestType]?.find(servicePoint => servicePoint.id === request.pickupServicePointId);

if (selectedServicePoint) {
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.PICKUP_SERVICE_POINT_ID, request.pickupServicePointId);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.PICKUP_SERVICE_POINT_ID, request.pickupServicePointId);
}
} else if (request.fulfillmentPreference === FULFILMENT_TYPES.DELIVERY && requestPreferences.hasDelivery) {
this.setState({
isDeliverySelected: true,
hasDelivery: true,
});

form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.FULFILLMENT_PREFERENCE, request.fulfillmentPreference);
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.PICKUP_SERVICE_POINT_ID, requestPreferences.defaultServicePointId);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.FULFILLMENT_PREFERENCE, request.fulfillmentPreference);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.PICKUP_SERVICE_POINT_ID, requestPreferences.defaultServicePointId);

// check if previously saved address exists in user's address list
const selectedDeliveryAddress = selectedUser.personal.addresses?.find(address => request.deliveryAddressTypeId === address.addressTypeId);

form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.DELIVERY_ADDRESS_TYPE_ID, selectedDeliveryAddress?.addressTypeId || requestPreferences.defaultDeliveryAddressTypeId);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.DELIVERY_ADDRESS_TYPE_ID, selectedDeliveryAddress?.addressTypeId || requestPreferences.defaultDeliveryAddressTypeId);
}
} else { // when request type, fulfilment preference, pickup SP/delivery address were not saved before
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.FULFILLMENT_PREFERENCE, requestPreferences.fulfillmentPreference);
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.PICKUP_SERVICE_POINT_ID, requestPreferences.defaultServicePointId);
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.DELIVERY_ADDRESS_TYPE_ID, requestPreferences.defaultDeliveryAddressTypeId);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.FULFILLMENT_PREFERENCE, requestPreferences.fulfillmentPreference);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.PICKUP_SERVICE_POINT_ID, requestPreferences.defaultServicePointId);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.DELIVERY_ADDRESS_TYPE_ID, requestPreferences.defaultDeliveryAddressTypeId);
this.setState({
hasDelivery: requestPreferences.hasDelivery,
isDeliverySelected: requestPreferences.isDeliverySelected,
});
}
})
.catch(() => {
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.REQUEST_TYPE, DEFAULT_REQUEST_TYPE_VALUE);
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.FULFILLMENT_PREFERENCE, EMPTY_MEDIATED_REQUEST_FORM_VALUE);
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.PICKUP_SERVICE_POINT_ID, EMPTY_MEDIATED_REQUEST_FORM_VALUE);
form.change(MEDIATED_REQUEST_FORM_FIELD_NAMES.DELIVERY_ADDRESS_TYPE_ID, EMPTY_MEDIATED_REQUEST_FORM_VALUE);
});
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.REQUEST_TYPE, DEFAULT_REQUEST_TYPE_VALUE);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.FULFILLMENT_PREFERENCE, EMPTY_MEDIATED_REQUEST_FORM_VALUE);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.PICKUP_SERVICE_POINT_ID, EMPTY_MEDIATED_REQUEST_FORM_VALUE);
this.setEditFormValue(MEDIATED_REQUEST_FORM_FIELD_NAMES.DELIVERY_ADDRESS_TYPE_ID, EMPTY_MEDIATED_REQUEST_FORM_VALUE);
})
.then(this.resetEditMediatedRequestForm);
} else {
this.resetEditMediatedRequestForm();
}
};

/* resetting form values for edit mediated request page let us click "Cancel" button
or cross at the left top corner without having "Are you sure?" modal.
Form resetting happens only once and only after first loading of "Edit mediated request" page */
resetEditMediatedRequestForm = () => {
this.props.form.reset(this.editMediatedRequestData);
};

findRequestTypes = (resourceId, requesterId, resourceType) => {
const {
findResource,
Expand Down Expand Up @@ -864,7 +880,6 @@ class RequestForm extends React.Component {
selectedInstance,
values,
onCancel,
pristine,
onSetSelectedItem,
onSetSelectedInstance,
onSetSelectedUser,
Expand All @@ -875,7 +890,6 @@ class RequestForm extends React.Component {
let addressDetail;
const { createTitleLevelRequest } = values;
const patronGroup = getPatronGroup(selectedUser, patronGroups);
const isSubmittingDisabled = isSubmittingButtonDisabled(pristine, submitting);
const isTitleLevelRequest = isEditMode ? request?.requestLevel === MEDIATED_REQUEST_LEVEL.TITLE : createTitleLevelRequest;
const isTlrCheckboxDisabled = !titleLevelRequestsFeatureEnabled || isItemOrInstanceLoading;
const requestTypeOptions = getRequestTypesOptions(requestTypes);
Expand All @@ -885,7 +899,7 @@ class RequestForm extends React.Component {
deliveryLocations,
deliveryLocationsDetail,
} = getDeliveryInformation(selectedUser, addressTypes);
const isSaveAndCloseButtonDisabled = isSubmittingDisabled || !(isTitleLevelRequest ? selectedInstance?.id : selectedItem?.id) || !selectedUser?.id;
const isSaveAndCloseButtonDisabled = submitting || !(isTitleLevelRequest ? selectedInstance?.id : selectedItem?.id) || !selectedUser?.id;
const isConfirmButtonDisabled = isSaveAndCloseButtonDisabled || !values.requestType || !(isDeliverySelected ? values.deliveryAddressTypeId : values.pickupServicePointId);
const paneTitle = isEditMode ? <FormattedMessage id="ui-requests-mediated.form.edit.title" /> : <FormattedMessage id="ui-requests-mediated.form.create.title" />;
const isTlrCheckboxVisible = titleLevelRequestsFeatureEnabled && !isEditMode;
Expand All @@ -901,7 +915,7 @@ class RequestForm extends React.Component {
onSubmit={handleSubmit}
onCancel={this.handleCancelAndClose}
accordionStatusRef={this.accordionStatusRef}
isSubmittingDisabled={isSubmittingDisabled}
isSubmittingDisabled={submitting}
>
<form
id="requestsMediatedForm"
Expand Down
3 changes: 1 addition & 2 deletions src/components/MediatedRequestsActivities/components/RequestForm/RequestForm.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ const basicProps = {
},
form: {
change: jest.fn(),
reset: jest.fn(),
},
pristine: true,
submitting: false,
patronGroups: [],
selectedItem: {},
Expand Down Expand Up @@ -155,7 +155,6 @@ jest.mock('../../../../utils', () => ({
})),
handleKeyCommand: jest.fn(),
getPatronGroup: jest.fn(),
isSubmittingButtonDisabled: jest.fn(),
resetFieldState: jest.fn(),
getFulfillmentTypeOptions: jest.fn(() => []),
getDefaultRequestPreferences: jest.fn(),
Expand Down
2 changes: 1 addition & 1 deletion src/components/SendItemInTransit/SendItemInTransit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ import ContentToPrint from './components';
import css from './SendItemInTransit.css';

const SEND_ITEM_IN_TRANSIT_URL = 'requests-mediated/send-item-in-transit';
const PRINT_BUTTON_SELECTOR = 'printButton';
const CONTENT_TO_PRINT_ID = 'contentToPrint';
export const PRINT_BUTTON_SELECTOR = 'printButton';

const SendItemInTransit = () => {
const contentToPrintRef = useRef();
Expand Down
Loading

0 comments on commit edfb198

Please sign in to comment.