From 3c7f5962881473736dc6c848c172da483dcdacf9 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Tue, 3 Mar 2020 12:57:12 -0500
Subject: [PATCH] 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 }) {
           <SplitItem>
             <MultiButtonToggle
               buttons={[[YAML_MODE, 'YAML'], [JSON_MODE, 'JSON']]}
-              currentValue={mode}
+              value={mode}
               onChange={newMode => {
                 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 }) {
           <SplitItem>
             <MultiButtonToggle
               buttons={[[YAML_MODE, 'YAML'], [JSON_MODE, 'JSON']]}
-              currentValue={mode}
+              value={mode}
               onChange={newMode => {
                 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) {
         <SplitItemRight>
           <MultiButtonToggle
             buttons={[[YAML_MODE, 'YAML'], [JSON_MODE, 'JSON']]}
-            currentValue={mode}
+            value={mode}
             onChange={newMode => {
               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 (
     <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,
 };
 
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('<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');
+  });
+});