adds ouiaId and blank target for tooltip

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(

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);

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>

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);