@enact/moonstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
194 lines (193 loc) • 9.93 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 _Input = _interopRequireDefault(require("../Input"));
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('Input Specs', function () {
test('should have an input element', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {}));
var expected = 'INPUT';
var actual = _react.screen.getByLabelText('Input field').lastElementChild.tagName;
expect(actual).toBe(expected);
});
test('should include a placeholder if specified', function () {
var placeholder = 'hello';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
placeholder: placeholder
}));
var input = _react.screen.getByText('hello').nextElementSibling;
var expectedAttribute = 'placeholder';
expect(input).toHaveAttribute(expectedAttribute, placeholder);
});
test('should callback onChange when the text changes', function () {
var handleChange = jest.fn();
var value = 'blah';
var evt = {
target: {
value: value
}
};
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
onChange: handleChange
}));
var input = _react.screen.getByLabelText('Input field').lastElementChild;
_react.fireEvent.change(input, evt);
var actual = handleChange.mock.calls[0][0].value;
expect(actual).toBe(value);
});
test('should blur input on enter if dismissOnEnter', /*#__PURE__*/_asyncToGenerator(function* () {
var handleChange = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
dismissOnEnter: true,
onBlur: handleChange
}));
var input = _react.screen.getByLabelText('Input field');
yield user.click(input);
_react.fireEvent.keyUp(input, {
keyCode: 13,
code: 13
});
var expected = 1;
expect(handleChange).toHaveBeenCalledTimes(expected);
}));
test('should be able to be disabled', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
disabled: true
}));
var input = _react.screen.getByLabelText('Input field');
var expectedAttribute = 'disabled';
expect(input).toHaveAttribute(expectedAttribute);
});
test('should reflect the value if specified', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
value: "hello"
}));
var input = _react.screen.queryByText('hello');
expect(input).toBeInTheDocument();
});
test('should have dir equal to rtl when there is rtl text', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
"data-testid": "input",
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 input = _react.screen.getByTestId('input').lastElementChild;
var expectedAttribute = 'dir';
var expectedValue = 'rtl';
expect(input).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should have dir equal to ltr when there is ltr text', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
"data-testid": "input",
value: "content"
}));
var input = _react.screen.getByTestId('input').lastElementChild;
var expectedAttribute = 'dir';
var expectedValue = 'ltr';
expect(input).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)(_Input["default"], {
"data-testid": "input",
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 input = _react.screen.getByTestId('input').lastElementChild;
var expectedAttribute = 'dir';
var expectedValue = 'rtl';
expect(input).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)(_Input["default"], {
"data-testid": "input",
placeholder: "content"
}));
var input = _react.screen.getByTestId('input').lastElementChild;
var expectedAttribute = 'dir';
var expectedValue = 'ltr';
expect(input).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should have dir equal to rtl if ltr text in the placeholder, but rtl text in value', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
"data-testid": "input",
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 input = _react.screen.getByTestId('input').lastElementChild;
var expectedAttribute = 'dir';
var expectedValue = 'rtl';
expect(input).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should have dir equal to ltr if rtl text in the placeholder, but ltr text in value', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
"data-testid": "input",
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",
value: "content"
}));
var input = _react.screen.getByTestId('input').lastElementChild;
var expectedAttribute = 'dir';
var expectedValue = 'ltr';
expect(input).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should pause spotlight when input has focus', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {}));
var input = _react.screen.getByLabelText('Input field');
_react.fireEvent.mouseDown(input);
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)(_Input["default"], {})),
unmount = _render.unmount;
var input = _react.screen.getByLabelText('Input field');
_react.fireEvent.mouseDown(input);
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)(_Input["default"], {
invalid: true,
invalidMessage: "invalid message"
}));
var tooltip = _react.screen.getByText('invalid message');
var expected = 'tooltipLabel';
expect(tooltip).toHaveClass(expected);
});
test('should not display invalid message if it is valid', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
invalidMessage: "invalid message"
}));
var tooltip = _react.screen.queryByText('invalid message');
expect(tooltip).toBeNull();
});
test('should set voice intent if specified', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
"data-webos-voice-intent": "Select"
}));
var input = _react.screen.getByLabelText('Input field').lastElementChild;
var expectedAttribute = 'data-webos-voice-intent';
var expectedValue = 'Select';
expect(input).toHaveAttribute(expectedAttribute, expectedValue);
});
test('should set voice label if specified', function () {
var label = 'input label';
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input["default"], {
"data-webos-voice-label": label
}));
var input = _react.screen.getByLabelText('Input field').lastElementChild;
var expectedAttribute = 'data-webos-voice-label';
expect(input).toHaveAttribute(expectedAttribute, label);
});
});