From 637b540a4df596d59ac32b8583fe2cfabbf669e4 Mon Sep 17 00:00:00 2001
From: "Keith J. Grant" <barkeep@keithjgrant.com>
Date: Wed, 7 Apr 2021 11:08:30 -0700
Subject: [PATCH] fix button selection in VariablesField tests

---
 .../CodeEditor/VariablesField.test.jsx         | 18 ++++++++----------
 .../MultiButtonToggle/MultiButtonToggle.jsx    |  1 +
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx b/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx
index 72326f06cf..92ead2400c 100644
--- a/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx
+++ b/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx
@@ -65,15 +65,14 @@ describe('VariablesField', () => {
         )}
       </Formik>
     );
-    const buttons = wrapper.find('Button');
-    expect(buttons).toHaveLength(2);
+    const jsButton = wrapper.find('Button.toggle-button-javascript');
     await act(async () => {
-      buttons.at(1).simulate('click');
+      jsButton.simulate('click');
     });
     wrapper.update();
-    const buttons2 = wrapper.find('Button');
+    const yamlButton = wrapper.find('Button.toggle-button-yaml');
     await act(async () => {
-      buttons2.at(0).simulate('click');
+      yamlButton.simulate('click');
     });
     wrapper.update();
     expect(wrapper.find('CodeEditor').prop('mode')).toEqual('yaml');
@@ -89,18 +88,17 @@ describe('VariablesField', () => {
         )}
       </Formik>
     );
-    const buttons = wrapper.find('Button');
-    expect(buttons).toHaveLength(2);
+    const jsButton = wrapper.find('Button.toggle-button-javascript');
     await act(async () => {
-      buttons.at(1).simulate('click');
+      jsButton.simulate('click');
     });
     wrapper.update();
     wrapper.find('CodeEditor').invoke('onChange')(
       '{\n  "foo": "bar",\n  "baz": 3\n}'
     );
-    const buttons2 = wrapper.find('Button');
+    const yamlButton = wrapper.find('Button.toggle-button-yaml');
     await act(async () => {
-      buttons2.at(0).simulate('click');
+      yamlButton.simulate('click');
     });
     wrapper.update();
     expect(wrapper.find('CodeEditor').prop('mode')).toEqual('yaml');
diff --git a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx
index efc1cb3d92..8ce9038682 100644
--- a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx
+++ b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx
@@ -25,6 +25,7 @@ function MultiButtonToggle({ buttons, value, onChange }) {
           <SmallButton
             aria-label={buttonLabel}
             key={buttonLabel}
+            className={`toggle-button-${buttonValue}`}
             onClick={() => setValue(buttonValue)}
             variant={buttonValue === value ? 'primary' : 'secondary'}
           >