From 0253598e056d1dd8809dad2abc65ac1b3e55dd38 Mon Sep 17 00:00:00 2001
From: Abban Dunne <abban.dunne@wikimedia.de>
Date: Tue, 3 Sep 2024 13:16:52 +0200
Subject: [PATCH] Add validation and error summary to comment form

- Add check for empty comment on submit
- Add new error for when the comment is empty
- Add error type var to display the correct error
- Add tests

Ticket: https://phabricator.wikimedia.org/T367387
---
 .../DonationCommentPopUp.vue                  | 47 ++++++++++++++++++-
 .../components/DonationCommentPopUp.spec.ts   | 46 ++++++++++++++++--
 2 files changed, 86 insertions(+), 7 deletions(-)

diff --git a/src/components/pages/donation_confirmation/DonationCommentPopUp.vue b/src/components/pages/donation_confirmation/DonationCommentPopUp.vue
index 97bcbf9a5..66cbb08dd 100644
--- a/src/components/pages/donation_confirmation/DonationCommentPopUp.vue
+++ b/src/components/pages/donation_confirmation/DonationCommentPopUp.vue
@@ -16,6 +16,7 @@
 		<div v-else>
 			<p>{{ $t( 'donation_comment_popup_explanation' ) }}</p>
 
+			<ScrollTarget target-id="comment-scroll-target"/>
 			<TextField
 				input-type="textarea"
 				v-model="comment"
@@ -23,7 +24,7 @@
 				input-id="comment"
 				placeholder=""
 				:label="$t( 'donation_comment_popup_label' )"
-				:error-message="$t( 'donation_comment_popup_error' )"
+				:error-message="$t( commentError )"
 				:show-error="commentErrored"
 				:autofocus="true"
 			/>
@@ -45,6 +46,18 @@
 				{{ $t( 'donation_comment_popup_is_public' ) }}
 			</CheckboxField>
 
+			<ErrorSummary
+				:is-visible="commentErrored"
+				:items="[
+					{
+						validity: commentErrored ? Validity.INVALID : Validity.VALID,
+						message: $t( commentError ),
+						focusElement: 'comment',
+						scrollElement: 'comment-scroll-target'
+					},
+				]"
+			/>
+
 			<FormSummary :show-border="false">
 				<template #summary-buttons>
 					<FormButton
@@ -67,7 +80,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from 'vue';
+import { computed, inject, onMounted, ref, watch } from 'vue';
 import { trackDynamicForm, trackFormSubmission } from '@src/util/tracking';
 import { addressTypeFromName, AddressTypeModel } from '@src/view_models/AddressTypeModel';
 import { Donation } from '@src/view_models/Donation';
@@ -76,6 +89,14 @@ import FormSummary from '@src/components/shared/FormSummary.vue';
 import TextField from '@src/components/shared/form_fields/TextField.vue';
 import CheckboxField from '@src/components/shared/form_fields/CheckboxField.vue';
 import { CommentResource } from '@src/api/CommentResource';
