@carrot-farm/mongsil-ui
Version:
react ui library
127 lines (126 loc) • 5.5 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var react_1 = require("@testing-library/react");
var user_event_1 = __importDefault(require("@testing-library/user-event"));
var SelectCreator_1 = __importDefault(require("./SelectCreator"));
describe('<SelectCreator />', function () {
it('기본 렌더링 테스트', function () {
var _a = renderSelectCreator({
name: 'test-name',
value: 'a',
model: model,
}), Root = _a.Root, Value = _a.Value, Icon = _a.Icon, Input = _a.Input, Panel = _a.Panel, Options = _a.Options;
expect(Root()).toBeInTheDocument();
expect(Value()).toBeInTheDocument();
expect(Value()).toHaveTextContent('a');
expect(Icon()).toBeInTheDocument();
expect(Input()).toBeInTheDocument();
expect(Input()).toHaveValue('a');
expect(Input()).toHaveAttribute('name', 'test-name');
expect(Panel()).toBeInTheDocument();
expect(Options().length).toBe(3);
expect(Options()[0]).toHaveTextContent('a');
expect(Options()[1]).toHaveTextContent('b');
expect(Options()[2]).toHaveTextContent('c');
});
it('value 변경', function () {
var _a = renderSelectCreator({
value: 'a',
model: model,
}), changeValue = _a.changeValue, checkValue = _a.checkValue;
checkValue('a');
changeValue('b');
checkValue('b');
});
it('클릭 활성화 테스트', function () {
var _a = renderSelectCreator({
defaultValue: 'b',
model: model,
}), Panel = _a.Panel, SelectedOption = _a.SelectedOption, click = _a.click, clickOption = _a.clickOption, checkValue = _a.checkValue;
checkValue('b');
click();
expect(Panel()).toHaveClass('animate-visible-panel');
expect(SelectedOption()).toBeInTheDocument();
clickOption(2);
expect(Panel()).not.toHaveClass('animate-visible-panel');
checkValue('c');
});
});
/** helper */
function renderSelectCreator(props) {
var onChange = jest.fn();
var _a = (0, react_1.render)(React.createElement(SelectCreator_1.default, __assign({ model: model, onChange: onChange }, props))), container = _a.container, rerender = _a.rerender;
// console.log('> ', container.querySelector('.Mongsil-select_creator'));
var Root = function () { return container.querySelector('.Mongsil-select_creator'); };
var Value = function () { return container.querySelector('.Mongsil-select-value'); };
var Icon = function () { return container.querySelector('.Mongsil-select-icon'); };
var Input = function () { return container.querySelector('input'); };
var Panel = function () { return container.querySelector('.Mongsil-select-float-panel'); };
var Options = function () { return container.querySelectorAll('.Mongsil-option-root'); };
var SelectedOption = function () {
return container.querySelector('.Mongsil-option-root.selected');
};
var click = function () { return user_event_1.default.click(Icon()); };
var clickOption = function (index) { return user_event_1.default.click(Options()[index]); };
// const clickOption = (index: number) => userEvent.click();
var changeValue = function (v) {
return rerender(React.createElement(SelectCreator_1.default, __assign({ onChange: onChange, model: model }, props, { value: v })));
};
var checkValue = function (v) {
expect(SelectedOption()).toHaveTextContent(v);
expect(Value()).toHaveTextContent(v);
expect(Input()).toHaveValue(v);
};
return {
Root: Root,
Value: Value,
Icon: Icon,
Input: Input,
Panel: Panel,
Options: Options,
SelectedOption: SelectedOption,
click: click,
clickOption: clickOption,
changeValue: changeValue,
checkValue: checkValue,
};
}
var model = [
{ label: 'a', value: 'a' },
{ label: 'b', value: 'b' },
{ label: 'c', value: 'c' },
];