From c441d6cd55f81131e0607f91d31f2f91eadc5c74 Mon Sep 17 00:00:00 2001
From: Alex Corey <alex.swansboro@gmail.com>
Date: Thu, 6 May 2021 11:30:56 -0400
Subject: [PATCH] adds ouiaId and blank target for tooltip

---
 .../Template/Survey/MultipleChoiceField.jsx   |  3 +-
 .../Survey/MultipleChoiceField.test.jsx       | 36 ++++++++++++-------
 .../Template/Survey/SurveyQuestionForm.jsx    |  2 ++
 .../Survey/SurveyQuestionForm.test.jsx        | 36 ++++++++++++-------
 4 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.jsx b/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.jsx
index b3f3a8689a..dff223d7f6 100644
--- a/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.jsx
@@ -69,6 +69,7 @@ function MultipleChoiceField({ label, tooltip }) {
       {formattedChoicesField.value.map(({ choice, isDefault, id }, i) => (
         <InputGroup key={id}>
           <TextInput
+            data-cy={choice ? `${choice}-input` : 'new-choice-input'}
             aria-label={choice || t`new choice`}
             onKeyUp={e => {
               if (
@@ -111,7 +112,7 @@ function MultipleChoiceField({ label, tooltip }) {
           <Button
             variant="control"
             aria-label={t`Click to toggle default value`}
-            ouiaId={choice}
+            ouiaId={choice ? `${choice}-button` : 'new-choice-button'}
             isDisabled={!choice.trim()}
             onClick={() => {
               const newValues = formattedChoicesField.value.map(
diff --git a/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.test.jsx b/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.test.jsx
index 476506f180..e5a2cc50d0 100644
--- a/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.test.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.test.jsx
@@ -27,15 +27,17 @@ describe('<MultipleChoiceField/>', () => {
 
     expect(
       wrapper
-        .find('Button[ouiaId="alex"]')
+        .find('Button[ouiaId="alex-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(true);
-    await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')());
+    await act(() =>
+      wrapper.find('Button[ouiaId="alex-button"]').prop('onClick')()
+    );
     wrapper.update();
     expect(
       wrapper
-        .find('Button[ouiaId="alex"]')
+        .find('Button[ouiaId="alex-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(false);
@@ -59,19 +61,23 @@ describe('<MultipleChoiceField/>', () => {
     );
     wrapper.update();
 
-    await act(() => wrapper.find('Button[ouiaId="spencer"]').prop('onClick')());
+    await act(() =>
+      wrapper.find('Button[ouiaId="spencer-button"]').prop('onClick')()
+    );
     wrapper.update();
     expect(
       wrapper
-        .find('Button[ouiaId="spencer"]')
+        .find('Button[ouiaId="spencer-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(true);
-    await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')());
+    await act(() =>
+      wrapper.find('Button[ouiaId="alex-button"]').prop('onClick')()
+    );
     wrapper.update();
     expect(
       wrapper
-        .find('Button[ouiaId="alex"]')
+        .find('Button[ouiaId="alex-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(true);
@@ -99,15 +105,17 @@ describe('<MultipleChoiceField/>', () => {
 
     expect(
       wrapper
-        .find('Button[ouiaId="alex"]')
+        .find('Button[ouiaId="alex-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(true);
-    await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')());
+    await act(() =>
+      wrapper.find('Button[ouiaId="alex-button"]').prop('onClick')()
+    );
     wrapper.update();
     expect(
       wrapper
-        .find('Button[ouiaId="alex"]')
+        .find('Button[ouiaId="alex-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(false);
@@ -131,18 +139,20 @@ describe('<MultipleChoiceField/>', () => {
     );
     wrapper.update();
 
-    await act(() => wrapper.find('Button[ouiaId="spencer"]').prop('onClick')());
+    await act(() =>
+      wrapper.find('Button[ouiaId="spencer-button"]').prop('onClick')()
+    );
     wrapper.update();
 
     expect(
       wrapper
-        .find('Button[ouiaId="spencer"]')
+        .find('Button[ouiaId="spencer-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(true);
     expect(
       wrapper
-        .find('Button[ouiaId="alex"]')
+        .find('Button[ouiaId="alex-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(false);
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
index d7533590f9..f299041be9 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
@@ -258,6 +258,8 @@ function SurveyQuestionForm({
                       href={`${getDocsBaseUrl(
                         config
                       )}/html/userguide/job_templates.html#surveys`}
+                      target="_blank"
+                      rel="noreferrer"
                     >
                       {t`documentation`}{' '}
                     </a>
diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.test.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.test.jsx
index 3318d4393b..e9a58ed4a1 100644
--- a/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.test.jsx
+++ b/awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.test.jsx
@@ -258,15 +258,17 @@ describe('<SurveyQuestionForm />', () => {
     wrapper.update();
     expect(
       wrapper
-        .find('Button[ouiaId="alex"]')
+        .find('Button[ouiaId="alex-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(false);
-    await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')());
+    await act(() =>
+      wrapper.find('Button[ouiaId="alex-button"]').prop('onClick')()
+    );
     wrapper.update();
     expect(
       wrapper
-        .find('Button[ouiaId="alex"]')
+        .find('Button[ouiaId="alex-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(true);
@@ -292,19 +294,23 @@ describe('<SurveyQuestionForm />', () => {
     expect(wrapper.find('MultipleChoiceField').find('InputGroup').length).toBe(
       2
     );
-    await act(() => wrapper.find('Button[ouiaId="spencer"]').prop('onClick')());
+    await act(() =>
+      wrapper.find('Button[ouiaId="spencer-button"]').prop('onClick')()
+    );
     wrapper.update();
     expect(
       wrapper
-        .find('Button[ouiaId="spencer"]')
+        .find('Button[ouiaId="spencer-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(true);
-    await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')());
+    await act(() =>
+      wrapper.find('Button[ouiaId="alex-button"]').prop('onClick')()
+    );
     wrapper.update();
     expect(
       wrapper
-        .find('Button[ouiaId="alex"]')
+        .find('Button[ouiaId="alex-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(false);
@@ -333,15 +339,17 @@ describe('<SurveyQuestionForm />', () => {
     wrapper.update();
     expect(
       wrapper
-        .find('Button[ouiaId="alex"]')
+        .find('Button[ouiaId="alex-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(false);
-    await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')());
+    await act(() =>
+      wrapper.find('Button[ouiaId="alex-button"]').prop('onClick')()
+    );
     wrapper.update();
     expect(
       wrapper
-        .find('Button[ouiaId="alex"]')
+        .find('Button[ouiaId="alex-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(true);
@@ -367,18 +375,20 @@ describe('<SurveyQuestionForm />', () => {
     expect(wrapper.find('MultipleChoiceField').find('InputGroup').length).toBe(
       2
     );
-    await act(() => wrapper.find('Button[ouiaId="spencer"]').prop('onClick')());
+    await act(() =>
+      wrapper.find('Button[ouiaId="spencer-button"]').prop('onClick')()
+    );
     wrapper.update();
 
     expect(
       wrapper
-        .find('Button[ouiaId="spencer"]')
+        .find('Button[ouiaId="spencer-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(true);
     expect(
       wrapper
-        .find('Button[ouiaId="alex"]')
+        .find('Button[ouiaId="alex-button"]')
         .find('CheckIcon')
         .prop('selected')
     ).toBe(false);