+import ErrorSummary from '@src/components/shared/validation_summary/ErrorSummary.vue';
+import { Validity } from '@src/view_models/Validity';
+import ScrollTarget from '@src/components/shared/ScrollTarget.vue';
+
+enum CommentErrorTypes {
+	Empty,
+	Server
+}
 
 interface Props {
 	donation: Donation;
@@ -91,6 +112,7 @@ const comment = ref<string>( '' );
 const commentIsPublic = ref<boolean>( false );
 const commentHasPublicAuthorName = ref<boolean>( false );
 const commentErrored = ref<boolean>( false );
+const commentErrorType = ref<CommentErrorTypes>( CommentErrorTypes.Empty );
 const commentHasBeenSubmitted = ref<boolean>( false );
 const serverResponse = ref<string>( '' );
 
@@ -98,6 +120,13 @@ const showPublishAuthor = computed<boolean>( () => addressTypeFromName( props.ad
 
 const postComment = async (): Promise<void> => {
 	trackFormSubmission( commentForm.value );
+
+	if ( comment.value === '' ) {
+		commentErrorType.value = CommentErrorTypes.Empty;
+		commentErrored.value = true;
+		return;
+	}
+
 	try {
 		const message = await commentResource.post( {
 			donationId: props.donation.id,
@@ -111,12 +140,26 @@ const postComment = async (): Promise<void> => {
 		serverResponse.value = message;
 		emit( 'disable-comment-link' );
 	} catch ( e ) {
+		commentErrorType.value = CommentErrorTypes.Server;
 		commentErrored.value = true;
 	}
 };
 
 onMounted( trackDynamicForm );
 
+const commentError = computed<string>( () => {
+	if ( commentErrorType.value === CommentErrorTypes.Empty ) {
+		return 'donation_comment_popup_empty_error';
+	}
+	return 'donation_comment_popup_error';
+} );
+
+watch( comment, ( newComment: string ) => {
+	if ( commentErrored.value && newComment !== '' ) {
+		commentErrored.value = false;
+	}
+} );
+
 </script>
 
 <style lang="scss">
diff --git a/tests/unit/components/DonationCommentPopUp.spec.ts b/tests/unit/components/DonationCommentPopUp.spec.ts
index 05f7282ed..4d4cb3171 100644
--- a/tests/unit/components/DonationCommentPopUp.spec.ts
+++ b/tests/unit/components/DonationCommentPopUp.spec.ts
@@ -1,11 +1,7 @@
 import { mount } from '@vue/test-utils';
 import DonationCommentPopUp from '@src/components/pages/donation_confirmation/DonationCommentPopUp.vue';
 import { AddressTypeModel, addressTypeName } from '@src/view_models/AddressTypeModel';
-import {
-	FakeFailingCommentResource,
-	FakeSucceedingCommentResource,
-	successMessage
-} from '@test/unit/TestDoubles/FakeCommentResource';
+import { FakeFailingCommentResource, FakeSucceedingCommentResource, successMessage } from '@test/unit/TestDoubles/FakeCommentResource';
 
 describe( 'DonationCommentPopUp.vue', () => {
 	function getDefaultConfirmationData( isAnonymous: boolean ): any {
@@ -62,6 +58,44 @@ describe( 'DonationCommentPopUp.vue', () => {
 		expect( wrapper.find( '#withName' ).exists() ).toBeFalsy();
 	} );
 
+	it( 'shows error when comment is empty', async () => {
+		const wrapper = mount( DonationCommentPopUp, {
+			props: getDefaultConfirmationData( true ),
+			global: {
+				provide: {
+					commentResource: new FakeSucceedingCommentResource(),
+				},
+			},
+		} );
+
+		await wrapper.trigger( 'submit' );
+
+		expect( wrapper.find( '#comment-error' ).exists() ).toBeTruthy();
+		expect( wrapper.find( '.error-summary' ).exists() ).toBeTruthy();
+		expect( wrapper.find( '#comment-error' ).text() ).toStrictEqual( 'donation_comment_popup_empty_error' );
+	} );
+
+	it( 'resets error when comment text is entered', async () => {
+		const wrapper = mount( DonationCommentPopUp, {
+			props: getDefaultConfirmationData( true ),
+			global: {
+				provide: {
+					commentResource: new FakeSucceedingCommentResource(),
+				},
+			},
+		} );
+
+		await wrapper.trigger( 'submit' );
+
+		expect( wrapper.find( '#comment-error' ).exists() ).toBeTruthy();
+		expect( wrapper.find( '.error-summary' ).exists() ).toBeTruthy();
+
+		await wrapper.find( '#comment' ).setValue( 'My super great comment' );
+
+		expect( wrapper.find( '#comment-error' ).exists() ).toBeFalsy();
+		expect( wrapper.find( '.error-summary' ).exists() ).toBeFalsy();
+	} );
+
 	it( 'shows error when API response is rejected', async () => {
 		const wrapper = mount( DonationCommentPopUp, {
 			props: getDefaultConfirmationData( true ),
@@ -72,9 +106,11 @@ describe( 'DonationCommentPopUp.vue', () => {
 			},
 		} );
 
+		await wrapper.find( '#comment' ).setValue( 'My super great comment' );
 		await wrapper.trigger( 'submit' );
 
 		expect( wrapper.find( '#comment-error' ).exists() ).toBeTruthy();
+		expect( wrapper.find( '.error-summary' ).exists() ).toBeTruthy();
 		expect( wrapper.find( '#comment-error' ).text() ).toStrictEqual( 'donation_comment_popup_error' );
 	} );