@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
292 lines (291 loc) • 13.6 kB
JavaScript
"use strict";
var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
var _ = require("../");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
var isPaused = function isPaused() {
return _spotlight["default"].isPaused() ? 'paused' : 'not paused';
};
describe('InputField Specs', function () {
test('should have an input element', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {}));
var inputField = _react.screen.getByLabelText('Input field');
expect(inputField).toBeInTheDocument();
});
test('should include a placeholder if specified', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
placeholder: "hello"
}));
var inputField = _react.screen.getByLabelText('hello Input field');
var expected = 'hello';
var actual = inputField.textContent;
expect(actual).toBe(expected);
});
test('should callback onChange with `onChange` type when the text changes', /*#__PURE__*/_asyncToGenerator(function* () {
var handleChange = jest.fn();
var value = 'blah';
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
onChange: handleChange
}));
var inputField = _react.screen.getByPlaceholderText('');
yield user.type(inputField, value);
var expected = {
type: 'onChange'
};
var actual = handleChange.mock.calls.length && handleChange.mock.calls[0][0];
expect(handleChange).toHaveBeenCalled();
expect(actual).toMatchObject(expected);
}));
test('should forward an event with a stopPropagation method from onChange handler', function () {
var handleChange = jest.fn();
var value = 'blah';
var evt = {
target: {
value: value
},
stopPropagation: jest.fn()
};
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
onChange: handleChange
}));
var inputField = _react.screen.getByPlaceholderText('');
_react.fireEvent.change(inputField, evt);
var actual = typeof handleChange.mock.calls[0][0].stopPropagation === 'function';
expect(actual).toBeTruthy();
});
test('should not bubble the native event when stopPropagation from onChange is called', /*#__PURE__*/_asyncToGenerator(function* () {
var handleChange = jest.fn();
var value = 'smt';
function stop(ev) {
ev.stopPropagation();
}
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
onChange: handleChange,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
onChange: stop
})
}));
var inputField = _react.screen.getByPlaceholderText('');
yield user.type(inputField, value);
expect(handleChange).not.toHaveBeenCalled();
}));
test('should callback onBeforeChange with `onBeforeChange` type before the text changes', /*#__PURE__*/_asyncToGenerator(function* () {
var handleBeforeChange = jest.fn();
var value = 'blah';
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
onBeforeChange: handleBeforeChange
}));
var inputField = _react.screen.getByPlaceholderText('');
yield user.type(inputField, value);
var expected = {
type: 'onBeforeChange'
};
var actual = handleBeforeChange.mock.calls.length && handleBeforeChange.mock.calls[0][0];
expect(handleBeforeChange).toHaveBeenCalled();
expect(actual).toMatchObject(expected);
}));
test('should prevent onChange if onBeforeChange prevents', /*#__PURE__*/_asyncToGenerator(function* () {
var handleBeforeChange = jest.fn(function (ev) {
return ev.preventDefault();
});
var handleChange = jest.fn();
var value = 'blah';
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
onBeforeChange: handleBeforeChange,
onChange: handleChange
}));
var inputField = _react.screen.getByPlaceholderText('');
yield user.type(inputField, value);
expect(handleChange).not.toHaveBeenCalled();
}));
test('should blur input on enter if dismissOnEnter', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
onBlur: handleChange,
dismissOnEnter: true
}));
var inputField = _react.screen.getByPlaceholderText('');
_react.fireEvent.mouseDown(inputField);
_react.fireEvent.keyUp(inputField, {
which: 13,
keyCode: 13,
code: 13
});
expect(handleChange).toHaveBeenCalled();
});
test('should activate input on enter', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
onActivate: handleChange
}));
var inputField = _react.screen.getByPlaceholderText('');
_react.fireEvent.keyDown(inputField, {
which: 13,
keyCode: 13,
code: 13
});
_react.fireEvent.keyUp(inputField, {
which: 13,
keyCode: 13,
code: 13
});
expect(handleChange).toHaveBeenCalled();
});
test('should not activate input on enter when disabled', function () {
var handleChange = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
disabled: true,
onActivate: handleChange
}));
var inputField = _react.screen.getByPlaceholderText('');
_react.fireEvent.keyDown(inputField, {
which: 13,
keyCode: 13,
code: 13
});
_react.fireEvent.keyUp(inputField, {
which: 13,
keyCode: 13,
code: 13
});
expect(handleChange).not.toHaveBeenCalled();
});
test('should be able to be disabled', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
disabled: true
}));
var actual = _react.screen.getByLabelText('Input field');
var expected = 'disabled';
expect(actual).toHaveAttribute(expected);
});
test('should reflect the value if specified', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
value: "hello"
}));
var inputField = _react.screen.getByLabelText('hello Input field');
var actual = inputField.textContent;
var expected = 'hello';
expect(actual).toBe(expected);
});
test('should have dir equal to rtl when there is rtl text', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
value: "\u05E9\u05D5\u05E2\u05DC \u05D4\u05D7\u05D5\u05DD \u05D4\u05D6\u05E8\u05D9\u05D6 \u05E7\u05E4\u05E5 \u05DE\u05E2\u05DC \u05D4\u05DB\u05DC\u05D1 \u05D4\u05E2\u05E6\u05DC\u05DF.\u05E6\u05D9\u05E4\u05D5\u05E8 \u05E2\u05E4\u05D4 \u05D4\u05E9\u05E2\u05D5\u05E2\u05D9\u05EA \u05E2\u05DD \u05E9\u05E7\u05D9"
}));
var inputField = _react.screen.getByLabelText('שועל החום הזריז קפץ מעל הכלב העצלן.ציפור עפה השעועית עם שקי' + ' Input field').children.item(2);
var expectedAttribute = 'dir';
var expectedValue = 'rtl';
expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should have dir equal to ltr when there is ltr text', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
value: "content"
}));
var inputField = _react.screen.getByPlaceholderText('');
var expectedAttribute = 'dir';
var expectedValue = 'ltr';
expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should have dir equal to rtl when there is rtl text in the placeholder', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
placeholder: "\u05E9\u05D5\u05E2\u05DC \u05D4\u05D7\u05D5\u05DD \u05D4\u05D6\u05E8\u05D9\u05D6 \u05E7\u05E4\u05E5 \u05DE\u05E2\u05DC \u05D4\u05DB\u05DC\u05D1 \u05D4\u05E2\u05E6\u05DC\u05DF.\u05E6\u05D9\u05E4\u05D5\u05E8 \u05E2\u05E4\u05D4 \u05D4\u05E9\u05E2\u05D5\u05E2\u05D9\u05EA \u05E2\u05DD \u05E9\u05E7\u05D9"
}));
var inputField = _react.screen.getByPlaceholderText('שועל החום הזריז קפץ מעל הכלב העצלן.ציפור עפה השעועית עם שקי');
var expectedAttribute = 'dir';
var expectedValue = 'rtl';
expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should have dir equal to ltr when there is ltr text in the placeholder', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
placeholder: "content"
}));
var inputField = _react.screen.getByPlaceholderText('content');
var expectedAttribute = 'dir';
var expectedValue = 'ltr';
expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should have dir equal to rtl when there is ltr text in the placeholder, but rtl text in value', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
placeholder: "content",
value: "\u05E9\u05D5\u05E2\u05DC \u05D4\u05D7\u05D5\u05DD \u05D4\u05D6\u05E8\u05D9\u05D6 \u05E7\u05E4\u05E5 \u05DE\u05E2\u05DC \u05D4\u05DB\u05DC\u05D1 \u05D4\u05E2\u05E6\u05DC\u05DF.\u05E6\u05D9\u05E4\u05D5\u05E8 \u05E2\u05E4\u05D4 \u05D4\u05E9\u05E2\u05D5\u05E2\u05D9\u05EA \u05E2\u05DD \u05E9\u05E7\u05D9"
}));
var inputField = _react.screen.getByPlaceholderText('content');
var expectedAttribute = 'dir';
var expectedValue = 'rtl';
expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should have dir equal to ltr when there is rtl text in the placeholder, but ltr text in value', function () {
var placeholder = 'שועל החום הזריז קפץ מעל הכלב העצלן.ציפור עפה השעועית עם שקי';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
placeholder: placeholder,
value: "content"
}));
var inputField = _react.screen.getByPlaceholderText(placeholder);
var expectedAttribute = 'dir';
var expectedValue = 'ltr';
expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should pause spotlight when input has focus', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {}));
var inputField = _react.screen.getByPlaceholderText('');
_react.fireEvent.mouseDown(inputField);
var expected = 'paused';
var actual = isPaused();
_spotlight["default"].resume();
expect(actual).toBe(expected);
});
test('should resume spotlight on unmount', function () {
var _render = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {})),
unmount = _render.unmount;
var inputField = _react.screen.getByPlaceholderText('');
_react.fireEvent.mouseDown(inputField);
unmount();
var expected = 'not paused';
var actual = isPaused();
_spotlight["default"].resume();
expect(actual).toBe(expected);
});
test('should display invalid message if it invalid and invalid message exists', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
invalid: true,
invalidMessage: "invalid message"
}));
var invalidText = _react.screen.getByText('invalid message').parentElement.parentElement;
var expected = 'tooltipLabel';
expect(invalidText).toBeInTheDocument();
expect(invalidText).toHaveClass(expected);
});
test('should not display invalid message if it is valid', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
invalidMessage: "invalid message"
}));
var actual = _react.screen.queryByText('invalid message');
expect(actual).toBeNull();
});
test('should set voice intent if specified', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
"data-webos-voice-intent": "Select"
}));
var inputField = _react.screen.getByPlaceholderText('');
var expectedAttribute = 'data-webos-voice-intent';
var expectedValue = 'Select';
expect(inputField).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should set voice label if specified', function () {
var customLabel = 'input label';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.InputField, {
"data-webos-voice-label": customLabel
}));
var inputField = _react.screen.getByPlaceholderText('');
var expectedAttribute = 'data-webos-voice-label';
expect(inputField).toHaveAttribute(expectedAttribute, customLabel);
});
});