@k-int/stripes-kint-components 5.8.2 → 5.8.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [5.8.3](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.8.2...v5.8.3) (2024-10-23)
+
+
+### Bug Fixes
+
+* ERM-3391--NumberField doesnt update display value from form state changes ([cb44d06](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/commit/cb44d063aed221cb544204b8b5d9df6dc313e9c2))
+
 ## [5.8.2](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/compare/v5.8.1...v5.8.2) (2024-09-11)
 
 

package/es/lib/NumberField/NumberField.js

@@ -31,13 +31,18 @@ const NumberField = props => {
 
   // Allow direct control of field
   (0, _react.useEffect)(() => {
-    if (value && numValue !== value) {
-      setNumValue(value);
+    const valueToUse = value ?? input.value;
+    if (!valueToUse && numValue) {
+      // Make sure to empty out if it's cleared. Treating '' as empty instead of undefined
+      setNumValue('');
+    }
+    if (valueToUse && numValue !== valueToUse) {
+      setNumValue(valueToUse);
     }
-    if (numValue && forceControl !== numValue) {
+    if (forceControl !== numValue) {
       setForceControl(numValue);
     }
-  }, [forceControl, numValue, value]);
+  }, [forceControl, numValue, value, input]);
   const handleChange = e => {
     // Actually set the value in the form
     if (input?.onChange) {
@@ -55,7 +60,7 @@ const NumberField = props => {
   const handleUserChange = e => {
     const parsedValue = parseFloat(e.target.value);
 
-    // ReturnValue needed for contorlled components
+    // ReturnValue needed for controlled components
     if (parsedValue || parsedValue === 0) {
       setNumValue(parsedValue);
       changeField(parsedValue);
@@ -83,6 +88,7 @@ const NumberField = props => {
       ref: inputRef,
       ...input,
       hidden: true,
+      id: input?.name,
       onChange: handleChange,
       type: "number",
       value: numValue
@@ -93,6 +99,7 @@ NumberField.propTypes = {
   onBlur: _propTypes.default.func,
   onChange: _propTypes.default.func,
   input: _propTypes.default.shape({
+    name: _propTypes.default.string.isRequired,
     onChange: _propTypes.default.func.isRequired,
     onBlur: _propTypes.default.func,
     value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])

package/es/lib/NumberField/NumberField.test.js

@@ -0,0 +1,200 @@
+"use strict";
+
+var _react = require("react");
+var _reactFinalForm = require("react-final-form");
+var _userEvent = _interopRequireDefault(require("@folio/jest-config-stripes/testing-library/user-event"));
+var _react2 = require("@folio/jest-config-stripes/testing-library/react");
+var _stripesErmTesting = require("@folio/stripes-erm-testing");
+var _components = require("@folio/stripes/components");
+var _NumberField = _interopRequireDefault(require("./NumberField"));
+var _helpers = require("../../../test/jest/helpers");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const onSubmit = jest.fn();
+const NUMBER_FIELD_LABEL = 'TEST NUMBER FIELD';
+const NUMBER_FIELD_ID = 'number-field-test';
+const NUMBER_FIELD_INPUT_ID = 'input-id-test';
+const RESET_BUTTON_LABEL = 'RESET NUMBER FIELD';
+
+// We need to use jest selectors instead of interactors as the TextField interactor
+// can't handle the double-text-field nature of NumberField
+const getTextField = () => {
+  // Spinbutton because it's a "number" type textField...
+  return _react2.screen.getByRole('spinbutton', {
+    name: NUMBER_FIELD_LABEL
+  });
+};
+const submitForm = async () => {
+  await (0, _react2.waitFor)(async () => {
+    await (0, _stripesErmTesting.Button)('Submit').click();
+  });
+};
+const SpecialResetButton = () => {
+  const {
+    change
+  } = (0, _reactFinalForm.useForm)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+    onClick: () => change(NUMBER_FIELD_INPUT_ID, undefined),
+    children: RESET_BUTTON_LABEL
+  });
+};
+const NonControlledComponent = () => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SpecialResetButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+      component: _NumberField.default,
+      id: NUMBER_FIELD_ID,
+      label: NUMBER_FIELD_LABEL,
+      name: NUMBER_FIELD_INPUT_ID
+    })]
+  });
+};
+const ControlledComponent = () => {
+  const [value, setValue] = (0, _react.useState)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SpecialResetButton, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
+      component: _NumberField.default,
+      id: NUMBER_FIELD_ID,
+      label: NUMBER_FIELD_LABEL,
+      name: NUMBER_FIELD_INPUT_ID,
+      onChange: e => setValue(e.target.value),
+      value: value
+    })]
+  });
+};
+
+// EXAMPLE nesting repeated tests with describe.each or test.each might speed up some of our test writing
+describe.each([['Non-Controlled', /*#__PURE__*/(0, _jsxRuntime.jsx)(NonControlledComponent, {})], ['Controlled', /*#__PURE__*/(0, _jsxRuntime.jsx)(ControlledComponent, {})]])('NumberField', (controlType, component) => {
+  let _renderComponent;
+  let textField;
+  describe(`Regular usage (${controlType})`, () => {
+    beforeEach(async () => {
+      onSubmit.mockClear();
+      _renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+        initialValues: {},
+        onSubmit: onSubmit,
+        children: component
+      }));
+      textField = getTextField();
+    });
+    it('renders text field as expected', () => {
+      expect(textField).toBeInTheDocument();
+    });
+    describe.each([['non-numeric characters', 'sdhukjasklfs', '', {}], ['numeric characters', '12345', '12345', {
+      [NUMBER_FIELD_INPUT_ID]: '12345'
+    }], ['scientific notation', '1e5', '100000', {
+      [NUMBER_FIELD_INPUT_ID]: '100000'
+    }], ['negative numbers', '-100', '-100', {
+      [NUMBER_FIELD_INPUT_ID]: '-100'
+    }]])('Typing', (characterType, typedChars, expectedDisplay, expectedSubmit) => {
+      describe(`typing ${characterType}`, () => {
+        beforeEach(async () => {
+          await (0, _react2.waitFor)(async () => {
+            await _userEvent.default.type(textField, typedChars);
+          });
+        });
+        it('does not render typed characters', async () => {
+          expect(textField).toHaveDisplayValue(expectedDisplay);
+        });
+        describe('submitting the form', () => {
+          beforeEach(submitForm);
+          it('submits with expected values', () => {
+            expect(onSubmit.mock.calls[0][0]).toEqual(expectedSubmit);
+          });
+        });
+      });
+    });
+  });
+  describe.each([['numeric initialvalues', {
+    [NUMBER_FIELD_INPUT_ID]: '7654321'
+  }, '7654321', {
+    [NUMBER_FIELD_INPUT_ID]: '7654321'
+  }], ['regular scientific initialvalue NOTE: scientific value parsing does NOT work from initialValues', {
+    [NUMBER_FIELD_INPUT_ID]: '3e7'
+  }, '3e7', {
+    [NUMBER_FIELD_INPUT_ID]: '3e7'
+  }], ['negative initialvalue', {
+    [NUMBER_FIELD_INPUT_ID]: '-100'
+  }, '-100', {
+    [NUMBER_FIELD_INPUT_ID]: '-100'
+  }]])(`Initial values (${controlType})`, (describeTitle, initialValues, displayValue, submitValue) => {
+    describe(describeTitle, () => {
+      beforeEach(async () => {
+        onSubmit.mockClear();
+        _renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+          initialValues: initialValues,
+          onSubmit: onSubmit,
+          children: component
+        }));
+        textField = getTextField();
+      });
+      it('renders initial value', async () => {
+        expect(textField).toHaveDisplayValue(displayValue);
+      });
+      describe('submitting the form', () => {
+        beforeEach(submitForm);
+        it('submits with expected values', () => {
+          expect(onSubmit.mock.calls[0][0]).toEqual(submitValue);
+        });
+      });
+    });
+  });
+  describe.each([['Clear after typing', async () => {
+    onSubmit.mockClear();
+    _renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+      initialValues: {},
+      onSubmit: onSubmit,
+      children: component
+    }));
+    textField = getTextField();
+    await (0, _react2.waitFor)(async () => {
+      await _userEvent.default.type(textField, '32786843');
+    });
+  }], ['Clear from initialValues', async () => {
+    onSubmit.mockClear();
+    _renderComponent = (0, _helpers.renderWithKintHarness)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_stripesErmTesting.TestForm, {
+      initialValues: {
+        [NUMBER_FIELD_INPUT_ID]: '32786843'
+      },
+      onSubmit: onSubmit,
+      children: component
+    }));
+    textField = getTextField();
+  }]])(`ERM-3391: state change underneath component (${controlType})`, (clearType, beforeEachFunc) => {
+    describe(clearType, () => {
+      beforeEach(beforeEachFunc);
+      it('renders text field', () => {
+        expect(textField).toBeInTheDocument();
+      });
+      it('renders special reset button', async () => {
+        await (0, _stripesErmTesting.Button)(RESET_BUTTON_LABEL).exists();
+      });
+      describe.each([['Control', false, '32786843', {
+        [NUMBER_FIELD_INPUT_ID]: '32786843'
+      }], ['After reset', true, '', {}]])('Test reset', (describeTitle, clearField, expectedValue, expectedSubmit) => {
+        describe(describeTitle, () => {
+          beforeEach(async () => {
+            onSubmit.mockClear();
+            if (clearField) {
+              await (0, _react2.waitFor)(async () => {
+                await (0, _stripesErmTesting.Button)(RESET_BUTTON_LABEL).click();
+              });
+            }
+          });
+          it(`renders text field with display value: ${expectedValue}`, async () => {
+            await (0, _react2.waitFor)(() => {
+              expect(textField).toHaveDisplayValue(expectedValue);
+            });
+          });
+          describe('submitting', () => {
+            describe('submitting the form', () => {
+              beforeEach(submitForm);
+              it('submits with expected values', () => {
+                expect(onSubmit.mock.calls[0][0]).toEqual(expectedSubmit);
+              });
+            });
+          });
+        });
+      });
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k-int/stripes-kint-components",
-  "version": "5.8.2",
+  "version": "5.8.3",
   "description": "Stripes Component library for K-Int specific applications",
   "sideEffects": [
     "*.css"

package/src/lib/NumberField/NumberField.js

@@ -37,14 +37,21 @@ const NumberField = (props) => {
 
   // Allow direct control of field
   useEffect(() => {
-    if (value && numValue !== value) {
-      setNumValue(value);
+    const valueToUse = value ?? input.value;
+
+    if (!valueToUse && numValue) {
+      // Make sure to empty out if it's cleared. Treating '' as empty instead of undefined
+      setNumValue('');
+    }
+
+    if (valueToUse && numValue !== valueToUse) {
+      setNumValue(valueToUse);
     }
 
-    if (numValue && forceControl !== numValue) {
+    if (forceControl !== numValue) {
       setForceControl(numValue);
     }
-  }, [forceControl, numValue, value]);
+  }, [forceControl, numValue, value, input]);
 
   const handleChange = (e) => {
     // Actually set the value in the form
@@ -61,12 +68,10 @@ const NumberField = (props) => {
     }
   };
 
-
-
   const handleUserChange = (e) => {
     const parsedValue = parseFloat(e.target.value);
 
-    // ReturnValue needed for contorlled components
+    // ReturnValue needed for controlled components
     if (parsedValue || parsedValue === 0) {
       setNumValue(parsedValue);
       changeField(parsedValue);
@@ -96,6 +101,7 @@ const NumberField = (props) => {
         ref={inputRef}
         {...input}
         hidden
+        id={input?.name}
         onChange={handleChange}
         type="number"
         value={numValue}
@@ -108,6 +114,7 @@ NumberField.propTypes = {
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   input: PropTypes.shape({
+    name: PropTypes.string.isRequired,
     onChange: PropTypes.func.isRequired,
     onBlur: PropTypes.func,
     value: PropTypes.oneOfType([

package/src/lib/NumberField/NumberField.test.js

@@ -0,0 +1,258 @@
+import { useState } from 'react';
+import { Field, useForm } from 'react-final-form';
+
+import userEvent from '@folio/jest-config-stripes/testing-library/user-event';
+import { screen, waitFor } from '@folio/jest-config-stripes/testing-library/react';
+
+import { Button, TestForm, TextField } from '@folio/stripes-erm-testing';
+import { Button as StripesButton } from '@folio/stripes/components';
+
+import NumberField from './NumberField';
+
+import { renderWithKintHarness } from '../../../test/jest/helpers';
+
+
+const onSubmit = jest.fn();
+
+const NUMBER_FIELD_LABEL = 'TEST NUMBER FIELD';
+const NUMBER_FIELD_ID = 'number-field-test';
+const NUMBER_FIELD_INPUT_ID = 'input-id-test';
+
+const RESET_BUTTON_LABEL = 'RESET NUMBER FIELD';
+
+// We need to use jest selectors instead of interactors as the TextField interactor
+// can't handle the double-text-field nature of NumberField
+const getTextField = () => {
+  // Spinbutton because it's a "number" type textField...
+  return screen.getByRole('spinbutton', { name: NUMBER_FIELD_LABEL });
+};
+
+const submitForm = async () => {
+  await waitFor(async () => {
+    await Button('Submit').click();
+  });
+};
+
+const SpecialResetButton = () => {
+  const { change } = useForm();
+
+  return (
+    <StripesButton
+      onClick={() => change(NUMBER_FIELD_INPUT_ID, undefined)}
+    >
+      {RESET_BUTTON_LABEL}
+    </StripesButton>
+  );
+};
+
+const NonControlledComponent = () => {
+  return (
+    <>
+      <SpecialResetButton />
+      <Field
+        component={NumberField}
+        id={NUMBER_FIELD_ID}
+        label={NUMBER_FIELD_LABEL}
+        name={NUMBER_FIELD_INPUT_ID}
+      />
+    </>
+  );
+};
+
+const ControlledComponent = () => {
+  const [value, setValue] = useState();
+
+  return (
+    <>
+      <SpecialResetButton />
+      <Field
+        component={NumberField}
+        id={NUMBER_FIELD_ID}
+        label={NUMBER_FIELD_LABEL}
+        name={NUMBER_FIELD_INPUT_ID}
+        onChange={e => setValue(e.target.value)}
+        value={value}
+      />
+    </>
+  );
+};
+
+// EXAMPLE nesting repeated tests with describe.each or test.each might speed up some of our test writing
+describe.each([
+  ['Non-Controlled', <NonControlledComponent />],
+  ['Controlled', <ControlledComponent />],
+])('NumberField', (controlType, component) => {
+  let _renderComponent;
+  let textField;
+  describe(`Regular usage (${controlType})`, () => {
+    beforeEach(async () => {
+      onSubmit.mockClear();
+      _renderComponent = renderWithKintHarness(
+        <TestForm
+          initialValues={{}}
+          onSubmit={onSubmit}
+        >
+          {component}
+        </TestForm>
+      );
+
+      textField = getTextField();
+    });
+
+    it('renders text field as expected', () => {
+      expect(textField).toBeInTheDocument();
+    });
+
+    describe.each([
+      ['non-numeric characters', 'sdhukjasklfs', '', {}],
+      ['numeric characters', '12345', '12345', { [NUMBER_FIELD_INPUT_ID]: '12345' }],
+      ['scientific notation', '1e5', '100000', { [NUMBER_FIELD_INPUT_ID]: '100000' }],
+      ['negative numbers', '-100', '-100', { [NUMBER_FIELD_INPUT_ID]: '-100' }],
+    ])('Typing', (characterType, typedChars, expectedDisplay, expectedSubmit) => {
+      describe(`typing ${characterType}`, () => {
+        beforeEach(async () => {
+          await waitFor(async () => {
+            await userEvent.type(textField, typedChars);
+          });
+        });
+
+        it('does not render typed characters', async () => {
+          expect(textField).toHaveDisplayValue(expectedDisplay);
+        });
+
+        describe('submitting the form', () => {
+          beforeEach(submitForm);
+
+          it('submits with expected values', () => {
+            expect(onSubmit.mock.calls[0][0]).toEqual(expectedSubmit);
+          });
+        });
+      });
+    });
+  });
+
+  describe.each([
+    ['numeric initialvalues', { [NUMBER_FIELD_INPUT_ID]: '7654321' }, '7654321', { [NUMBER_FIELD_INPUT_ID]: '7654321' }],
+    ['regular scientific initialvalue NOTE: scientific value parsing does NOT work from initialValues', { [NUMBER_FIELD_INPUT_ID]: '3e7' }, '3e7', { [NUMBER_FIELD_INPUT_ID]: '3e7' }],
+    ['negative initialvalue', { [NUMBER_FIELD_INPUT_ID]: '-100' }, '-100', { [NUMBER_FIELD_INPUT_ID]: '-100' }],
+  ])(`Initial values (${controlType})`, (describeTitle, initialValues, displayValue, submitValue) => {
+    describe(describeTitle, () => {
+      beforeEach(async () => {
+        onSubmit.mockClear();
+        _renderComponent = renderWithKintHarness(
+          <TestForm
+            initialValues={initialValues}
+            onSubmit={onSubmit}
+          >
+            {component}
+          </TestForm>
+        );
+
+        textField = getTextField();
+      });
+
+      it('renders initial value', async () => {
+        expect(textField).toHaveDisplayValue(displayValue);
+      });
+
+      describe('submitting the form', () => {
+        beforeEach(submitForm);
+
+        it('submits with expected values', () => {
+          expect(onSubmit.mock.calls[0][0]).toEqual(submitValue);
+        });
+      });
+    });
+  });
+
+  describe.each([
+    [
+      'Clear after typing',
+      async () => {
+        onSubmit.mockClear();
+        _renderComponent = renderWithKintHarness(
+          <TestForm
+            initialValues={{}}
+            onSubmit={onSubmit}
+          >
+            {component}
+          </TestForm>
+        );
+        textField = getTextField();
+
+        await waitFor(async () => {
+          await userEvent.type(textField, '32786843');
+        });
+      }
+    ],
+    [
+      'Clear from initialValues',
+      async () => {
+        onSubmit.mockClear();
+        _renderComponent = renderWithKintHarness(
+          <TestForm
+            initialValues={{ [NUMBER_FIELD_INPUT_ID]: '32786843' }}
+            onSubmit={onSubmit}
+          >
+            {component}
+          </TestForm>
+        );
+        textField = getTextField();
+      }
+    ]
+  ])(`ERM-3391: state change underneath component (${controlType})`, (clearType, beforeEachFunc) => {
+    describe(clearType, () => {
+      beforeEach(beforeEachFunc);
+
+      it('renders text field', () => {
+        expect(textField).toBeInTheDocument();
+      });
+
+      it('renders special reset button', async () => {
+        await Button(RESET_BUTTON_LABEL).exists();
+      });
+
+      describe.each([
+        [
+          'Control',
+          false,
+          '32786843',
+          { [NUMBER_FIELD_INPUT_ID]: '32786843' }
+        ],
+        [
+          'After reset',
+          true,
+          '',
+          {}
+        ]
+      ])('Test reset', (describeTitle, clearField, expectedValue, expectedSubmit) => {
+        describe(describeTitle, () => {
+          beforeEach(async () => {
+            onSubmit.mockClear();
+            if (clearField) {
+              await waitFor(async () => {
+                await Button(RESET_BUTTON_LABEL).click();
+              });
+            }
+          });
+
+          it(`renders text field with display value: ${expectedValue}`, async () => {
+            await waitFor(() => {
+              expect(textField).toHaveDisplayValue(expectedValue);
+            });
+          });
+
+          describe('submitting', () => {
+            describe('submitting the form', () => {
+              beforeEach(submitForm);
+
+              it('submits with expected values', () => {
+                expect(onSubmit.mock.calls[0][0]).toEqual(expectedSubmit);
+              });
+            });
+          });
+        });
+      });
+    });
+  });
+});