@enact/ui/Changeable/tests/Changeable-specs.js

A collection of simplified unstyled cross-platform UI components for Enact

"use strict";

require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _Changeable = _interopRequireDefault(require("../Changeable"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe('Changeable', function () {
  var data;
  var testValue = 3;
  var DivComponent = function DivComponent(props) {
    var _props$value;
    data = props;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      "data-testid": "changeable",
      children: (_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.toString()
    });
  };
  describe('#config', function () {
    test('should pass \'value\' to the wrapped component', function () {
      var Component = (0, _Changeable["default"])(DivComponent);
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {}));
      var expected = '';
      var actual = _react.screen.getByTestId('changeable');
      expect(actual).toHaveTextContent(expected);
    });
    test('should pass configured \'prop\' as the value\'s key to the wrapped component', function () {
      var prop = 'id';
      var Component = (0, _Changeable["default"])({
        prop: prop
      }, DivComponent);
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        defaultId: testValue
      }));
      expect(data).toHaveProperty(prop, testValue);
    });
    test('should pass \'onChange\' handler to the wrapped component', function () {
      var Component = (0, _Changeable["default"])(DivComponent);
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {}));
      expect(data).toHaveProperty('onChange');
      var expected = 'function';
      var actual = typeof data.onChange;
      expect(actual).toBe(expected);
    });
    test('should pass configured handler to the wrapped component', function () {
      var handle = 'onClick';
      var Component = (0, _Changeable["default"])({
        change: handle
      }, DivComponent);
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {}));
      expect(data).toHaveProperty(handle);
      var expected = 'function';
      var actual = typeof data.onClick;
      expect(actual).toBe(expected);
    });
  });
  describe('#prop', function () {
    test('should use defaultValue prop when value prop is omitted', function () {
      var Component = (0, _Changeable["default"])(DivComponent);
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        defaultValue: 1
      }));
      var expected = '1';
      var actual = _react.screen.getByTestId('changeable');
      expect(actual).toHaveTextContent(expected);
    });
    test('should warn when \'defaultValue\' and \'value\' props are provided', function () {
      var spy = jest.spyOn(console, 'error').mockImplementation(function () {});
      var Component = (0, _Changeable["default"])(DivComponent);
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        defaultValue: 10,
        value: 5
      }));
      var expected = 1;
      var actual = spy.mock.calls.length;
      expect(actual).toBe(expected);
    });
    test('should use defaultValue prop when value prop is null', function () {
      var spy = jest.spyOn(console, 'error').mockImplementation(function () {});
      var Component = (0, _Changeable["default"])(DivComponent);
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        defaultValue: 1,
        value: null
      }));
      var expected = '1';
      var actual = _react.screen.getByTestId('changeable');
      expect(actual).toHaveTextContent(expected);
      expect(spy).toHaveBeenCalled();
    });
    test('should use value prop when value changed from truthy to null', function () {
      var spy = jest.spyOn(console, 'error').mockImplementation(function () {});
      var Component = (0, _Changeable["default"])(DivComponent);
      var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          defaultValue: 1,
          value: 2
        })),
        rerender = _render.rerender;
      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        defaultValue: 1,
        value: null
      }));
      var expected = '';
      var actual = _react.screen.getByTestId('changeable');
      expect(actual).toHaveTextContent(expected);
      expect(spy).toHaveBeenCalled();
    });
    test('should use defaultValue prop when value prop is undefined', function () {
      var spy = jest.spyOn(console, 'error').mockImplementation(function () {});
      var Component = (0, _Changeable["default"])(DivComponent);
      // eslint-disable-next-line no-undefined
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        defaultValue: 1,
        value: undefined
      }));
      var expected = '1';
      var actual = _react.screen.getByTestId('changeable');
      expect(actual).toHaveTextContent(expected);
      expect(spy).toHaveBeenCalled();
    });
    test('should use value prop when value changed from truthy to undefined', function () {
      var spy = jest.spyOn(console, 'error').mockImplementation(function () {});
      var Component = (0, _Changeable["default"])(DivComponent);
      var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
          defaultValue: 1,
          value: 2
        })),
        rerender = _render2.rerender;

      // eslint-disable-next-line no-undefined
      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        defaultValue: 1,
        value: undefined
      }));
      var expected = '';
      var actual = _react.screen.getByTestId('changeable');
      expect(actual).toHaveTextContent(expected);
      expect(spy).toHaveBeenCalled();
    });
    test('should use value prop when defined but falsy', function () {
      var spy = jest.spyOn(console, 'error').mockImplementation(function () {});
      var Component = (0, _Changeable["default"])(DivComponent);
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        defaultValue: 1,
        value: 0
      }));
      var expected = '0';
      var actual = _react.screen.getByTestId('changeable');
      expect(actual).toHaveTextContent(expected);
      expect(spy).toHaveBeenCalled();
    });
    test('should use value prop when both value and defaultValue are defined', function () {
      var spy = jest.spyOn(console, 'error').mockImplementation(function () {});
      var Component = (0, _Changeable["default"])(DivComponent);
      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        defaultValue: 1,
        value: 2
      }));
      var expected = '2';
      var actual = _react.screen.getByTestId('changeable');
      expect(actual).toHaveTextContent(expected);
      expect(spy).toHaveBeenCalled();
    });
  });
  test('should invoke passed \'onChange\' handler', function () {
    var handleChange = jest.fn();
    var Component = (0, _Changeable["default"])(DivComponent);
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      onChange: handleChange
    }));
    (0, _react.act)(function () {
      return data.onChange({});
    });
    var expected = 1;
    var actual = handleChange.mock.calls.length;
    expect(actual).toBe(expected);
  });
  test('should not invoke passed \'onChange\' handler when \'disabled\'', function () {
    var handleChange = jest.fn();
    var Component = (0, _Changeable["default"])(DivComponent);
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      onChange: handleChange,
      disabled: true
    }));
    (0, _react.act)(function () {
      return data.onChange({
        value: '1'
      });
    });
    expect(handleChange).not.toHaveBeenCalled();
  });
  test('should update \'value\' when \'onChange\' invoked and is not controlled', function () {
    var handleChange = jest.fn();
    var Component = (0, _Changeable["default"])(DivComponent);
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      defaultValue: 0,
      onChange: handleChange
    }));
    (0, _react.act)(function () {
      return data.onChange({
        value: '1'
      });
    });
    var expected = '1';
    var actual = _react.screen.getByTestId('changeable');
    expect(actual).toHaveTextContent(expected);
  });
  test('should not update \'value\' when \'onChange\' invoked and is not controlled but disabled', function () {
    var Component = (0, _Changeable["default"])(DivComponent);
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      defaultValue: 0,
      disabled: true
    }));
    (0, _react.act)(function () {
      return data.onChange({
        value: '1'
      });
    });
    var expected = '0';
    var actual = _react.screen.getByTestId('changeable');
    expect(actual).toHaveTextContent(expected);
  });
  test('should not update \'value\' when \'onChange\' invoked and is controlled', function () {
    var Component = (0, _Changeable["default"])(DivComponent);
    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      value: 0
    }));
    (0, _react.act)(function () {
      return data.onChange({
        value: '1'
      });
    });
    var expected = '0';
    var actual = _react.screen.getByTestId('changeable');
    expect(actual).toHaveTextContent(expected);
  });
  test('should update \'value\' with new props when is controlled', function () {
    var Component = (0, _Changeable["default"])(DivComponent);
    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        value: 0
      })),
      rerender = _render3.rerender;
    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      value: 1
    }));
    var expected = '1';
    var actual = _react.screen.getByTestId('changeable');
    expect(actual).toHaveTextContent(expected);
  });
  test('should not update \'value\' with new props when is not controlled', function () {
    // eslint-disable-next-line
    console.error = function () {};
    var Component = (0, _Changeable["default"])(DivComponent);
    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        defaultValue: 0
      })),
      rerender = _render4.rerender;
    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      defaultValue: 0,
      value: 1
    }));
    var expected = '0';
    var actual = _react.screen.getByTestId('changeable');
    expect(actual).toHaveTextContent(expected);
  });
  test('should not update the value with new defaultProp when is not controlled', function () {
    var Component = (0, _Changeable["default"])(DivComponent);
    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
        defaultValue: 0
      })),
      rerender = _render5.rerender;
    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      defaultValue: 1
    }));
    var expected = '0';
    var actual = _react.screen.getByTestId('changeable');
    expect(actual).toHaveTextContent(expected);
  });
});