Write deductible box tests

src/layouts/tpa-submit/deductible-box/deductible-box.spec.js

@@ -1,3 +1,70 @@
+import { shallowMount } from '@vue/test-utils';
+import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
+
 describe('deductible-box', () => {
-    test('', () => {});
+    let wrapper;
+    const defaultValue = '1820';
+
+    beforeEach(() => {
+        wrapper = shallowMount(deductibleBox, {
+            propsData: { value: defaultValue }
+        });
+    });
+
+    it('renders the correct deductible value', () => {
+        const valueElement = wrapper.find('#deductibleValue');
+        expect(valueElement.text()).toBe(defaultValue);
+    });
+
+    it('renders the correct deductible label', () => {
+        const labelElement = wrapper.find('#deductibleLabel');
+        expect(labelElement.text()).toBe('Deductible');
+    });
+
+    it('has the correct id', () => {
+        expect(wrapper.attributes().id).toBe('deductibleBox');
+    });
+
+    it('has the correct classes', () => {
+        expect(wrapper.classes().length).toBe(6);
+        expect(wrapper.classes()).toContain('deductible-box');
+        expect(wrapper.classes()).toContain('d-flex');
+        expect(wrapper.classes()).toContain('justify-content-between');
+        expect(wrapper.classes()).toContain('align-items-center');
+        expect(wrapper.classes()).toContain('py-2');
+        expect(wrapper.classes()).toContain('px-5');
+    });
+    it.each([
+        ['', ''],
+        [null, ''],
+        [undefined, '']
+    ])('renders correctly with value "%p"', (value, expected) => {
+        wrapper = shallowMount(deductibleBox, {
+            propsData: { value }
+        });
+        const valueElement = wrapper.find('#deductibleValue');
+        expect(valueElement.text()).toBe(expected);
+    });
+
+    it('renders correctly with a very long value', () => {
+        const longValue = '1'.repeat(1000);
+        wrapper = shallowMount(deductibleBox, {
+            propsData: {
+                value: longValue
+            }
+        });
+        const valueElement = wrapper.find('#deductibleValue');
+        expect(valueElement.text()).toBe(longValue);
+    });
+
+    it('renders correctly with special characters', () => {
+        const specialValue = '!@#$%^&*()';
+        wrapper = shallowMount(deductibleBox, {
+            propsData: {
+                value: specialValue
+            }
+        });
+        const valueElement = wrapper.find('#deductibleValue');
+        expect(valueElement.text()).toBe(specialValue);
+    });
 });

src/layouts/tpa-submit/deductible-box/deductible-box.vue

@@ -1,9 +1,15 @@
 <template>
-    <div class="deductible-box d-flex justify-content-between align-items-center py-2 px-5">
+    <div
-        <p class="deductible-box__text">
+        id="deductibleBox"
+        class="deductible-box d-flex justify-content-between align-items-center py-2 px-5">
+        <p
+            id="deductibleLabel"
+            class="deductible-box__text">
             Deductible
         </p>
-        <p class="deductible-box__text">
+        <p
+            id="deductibleValue"
+            class="deductible-box__text">
             {{ value }}
         </p>
     </div>