External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-08 09:57:35 -02:30
Code Issues Packages Projects Releases Wiki Activity

adds ouiaId and blank target for tooltip

Browse Source
This commit is contained in:
Alex Corey
2021-05-06 11:30:56 -04:00
parent eebcab610e
commit c441d6cd55
4 changed files with 50 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.jsx
View File

@@ -69,6 +69,7 @@ function MultipleChoiceField({ label, tooltip }) {
{formattedChoicesField.value.map(({ choice, isDefault, id }, i) => ( {formattedChoicesField.value.map(({ choice, isDefault, id }, i) => (
<InputGroup key={id}> <InputGroup key={id}>
<TextInput <TextInput
data-cy={choice ? `${choice}-input` : 'new-choice-input'}
aria-label={choice || t`new choice`} aria-label={choice || t`new choice`}
onKeyUp={e => { onKeyUp={e => {
if ( if (
@@ -111,7 +112,7 @@ function MultipleChoiceField({ label, tooltip }) {
<Button <Button
variant="control" variant="control"
aria-label={t`Click to toggle default value`} aria-label={t`Click to toggle default value`}
ouiaId={choice} ouiaId={choice ? `${choice}-button` : 'new-choice-button'}
isDisabled={!choice.trim()} isDisabled={!choice.trim()}
onClick={() => { onClick={() => {
const newValues = formattedChoicesField.value.map( const newValues = formattedChoicesField.value.map(

36
awx/ui_next/src/screens/Template/Survey/MultipleChoiceField.test.jsx
View File

@@ -27,15 +27,17 @@ describe('<MultipleChoiceField/>', () => {
expect( expect(
wrapper wrapper
.find('Button[ouiaId="alex"]') .find('Button[ouiaId="alex-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(true); ).toBe(true);
await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')()); await act(() =>
wrapper.find('Button[ouiaId="alex-button"]').prop('onClick')()
);
wrapper.update(); wrapper.update();
expect( expect(
wrapper wrapper
.find('Button[ouiaId="alex"]') .find('Button[ouiaId="alex-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(false); ).toBe(false);
@@ -59,19 +61,23 @@ describe('<MultipleChoiceField/>', () => {
); );
wrapper.update(); wrapper.update();
await act(() => wrapper.find('Button[ouiaId="spencer"]').prop('onClick')()); await act(() =>
wrapper.find('Button[ouiaId="spencer-button"]').prop('onClick')()
);
wrapper.update(); wrapper.update();
expect( expect(
wrapper wrapper
.find('Button[ouiaId="spencer"]') .find('Button[ouiaId="spencer-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(true); ).toBe(true);
await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')()); await act(() =>
wrapper.find('Button[ouiaId="alex-button"]').prop('onClick')()
);
wrapper.update(); wrapper.update();
expect( expect(
wrapper wrapper
.find('Button[ouiaId="alex"]') .find('Button[ouiaId="alex-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(true); ).toBe(true);
@@ -99,15 +105,17 @@ describe('<MultipleChoiceField/>', () => {
expect( expect(
wrapper wrapper
.find('Button[ouiaId="alex"]') .find('Button[ouiaId="alex-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(true); ).toBe(true);
await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')()); await act(() =>
wrapper.find('Button[ouiaId="alex-button"]').prop('onClick')()
);
wrapper.update(); wrapper.update();
expect( expect(
wrapper wrapper
.find('Button[ouiaId="alex"]') .find('Button[ouiaId="alex-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(false); ).toBe(false);
@@ -131,18 +139,20 @@ describe('<MultipleChoiceField/>', () => {
); );
wrapper.update(); wrapper.update();
await act(() => wrapper.find('Button[ouiaId="spencer"]').prop('onClick')()); await act(() =>
wrapper.find('Button[ouiaId="spencer-button"]').prop('onClick')()
);
wrapper.update(); wrapper.update();
expect( expect(
wrapper wrapper
.find('Button[ouiaId="spencer"]') .find('Button[ouiaId="spencer-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(true); ).toBe(true);
expect( expect(
wrapper wrapper
.find('Button[ouiaId="alex"]') .find('Button[ouiaId="alex-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(false); ).toBe(false);

2
awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.jsx
View File

@@ -258,6 +258,8 @@ function SurveyQuestionForm({
href={`${getDocsBaseUrl( href={`${getDocsBaseUrl(
config config
)}/html/userguide/job_templates.html#surveys`} )}/html/userguide/job_templates.html#surveys`}
target="_blank"
rel="noreferrer"
> >
{t`documentation`}{' '} {t`documentation`}{' '}
</a> </a>

36
awx/ui_next/src/screens/Template/Survey/SurveyQuestionForm.test.jsx
View File

@@ -258,15 +258,17 @@ describe('<SurveyQuestionForm />', () => {
wrapper.update(); wrapper.update();
expect( expect(
wrapper wrapper
.find('Button[ouiaId="alex"]') .find('Button[ouiaId="alex-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(false); ).toBe(false);
await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')()); await act(() =>
wrapper.find('Button[ouiaId="alex-button"]').prop('onClick')()
);
wrapper.update(); wrapper.update();
expect( expect(
wrapper wrapper
.find('Button[ouiaId="alex"]') .find('Button[ouiaId="alex-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(true); ).toBe(true);
@@ -292,19 +294,23 @@ describe('<SurveyQuestionForm />', () => {
expect(wrapper.find('MultipleChoiceField').find('InputGroup').length).toBe( expect(wrapper.find('MultipleChoiceField').find('InputGroup').length).toBe(
2 2
); );
await act(() => wrapper.find('Button[ouiaId="spencer"]').prop('onClick')()); await act(() =>
wrapper.find('Button[ouiaId="spencer-button"]').prop('onClick')()
);
wrapper.update(); wrapper.update();
expect( expect(
wrapper wrapper
.find('Button[ouiaId="spencer"]') .find('Button[ouiaId="spencer-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(true); ).toBe(true);
await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')()); await act(() =>
wrapper.find('Button[ouiaId="alex-button"]').prop('onClick')()
);
wrapper.update(); wrapper.update();
expect( expect(
wrapper wrapper
.find('Button[ouiaId="alex"]') .find('Button[ouiaId="alex-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(false); ).toBe(false);
@@ -333,15 +339,17 @@ describe('<SurveyQuestionForm />', () => {
wrapper.update(); wrapper.update();
expect( expect(
wrapper wrapper
.find('Button[ouiaId="alex"]') .find('Button[ouiaId="alex-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(false); ).toBe(false);
await act(() => wrapper.find('Button[ouiaId="alex"]').prop('onClick')()); await act(() =>
wrapper.find('Button[ouiaId="alex-button"]').prop('onClick')()
);
wrapper.update(); wrapper.update();
expect( expect(
wrapper wrapper
.find('Button[ouiaId="alex"]') .find('Button[ouiaId="alex-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(true); ).toBe(true);
@@ -367,18 +375,20 @@ describe('<SurveyQuestionForm />', () => {
expect(wrapper.find('MultipleChoiceField').find('InputGroup').length).toBe( expect(wrapper.find('MultipleChoiceField').find('InputGroup').length).toBe(
2 2
); );
await act(() => wrapper.find('Button[ouiaId="spencer"]').prop('onClick')()); await act(() =>
wrapper.find('Button[ouiaId="spencer-button"]').prop('onClick')()
);
wrapper.update(); wrapper.update();
expect( expect(
wrapper wrapper
.find('Button[ouiaId="spencer"]') .find('Button[ouiaId="spencer-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(true); ).toBe(true);
expect( expect(
wrapper wrapper
.find('Button[ouiaId="alex"]') .find('Button[ouiaId="alex-button"]')
.find('CheckIcon') .find('CheckIcon')
.prop('selected') .prop('selected')
).toBe(false); ).toBe(false);