From a997b40852649f67622fa2bfb6527ac9345dee3f Mon Sep 17 00:00:00 2001 From: mabashian Date: Fri, 28 Feb 2020 17:25:31 -0500 Subject: [PATCH 1/3] Refactors YamlJsonToggle component into something a little more generic so that it can be used to toggle between local and utc times in the schedule details view. --- .../CodeMirrorInput/VariablesDetail.jsx | 10 +++- .../CodeMirrorInput/VariablesDetail.test.jsx | 8 +-- .../CodeMirrorInput/VariablesField.jsx | 10 +++- .../CodeMirrorInput/VariablesInput.jsx | 56 ++++++------------- .../CodeMirrorInput/YamlJsonToggle.jsx | 44 --------------- .../ButtonGroup.jsx | 0 awx/ui_next/src/components/Toggle/Toggle.jsx | 52 +++++++++++++++++ awx/ui_next/src/components/Toggle/index.js | 1 + 8 files changed, 89 insertions(+), 92 deletions(-) delete mode 100644 awx/ui_next/src/components/CodeMirrorInput/YamlJsonToggle.jsx rename awx/ui_next/src/components/{CodeMirrorInput => Toggle}/ButtonGroup.jsx (100%) create mode 100644 awx/ui_next/src/components/Toggle/Toggle.jsx create mode 100644 awx/ui_next/src/components/Toggle/index.js diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx index 83533f1168..97634975b4 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx @@ -2,9 +2,9 @@ import React, { useState, useEffect } from 'react'; import { string, node, number } from 'prop-types'; import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core'; import { DetailName, DetailValue } from '@components/DetailList'; +import Toggle from '@components/Toggle'; import { yamlToJson, jsonToYaml, isJson } from '@util/yaml'; import CodeMirrorInput from './CodeMirrorInput'; -import YamlJsonToggle from './YamlJsonToggle'; import { JSON_MODE, YAML_MODE } from './constants'; function getValueAsMode(value, mode) { @@ -50,8 +50,12 @@ function VariablesDetail({ value, label, rows }) { - { try { setCurrentValue(getValueAsMode(currentValue, newMode)); diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx index 05548f8aa8..455b47b04b 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx @@ -31,12 +31,12 @@ describe('', () => { const wrapper = shallow( ); - wrapper.find('YamlJsonToggle').invoke('onChange')('javascript'); + wrapper.find('Toggle').invoke('onChange')('javascript'); const input = wrapper.find('Styled(CodeMirrorInput)'); expect(input.prop('mode')).toEqual('javascript'); expect(input.prop('value')).toEqual('{\n "foo": "bar"\n}'); - wrapper.find('YamlJsonToggle').invoke('onChange')('yaml'); + wrapper.find('Toggle').invoke('onChange')('yaml'); const input2 = wrapper.find('Styled(CodeMirrorInput)'); expect(input2.prop('mode')).toEqual('yaml'); expect(input2.prop('value')).toEqual('foo: bar\n'); @@ -53,7 +53,7 @@ describe('', () => { ); act(() => { - wrapper.find('YamlJsonToggle').invoke('onChange')('javascript'); + wrapper.find('Toggle').invoke('onChange')('javascript'); }); wrapper.setProps({ value: '---bar: baz', @@ -73,7 +73,7 @@ describe('', () => { test('should default empty json to "{}"', () => { const wrapper = mount(); act(() => { - wrapper.find('YamlJsonToggle').invoke('onChange')('javascript'); + wrapper.find('Toggle').invoke('onChange')('javascript'); }); wrapper.setProps({ value: '' }); const input = wrapper.find('Styled(CodeMirrorInput)'); diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx index 336a3fa996..4ea07052ec 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx @@ -6,9 +6,9 @@ import { useField } from 'formik'; import styled from 'styled-components'; import { Split, SplitItem } from '@patternfly/react-core'; import { CheckboxField } from '@components/FormField'; +import Toggle from '@components/Toggle'; import { yamlToJson, jsonToYaml, isJson } from '@util/yaml'; import CodeMirrorInput from './CodeMirrorInput'; -import YamlJsonToggle from './YamlJsonToggle'; import { JSON_MODE, YAML_MODE } from './constants'; const FieldHeader = styled.div` @@ -34,8 +34,12 @@ function VariablesField({ i18n, id, name, label, readOnly, promptId }) { - { try { const newVal = diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx index faddd2bc13..785b05df6c 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx @@ -1,21 +1,16 @@ import React, { useState } from 'react'; import { string, func, bool, number } from 'prop-types'; -import { Button, Split, SplitItem } from '@patternfly/react-core'; +import { Split, SplitItem } from '@patternfly/react-core'; import styled from 'styled-components'; import { yamlToJson, jsonToYaml, isJson } from '@util/yaml'; +import Toggle from '@components/Toggle'; import CodeMirrorInput from './CodeMirrorInput'; -import ButtonGroup from './ButtonGroup'; import { JSON_MODE, YAML_MODE } from './constants'; function formatJson(jsonString) { return JSON.stringify(JSON.parse(jsonString), null, 2); } -const SmallButton = styled(Button)` - padding: 3px 8px; - font-size: var(--pf-global--FontSize--xs); -`; - const SplitItemRight = styled(SplitItem)` margin-bottom: 5px; `; @@ -47,40 +42,25 @@ function VariablesInput(props) { - - { - if (mode === YAML_MODE) { - return; - } - try { - onChange(jsonToYaml(value)); - setMode(YAML_MODE); - } catch (err) { - onError(err.message); - } - }} - variant={mode === YAML_MODE ? 'primary' : 'secondary'} - > - YAML - - { + { + try { if (mode === JSON_MODE) { - return; - } - try { + onChange(jsonToYaml(value)); + } else { onChange(yamlToJson(value)); - setMode(JSON_MODE); - } catch (err) { - onError(err.message); } - }} - variant={mode === JSON_MODE ? 'primary' : 'secondary'} - > - JSON - - + setMode(newMode); + } catch (err) { + onError(err.message); + } + }} + /> { - if (mode !== newMode) { - onChange(newMode); - } - }; - - return ( - - setMode(YAML_MODE)} - variant={mode === YAML_MODE ? 'primary' : 'secondary'} - > - YAML - - setMode(JSON_MODE)} - variant={mode === JSON_MODE ? 'primary' : 'secondary'} - > - JSON - - - ); -} -YamlJsonToggle.propTypes = { - mode: oneOf([YAML_MODE, JSON_MODE]).isRequired, - onChange: func.isRequired, -}; - -export default YamlJsonToggle; diff --git a/awx/ui_next/src/components/CodeMirrorInput/ButtonGroup.jsx b/awx/ui_next/src/components/Toggle/ButtonGroup.jsx similarity index 100% rename from awx/ui_next/src/components/CodeMirrorInput/ButtonGroup.jsx rename to awx/ui_next/src/components/Toggle/ButtonGroup.jsx diff --git a/awx/ui_next/src/components/Toggle/Toggle.jsx b/awx/ui_next/src/components/Toggle/Toggle.jsx new file mode 100644 index 0000000000..db0d796000 --- /dev/null +++ b/awx/ui_next/src/components/Toggle/Toggle.jsx @@ -0,0 +1,52 @@ +import React from 'react'; +import { func, string } from 'prop-types'; +import styled from 'styled-components'; +import { Button } from '@patternfly/react-core'; +import ButtonGroup from './ButtonGroup'; + +const SmallButton = styled(Button)` + padding: 3px 8px; + font-size: var(--pf-global--FontSize--xs); +`; + +function Toggle({ + leftLabel, + leftMode, + rightLabel, + rightMode, + currentMode, + onChange, +}) { + const setValue = newValue => { + if (currentMode !== newValue) { + onChange(newValue); + } + }; + + return ( + + setValue(leftMode)} + variant={currentMode === leftMode ? 'primary' : 'secondary'} + > + {leftLabel} + + setValue(rightMode)} + variant={currentMode === rightMode ? 'primary' : 'secondary'} + > + {rightLabel} + + + ); +} +Toggle.propTypes = { + leftLabel: string.isRequired, + leftMode: string.isRequired, + rightLabel: string.isRequired, + rightMode: string.isRequired, + currentMode: string.isRequired, + onChange: func.isRequired, +}; + +export default Toggle; diff --git a/awx/ui_next/src/components/Toggle/index.js b/awx/ui_next/src/components/Toggle/index.js new file mode 100644 index 0000000000..c2ec545530 --- /dev/null +++ b/awx/ui_next/src/components/Toggle/index.js @@ -0,0 +1 @@ +export { default } from './Toggle'; From 1f0acef844203eac826d6db391a907b9277d986e Mon Sep 17 00:00:00 2001 From: mabashian Date: Mon, 2 Mar 2020 11:22:18 -0500 Subject: [PATCH 2/3] Changes Toggle to MultiButtonToggle in an attempt to differentiate it from an upstream PF component. Altered props to be a bit more concise as well as support more than two buttons. --- .../CodeMirrorInput/VariablesDetail.jsx | 11 ++-- .../CodeMirrorInput/VariablesDetail.test.jsx | 8 +-- .../CodeMirrorInput/VariablesField.jsx | 11 ++-- .../CodeMirrorInput/VariablesInput.jsx | 11 ++-- .../ButtonGroup.jsx | 0 .../MultiButtonToggle/MultiButtonToggle.jsx | 66 +++++++++++++++++++ .../src/components/MultiButtonToggle/index.js | 1 + awx/ui_next/src/components/Toggle/Toggle.jsx | 52 --------------- awx/ui_next/src/components/Toggle/index.js | 1 - 9 files changed, 83 insertions(+), 78 deletions(-) rename awx/ui_next/src/components/{Toggle => MultiButtonToggle}/ButtonGroup.jsx (100%) create mode 100644 awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx create mode 100644 awx/ui_next/src/components/MultiButtonToggle/index.js delete mode 100644 awx/ui_next/src/components/Toggle/Toggle.jsx delete mode 100644 awx/ui_next/src/components/Toggle/index.js diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx index 97634975b4..768b85b14b 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import { string, node, number } from 'prop-types'; import { Split, SplitItem, TextListItemVariants } from '@patternfly/react-core'; import { DetailName, DetailValue } from '@components/DetailList'; -import Toggle from '@components/Toggle'; +import MultiButtonToggle from '@components/MultiButtonToggle'; import { yamlToJson, jsonToYaml, isJson } from '@util/yaml'; import CodeMirrorInput from './CodeMirrorInput'; import { JSON_MODE, YAML_MODE } from './constants'; @@ -50,12 +50,9 @@ function VariablesDetail({ value, label, rows }) { - { try { setCurrentValue(getValueAsMode(currentValue, newMode)); diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx index 455b47b04b..5ffdaeb1e7 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx @@ -31,12 +31,12 @@ describe('', () => { const wrapper = shallow( ); - wrapper.find('Toggle').invoke('onChange')('javascript'); + wrapper.find('MultiButtonToggle').invoke('onChange')('javascript'); const input = wrapper.find('Styled(CodeMirrorInput)'); expect(input.prop('mode')).toEqual('javascript'); expect(input.prop('value')).toEqual('{\n "foo": "bar"\n}'); - wrapper.find('Toggle').invoke('onChange')('yaml'); + wrapper.find('MultiButtonToggle').invoke('onChange')('yaml'); const input2 = wrapper.find('Styled(CodeMirrorInput)'); expect(input2.prop('mode')).toEqual('yaml'); expect(input2.prop('value')).toEqual('foo: bar\n'); @@ -53,7 +53,7 @@ describe('', () => { ); act(() => { - wrapper.find('Toggle').invoke('onChange')('javascript'); + wrapper.find('MultiButtonToggle').invoke('onChange')('javascript'); }); wrapper.setProps({ value: '---bar: baz', @@ -73,7 +73,7 @@ describe('', () => { test('should default empty json to "{}"', () => { const wrapper = mount(); act(() => { - wrapper.find('Toggle').invoke('onChange')('javascript'); + wrapper.find('MultiButtonToggle').invoke('onChange')('javascript'); }); wrapper.setProps({ value: '' }); const input = wrapper.find('Styled(CodeMirrorInput)'); diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx index 4ea07052ec..c231a23db4 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx @@ -6,7 +6,7 @@ import { useField } from 'formik'; import styled from 'styled-components'; import { Split, SplitItem } from '@patternfly/react-core'; import { CheckboxField } from '@components/FormField'; -import Toggle from '@components/Toggle'; +import MultiButtonToggle from '@components/MultiButtonToggle'; import { yamlToJson, jsonToYaml, isJson } from '@util/yaml'; import CodeMirrorInput from './CodeMirrorInput'; import { JSON_MODE, YAML_MODE } from './constants'; @@ -34,12 +34,9 @@ function VariablesField({ i18n, id, name, label, readOnly, promptId }) { - { try { const newVal = diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx index 785b05df6c..2e4560d720 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx @@ -3,7 +3,7 @@ import { string, func, bool, number } from 'prop-types'; import { Split, SplitItem } from '@patternfly/react-core'; import styled from 'styled-components'; import { yamlToJson, jsonToYaml, isJson } from '@util/yaml'; -import Toggle from '@components/Toggle'; +import MultiButtonToggle from '@components/MultiButtonToggle'; import CodeMirrorInput from './CodeMirrorInput'; import { JSON_MODE, YAML_MODE } from './constants'; @@ -42,12 +42,9 @@ function VariablesInput(props) { - { try { if (mode === JSON_MODE) { diff --git a/awx/ui_next/src/components/Toggle/ButtonGroup.jsx b/awx/ui_next/src/components/MultiButtonToggle/ButtonGroup.jsx similarity index 100% rename from awx/ui_next/src/components/Toggle/ButtonGroup.jsx rename to awx/ui_next/src/components/MultiButtonToggle/ButtonGroup.jsx diff --git a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx new file mode 100644 index 0000000000..460313bbca --- /dev/null +++ b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { func, string } from 'prop-types'; +import styled from 'styled-components'; +import { Button } from '@patternfly/react-core'; +import ButtonGroup from './ButtonGroup'; + +const SmallButton = styled(Button)` + padding: 3px 8px; + font-size: var(--pf-global--FontSize--xs); +`; + +function MultiButtonToggle({ buttons, currentValue, onChange }) { + const setValue = newValue => { + if (currentValue !== newValue) { + onChange(newValue); + } + }; + + return ( + + {buttons.map(([value, label]) => ( + setValue(value)} + variant={currentValue === value ? 'primary' : 'secondary'} + > + {label} + + ))} + + ); +} + +const buttonsPropType = { + isRequired: ({ buttons }) => { + if (!buttons) { + return new Error( + `The prop buttons is marked as required in MultiButtonToggle, but its value is '${buttons}'` + ); + } + // We expect this data structure to look like: + // [[value(unrestricted type), label(string)], [value(unrestricted type), label(string)], ...] + if ( + !Array.isArray(buttons) || + buttons.length < 2 || + buttons.reduce( + (prevVal, button) => prevVal || typeof button[1] !== 'string', + false + ) + ) { + return new Error( + `Invalid prop buttons supplied to MultiButtonToggle. Validation failed.` + ); + } + + return null; + }, +}; + +MultiButtonToggle.propTypes = { + buttons: buttonsPropType.isRequired, + currentValue: string.isRequired, + onChange: func.isRequired, +}; + +export default MultiButtonToggle; diff --git a/awx/ui_next/src/components/MultiButtonToggle/index.js b/awx/ui_next/src/components/MultiButtonToggle/index.js new file mode 100644 index 0000000000..9332082446 --- /dev/null +++ b/awx/ui_next/src/components/MultiButtonToggle/index.js @@ -0,0 +1 @@ +export { default } from './MultiButtonToggle'; diff --git a/awx/ui_next/src/components/Toggle/Toggle.jsx b/awx/ui_next/src/components/Toggle/Toggle.jsx deleted file mode 100644 index db0d796000..0000000000 --- a/awx/ui_next/src/components/Toggle/Toggle.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import { func, string } from 'prop-types'; -import styled from 'styled-components'; -import { Button } from '@patternfly/react-core'; -import ButtonGroup from './ButtonGroup'; - -const SmallButton = styled(Button)` - padding: 3px 8px; - font-size: var(--pf-global--FontSize--xs); -`; - -function Toggle({ - leftLabel, - leftMode, - rightLabel, - rightMode, - currentMode, - onChange, -}) { - const setValue = newValue => { - if (currentMode !== newValue) { - onChange(newValue); - } - }; - - return ( - - setValue(leftMode)} - variant={currentMode === leftMode ? 'primary' : 'secondary'} - > - {leftLabel} - - setValue(rightMode)} - variant={currentMode === rightMode ? 'primary' : 'secondary'} - > - {rightLabel} - - - ); -} -Toggle.propTypes = { - leftLabel: string.isRequired, - leftMode: string.isRequired, - rightLabel: string.isRequired, - rightMode: string.isRequired, - currentMode: string.isRequired, - onChange: func.isRequired, -}; - -export default Toggle; diff --git a/awx/ui_next/src/components/Toggle/index.js b/awx/ui_next/src/components/Toggle/index.js deleted file mode 100644 index c2ec545530..0000000000 --- a/awx/ui_next/src/components/Toggle/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Toggle'; From 3c7f5962881473736dc6c848c172da483dcdacf9 Mon Sep 17 00:00:00 2001 From: mabashian Date: Tue, 3 Mar 2020 12:57:12 -0500 Subject: [PATCH 3/3] Change currentValue prop to simply value. Adds basic unit test coverage to MultiButtonToggle component. --- .../CodeMirrorInput/VariablesDetail.jsx | 2 +- .../CodeMirrorInput/VariablesField.jsx | 2 +- .../CodeMirrorInput/VariablesInput.jsx | 2 +- .../MultiButtonToggle/MultiButtonToggle.jsx | 25 ++++++++------- .../MultiButtonToggle.test.jsx | 31 +++++++++++++++++++ 5 files changed, 47 insertions(+), 15 deletions(-) create mode 100644 awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.test.jsx diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx index 768b85b14b..f561a6f74e 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx @@ -52,7 +52,7 @@ function VariablesDetail({ value, label, rows }) { { try { setCurrentValue(getValueAsMode(currentValue, newMode)); diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx index c231a23db4..d27b85d328 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx @@ -36,7 +36,7 @@ function VariablesField({ i18n, id, name, label, readOnly, promptId }) { { try { const newVal = diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx index 2e4560d720..cf7758b53e 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx +++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx @@ -44,7 +44,7 @@ function VariablesInput(props) { { try { if (mode === JSON_MODE) { diff --git a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx index 460313bbca..9c72cfbab3 100644 --- a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx +++ b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx @@ -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 ( - {buttons.map(([value, label]) => ( - setValue(value)} - variant={currentValue === value ? 'primary' : 'secondary'} - > - {label} - - ))} + {buttons && + buttons.map(([buttonValue, buttonLabel]) => ( + setValue(buttonValue)} + variant={buttonValue === value ? 'primary' : 'secondary'} + > + {buttonLabel} + + ))} ); } @@ -59,7 +60,7 @@ const buttonsPropType = { MultiButtonToggle.propTypes = { buttons: buttonsPropType.isRequired, - currentValue: string.isRequired, + value: string.isRequired, onChange: func.isRequired, }; diff --git a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.test.jsx b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.test.jsx new file mode 100644 index 0000000000..15c65e3a29 --- /dev/null +++ b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.test.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import MultiButtonToggle from './MultiButtonToggle'; + +describe('', () => { + let wrapper; + const onChange = jest.fn(); + beforeAll(() => { + wrapper = mount( + + ); + }); + 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'); + }); +});