Merge pull request #4038 from manavagr1108/disable-continue-button-on-unchecked-terms

Disable checkbox based on policyAccepted

Author: akolson

contentcuration/contentcuration/frontend/shared/views/policies/PoliciesModal.vue

@@ -20,15 +20,13 @@
               data-test="accept-checkbox"
               @change="togglePolicyAccepted"
             />
-            <div class="red--text" :style="{ height: '14pt' }">
-              <span v-if="showError">{{ $tr('checkboxValidationErrorMessage') }}</span>
-            </div>
           </KGridItem>
           <KGridItem :layout="{ span: 1 }">
             <KButton
               :text="$tr('continueButton')"
               :primary="true"
               :style="{ 'display': 'block', 'margin-left': 'auto' }"
+              :disabled="!policyAccepted"
               data-test="continue-button"
               @click="onPolicyAccept"
             />
@@ -87,7 +85,6 @@
     data() {
       return {
         policyAccepted: false,
-        showError: false,
       };
     },
     computed: {
@@ -104,7 +101,6 @@
         this.$emit('close');
       },
       validate() {
-        this.showError = !this.policyAccepted;
         return this.policyAccepted;
       },
       onPolicyAccept() {
@@ -117,7 +113,6 @@
       lastUpdated: 'Last updated {date}',
       closeButton: 'Close',
       continueButton: 'Continue',
-      checkboxValidationErrorMessage: 'Field is required',
       checkboxText: 'I have agreed to the above terms',
     },
   };

contentcuration/contentcuration/frontend/shared/views/policies/__tests__/policiesModal.spec.js

@@ -89,16 +89,10 @@ describe('PoliciesModal', () => {
     });
 
     describe('when accept policy checkbox is not checked', () => {
-      it('clicking continue button should display validation error', () => {
-        wrapper.find('[data-test="continue-button"]').trigger('click');
-
-        expect(wrapper.text()).toContain('Field is required');
-      });
-
-      it("clicking continue button shouldn't emit accept event", () => {
-        wrapper.find('[data-test="continue-button"]').trigger('click');
-
-        expect(wrapper.emitted().accept).toBeFalsy();
+      it('disable continue button', () => {
+        expect(wrapper.find('[data-test="continue-button"]').attributes().disabled).toEqual(
+          'disabled'
+        );
       });
     });