Clear A11y Form on Successful Submit

Integrate new Paragon package to handle clearing of form on successful submit
openedx · Dec 8, 2017 · e355286 · e355286
2 parents 616cd3a + f73eea7
commit e355286
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@edx/studio-frontend",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "The frontend for the Open edX platform",
   "repository": "edx/studio-frontend",
   "scripts": {
@@ -13,7 +13,7 @@
   "license": "AGPL-3.0",
   "dependencies": {
     "@edx/edx-bootstrap": "^0.4.0",
-    "@edx/paragon": "^1.4.5",
+    "@edx/paragon": "^1.4.6",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.5",
     "copy-to-clipboard": "^3.0.8",

diff --git a/src/components/AccessibilityPolicyForm/AccessibilityPolicyForm.test.jsx b/src/components/AccessibilityPolicyForm/AccessibilityPolicyForm.test.jsx
@@ -146,12 +146,16 @@ describe('<AccessibilityPolicyForm />', () => {
       expect(statusAlert.text()).toContain(`We are currently experiencing high volume. Try again later today or send an email message to ${wrapper.props().accessibilityEmail}`);
     });
 
-    it('clears inputs on valid submit', () => {
+    it('clears inputs on successful submit', () => {
       const formSection = wrapper.find('section');
       const emailInput = wrapper.find('input#email');
       const fullNameInput = wrapper.find('input#fullName');
       const messageInput = wrapper.find('textarea#message');
 
+      wrapper.setProps({
+        clearAccessibilityStatus: () => clearStatus(wrapper),
+        submitAccessibilityForm: () => getMockForZendeskSuccess(wrapper),
+      });
       wrapper.setState({
         submitterEmail: formInputs.email,
         submitterFullName: formInputs.fullName,
@@ -166,6 +170,30 @@ describe('<AccessibilityPolicyForm />', () => {
       expect(messageInput.instance().value).toEqual('');
     });
 
+    it('does not clear inputs on failed submit', () => {
+      const formSection = wrapper.find('section');
+      const emailInput = wrapper.find('input#email');
+      const fullNameInput = wrapper.find('input#fullName');
+      const messageInput = wrapper.find('textarea#message');
+
+      wrapper.setProps({
+        clearAccessibilityStatus: () => clearStatus(wrapper),
+        submitAccessibilityForm: () => getMockForZendeskRateLimit(wrapper),
+      });
+      wrapper.setState({
+        submitterEmail: formInputs.email,
+        submitterFullName: formInputs.fullName,
+        submitterMessage: formInputs.message,
+      });
+
+      const submitButton = formSection.find('button');
+      submitButton.simulate('click');
+
+      expect(emailInput.instance().value).toEqual(formInputs.email);
+      expect(fullNameInput.instance().value).toEqual(formInputs.fullName);
+      expect(messageInput.instance().value).toEqual(formInputs.message);
+    });
+
     it('clears accessibilityStatus as expected', () => {
       wrapper.setProps({
         accessibilityStatus: {

diff --git a/src/components/AccessibilityPolicyForm/index.jsx b/src/components/AccessibilityPolicyForm/index.jsx
@@ -38,6 +38,13 @@ export class AccessibilityPolicyForm extends React.Component {
     this.renderStatusAlert = this.renderStatusAlert.bind(this);
   }
 
+  componentWillReceiveProps(nextProps) {
+    const { accessibilityStatus } = nextProps;
+    if (accessibilityStatus.type === accessibilityActions.ACCESSIBILITY_FORM_SUBMIT_SUCCESS) {
+      this.clearInputs();
+    }
+  }
+
   onSubmitClick() {
     this.props.clearAccessibilityStatus();
 
@@ -60,7 +67,6 @@ export class AccessibilityPolicyForm extends React.Component {
     this.statusAlertRef.focus();
 
     if (isValidContent) {
-      this.clearInputs();
       this.props.submitAccessibilityForm(submitterEmail, submitterFullName, submitterMessage);
     }
   }
@@ -182,13 +188,11 @@ export class AccessibilityPolicyForm extends React.Component {
   }
 
   clearInputs() {
-    // TODO: Add this functionality back in once Paragon handles clearing correctly
-    // current Paragon's asInput is overwriting the value field of our inputs
-    // this.setState({ // current this will clear on every valid submit (success/fail) - correct?
-    //   submitterEmail: '',
-    //   submitterFullName: '',
-    //   submitterMessage: '',
-    // });
+    this.setState({
+      submitterEmail: '',
+      submitterFullName: '',
+      submitterMessage: '',
+    });
   }
 
   closeStatusAlert() {