refactor: split feedback textarea into own component

src/components/FeedbackForm.vue

@@ -5,13 +5,13 @@ import CancelCircleIcon from '@europeana/style/img/icons/cancel_circle.svg'
 import CheckCircleIcon from '@europeana/style/img/icons/check_circle.svg'
 import ExternalLinkIcon from '@europeana/style/img/icons/external-link.svg'
 
+import FeedbackTextarea from './FeedbackTextarea.vue'
+
 const config = inject('config')
 
 const currentStep = ref(1)
 const email = ref('')
-const emailInput = ref(null)
 const feedback = ref('')
-const feedbackTextarea = ref(null)
 const requestSuccess = ref(null)
 const sending = ref(false)
 
@@ -32,19 +32,8 @@ const showSkipButton = computed(() => currentStep.value === 2)
 
 const localePath = (path) => `/en${path}`
 
-const wordLength = (text) => text?.trim()?.match(/\w+/g)?.length || 0
-
 const goToStep = (step) => (currentStep.value = step)
 
-const handleInputFeedback = () => {
-  if (wordLength(feedback.value) < 5) {
-    // TODO: i18n
-    feedbackTextarea.value.setCustomValidity('Your feedback has to consist of 5 words at minimum')
-  } else {
-    feedbackTextarea.value.setCustomValidity('')
-  }
-}
-
 const postFeedbackMessage = () => {
   const postData = {
     feedback: feedback.value,
@@ -99,19 +88,7 @@ const submitForm = async () => {
     <div class="d-flex flex-wrap">
       <div class="form-fields">
         <div v-if="currentStep === 1">
-          <textarea
-            v-model="feedback"
-            id="feedback-widget-feedback-input"
-            class="form-control"
-            ref="feedbackTextarea"
-            autofocus
-            required
-            name="feedback"
-            :placeholder="$t('validFeedback')"
-            rows="5"
-            aria-describedby="input-live-feedback"
-            @input="handleInputFeedback"
-          />
+          <FeedbackTextarea v-model="feedback" />
           <div
             class="b-form-invalid-feedback"
             id="input-live-feedback"
@@ -123,7 +100,6 @@ const submitForm = async () => {
         <div v-if="currentStep === 2" id="step2">
           <input
             v-model="email"
-            ref="emailInput"
             autofocus
             type="email"
             name="email"

src/components/FeedbackTextarea.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ref } from 'vue'
+
+const feedback = defineModel()
+
+const feedbackTextarea = ref(null)
+
+const wordLength = (text) => text?.trim()?.match(/\w+/g)?.length || 0
+
+const handleInputFeedback = () => {
+  if (wordLength(feedback.value) < 5) {
+    // TODO: i18n
+    feedbackTextarea.value.setCustomValidity('Your feedback has to consist of 5 words at minimum')
+  } else {
+    feedbackTextarea.value.setCustomValidity('')
+  }
+}
+</script>
+
+<template>
+  <textarea
+    v-model="feedback"
+    id="feedback-widget-feedback-input"
+    class="form-control"
+    ref="feedbackTextarea"
+    autofocus
+    required
+    name="feedback"
+    :placeholder="$t('validFeedback')"
+    rows="5"
+    aria-describedby="input-live-feedback"
+    @input="handleInputFeedback"
+  />
+</template>

src/components/__tests__/FeedbackButton.spec.js

@@ -3,24 +3,15 @@ import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
 import FeedbackButton from '../FeedbackButton.vue'
 
-const factory = () =>
-  mount(FeedbackButton, {
-    global: {
-      mocks: {
-        $t: (key) => key
-      }
-    }
-  })
-
 describe('FeedbackButton', () => {
   it('is labelled "Feedback"', () => {
-    const wrapper = factory()
+    const wrapper = mount(FeedbackButton)
 
     expect(wrapper.text()).toContain('feedback')
   })
 
   it('shows the feedback icon in a button', () => {
-    const wrapper = factory()
+    const wrapper = mount(FeedbackButton)
 
     const icon = wrapper.find('button svg.icon-ic-feedback')
 

src/components/__tests__/FeedbackTextarea.spec.js

@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import FeedbackTextarea from '../FeedbackTextarea.vue'
+
+describe('FeedbackTextarea', () => {
+  it('validates feedback required', () => {
+    const wrapper = mount(FeedbackTextarea)
+
+    const textarea = wrapper.find('textarea')
+
+    textarea.setValue('')
+    expect(textarea.element.validity.valueMissing).toBe(true)
+
+    textarea.setValue('1')
+    expect(textarea.element.validity.valueMissing).toBe(false)
+  })
+
+  it('validates feedback length on input', () => {
+    const wrapper = mount(FeedbackTextarea)
+
+    const textarea = wrapper.find('textarea')
+
+    textarea.setValue('1 2 3 4')
+    expect(textarea.element.validity.customError).toBe(true)
+
+    textarea.setValue('1 2 3 4 5')
+    expect(textarea.element.validity.customError).toBe(false)
+  })
+})