From 8abf3af12b51a3bfd07ac6df2d9feeab5f69aed1 Mon Sep 17 00:00:00 2001
From: Felipe Brito <felipebritor@gmail.com>
Date: Sat, 15 Apr 2023 14:12:35 -0300
Subject: [PATCH] feat(text-area): setup helper text props & slot

---
 src/components/CvTextArea/CvTextArea.vue      |  7 ++
 .../CvTextArea/__tests__/CvTextArea.spec.js   | 65 +++++++++++++++++++
 2 files changed, 72 insertions(+)

diff --git a/src/components/CvTextArea/CvTextArea.vue b/src/components/CvTextArea/CvTextArea.vue
index 608f4eecb..ef30a8018 100644
--- a/src/components/CvTextArea/CvTextArea.vue
+++ b/src/components/CvTextArea/CvTextArea.vue
@@ -33,6 +33,9 @@
     >
       <slot name="invalid-message">{{ invalidMessage }}</slot>
     </div>
+    <div v-if="isHelper" :class="[`${carbonPrefix}--form__helper-text`]">
+      <slot name="helper-text">{{ helperText }}</slot>
+    </div>
   </div>
 </template>
 
@@ -43,6 +46,7 @@ import { carbonPrefix } from '../../global/settings';
 import { useCvId, props as propsCvId } from '../../use/cvId';
 
 const props = defineProps({
+  helperText: { type: String, default: undefined },
   invalidMessage: { type: String, default: undefined },
   label: String,
   modelValue: String,
@@ -56,6 +60,7 @@ const slots = useSlots();
 
 // Data
 const isInvalid = ref(false);
+const isHelper = ref(false);
 
 // Computed
 const errorId = computed(() => `error-${cvId.value}`);
@@ -66,6 +71,8 @@ function checkSlots() {
   isInvalid.value = !!(
     props.invalidMessage?.length || slots['invalid-message']
   );
+  isHelper.value =
+    !isInvalid.value && !!(props.helperText?.length || slots['helper-text']);
 }
 
 // Life Hooks
diff --git a/src/components/CvTextArea/__tests__/CvTextArea.spec.js b/src/components/CvTextArea/__tests__/CvTextArea.spec.js
index c9096bded..7a25b93c3 100644
--- a/src/components/CvTextArea/__tests__/CvTextArea.spec.js
+++ b/src/components/CvTextArea/__tests__/CvTextArea.spec.js
@@ -106,4 +106,69 @@ describe('CvTextArea', () => {
       expect(wrapper.classList.contains('bx--form-requirement')).toBeTruthy();
     });
   });
+
+  describe('Helper text', () => {
+    it("displays 'helper-text' slot content", () => {
+      const dummySlottedMessage = 'Slotted helper text';
+      const { getByText } = render(CvTextArea, {
+        slots: { 'helper-text': dummySlottedMessage },
+      });
+
+      const wrapper = getByText(dummySlottedMessage);
+      expect(wrapper.textContent).toBe(dummySlottedMessage);
+      expect(wrapper.classList.contains('bx--form__helper-text')).toBeTruthy();
+    });
+
+    it("displays 'helper-text' prop", () => {
+      const dummyHelperText = 'Prop helper text';
+      const { getByText } = render(CvTextArea, {
+        props: { helperText: dummyHelperText },
+      });
+
+      const wrapper = getByText(dummyHelperText);
+      expect(wrapper.textContent).toBe(dummyHelperText);
+      expect(wrapper.classList.contains('bx--form__helper-text')).toBeTruthy();
+    });
+
+    it('favors helper text slot when both prop and slot are set', () => {
+      const dummyHelperText = 'Prop helper text';
+      const dummySlottedMessage = 'Slotted helper text';
+      const { getByText } = render(CvTextArea, {
+        props: { helperText: dummyHelperText },
+        slots: { 'helper-text': dummySlottedMessage },
+      });
+
+      const wrapper = getByText(dummySlottedMessage);
+      expect(wrapper.textContent).toBe(dummySlottedMessage);
+      expect(wrapper.classList.contains('bx--form__helper-text')).toBeTruthy();
+    });
+
+    it('does not display helper text prop when invalid message slot is set', () => {
+      const dummyHelperText = 'Prop helper text';
+      const dummySlottedMessage = 'Slotted invalid message';
+      const { getByText, queryByText } = render(CvTextArea, {
+        props: { helperText: dummyHelperText },
+        slots: { 'invalid-message': dummySlottedMessage },
+      });
+
+      const wrapper = getByText(dummySlottedMessage);
+      expect(wrapper.textContent).toBe(dummySlottedMessage);
+      expect(queryByText(dummyHelperText)).toBeNull();
+    });
+
+    it('does not display helper slot when invalid message slot is set', () => {
+      const dummySlottedHelperMessage = 'Slotted helper text';
+      const dummySlottedInvalidMessage = 'Slotted invalid message';
+      const { getByText, queryByText } = render(CvTextArea, {
+        slots: {
+          'invalid-message': dummySlottedInvalidMessage,
+          'helper-text': dummySlottedHelperMessage,
+        },
+      });
+
+      const wrapper = getByText(dummySlottedInvalidMessage);
+      expect(wrapper.textContent).toBe(dummySlottedInvalidMessage);
+      expect(queryByText(dummySlottedHelperMessage)).toBeNull();
+    });
+  });
 });