External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-12 10:30:03 -03:30
Code Issues Packages Projects Releases Wiki Activity

Change currentValue prop to simply value. Adds basic unit test coverage to MultiButtonToggle component.

Browse Source
This commit is contained in:
mabashian 2020-03-03 12:57:12 -05:00
parent 1f0acef844
commit 3c7f596288
5 changed files with 47 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx
View File

@ -52,7 +52,7 @@ function VariablesDetail({ value, label, rows }) {
<SplitItem>
<MultiButtonToggle
buttons={[[YAML_MODE, 'YAML'], [JSON_MODE, 'JSON']]}
currentValue={mode}
value={mode}
onChange={newMode => {
try {
setCurrentValue(getValueAsMode(currentValue, newMode));

2
awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
View File

@ -36,7 +36,7 @@ function VariablesField({ i18n, id, name, label, readOnly, promptId }) {
<SplitItem>
<MultiButtonToggle
buttons={[[YAML_MODE, 'YAML'], [JSON_MODE, 'JSON']]}
currentValue={mode}
value={mode}
onChange={newMode => {
try {
const newVal =

2
awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
View File

@ -44,7 +44,7 @@ function VariablesInput(props) {
<SplitItemRight>
<MultiButtonToggle
buttons={[[YAML_MODE, 'YAML'], [JSON_MODE, 'JSON']]}
currentValue={mode}
value={mode}
onChange={newMode => {
try {
if (mode === JSON_MODE) {

25
awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx
View File

@ -9,24 +9,25 @@ const SmallButton = styled(Button)`
font-size: var(--pf-global--FontSize--xs);
`;
function MultiButtonToggle({ buttons, currentValue, onChange }) {
function MultiButtonToggle({ buttons, value, onChange }) {
const setValue = newValue => {
if (currentValue !== newValue) {
if (value !== newValue) {
onChange(newValue);
}
};
return (
<ButtonGroup>
{buttons.map(([value, label]) => (
<SmallButton
key={label}
onClick={() => setValue(value)}
variant={currentValue === value ? 'primary' : 'secondary'}
>
{label}
</SmallButton>
))}
{buttons &&
buttons.map(([buttonValue, buttonLabel]) => (
<SmallButton
key={buttonLabel}
onClick={() => setValue(buttonValue)}
variant={buttonValue === value ? 'primary' : 'secondary'}
>
{buttonLabel}
</SmallButton>
))}
</ButtonGroup>
);
}
@ -59,7 +60,7 @@ const buttonsPropType = {
MultiButtonToggle.propTypes = {
buttons: buttonsPropType.isRequired,
currentValue: string.isRequired,
value: string.isRequired,
onChange: func.isRequired,
};

31
awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.test.jsx Normal file
View File

@ -0,0 +1,31 @@
import React from 'react';
import { mount } from 'enzyme';
import MultiButtonToggle from './MultiButtonToggle';
describe('<MultiButtonToggle />', () => {
let wrapper;
const onChange = jest.fn();
beforeAll(() => {
wrapper = mount(
<MultiButtonToggle
buttons={[['yaml', 'YAML'], ['json', 'JSON']]}
value="yaml"
onChange={onChange}
/>
);
});
afterAll(() => {
wrapper.unmount();
});
it('should render buttons successfully', () => {
const buttons = wrapper.find('Button');
expect(buttons.length).toBe(2);
expect(buttons.at(0).props().variant).toBe('primary');
expect(buttons.at(1).props().variant).toBe('secondary');
});
it('should call onChange function when button clicked', () => {
const buttons = wrapper.find('Button');
buttons.at(1).simulate('click');
expect(onChange).toHaveBeenCalledWith('json');
});
});