@carrot-farm/mongsil-ui
Version:
react ui library
103 lines (102 loc) • 4.31 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);
};
import * as React from 'react';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import SelectCreator from './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 = render(React.createElement(SelectCreator, __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 userEvent.click(Icon()); };
var clickOption = function (index) { return userEvent.click(Options()[index]); };
// const clickOption = (index: number) => userEvent.click();
var changeValue = function (v) {
return rerender(React.createElement(SelectCreator, __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' },
];