From 4c86386d70886460bf1928c8b7b6f3ade80657d9 Mon Sep 17 00:00:00 2001
From: Felipe Brito <felipebritor@gmail.com>
Date: Mon, 10 Apr 2023 18:07:46 -0300
Subject: [PATCH] feat(text-input): setup helper text props & slot

---
 src/components/CvTextInput/CvTextInput.vue    |  9 ++
 .../CvTextInput/__tests__/CvTextInput.spec.js | 93 +++++++++++++++++++
 2 files changed, 102 insertions(+)

diff --git a/src/components/CvTextInput/CvTextInput.vue b/src/components/CvTextInput/CvTextInput.vue
index 4e8590b80..fb43305f6 100644
--- a/src/components/CvTextInput/CvTextInput.vue
+++ b/src/components/CvTextInput/CvTextInput.vue
@@ -45,6 +45,9 @@
     <div v-if="isWarn" :class="`${carbonPrefix}--form__requirement`">
       <slot name="warn-text">{{ warnText }}</slot>
     </div>
+    <div v-if="isHelper" :class="[`${carbonPrefix}--form__helper-text`]">
+      <slot name="helper-text">{{ helperText }}</slot>
+    </div>
   </div>
 </template>
 
@@ -55,6 +58,7 @@ import { useCvId, props as propsCvId } from '../../use/cvId';
 import { WarningFilled16, WarningAltFilled16 } from '@carbon/icons-vue';
 
 const props = defineProps({
+  helperText: { type: String, default: undefined },
   invalidMessage: { type: String, default: undefined },
   label: String,
   modelValue: String,
@@ -67,6 +71,7 @@ const emit = defineEmits(['update:modelValue']);
 const slots = useSlots();
 const isInvalid = ref(false);
 const isWarn = ref(false);
+const isHelper = ref(false);
 
 function updateMessageFlags() {
   isInvalid.value = !!(
@@ -74,6 +79,10 @@ function updateMessageFlags() {
   );
   isWarn.value =
     !isInvalid.value && !!(props.warnText?.length || slots['warn-text']);
+  isHelper.value =
+    !isInvalid.value &&
+    !isWarn.value &&
+    !!(props.helperText?.length || slots['helper-text']);
 }
 
 onBeforeMount(updateMessageFlags);
diff --git a/src/components/CvTextInput/__tests__/CvTextInput.spec.js b/src/components/CvTextInput/__tests__/CvTextInput.spec.js
index 2c322a1b5..e3300f239 100644
--- a/src/components/CvTextInput/__tests__/CvTextInput.spec.js
+++ b/src/components/CvTextInput/__tests__/CvTextInput.spec.js
@@ -208,4 +208,97 @@ describe('CvTextInput', () => {
       expect(queryByText(dummySlottedWarnMessage)).toBeNull();
     });
   });
+
+  describe('Helper text', () => {
+    it("displays 'helper-text' slot content", () => {
+      const dummySlottedMessage = 'Slotted helper text';
+      const { getByText } = render(CvTextInput, {
+        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(CvTextInput, {
+        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(CvTextInput, {
+        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(CvTextInput, {
+        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 text prop when warn text slot is set', () => {
+      const dummyHelperText = 'Prop helper text';
+      const dummySlottedMessage = 'Slotted warn text';
+      const { getByText, queryByText } = render(CvTextInput, {
+        props: { helperText: dummyHelperText },
+        slots: { 'warn-text': 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(CvTextInput, {
+        slots: {
+          'invalid-message': dummySlottedInvalidMessage,
+          'helper-text': dummySlottedHelperMessage,
+        },
+      });
+
+      const wrapper = getByText(dummySlottedInvalidMessage);
+      expect(wrapper.textContent).toBe(dummySlottedInvalidMessage);
+      expect(queryByText(dummySlottedHelperMessage)).toBeNull();
+    });
+
+    it('does not display helper slot when warn text slot is set', () => {
+      const dummySlottedHelperMessage = 'Slotted helper text';
+      const dummySlottedWarnMessage = 'Slotted warn text';
+      const { getByText, queryByText } = render(CvTextInput, {
+        slots: {
+          'warn-text': dummySlottedWarnMessage,
+          'helper-text': dummySlottedHelperMessage,
+        },
+      });
+
+      const wrapper = getByText(dummySlottedWarnMessage);
+      expect(wrapper.textContent).toBe(dummySlottedWarnMessage);
+      expect(queryByText(dummySlottedHelperMessage)).toBeNull();
+    });
+  });
 });