Skip to content

Commit

Permalink
UIREC-284-settings-for-number-generator add NumberGeneratorSettingsFo…
Browse files Browse the repository at this point in the history
…rm.test.js, cleaning
  • Loading branch information
elsenhans committed Jan 29, 2025
1 parent 5f0b206 commit d3ac6f4
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 33 deletions.
6 changes: 1 addition & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,7 @@
},
"optionalOkapiInterfaces": {
"consortia": "1.0",
"consortium-search": "2.0",
"servint": "4.0"
"consortium-search": "2.0"
},
"queryResource": "query",
"icons": [
Expand All @@ -55,7 +54,6 @@
}
],
"stripesDeps": [
"@folio/service-interaction",
"@folio/stripes-acq-components"
],
"permissionSets": [
Expand Down Expand Up @@ -265,7 +263,6 @@
"@babel/preset-react": "^7.7.4",
"@folio/eslint-config-stripes": "^7.0.0",
"@folio/jest-config-stripes": "^2.0.0",
"@folio/service-interaction": "^3.1.0",
"@folio/stripes": "^9.0.0",
"@folio/stripes-cli": "^3.0.0",
"@formatjs/cli": "^6.1.3",
Expand Down Expand Up @@ -307,7 +304,6 @@
},
"peerDependencies": {
"@folio/stripes": "^9.0.0",
"@folio/service-interaction": "^3.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-intl": "^6.4.4",
Expand Down
59 changes: 31 additions & 28 deletions src/Settings/NumberGeneratorSettings/NumberGeneratorSettingsForm.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import { Field, useFormState } from 'react-final-form';
import { FormattedMessage } from 'react-intl';
import { upperFirst } from 'lodash';

import {
Button,
Expand All @@ -17,21 +18,20 @@ import {
import stripesFinalForm from '@folio/stripes/final-form';

import css from './NumberGeneratorSettings.css';
import {
ACCESSION_NUMBER_SETTING,
BARCODE_SETTING,
CALL_NUMBER_SETTING,
NUMBER_GENERATOR_OPTIONS,
USE_SHARED_NUMBER,
} from '../../common/constants/numberGenerator';

const NumberGeneratorSettingsForm = ({ handleSubmit, pristine, submitting }) => {
const { values } = useFormState();

const USE_TEXT_FIELD = 'useTextField';
const USE_GENERATOR = 'useGenerator';
const USE_BOTH = 'useBoth';

const ACCESSION_NUMBER_SETTING = 'accessionNumber';
const BARCODE_SETTING = 'barcode';
const CALL_NUMBER_SETTING = 'callNumber';

const USE_SHARED_NUMBER = 'useSharedNumber';

const disableSharedNumber = values?.accessionNumber === USE_TEXT_FIELD || values?.callNumber === USE_TEXT_FIELD;
const disableSharedNumber =
values?.accessionNumber === NUMBER_GENERATOR_OPTIONS.USE_TEXT_FIELD ||
values?.callNumber === NUMBER_GENERATOR_OPTIONS.USE_TEXT_FIELD;
const disableGeneratorOffOption = values?.useSharedNumber;

const paneHeader = (renderProps) => (
Expand All @@ -58,7 +58,7 @@ const NumberGeneratorSettingsForm = ({ handleSubmit, pristine, submitting }) =>
);

return (
<Pane defaultWidth="fill" footer={paneFooter} id="vendor-code-settings" renderHeader={paneHeader}>
<Pane defaultWidth="fill" footer={paneFooter} id="number-generator-settings-form" renderHeader={paneHeader}>
<Row className={css.marginBottomGutter}>
<Col xs={12}>
<MessageBanner>
Expand All @@ -71,27 +71,27 @@ const NumberGeneratorSettingsForm = ({ handleSubmit, pristine, submitting }) =>
<Label><FormattedMessage id="ui-receiving.settings.numberGenerator.barcode" /></Label>
<Field
component={RadioButton}
id={`${USE_TEXT_FIELD}Barcode`}
id={`${BARCODE_SETTING}${upperFirst(NUMBER_GENERATOR_OPTIONS.USE_TEXT_FIELD)}`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setManually" values={{ number: 'barcode' }} />}
name={BARCODE_SETTING}
type="radio"
value={USE_TEXT_FIELD}
value={NUMBER_GENERATOR_OPTIONS.USE_TEXT_FIELD}
/>
<Field
component={RadioButton}
id={`${USE_BOTH}Barcode`}
id={`${BARCODE_SETTING}${upperFirst(NUMBER_GENERATOR_OPTIONS.USE_BOTH)}`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGeneratorOrManually" values={{ number: 'barcode' }} />}
name={BARCODE_SETTING}
type="radio"
value={USE_BOTH}
value={NUMBER_GENERATOR_OPTIONS.USE_BOTH}
/>
<Field
component={RadioButton}
id={`${USE_GENERATOR}Barcode`}
id={`${BARCODE_SETTING}${upperFirst(NUMBER_GENERATOR_OPTIONS.USE_GENERATOR)}`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGenerator" values={{ number: 'barcode' }} />}
name={BARCODE_SETTING}
type="radio"
value={USE_GENERATOR}
value={NUMBER_GENERATOR_OPTIONS.USE_GENERATOR}
/>
</Col>
</Row>
Expand All @@ -102,27 +102,27 @@ const NumberGeneratorSettingsForm = ({ handleSubmit, pristine, submitting }) =>
className={disableGeneratorOffOption ? css.greyLabel : null}
component={RadioButton}
disabled={disableGeneratorOffOption}
id={`${USE_TEXT_FIELD}AccessionNumber`}
id={`${ACCESSION_NUMBER_SETTING}${upperFirst(NUMBER_GENERATOR_OPTIONS.USE_TEXT_FIELD)}`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setManually" values={{ number: 'accession number' }} />}
name={ACCESSION_NUMBER_SETTING}
type="radio"
value={USE_TEXT_FIELD}
value={NUMBER_GENERATOR_OPTIONS.USE_TEXT_FIELD}
/>
<Field
component={RadioButton}
id={`${USE_BOTH}AccessionNumber`}
id={`${ACCESSION_NUMBER_SETTING}${upperFirst(NUMBER_GENERATOR_OPTIONS.USE_BOTH)}`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGeneratorOrManually" values={{ number: 'accession number' }} />}
name={ACCESSION_NUMBER_SETTING}
type="radio"
value={USE_BOTH}
value={NUMBER_GENERATOR_OPTIONS.USE_BOTH}
/>
<Field
component={RadioButton}
id={`${USE_GENERATOR}AccessionNumber`}
id={`${ACCESSION_NUMBER_SETTING}${upperFirst(NUMBER_GENERATOR_OPTIONS.USE_GENERATOR)}`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGenerator" values={{ number: 'accession number' }} />}
name={ACCESSION_NUMBER_SETTING}
type="radio"
value={USE_GENERATOR}
value={NUMBER_GENERATOR_OPTIONS.USE_GENERATOR}
/>
</Col>
</Row>
Expand All @@ -133,25 +133,27 @@ const NumberGeneratorSettingsForm = ({ handleSubmit, pristine, submitting }) =>
className={disableGeneratorOffOption ? css.greyLabel : null}
component={RadioButton}
disabled={disableGeneratorOffOption}
id={`${USE_TEXT_FIELD}CallNumber`}
id={`${CALL_NUMBER_SETTING}${upperFirst(NUMBER_GENERATOR_OPTIONS.USE_TEXT_FIELD)}`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setManually" values={{ number: 'call number' }} />}
name={CALL_NUMBER_SETTING}
type="radio"
value={USE_TEXT_FIELD}
value={NUMBER_GENERATOR_OPTIONS.USE_TEXT_FIELD}
/>
<Field
component={RadioButton}
id={`${CALL_NUMBER_SETTING}${upperFirst(NUMBER_GENERATOR_OPTIONS.USE_BOTH)}`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGeneratorOrManually" values={{ number: 'call number' }} />}
name={CALL_NUMBER_SETTING}
type="radio"
value={USE_BOTH}
value={NUMBER_GENERATOR_OPTIONS.USE_BOTH}
/>
<Field
component={RadioButton}
id={`${CALL_NUMBER_SETTING}${upperFirst(NUMBER_GENERATOR_OPTIONS.USE_GENERATOR)}`}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.setGenerator" values={{ number: 'call number' }} />}
name={CALL_NUMBER_SETTING}
type="radio"
value={USE_GENERATOR}
value={NUMBER_GENERATOR_OPTIONS.USE_GENERATOR}
/>
</Col>
</Row>
Expand All @@ -160,6 +162,7 @@ const NumberGeneratorSettingsForm = ({ handleSubmit, pristine, submitting }) =>
<Field
component={Checkbox}
disabled={disableSharedNumber}
id={USE_SHARED_NUMBER}
label={<FormattedMessage id="ui-receiving.settings.numberGenerator.accessionNumberEqualCallNumber" />}
name={USE_SHARED_NUMBER}
type="checkbox"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import { MemoryRouter } from 'react-router-dom';

import {
render,
screen,
} from '@folio/jest-config-stripes/testing-library/react';
import userEvent from '@folio/jest-config-stripes/testing-library/user-event';

import NumberGeneratorSettingsForm from './NumberGeneratorSettingsForm';
import {
BARCODE_SETTING,
NUMBER_GENERATOR_OPTIONS,
} from '../../common/constants/numberGenerator';

jest.mock('@folio/stripes/core', () => ({
useStripes: jest.fn(),
}));

const onSubmitMock = jest.fn();

const renderComponent = () => render(
<NumberGeneratorSettingsForm
initialValues={{ [BARCODE_SETTING]: NUMBER_GENERATOR_OPTIONS.USE_BOTH }}
onSubmit={(values) => onSubmitMock(values)}
/>,
{ wrapper: MemoryRouter },
);

describe('NumberGeneratorSettingsForm', () => {
it('should render the component with initial values', () => {
renderComponent();

expect(screen.getByText('ui-receiving.settings.numberGenerator.options')).toBeInTheDocument();
expect(screen.getByText('ui-receiving.settings.numberGenerator.info')).toBeInTheDocument();
expect(screen.getAllByText('ui-receiving.settings.numberGenerator.setManually')).toHaveLength(3);
expect(screen.getAllByText('ui-receiving.settings.numberGenerator.setGeneratorOrManually')).toHaveLength(3);
expect(screen.getAllByText('ui-receiving.settings.numberGenerator.setGenerator')).toHaveLength(3);
expect(screen.getByText('ui-receiving.settings.numberGenerator.accessionNumberEqualCallNumber')).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'stripes-core.button.save' })).toBeDisabled();
});

it('should call onSubmit with correct values', async () => {
renderComponent();

const barcodeUseManually = document.getElementById('barcodeUseTextField');

expect(barcodeUseManually).toBeInTheDocument();

const saveButton = screen.getByRole('button', { name: 'stripes-core.button.save' });

await userEvent.click(barcodeUseManually);
expect(saveButton).toBeEnabled();

await userEvent.click(saveButton);
expect(onSubmitMock).toHaveBeenCalledWith({
[BARCODE_SETTING]: NUMBER_GENERATOR_OPTIONS.USE_TEXT_FIELD,
});
});

it('should disable useSharedNumber-checkbox if clicking callNumber or accessionNumber to use manually', async () => {
renderComponent();

const callNumberUseManually = document.getElementById('callNumberUseTextField');
const callNumberUseBoth = document.getElementById('callNumberUseBoth');
const accessionNumberUseManually = document.getElementById('accessionNumberUseTextField');
const useSharedNumberCheckbox = document.getElementById('useSharedNumber');

expect(callNumberUseManually).toBeInTheDocument();
expect(callNumberUseBoth).toBeInTheDocument();
expect(accessionNumberUseManually).toBeInTheDocument();
expect(useSharedNumberCheckbox).toBeInTheDocument();

await userEvent.click(callNumberUseManually);
expect(useSharedNumberCheckbox).toHaveAttribute('disabled');

await userEvent.click(callNumberUseBoth);
expect(useSharedNumberCheckbox).not.toHaveAttribute('disabled');

await userEvent.click(accessionNumberUseManually);
expect(useSharedNumberCheckbox).toHaveAttribute('disabled');
});

it('should disable callNumber or accessionNumber to use manually if clicking useSharedNumber-checkbox', async () => {
renderComponent();

const callNumberUseManually = document.getElementById('callNumberUseTextField');
const accessionNumberUseManually = document.getElementById('accessionNumberUseTextField');
const useSharedNumberCheckbox = document.getElementById('useSharedNumber');

expect(callNumberUseManually).toBeInTheDocument();
expect(accessionNumberUseManually).toBeInTheDocument();
expect(useSharedNumberCheckbox).toBeInTheDocument();

await userEvent.click(useSharedNumberCheckbox);
expect(callNumberUseManually).toHaveAttribute('disabled');
expect(accessionNumberUseManually).toHaveAttribute('disabled');
});
});
11 changes: 11 additions & 0 deletions src/common/constants/numberGenerator.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export const NUMBER_GENERATOR_OPTIONS = {
USE_BOTH: 'useBoth',
USE_GENERATOR: 'useGenerator',
USE_TEXT_FIELD: 'useTextField',
};

export const ACCESSION_NUMBER_SETTING = 'accessionNumber';
export const BARCODE_SETTING = 'barcode';
export const CALL_NUMBER_SETTING = 'callNumber';

export const USE_SHARED_NUMBER = 'useSharedNumber';

0 comments on commit d3ac6f4

Please sign in to comment.