@gympass/yoga 7.66.0 → 7.66.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/Dialog/web/Dialog.js +12 -7
- package/cjs/Drawer/web/Drawer.js +5 -1
- package/esm/Accordion/web/Accordion.test.js +19 -0
- package/esm/ActionRequirement/index.native.js +2 -0
- package/esm/ActionRequirement/native/ActionRequirement.js +48 -0
- package/esm/ActionRequirement/native/ActionRequirement.test.js +45 -0
- package/esm/ActionRequirement/native/ActionRequirementStyles.js +25 -0
- package/esm/ActionRequirement/native/index.js +6 -0
- package/esm/ActionRequirement/web/ActionRequirement.test.js +36 -0
- package/esm/AutoComplete/web/AutoComplete.test.js +139 -0
- package/esm/Avatar/index.native.js +4 -0
- package/esm/Avatar/native/Avatar.js +96 -0
- package/esm/Avatar/native/Avatar.test.js +46 -0
- package/esm/Avatar/native/AvatarCircle.js +24 -0
- package/esm/Avatar/web/Avatar.test.js +63 -0
- package/esm/Banner/index.native.js +2 -0
- package/esm/Banner/native/Banner.js +128 -0
- package/esm/Banner/native/Banner.test.js +103 -0
- package/esm/Banner/native/index.js +2 -0
- package/esm/Banner/web/Banner.test.js +109 -0
- package/esm/BottomSheet/web/BottomSheet.test.js +48 -0
- package/esm/Box/index.native.js +2 -0
- package/esm/Box/native/Box.js +4 -0
- package/esm/Box/native/Box.test.js +16 -0
- package/esm/Box/native/index.js +2 -0
- package/esm/Box/web/Box.test.js +16 -0
- package/esm/Button/index.native.js +8 -0
- package/esm/Button/native/Button.js +110 -0
- package/esm/Button/native/Button.test.js +475 -0
- package/esm/Button/native/Icon.js +82 -0
- package/esm/Button/native/Link.js +35 -0
- package/esm/Button/native/Text.js +74 -0
- package/esm/Button/native/withTouchable.js +63 -0
- package/esm/Button/web/Button.test.js +772 -0
- package/esm/Card/index.native.js +2 -0
- package/esm/Card/native/Card/Actions.js +12 -0
- package/esm/Card/native/Card/Card.js +92 -0
- package/esm/Card/native/Card/Card.test.js +15 -0
- package/esm/Card/native/Card/Content.js +8 -0
- package/esm/Card/native/Card/Header.js +8 -0
- package/esm/Card/native/Card/index.js +8 -0
- package/esm/Card/native/EventCard/EventCard.js +169 -0
- package/esm/Card/native/EventCard/EventCard.test.js +65 -0
- package/esm/Card/native/EventCard/index.js +2 -0
- package/esm/Card/native/GymCard/CheckIn/Avatar.js +17 -0
- package/esm/Card/native/GymCard/CheckIn/CheckIn.js +66 -0
- package/esm/Card/native/GymCard/CheckIn/CheckIn.test.js +39 -0
- package/esm/Card/native/GymCard/CheckIn/Content.js +11 -0
- package/esm/Card/native/GymCard/CheckIn/Header.js +11 -0
- package/esm/Card/native/GymCard/CheckIn/index.js +2 -0
- package/esm/Card/native/GymCard/index.js +5 -0
- package/esm/Card/native/PlanCard/Actions.js +22 -0
- package/esm/Card/native/PlanCard/Content.js +75 -0
- package/esm/Card/native/PlanCard/List.js +73 -0
- package/esm/Card/native/PlanCard/PlanCard.js +51 -0
- package/esm/Card/native/PlanCard/PlanCard.test.js +84 -0
- package/esm/Card/native/PlanCard/Subtitle.js +15 -0
- package/esm/Card/native/PlanCard/Tag.js +34 -0
- package/esm/Card/native/PlanCard/index.js +15 -0
- package/esm/Card/native/index.js +5 -0
- package/esm/Card/web/Card/Card.test.js +14 -0
- package/esm/Card/web/EventCard/EventCard.test.js +27 -0
- package/esm/Card/web/PlanCard/PlanCard.test.js +94 -0
- package/esm/Checkbox/index.native.js +3 -0
- package/esm/Checkbox/native/Checkbox.js +179 -0
- package/esm/Checkbox/native/Checkbox.test.js +115 -0
- package/esm/Checkbox/native/Switch.js +115 -0
- package/esm/Checkbox/native/Switch.test.js +54 -0
- package/esm/Checkbox/native/index.js +3 -0
- package/esm/Checkbox/web/Checkbox.test.js +153 -0
- package/esm/Checkbox/web/Switch.test.js +56 -0
- package/esm/Chips/index.native.js +2 -0
- package/esm/Chips/native/Chips.js +104 -0
- package/esm/Chips/native/Chips.test.js +143 -0
- package/esm/Chips/native/Counter.js +20 -0
- package/esm/Chips/native/index.js +2 -0
- package/esm/Chips/web/Chips.test.js +128 -0
- package/esm/Datepicker/web/Datepicker.test.js +247 -0
- package/esm/Dialog/web/Dialog.js +13 -8
- package/esm/Dialog/web/Dialog.test.js +62 -0
- package/esm/Divider/index.native.js +2 -0
- package/esm/Divider/native/Divider.js +29 -0
- package/esm/Divider/native/Divider.test.js +29 -0
- package/esm/Divider/native/index.js +2 -0
- package/esm/Divider/web/Divider.test.js +29 -0
- package/esm/Drawer/web/Drawer.js +6 -2
- package/esm/Drawer/web/Drawer.test.js +33 -0
- package/esm/Dropdown/index.native.js +2 -0
- package/esm/Dropdown/native/Backdrop.js +93 -0
- package/esm/Dropdown/native/Backdrop.test.js +26 -0
- package/esm/Dropdown/native/Dropdown.js +142 -0
- package/esm/Dropdown/native/Dropdown.test.js +78 -0
- package/esm/Dropdown/native/Options.android.js +66 -0
- package/esm/Dropdown/native/Options.ios.js +71 -0
- package/esm/Dropdown/native/index.js +2 -0
- package/esm/Dropdown/web/Dropdown.test.js +93 -0
- package/esm/Feedback/web/Feedback.test.js +83 -0
- package/esm/Grid/web/Col.test.js +48 -0
- package/esm/Grid/web/Container.test.js +14 -0
- package/esm/Grid/web/Hide.test.js +31 -0
- package/esm/Grid/web/Row.test.js +14 -0
- package/esm/Header/web/Header.test.js +38 -0
- package/esm/Heading/web/Heading.test.js +58 -0
- package/esm/Icon/index.native.js +2 -0
- package/esm/Icon/native/Icon.test.js +47 -0
- package/esm/Icon/native/index.js +2 -0
- package/esm/Icon/web/Icon.test.js +47 -0
- package/esm/Input/index.native.js +6 -0
- package/esm/Input/native/Email.js +15 -0
- package/esm/Input/native/Email.test.js +13 -0
- package/esm/Input/native/Helper.js +62 -0
- package/esm/Input/native/Input.js +234 -0
- package/esm/Input/native/Input.test.js +181 -0
- package/esm/Input/native/Number.js +12 -0
- package/esm/Input/native/Number.test.js +13 -0
- package/esm/Input/native/Password.js +112 -0
- package/esm/Input/native/Password.test.js +125 -0
- package/esm/Input/native/Tel.js +14 -0
- package/esm/Input/native/Tel.test.js +13 -0
- package/esm/Input/native/index.js +6 -0
- package/esm/Input/web/Email.test.js +13 -0
- package/esm/Input/web/Input.test.js +145 -0
- package/esm/Input/web/Number.test.js +13 -0
- package/esm/Input/web/Password.test.js +90 -0
- package/esm/Input/web/Phone.test.js +95 -0
- package/esm/Input/web/Tel.test.js +13 -0
- package/esm/List/index.native.js +3 -0
- package/esm/List/native/List.js +22 -0
- package/esm/List/native/List.test.js +106 -0
- package/esm/List/native/ListItem.js +51 -0
- package/esm/List/native/index.js +3 -0
- package/esm/List/web/List.test.js +62 -0
- package/esm/Menu/web/Menu.test.js +115 -0
- package/esm/Popover/web/Popover.test.js +19 -0
- package/esm/Progress/index.native.js +2 -0
- package/esm/Progress/native/Progress.js +103 -0
- package/esm/Progress/native/Progress.test.js +222 -0
- package/esm/Progress/native/index.js +2 -0
- package/esm/Progress/web/Progress.test.js +222 -0
- package/esm/RadioGroup/index.native.js +4 -0
- package/esm/RadioGroup/native/Button/RadioButton.js +64 -0
- package/esm/RadioGroup/native/Button/RadioButton.test.js +96 -0
- package/esm/RadioGroup/native/Radio/Radio.js +88 -0
- package/esm/RadioGroup/native/Radio/Radio.test.js +112 -0
- package/esm/RadioGroup/native/RadioGroup.js +66 -0
- package/esm/RadioGroup/native/RadioGroup.test.js +50 -0
- package/esm/RadioGroup/native/index.js +4 -0
- package/esm/RadioGroup/web/Button/RadioButton.test.js +121 -0
- package/esm/RadioGroup/web/Radio/Radio.test.js +108 -0
- package/esm/RadioGroup/web/RadioGroup.test.js +83 -0
- package/esm/Rating/index.native.js +2 -0
- package/esm/Rating/native/Rating.js +186 -0
- package/esm/Rating/native/Rating.test.js +121 -0
- package/esm/Rating/native/index.js +2 -0
- package/esm/Rating/web/Rating.test.js +184 -0
- package/esm/Result/index.native.js +8 -0
- package/esm/Result/native/Attendances.js +55 -0
- package/esm/Result/native/Details.js +97 -0
- package/esm/Result/native/Rate.js +35 -0
- package/esm/Result/native/Result.js +86 -0
- package/esm/Result/native/Result.test.js +107 -0
- package/esm/Result/native/ResultButton.js +13 -0
- package/esm/Result/native/Tags.js +41 -0
- package/esm/Result/native/TinyTextIcon.js +18 -0
- package/esm/Result/native/index.js +2 -0
- package/esm/Skeleton/index.native.js +2 -0
- package/esm/Skeleton/native/Skeleton.js +94 -0
- package/esm/Skeleton/native/Skeleton.test.js +78 -0
- package/esm/Skeleton/native/index.js +2 -0
- package/esm/Skeleton/web/Skeleton.test.js +77 -0
- package/esm/Slider/index.native.js +2 -0
- package/esm/Slider/native/Label.js +19 -0
- package/esm/Slider/native/Marker.js +68 -0
- package/esm/Slider/native/Slider.js +156 -0
- package/esm/Slider/native/Slider.test.js +122 -0
- package/esm/Slider/native/Step.js +14 -0
- package/esm/Slider/native/Tooltip.js +90 -0
- package/esm/Slider/web/Slider.test.js +86 -0
- package/esm/Snackbar/index.native.js +2 -0
- package/esm/Snackbar/native/Snackbar.js +199 -0
- package/esm/Snackbar/native/Snackbar.test.js +100 -0
- package/esm/Snackbar/native/SnackbarAnimationWrapper.js +124 -0
- package/esm/Snackbar/native/index.js +2 -0
- package/esm/Snackbar/web/Snackbar.test.js +118 -0
- package/esm/Stepper/index.native.js +3 -0
- package/esm/Stepper/native/Dots.js +45 -0
- package/esm/Stepper/native/Line.js +35 -0
- package/esm/Stepper/native/Step.js +19 -0
- package/esm/Stepper/native/Stepper.js +52 -0
- package/esm/Stepper/native/Stepper.test.js +70 -0
- package/esm/Stepper/native/index.js +3 -0
- package/esm/Stepper/web/Stepper.test.js +67 -0
- package/esm/Tag/index.native.js +4 -0
- package/esm/Tag/native/Informative.js +72 -0
- package/esm/Tag/native/Tag.js +75 -0
- package/esm/Tag/native/Tag.test.js +94 -0
- package/esm/Tag/native/index.js +2 -0
- package/esm/Tag/web/Tag.test.js +79 -0
- package/esm/Text/index.native.js +16 -0
- package/esm/Text/native/Text.js +69 -0
- package/esm/Text/native/Text.test.js +149 -0
- package/esm/Text/native/index.js +2 -0
- package/esm/Text/web/Text.test.js +149 -0
- package/esm/TextArea/index.native.js +2 -0
- package/esm/TextArea/native/TextArea.js +59 -0
- package/esm/TextArea/native/TextArea.test.js +11 -0
- package/esm/TextArea/native/index.js +2 -0
- package/esm/TextArea/web/TextArea.test.js +11 -0
- package/esm/Theme/Provider/index.native.js +2 -0
- package/esm/Theme/Provider/native/index.js +2 -0
- package/esm/Theme/Provider/web/FontLoader.test.js +11 -0
- package/esm/Theme/Provider/web/GlobalStyle.test.js +17 -0
- package/esm/Theme/helpers/themeReader/native/native.test.js +53 -0
- package/esm/Theme/helpers/themeReader/web/web.test.js +41 -0
- package/esm/Theme/index.native.js +5 -0
- package/esm/index.native.js +26 -0
- package/esm/shared/index.native.js +2 -0
- package/package.json +2 -2
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
var _excluded = ["value", "disabled"],
|
|
2
|
+
_excluded2 = ["onChange", "small", "selectedValue"];
|
|
3
|
+
|
|
4
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
5
|
+
|
|
6
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
7
|
+
|
|
8
|
+
import React, { useContext, useState } from 'react';
|
|
9
|
+
import styled from 'styled-components';
|
|
10
|
+
import { string, oneOfType, number, bool } from 'prop-types';
|
|
11
|
+
import { TouchableWithoutFeedback } from 'react-native';
|
|
12
|
+
import { hexToRgb } from '@gympass/yoga-common';
|
|
13
|
+
import RadioGroupContext from '../../RadioGroupContext';
|
|
14
|
+
var RadioMark = styled.View(function (_ref) {
|
|
15
|
+
var _ref$theme$yoga = _ref.theme.yoga,
|
|
16
|
+
white = _ref$theme$yoga.colors.white,
|
|
17
|
+
radiogroup = _ref$theme$yoga.components.radiogroup,
|
|
18
|
+
checked = _ref.checked,
|
|
19
|
+
disabled = _ref.disabled,
|
|
20
|
+
pressed = _ref.pressed;
|
|
21
|
+
return "\n justify-content: center;\n align-items: center;\n \n height: " + radiogroup.radio.size + "px;\n width: " + radiogroup.radio.size + "px;\n\n background-color: " + (pressed ? hexToRgb(radiogroup.hover.backgroundColor, 0.75) : white) + ";\n\n border-width: " + radiogroup.radio.size * 0.1 + "px;\n border-style: solid;\n border-color: " + radiogroup.radio.backgroundColor + ";\n border-radius: " + radiogroup.radio.border.radius + "px;\n\n " + (checked ? "\n border-color: " + radiogroup.checked.backgroundColor + ";\n background-color: " + (pressed ? hexToRgb(radiogroup.checked.hover.backgroundColor, 0.75) : white) + "\n " : "") + "\n\n " + (disabled ? "\n border-color: " + radiogroup.disabled.backgroundColor + ";\n " : "") + "\n";
|
|
22
|
+
});
|
|
23
|
+
var Dot = styled.View(function (_ref2) {
|
|
24
|
+
var radiogroup = _ref2.theme.yoga.components.radiogroup,
|
|
25
|
+
checked = _ref2.checked,
|
|
26
|
+
disabled = _ref2.disabled;
|
|
27
|
+
return "\n height: " + radiogroup.radio.size * 0.5 + "px;\n width: " + radiogroup.radio.size * 0.5 + "px;\n\n background-color: " + radiogroup.radio.backgroundColor + ";\n border-radius: " + radiogroup.radio.border.radius + "px;\n\n " + (checked ? "\n background-color: " + radiogroup.checked.backgroundColor + ";\n " : "") + "\n\n " + (disabled ? "\n background-color: " + radiogroup.disabled.backgroundColor + ";\n " : "") + "\n";
|
|
28
|
+
});
|
|
29
|
+
var Shadow = styled.View(function (_ref3) {
|
|
30
|
+
var checked = _ref3.checked,
|
|
31
|
+
radiogroup = _ref3.theme.yoga.components.radiogroup;
|
|
32
|
+
return "\n position: absolute;\n height: " + (radiogroup.radio.size + radiogroup.radio.size * 0.4 * 2) + "px;\n width: " + (radiogroup.radio.size + radiogroup.radio.size * 0.4 * 2) + "px;\n\n border-width: " + radiogroup.radio.size * 0.4 + "px;\n border-style: solid;\n border-color: " + (checked ? hexToRgb(radiogroup.checked.hover.backgroundColor, 0.75) : hexToRgb(radiogroup.hover.backgroundColor, 0.75)) + ";\n border-radius: " + radiogroup.radio.border.radius + "px;\n\n opacity: 0.75;\n";
|
|
33
|
+
});
|
|
34
|
+
/** The Radio is a type of selection control that allows the user to select a
|
|
35
|
+
* single option from a list. */
|
|
36
|
+
|
|
37
|
+
var RadioGroupRadio = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
|
|
38
|
+
var value = _ref4.value,
|
|
39
|
+
disabled = _ref4.disabled,
|
|
40
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded);
|
|
41
|
+
|
|
42
|
+
var _useContext = useContext(RadioGroupContext),
|
|
43
|
+
onChange = _useContext.onChange,
|
|
44
|
+
small = _useContext.small,
|
|
45
|
+
selectedValue = _useContext.selectedValue,
|
|
46
|
+
context = _objectWithoutPropertiesLoose(_useContext, _excluded2);
|
|
47
|
+
|
|
48
|
+
var _useState = useState(false),
|
|
49
|
+
pressing = _useState[0],
|
|
50
|
+
togglePressing = _useState[1];
|
|
51
|
+
|
|
52
|
+
var inputValue = value;
|
|
53
|
+
var checked = inputValue === selectedValue;
|
|
54
|
+
return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, _extends({
|
|
55
|
+
onPressIn: function onPressIn() {
|
|
56
|
+
togglePressing(true);
|
|
57
|
+
},
|
|
58
|
+
onPress: function onPress() {
|
|
59
|
+
onChange({
|
|
60
|
+
value: inputValue
|
|
61
|
+
});
|
|
62
|
+
},
|
|
63
|
+
onPressOut: function onPressOut() {
|
|
64
|
+
togglePressing(false);
|
|
65
|
+
},
|
|
66
|
+
disabled: disabled
|
|
67
|
+
}, context), /*#__PURE__*/React.createElement(RadioMark, _extends({
|
|
68
|
+
checked: checked,
|
|
69
|
+
disabled: disabled,
|
|
70
|
+
pressed: pressing,
|
|
71
|
+
ref: ref
|
|
72
|
+
}, rest), checked && /*#__PURE__*/React.createElement(Dot, {
|
|
73
|
+
checked: checked,
|
|
74
|
+
disabled: disabled
|
|
75
|
+
}), pressing && /*#__PURE__*/React.createElement(Shadow, {
|
|
76
|
+
checked: checked
|
|
77
|
+
})));
|
|
78
|
+
});
|
|
79
|
+
RadioGroupRadio.displayName = 'RadioGroup.Radio';
|
|
80
|
+
RadioGroupRadio.propTypes = {
|
|
81
|
+
disabled: bool,
|
|
82
|
+
value: oneOfType([string, number])
|
|
83
|
+
};
|
|
84
|
+
RadioGroupRadio.defaultProps = {
|
|
85
|
+
disabled: false,
|
|
86
|
+
value: ''
|
|
87
|
+
};
|
|
88
|
+
export default RadioGroupRadio;
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render, fireEvent } from '@testing-library/react-native';
|
|
3
|
+
import RadioGroup from '../..';
|
|
4
|
+
import ThemeProvider from '../../../Theme';
|
|
5
|
+
import RadioGroupContext from '../../RadioGroupContext';
|
|
6
|
+
describe('<RadioGroup />', function () {
|
|
7
|
+
describe('<RadioGroup.Radio />', function () {
|
|
8
|
+
describe('Snapshots', function () {
|
|
9
|
+
it('should match snapshot with default radio', function () {
|
|
10
|
+
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Radio, null))),
|
|
11
|
+
container = _render.container,
|
|
12
|
+
toJSON = _render.toJSON;
|
|
13
|
+
|
|
14
|
+
expect(toJSON(container)).toMatchSnapshot();
|
|
15
|
+
});
|
|
16
|
+
it('should match snapshot with disabled radio', function () {
|
|
17
|
+
var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Radio, {
|
|
18
|
+
disabled: true
|
|
19
|
+
}))),
|
|
20
|
+
container = _render2.container,
|
|
21
|
+
toJSON = _render2.toJSON;
|
|
22
|
+
|
|
23
|
+
expect(toJSON(container)).toMatchSnapshot();
|
|
24
|
+
});
|
|
25
|
+
it('should match snapshot with default radio', function () {
|
|
26
|
+
var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Radio, null))),
|
|
27
|
+
container = _render3.container,
|
|
28
|
+
toJSON = _render3.toJSON;
|
|
29
|
+
|
|
30
|
+
expect(toJSON(container)).toMatchSnapshot();
|
|
31
|
+
});
|
|
32
|
+
it('should match snapshot with default radio pressed', function () {
|
|
33
|
+
var onChangeMock = jest.fn();
|
|
34
|
+
|
|
35
|
+
var _render4 = render( /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
|
36
|
+
value: {
|
|
37
|
+
onChange: onChangeMock
|
|
38
|
+
}
|
|
39
|
+
}, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Radio, {
|
|
40
|
+
testID: "radio"
|
|
41
|
+
})))),
|
|
42
|
+
container = _render4.container,
|
|
43
|
+
getByTestId = _render4.getByTestId,
|
|
44
|
+
toJSON = _render4.toJSON;
|
|
45
|
+
|
|
46
|
+
var radio = getByTestId(/^radio/);
|
|
47
|
+
fireEvent.press(radio);
|
|
48
|
+
expect(toJSON(container)).toMatchSnapshot();
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
describe('Props', function () {
|
|
52
|
+
it('checked should be the selectedValue provided from Context', function () {
|
|
53
|
+
var _render5 = render( /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
|
54
|
+
value: {
|
|
55
|
+
selectedValue: 'Radio 2'
|
|
56
|
+
}
|
|
57
|
+
}, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Radio, {
|
|
58
|
+
testID: "radio",
|
|
59
|
+
value: "Radio 1"
|
|
60
|
+
}), /*#__PURE__*/React.createElement(RadioGroup.Radio, {
|
|
61
|
+
testID: "radio",
|
|
62
|
+
value: "Radio 2"
|
|
63
|
+
})))),
|
|
64
|
+
getAllByTestId = _render5.getAllByTestId;
|
|
65
|
+
|
|
66
|
+
var _getAllByTestId = getAllByTestId(/^radio/),
|
|
67
|
+
radio = _getAllByTestId[0],
|
|
68
|
+
radio2 = _getAllByTestId[1];
|
|
69
|
+
|
|
70
|
+
expect(radio.props.checked).toBe(false);
|
|
71
|
+
expect(radio2.props.checked).toBe(true);
|
|
72
|
+
});
|
|
73
|
+
});
|
|
74
|
+
describe('Events', function () {
|
|
75
|
+
it('should call onchange from Context', function () {
|
|
76
|
+
var onChangeMock = jest.fn();
|
|
77
|
+
|
|
78
|
+
var _render6 = render( /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
|
79
|
+
value: {
|
|
80
|
+
onChange: onChangeMock
|
|
81
|
+
}
|
|
82
|
+
}, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Radio, {
|
|
83
|
+
testID: "radio"
|
|
84
|
+
})))),
|
|
85
|
+
getByTestId = _render6.getByTestId;
|
|
86
|
+
|
|
87
|
+
var radio = getByTestId(/^radio/);
|
|
88
|
+
fireEvent.press(radio);
|
|
89
|
+
expect(onChangeMock).toHaveBeenCalled();
|
|
90
|
+
});
|
|
91
|
+
it('value should be as prop value', function () {
|
|
92
|
+
var onChangeMock = jest.fn();
|
|
93
|
+
|
|
94
|
+
var _render7 = render( /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
|
95
|
+
value: {
|
|
96
|
+
onChange: onChangeMock
|
|
97
|
+
}
|
|
98
|
+
}, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Radio, {
|
|
99
|
+
value: "radio1",
|
|
100
|
+
testID: "radio"
|
|
101
|
+
})))),
|
|
102
|
+
getByTestId = _render7.getByTestId;
|
|
103
|
+
|
|
104
|
+
var radio = getByTestId(/^radio/);
|
|
105
|
+
fireEvent.press(radio);
|
|
106
|
+
expect(onChangeMock).toHaveBeenCalledWith({
|
|
107
|
+
value: 'radio1'
|
|
108
|
+
});
|
|
109
|
+
});
|
|
110
|
+
});
|
|
111
|
+
});
|
|
112
|
+
});
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
var _excluded = ["onChange", "selectedValue", "small", "children"];
|
|
2
|
+
|
|
3
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
|
+
|
|
5
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
6
|
+
|
|
7
|
+
import React, { useState } from 'react';
|
|
8
|
+
import { View } from 'react-native';
|
|
9
|
+
import { string, func, oneOfType, number, bool, node } from 'prop-types';
|
|
10
|
+
import styled from 'styled-components';
|
|
11
|
+
import RadioGroupContext from '../RadioGroupContext';
|
|
12
|
+
import RadioButton from './Button/RadioButton';
|
|
13
|
+
var Group = styled.View(function () {
|
|
14
|
+
return "\n align-self: center;\n position: relative;\n flex-direction: row;\n ";
|
|
15
|
+
});
|
|
16
|
+
var GrayLine = styled.View(function (_ref) {
|
|
17
|
+
var radiogroup = _ref.theme.yoga.components.radiogroup;
|
|
18
|
+
return "\n position: absolute;\n height: 100%;\n border-radius: " + radiogroup.button.border.radius + "px;\n border-width: " + radiogroup.button.border.width + "px;\n border-color: " + radiogroup.button.border.color + ";\n ";
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
var RadioGroup = function RadioGroup(_ref2) {
|
|
22
|
+
var onChange = _ref2.onChange,
|
|
23
|
+
selectedValue = _ref2.selectedValue,
|
|
24
|
+
small = _ref2.small,
|
|
25
|
+
children = _ref2.children,
|
|
26
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
|
|
27
|
+
|
|
28
|
+
var _useState = useState(0),
|
|
29
|
+
groupSize = _useState[0],
|
|
30
|
+
setGroupSize = _useState[1];
|
|
31
|
+
|
|
32
|
+
var isButton = React.Children.map(children, function (child) {
|
|
33
|
+
return child.type;
|
|
34
|
+
}).every(function (child) {
|
|
35
|
+
return child === RadioButton;
|
|
36
|
+
});
|
|
37
|
+
return /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
|
38
|
+
value: _extends({
|
|
39
|
+
selectedValue: selectedValue,
|
|
40
|
+
onChange: onChange,
|
|
41
|
+
small: small
|
|
42
|
+
}, rest)
|
|
43
|
+
}, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Group, _extends({}, rest, {
|
|
44
|
+
onLayout: function onLayout(_ref3) {
|
|
45
|
+
var width = _ref3.nativeEvent.layout.width;
|
|
46
|
+
return setGroupSize(width);
|
|
47
|
+
}
|
|
48
|
+
}), Boolean(isButton && groupSize) && /*#__PURE__*/React.createElement(GrayLine, {
|
|
49
|
+
style: {
|
|
50
|
+
width: groupSize
|
|
51
|
+
}
|
|
52
|
+
}), children)));
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
RadioGroup.propTypes = {
|
|
56
|
+
onChange: func,
|
|
57
|
+
selectedValue: oneOfType([string, number]),
|
|
58
|
+
small: bool,
|
|
59
|
+
children: node.isRequired
|
|
60
|
+
};
|
|
61
|
+
RadioGroup.defaultProps = {
|
|
62
|
+
onChange: function onChange() {},
|
|
63
|
+
selectedValue: '',
|
|
64
|
+
small: false
|
|
65
|
+
};
|
|
66
|
+
export default RadioGroup;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render, fireEvent } from '@testing-library/react-native';
|
|
3
|
+
import RadioGroup from '..';
|
|
4
|
+
import ThemeProvider from '../../Theme';
|
|
5
|
+
describe('<RadioGroup />', function () {
|
|
6
|
+
describe('Snapshots', function () {
|
|
7
|
+
it('should match snapshot with radio button as children', function () {
|
|
8
|
+
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, null, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 3")))),
|
|
9
|
+
container = _render.container,
|
|
10
|
+
getAllByText = _render.getAllByText,
|
|
11
|
+
toJSON = _render.toJSON;
|
|
12
|
+
|
|
13
|
+
expect(toJSON(container)).toMatchSnapshot();
|
|
14
|
+
expect(getAllByText(/^Option/)).toHaveLength(3);
|
|
15
|
+
});
|
|
16
|
+
it('should match snapshot with small radios', function () {
|
|
17
|
+
var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, {
|
|
18
|
+
small: true
|
|
19
|
+
}, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 3")))),
|
|
20
|
+
container = _render2.container,
|
|
21
|
+
toJSON = _render2.toJSON;
|
|
22
|
+
|
|
23
|
+
expect(toJSON(container)).toMatchSnapshot();
|
|
24
|
+
});
|
|
25
|
+
it('should has setted the selected value', function () {
|
|
26
|
+
var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, {
|
|
27
|
+
selectedValue: "Option 2"
|
|
28
|
+
}, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 3")))),
|
|
29
|
+
toJSON = _render3.toJSON,
|
|
30
|
+
getByText = _render3.getByText;
|
|
31
|
+
|
|
32
|
+
expect(toJSON()).toMatchSnapshot();
|
|
33
|
+
expect(getByText('Option 2').props.checked).toBe(true);
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
|
+
});
|
|
37
|
+
describe('Events', function () {
|
|
38
|
+
it('should set the onchange for its children', function () {
|
|
39
|
+
var onChangeMock = jest.fn();
|
|
40
|
+
|
|
41
|
+
var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, {
|
|
42
|
+
onChange: onChangeMock
|
|
43
|
+
}, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 3")))),
|
|
44
|
+
getByText = _render4.getByText;
|
|
45
|
+
|
|
46
|
+
var firstOption = getByText('Option 1');
|
|
47
|
+
fireEvent.press(firstOption);
|
|
48
|
+
expect(onChangeMock).toHaveBeenCalled();
|
|
49
|
+
});
|
|
50
|
+
});
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
/* eslint-disable no-console */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { render, fireEvent } from '@testing-library/react';
|
|
4
|
+
import RadioGroup from '../..';
|
|
5
|
+
import ThemeProvider from '../../../Theme';
|
|
6
|
+
import RadioGroupContext from '../../RadioGroupContext';
|
|
7
|
+
var originalError = console.error;
|
|
8
|
+
beforeEach(function () {
|
|
9
|
+
console.error = jest.fn();
|
|
10
|
+
});
|
|
11
|
+
afterEach(function () {
|
|
12
|
+
console.error = originalError;
|
|
13
|
+
});
|
|
14
|
+
describe('<RadioGroup />', function () {
|
|
15
|
+
describe('<RadioGroup.Button />', function () {
|
|
16
|
+
describe('Snapshots', function () {
|
|
17
|
+
it('should match snapshot with default radio button', function () {
|
|
18
|
+
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Radio 1"))),
|
|
19
|
+
container = _render.container;
|
|
20
|
+
|
|
21
|
+
expect(container).toMatchSnapshot();
|
|
22
|
+
});
|
|
23
|
+
it('should match snapshot with small radio button', function () {
|
|
24
|
+
var _render2 = render( /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
|
25
|
+
value: {
|
|
26
|
+
small: true
|
|
27
|
+
}
|
|
28
|
+
}, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Radio 1")))),
|
|
29
|
+
container = _render2.container;
|
|
30
|
+
|
|
31
|
+
expect(container).toMatchSnapshot();
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
describe('Props', function () {
|
|
35
|
+
it('should contains input type radio', function () {
|
|
36
|
+
var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Button, {
|
|
37
|
+
"data-testid": "radio"
|
|
38
|
+
}, "Radio 1"))),
|
|
39
|
+
getByTestId = _render3.getByTestId;
|
|
40
|
+
|
|
41
|
+
expect(getByTestId('radio').type).toBe('radio');
|
|
42
|
+
});
|
|
43
|
+
it('value should be as prop value', function () {
|
|
44
|
+
var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Button, {
|
|
45
|
+
"data-testid": "radio",
|
|
46
|
+
value: "radio1"
|
|
47
|
+
}, "Radio 1"))),
|
|
48
|
+
getByTestId = _render4.getByTestId;
|
|
49
|
+
|
|
50
|
+
expect(getByTestId('radio').value).toBe('radio1');
|
|
51
|
+
});
|
|
52
|
+
it('value should be children if prop value is ommited', function () {
|
|
53
|
+
var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Button, {
|
|
54
|
+
"data-testid": "radio"
|
|
55
|
+
}, "Radio 1"))),
|
|
56
|
+
getByTestId = _render5.getByTestId,
|
|
57
|
+
getByText = _render5.getByText;
|
|
58
|
+
|
|
59
|
+
var label = getByText('Radio 1');
|
|
60
|
+
var radio = getByTestId('radio');
|
|
61
|
+
expect(radio.value).toBe(label.textContent);
|
|
62
|
+
});
|
|
63
|
+
it('checked should be the selectedValue provided from Context', function () {
|
|
64
|
+
var _render6 = render( /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
|
65
|
+
value: {
|
|
66
|
+
selectedValue: 'Radio 2'
|
|
67
|
+
}
|
|
68
|
+
}, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Button, {
|
|
69
|
+
"data-testid": "radio"
|
|
70
|
+
}, "Radio 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, {
|
|
71
|
+
"data-testid": "radio"
|
|
72
|
+
}, "Radio 2")))),
|
|
73
|
+
getAllByTestId = _render6.getAllByTestId;
|
|
74
|
+
|
|
75
|
+
var _getAllByTestId = getAllByTestId('radio'),
|
|
76
|
+
radio = _getAllByTestId[0],
|
|
77
|
+
radio2 = _getAllByTestId[1];
|
|
78
|
+
|
|
79
|
+
expect(radio.checked).toBe(false);
|
|
80
|
+
expect(radio2.checked).toBe(true);
|
|
81
|
+
});
|
|
82
|
+
it('name should the one provided by context', function () {
|
|
83
|
+
var name = 'test';
|
|
84
|
+
|
|
85
|
+
var _render7 = render( /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
|
86
|
+
value: {
|
|
87
|
+
name: name
|
|
88
|
+
}
|
|
89
|
+
}, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Button, {
|
|
90
|
+
"data-testid": "radio"
|
|
91
|
+
}, "Radio 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, {
|
|
92
|
+
"data-testid": "radio"
|
|
93
|
+
}, "Radio 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, {
|
|
94
|
+
"data-testid": "radio"
|
|
95
|
+
}, "Radio 3")))),
|
|
96
|
+
getAllByTestId = _render7.getAllByTestId;
|
|
97
|
+
|
|
98
|
+
var radios = getAllByTestId('radio');
|
|
99
|
+
radios.map(function (radio) {
|
|
100
|
+
return expect(radio.name).toBe(name);
|
|
101
|
+
});
|
|
102
|
+
});
|
|
103
|
+
});
|
|
104
|
+
describe('Events', function () {
|
|
105
|
+
it('should call onchange from Context', function () {
|
|
106
|
+
var onChangeMock = jest.fn();
|
|
107
|
+
|
|
108
|
+
var _render8 = render( /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
|
109
|
+
value: {
|
|
110
|
+
onChange: onChangeMock
|
|
111
|
+
}
|
|
112
|
+
}, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Radio 1")))),
|
|
113
|
+
getByText = _render8.getByText;
|
|
114
|
+
|
|
115
|
+
var radio = getByText('Radio 1');
|
|
116
|
+
fireEvent.click(radio);
|
|
117
|
+
expect(onChangeMock).toHaveBeenCalled();
|
|
118
|
+
});
|
|
119
|
+
});
|
|
120
|
+
});
|
|
121
|
+
});
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
/* eslint-disable no-console */
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { render, fireEvent } from '@testing-library/react';
|
|
4
|
+
import RadioGroup from '../..';
|
|
5
|
+
import ThemeProvider from '../../../Theme';
|
|
6
|
+
import RadioGroupContext from '../../RadioGroupContext';
|
|
7
|
+
var originalError = console.error;
|
|
8
|
+
beforeEach(function () {
|
|
9
|
+
console.error = jest.fn();
|
|
10
|
+
});
|
|
11
|
+
afterEach(function () {
|
|
12
|
+
console.error = originalError;
|
|
13
|
+
});
|
|
14
|
+
describe('<RadioGroup />', function () {
|
|
15
|
+
describe('<RadioGroup.Radio />', function () {
|
|
16
|
+
describe('Snapshots', function () {
|
|
17
|
+
it('should match snapshot with default radio', function () {
|
|
18
|
+
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Radio, null))),
|
|
19
|
+
container = _render.container;
|
|
20
|
+
|
|
21
|
+
expect(container).toMatchSnapshot();
|
|
22
|
+
});
|
|
23
|
+
});
|
|
24
|
+
describe('Props', function () {
|
|
25
|
+
it('should contains input type radio', function () {
|
|
26
|
+
var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Radio, {
|
|
27
|
+
"data-testid": "radio"
|
|
28
|
+
}))),
|
|
29
|
+
getByTestId = _render2.getByTestId;
|
|
30
|
+
|
|
31
|
+
expect(getByTestId('radio').type).toBe('radio');
|
|
32
|
+
});
|
|
33
|
+
it('value should be as prop value', function () {
|
|
34
|
+
var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Radio, {
|
|
35
|
+
"data-testid": "radio",
|
|
36
|
+
value: "radio1"
|
|
37
|
+
}))),
|
|
38
|
+
getByTestId = _render3.getByTestId;
|
|
39
|
+
|
|
40
|
+
expect(getByTestId('radio').value).toBe('radio1');
|
|
41
|
+
});
|
|
42
|
+
it('checked should be the selectedValue provided from Context', function () {
|
|
43
|
+
var _render4 = render( /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
|
44
|
+
value: {
|
|
45
|
+
selectedValue: 'Radio 2'
|
|
46
|
+
}
|
|
47
|
+
}, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Radio, {
|
|
48
|
+
"data-testid": "radio",
|
|
49
|
+
value: "Radio 1"
|
|
50
|
+
}), /*#__PURE__*/React.createElement(RadioGroup.Radio, {
|
|
51
|
+
"data-testid": "radio",
|
|
52
|
+
value: "Radio 2"
|
|
53
|
+
})))),
|
|
54
|
+
getAllByTestId = _render4.getAllByTestId;
|
|
55
|
+
|
|
56
|
+
var _getAllByTestId = getAllByTestId('radio'),
|
|
57
|
+
radio = _getAllByTestId[0],
|
|
58
|
+
radio2 = _getAllByTestId[1];
|
|
59
|
+
|
|
60
|
+
expect(radio.checked).toBe(false);
|
|
61
|
+
expect(radio2.checked).toBe(true);
|
|
62
|
+
});
|
|
63
|
+
it('name should be the one provided by context', function () {
|
|
64
|
+
var name = 'test';
|
|
65
|
+
|
|
66
|
+
var _render5 = render( /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
|
67
|
+
value: {
|
|
68
|
+
name: name
|
|
69
|
+
}
|
|
70
|
+
}, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Radio, {
|
|
71
|
+
"data-testid": "radio",
|
|
72
|
+
value: "Radio 1"
|
|
73
|
+
}), /*#__PURE__*/React.createElement(RadioGroup.Radio, {
|
|
74
|
+
"data-testid": "radio",
|
|
75
|
+
value: "Radio 2"
|
|
76
|
+
}), /*#__PURE__*/React.createElement(RadioGroup.Radio, {
|
|
77
|
+
"data-testid": "radio",
|
|
78
|
+
value: "Radio 3"
|
|
79
|
+
})))),
|
|
80
|
+
getAllByTestId = _render5.getAllByTestId;
|
|
81
|
+
|
|
82
|
+
var radios = getAllByTestId('radio');
|
|
83
|
+
radios.map(function (radio) {
|
|
84
|
+
return expect(radio.name).toBe(name);
|
|
85
|
+
});
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
describe('Events', function () {
|
|
89
|
+
it('should call onchange from Context', function () {
|
|
90
|
+
var onChangeMock = jest.fn();
|
|
91
|
+
|
|
92
|
+
var _render6 = render( /*#__PURE__*/React.createElement(RadioGroupContext.Provider, {
|
|
93
|
+
value: {
|
|
94
|
+
onChange: onChangeMock
|
|
95
|
+
}
|
|
96
|
+
}, /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup.Radio, {
|
|
97
|
+
"data-testid": "radio",
|
|
98
|
+
value: "Radio 1"
|
|
99
|
+
})))),
|
|
100
|
+
getByTestId = _render6.getByTestId;
|
|
101
|
+
|
|
102
|
+
var radio = getByTestId('radio');
|
|
103
|
+
fireEvent.click(radio);
|
|
104
|
+
expect(onChangeMock).toHaveBeenCalled();
|
|
105
|
+
});
|
|
106
|
+
});
|
|
107
|
+
});
|
|
108
|
+
});
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render, fireEvent } from '@testing-library/react';
|
|
3
|
+
import RadioGroup from '..';
|
|
4
|
+
import ThemeProvider from '../../Theme';
|
|
5
|
+
describe('<RadioGroup />', function () {
|
|
6
|
+
describe('Snapshots', function () {
|
|
7
|
+
it('should match snapshot with default radiogroup', function () {
|
|
8
|
+
var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, null))),
|
|
9
|
+
container = _render.container;
|
|
10
|
+
|
|
11
|
+
expect(container).toMatchSnapshot();
|
|
12
|
+
});
|
|
13
|
+
it('should match snapshot with full radiogroup', function () {
|
|
14
|
+
var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, {
|
|
15
|
+
full: true
|
|
16
|
+
}))),
|
|
17
|
+
container = _render2.container;
|
|
18
|
+
|
|
19
|
+
expect(container).toMatchSnapshot();
|
|
20
|
+
});
|
|
21
|
+
it('should match snapshot with radios as children', function () {
|
|
22
|
+
var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, null, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 3")))),
|
|
23
|
+
container = _render3.container,
|
|
24
|
+
getAllByText = _render3.getAllByText;
|
|
25
|
+
|
|
26
|
+
expect(container).toMatchSnapshot();
|
|
27
|
+
expect(getAllByText(/^Option/)).toHaveLength(3);
|
|
28
|
+
});
|
|
29
|
+
it('should match snapshot with small radios', function () {
|
|
30
|
+
var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, {
|
|
31
|
+
small: true
|
|
32
|
+
}, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 3")))),
|
|
33
|
+
container = _render4.container;
|
|
34
|
+
|
|
35
|
+
expect(container).toMatchSnapshot();
|
|
36
|
+
});
|
|
37
|
+
it('should has setted the selected value', function () {
|
|
38
|
+
var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, {
|
|
39
|
+
selectedValue: "Option 2"
|
|
40
|
+
}, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 3")))),
|
|
41
|
+
container = _render5.container,
|
|
42
|
+
getByText = _render5.getByText;
|
|
43
|
+
|
|
44
|
+
expect(container).toMatchSnapshot();
|
|
45
|
+
expect(getByText('Option 2').checked).toBe(true);
|
|
46
|
+
});
|
|
47
|
+
it('should set the name for all children', function () {
|
|
48
|
+
var groupName = 'test';
|
|
49
|
+
|
|
50
|
+
var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, {
|
|
51
|
+
name: groupName
|
|
52
|
+
}, /*#__PURE__*/React.createElement(RadioGroup.Button, {
|
|
53
|
+
"data-testid": "Option 1"
|
|
54
|
+
}, "Option 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, {
|
|
55
|
+
"data-testid": "Option 2"
|
|
56
|
+
}, "Option 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, {
|
|
57
|
+
"data-testid": "Option 3"
|
|
58
|
+
}, "Option 3")))),
|
|
59
|
+
container = _render6.container,
|
|
60
|
+
getAllByTestId = _render6.getAllByTestId;
|
|
61
|
+
|
|
62
|
+
expect(container).toMatchSnapshot(); // use testid to get the input[type=radio] instead of label
|
|
63
|
+
|
|
64
|
+
getAllByTestId(/^Option/).map(function (radio) {
|
|
65
|
+
return expect(radio.name).toBe(groupName);
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
});
|
|
69
|
+
});
|
|
70
|
+
describe('Events', function () {
|
|
71
|
+
it('should set the onchange for its children', function () {
|
|
72
|
+
var onChangeMock = jest.fn();
|
|
73
|
+
|
|
74
|
+
var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(RadioGroup, {
|
|
75
|
+
onChange: onChangeMock
|
|
76
|
+
}, /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 1"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 2"), /*#__PURE__*/React.createElement(RadioGroup.Button, null, "Option 3")))),
|
|
77
|
+
getByText = _render7.getByText;
|
|
78
|
+
|
|
79
|
+
var firstOption = getByText('Option 1');
|
|
80
|
+
fireEvent.click(firstOption);
|
|
81
|
+
expect(onChangeMock).toHaveBeenCalled();
|
|
82
|
+
});
|
|
83
|
+
});
|