External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-01 16:58:46 -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
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> <SplitItem>
<MultiButtonToggle <MultiButtonToggle
buttons={[[YAML_MODE, 'YAML'], [JSON_MODE, 'JSON']]} buttons={[[YAML_MODE, 'YAML'], [JSON_MODE, 'JSON']]}
currentValue={mode} value={mode}
onChange={newMode => { onChange={newMode => {
try { try {
setCurrentValue(getValueAsMode(currentValue, newMode)); 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> <SplitItem>
<MultiButtonToggle <MultiButtonToggle
buttons={[[YAML_MODE, 'YAML'], [JSON_MODE, 'JSON']]} buttons={[[YAML_MODE, 'YAML'], [JSON_MODE, 'JSON']]}
currentValue={mode} value={mode}
onChange={newMode => { onChange={newMode => {
try { try {
const newVal = const newVal =

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

@@ -44,7 +44,7 @@ function VariablesInput(props) {
<SplitItemRight> <SplitItemRight>
<MultiButtonToggle <MultiButtonToggle
buttons={[[YAML_MODE, 'YAML'], [JSON_MODE, 'JSON']]} buttons={[[YAML_MODE, 'YAML'], [JSON_MODE, 'JSON']]}
currentValue={mode} value={mode}
onChange={newMode => { onChange={newMode => {
try { try {
if (mode === JSON_MODE) { 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); font-size: var(--pf-global--FontSize--xs);
`; `;
function MultiButtonToggle({ buttons, currentValue, onChange }) { function MultiButtonToggle({ buttons, value, onChange }) {
const setValue = newValue => { const setValue = newValue => {
if (currentValue !== newValue) { if (value !== newValue) {
onChange(newValue); onChange(newValue);
} }
}; };
return ( return (
<ButtonGroup> <ButtonGroup>
{buttons.map(([value, label]) => ( {buttons &&
<SmallButton buttons.map(([buttonValue, buttonLabel]) => (
key={label} <SmallButton
onClick={() => setValue(value)} key={buttonLabel}
variant={currentValue === value ? 'primary' : 'secondary'} onClick={() => setValue(buttonValue)}
> variant={buttonValue === value ? 'primary' : 'secondary'}
{label} >
</SmallButton> {buttonLabel}
))} </SmallButton>
))}
</ButtonGroup> </ButtonGroup>
); );
} }
@@ -59,7 +60,7 @@ const buttonsPropType = {
MultiButtonToggle.propTypes = { MultiButtonToggle.propTypes = {
buttons: buttonsPropType.isRequired, buttons: buttonsPropType.isRequired,
currentValue: string.isRequired, value: string.isRequired,
onChange: func.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');
});
});