test(cv-text-input-skeleton): add tests

carbon-design-system · Oct 12, 2023 · 0d1e1b8 · 0d1e1b8
1 parent 1a341b1
commit 0d1e1b8
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/src/components/CvTextInput/CvTextInputSkeleton.vue b/src/components/CvTextInput/CvTextInputSkeleton.vue
@@ -1,8 +1,9 @@
 <template>
   <div :class="[`${carbonPrefix}--form-item`]">
-    <span
+    <label
+      v-if="!hideLabel"
       :class="[`${carbonPrefix}--label`, `${carbonPrefix}--skeleton`]"
-    ></span>
+    ></label>
     <div
       :class="[`${carbonPrefix}--text-input`, `${carbonPrefix}--skeleton`]"
     ></div>
@@ -11,4 +12,6 @@
 
 <script setup>
 import { carbonPrefix } from '../../global/settings';
+
+defineProps({ hideLabel: { type: Boolean, default: false } });
 </script>
diff --git a/src/components/CvTextInput/__tests__/CvTextInput.spec.js b/src/components/CvTextInput/__tests__/CvTextInput.spec.js
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import CvTextInput from '..';
+import { CvTextInput, CvTextInputSkeleton } from '..';
 
 describe('CvTextInput', () => {
   it("renders label when 'label' prop is passed", () => {
@@ -459,3 +459,38 @@ describe('CvTextInput', () => {
     });
   });
 });
+
+describe('CvTextInputSkeleton', () => {
+  it("renders label when 'hideLabel' prop is omitted", async () => {
+    const skeleton = render(CvTextInputSkeleton);
+    const label = skeleton.container.querySelector(
+      'label.bx--label.bx--skeleton'
+    );
+    expect(label).toBeTruthy();
+  });
+  it("renders label when 'hideLabel' prop is false", async () => {
+    const skeleton = render(CvTextInputSkeleton, {
+      props: { hideLabel: false },
+    });
+    const label = skeleton.container.querySelector(
+      'label.bx--label.bx--skeleton'
+    );
+    expect(label).toBeTruthy();
+  });
+  it("does not render label when 'hideLabel' prop is true", async () => {
+    const skeleton = render(CvTextInputSkeleton, {
+      props: { hideLabel: true },
+    });
+    const label = skeleton.container.querySelector(
+      'label.bx--label.bx--skeleton'
+    );
+    expect(label).toBeFalsy();
+  });
+  it('renders div with correct class', async () => {
+    const skeleton = render(CvTextInputSkeleton);
+    const div = skeleton.container.querySelector(
+      'div.bx--text-input.bx--skeleton'
+    );
+    expect(div).toBeTruthy();
+  });
+});