From d6722c21064b7d08bd5467b03aa67cd81b441565 Mon Sep 17 00:00:00 2001 From: Alex Corey Date: Wed, 1 Apr 2020 10:10:33 -0400 Subject: [PATCH] Adds tests for Survey Preview functionality --- .../Template/Survey/SurveyList.test.jsx | 36 +++++ .../Template/Survey/SurveyPreviewModal.jsx | 5 - .../Survey/SurveyPreviewModal.test.jsx | 125 ++++++++++++++++++ 3 files changed, 161 insertions(+), 5 deletions(-) create mode 100644 awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.test.jsx diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyList.test.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyList.test.jsx index acce909fd7..9621886314 100644 --- a/awx/ui_next/src/screens/Template/Survey/SurveyList.test.jsx +++ b/awx/ui_next/src/screens/Template/Survey/SurveyList.test.jsx @@ -88,6 +88,42 @@ describe('', () => { ); expect(deleteSurvey).toHaveBeenCalled(); }); + test('should render Preview button ', async () => { + let wrapper; + + await act(async () => { + wrapper = mountWithContexts(); + }); + + expect(wrapper.find('Button[aria-label="Preview"]').length).toBe(1); + }); + test('Preview button should render Modal', async () => { + let wrapper; + + await act(async () => { + wrapper = mountWithContexts(); + }); + act(() => wrapper.find('Button[aria-label="Preview"]').prop('onClick')()); + wrapper.update(); + + expect(wrapper.find('SurveyPreviewModal').length).toBe(1); + }); + test('Modal close button should close modal', async () => { + let wrapper; + + await act(async () => { + wrapper = mountWithContexts(); + }); + act(() => wrapper.find('Button[aria-label="Preview"]').prop('onClick')()); + wrapper.update(); + + expect(wrapper.find('SurveyPreviewModal').length).toBe(1); + + wrapper.find('Modal').prop('onClose')(); + wrapper.update(); + + expect(wrapper.find('SurveyPreviewModal').length).toBe(0); + }); }); describe('Survey with no questions', () => { diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.jsx index 1ad6246789..3d9919dca9 100644 --- a/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.jsx +++ b/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.jsx @@ -1,12 +1,10 @@ import React from 'react'; import { withI18n } from '@lingui/react'; -import styled from 'styled-components'; import { t } from '@lingui/macro'; import { PasswordField } from '@components/FormField'; import { Formik } from 'formik'; import { - Chip, Form, FormGroup, Modal, @@ -16,9 +14,6 @@ import { SelectVariant, } from '@patternfly/react-core'; -// const Chip = styled(_Chip)` -// margin-right: 5px; -// `; function SurveyPreviewModal({ questions, isPreviewModalOpen, diff --git a/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.test.jsx b/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.test.jsx new file mode 100644 index 0000000000..89dfe57ccb --- /dev/null +++ b/awx/ui_next/src/screens/Template/Survey/SurveyPreviewModal.test.jsx @@ -0,0 +1,125 @@ +import React from 'react'; +import { act } from 'react-dom/test-utils'; +import { waitForElement, mountWithContexts } from '@testUtils/enzymeHelpers'; + +import SurveyPreviewModal from './SurveyPreviewModal'; + +const questions = [ + { + question_name: 'Text Question', + question_description: '', + required: true, + type: 'text', + variable: 'dfgh', + min: 0, + max: 1024, + default: 'Text Question Value', + choices: '', + }, + { + question_name: 'Select Question', + question_description: '', + required: true, + type: 'multiplechoice', + variable: 'sdf', + min: null, + max: null, + default: 'Select Question Value', + choices: 'a\nd\nc', + }, + { + question_name: 'Text Area Question', + question_description: '', + required: true, + type: 'textarea', + variable: 'b', + min: 0, + max: 4096, + default: 'Text Area Question Value', + choices: '', + }, + { + question_name: 'Password Question', + question_description: '', + required: true, + type: 'password', + variable: 'c', + min: 0, + max: 32, + default: '$encrypted$', + choices: '', + }, + { + question_name: 'Multiple select Question', + question_description: '', + required: true, + type: 'multiselect', + variable: 'a', + min: null, + max: null, + default: 'a\nc\nd\nb', + choices: 'a\nc\nd\nb', + }, +]; + +describe('', () => { + let wrapper; + beforeEach(async () => { + await act(async () => { + wrapper = mountWithContexts( + + ); + }); + waitForElement(wrapper, 'Form'); + }); + test('renders successfully', async () => { + expect(wrapper.find('SurveyPreviewModal').length).toBe(1); + }); + + test('Renders proper fields', async () => { + const question1 = wrapper.find('FormGroup[label="Text Question"]'); + const question1Value = wrapper.find('TextInputBase').at(0); + + const question2 = wrapper + .find('FormGroup[label="Select Question"]') + .find('label'); + const question2Value = wrapper.find('Select[aria-label="Multiple Choice"]'); + + const question3 = wrapper + .find('FormGroup[label="Text Area Question"]') + .find('label'); + const question3Value = wrapper.find('TextArea'); + + const question4 = wrapper.find('FormGroup[label="Password Question"]'); + const question4Value = wrapper.find('TextInputBase[type="password"]'); + + const question5 = wrapper + .find('FormGroup[label="Multiple select Question"]') + .find('label'); + const question5Value = wrapper + .find('Select[aria-label="Multi-Select"]') + .find('Chip'); + + expect(question1.text()).toBe('Text Question'); + expect(question1Value.prop('value')).toBe('Text Question Value'); + expect(question1Value.prop('isDisabled')).toBe(true); + + expect(question2.text()).toBe('Select Question'); + expect(question2Value.find('span').text()).toBe('Select Question Value'); + expect(question2Value.prop('isDisabled')).toBe(true); + + expect(question3.text()).toBe('Text Area Question'); + expect(question3Value.prop('value')).toBe('Text Area Question Value'); + expect(question3Value.prop('disabled')).toBe(true); + + expect(question4.text()).toBe('Password Question'); + expect(question4Value.prop('placeholder')).toBe('ENCRYPTED'); + expect(question4Value.prop('isDisabled')).toBe(true); + + expect(question5.text()).toBe('Multiple select Question'); + expect(question5Value.length).toBe(4); + expect( + wrapper.find('Select[aria-label="Multi-Select"]').prop('isDisabled') + ).toBe(true); + }); +});