From 6c95368cdf1c85a9af7319bc63ddce299132d546 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Wed, 28 Feb 2024 11:19:15 -0500
Subject: [PATCH] Finalizing

---
 .../cart-dropdown/cart-dropdown.spec.js       | 159 ++++++++++++++++++
 .../cart-dropdown/cart-dropdown.vue           |  66 ++++----
 src/layouts/payment-method/payment-method.vue |   2 +-
 3 files changed, 189 insertions(+), 38 deletions(-)

diff --git a/src/iss-components/cart-dropdown/cart-dropdown.spec.js b/src/iss-components/cart-dropdown/cart-dropdown.spec.js
index e69de29b..e55bdc36 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.spec.js
+++ b/src/iss-components/cart-dropdown/cart-dropdown.spec.js
@@ -0,0 +1,159 @@
+import { shallowMount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
+
+// Supporting Files
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
+import { useMainStore } from '@/store';
+
+function getMountedComponent(mainInitialState = {}, initialData = {}, propsData = {}) {
+    const mountOptions = getMountOptions({
+        router: {
+            navigate: jest.fn()
+        }
+    });
+
+    const testingPinia = createTestingPinia({
+        initialState: {
+            main: mainInitialState
+        }
+    });
+    useMainStore(testingPinia);
+
+    mountOptions.global.plugins = [testingPinia];
+    mountOptions.data = () => (initialData);
+    mountOptions.propsData = propsData;
+
+    const wrapper = shallowMount(cartDropdown, mountOptions);
+    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {});
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}
+
+describe('cart-dropdown component', () => {
+    test('initial data rendered as expected', () => {
+        // Arrange
+        const { wrapper } = getMountedComponent();
+
+        // Assert
+        expect(wrapper.vm.$data).toMatchSnapshot();
+    });
+    describe('displays', () => {
+        test('cart dropdown head', () => {
+            // Arrange
+            const reference = '#cart-dropdown-head';
+            const { wrapper } = getMountedComponent(cartDropdown);
+
+            // Act
+            const head = wrapper.find(reference);
+
+            // Assert
+            expect(head.exists()).toBeTruthy();
+        });
+        test('cart table', () => {
+            // Arrange
+            const reference = '#cart-table';
+            const isExpanded = true;
+            const initialData = { isExpanded };
+            const { wrapper } = getMountedComponent(cartDropdown, {}, initialData);
+
+            // Act
+            const cartTable = wrapper.find(reference);
+
+            // Assert
+            expect(cartTable.exists()).toBeTruthy();
+        });
+    });
+    describe('computed', () => {
+        test.each([
+            [true, true],
+            [false, false],
+            [false, null]
+        ])('isVerified returns %p when isVerified store value is %p', (expected, isVerified) => {
+            // Arrange
+            const storeData = {
+                order: {
+                    payment: {
+                        insuranceCoverage: { isVerified }
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(storeData);
+
+            // Act
+            const result = wrapper.vm.isVerified;
+
+            // Assert
+            expect(result).toBe(expected);
+        });
+        describe('amountDueDisplayed', () => {
+            test('returns verifying coverage text when isVerified false', () => {
+                // Arrange
+                const VERIFYING_COVERAGE = 'Verifying coverage';
+                const storeData = {
+                    order: {
+                        payment: {
+                            insuranceCoverage: {
+                                isVerified: false
+                            }
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(storeData);
+
+                // Act
+                const result = wrapper.vm.amountDueDisplayed;
+
+                // Assert
+                expect(result).toBe(VERIFYING_COVERAGE);
+            });
+            test('returns formatted amount due when isVerified false', () => {
+                // TODO finish when methods done
+            });
+        });
+        describe('amountDue', () => {
+            test('returns 0 when showAsPaid is true', () => {
+                // Arrange
+                const propsData = {
+                    showAsPaid: true
+                };
+                const { wrapper } = getMountedComponent({}, {}, propsData);
+
+                // Act
+                const result = wrapper.vm.amountDue;
+
+                // Assert
+                expect(result).toBe(0);
+            });
+            test('returns sum of subTotal and salesTax when showAsPaid is false', () => {
+                // TODO when subTotal and salesTax are finished
+            });
+        });
+        describe('subTotal', () => {
+            // TODO when method implemented
+        });
+        describe('salesTax', () => {
+            // TODO when method implemented
+        });
+    });
+    describe('method', () => {
+        test.each([
+            ['$0.00', 0],
+            ['$12.00', 12],
+            ['$12.30', 12.3],
+            ['$12.34', 12.34],
+            ['$12.35', 12.345],
+            ['$12.34', 12.344],
+            ['-$1.00', -1]
+        ])('get FormattedAmount returns `%` when amount %', (expected, amount) => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+
+            // Act
+            const result = wrapper.vm.getFormattedAmount(amount);
+
+            // Assert
+            expect(result).toBe(expected);
+        });
+    });
+});
diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue
index d2e2d641..a24f7b69 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.vue
+++ b/src/iss-components/cart-dropdown/cart-dropdown.vue
@@ -1,46 +1,39 @@
 <template>
     <div>
-        <div>
-            <div
-                class="row cart-toggle flex align-items-center pt-4"
-                :class="[isExpanded ? 'expanded' : '']"
-                @click="toggleIsExpanded">
-                <a
-                    aria-label="expand cart details"
-                    href="javascript:void(0)"
-                    class="col d-flex justify-content-between py-0">
-                    <span class="label color-black">{{ amountDueText }}</span>
-                    <span class="label amount-due">{{ getFormattedAmount("", amountDue) }}</span>
-                </a>
-            </div>
-            <div class="cart-table px-4">
-                <p>Cart Table Placeholder</p>
-            </div>
+        <div
+            id="cart-dropdown-head"
+            class="row cart-toggle flex align-items-center pt-4"
+            :class="[isExpanded ? 'expanded' : '']"
+            @click="toggleIsExpanded">
+            <a
+                aria-label="expand cart details"
+                href="javascript:void(0)"
+                class="col d-flex justify-content-between py-0">
+                <span class="label color-black">{{ amountDueLabel }}</span>
+                <span class="label amount-due">{{ amountDueDisplayed }}</span>
+            </a>
+        </div>
+        <div
+            id="cart-table"
+            class="cart-table px-4">
+            <p>Cart Table Placeholder</p>
         </div>
     </div>
-    <!-- Amount Due Closed Accordion view -->
-    <!-- Open Accordion (arrow pointing up) -->
-    <!-- Deductible / Base Services Line -->
-    <!-- VAPS; Note that the definition of x package is not constant -->
-    <!-- Mobile Service Fee -->
-    <!-- Recycling Fee -->
-    <!-- Subtotal -->
-    <!-- Sales Tax -->
-    <!-- Final Amount Due line -->
 </template>
 
 <script>
 import { useMainStore } from '@/store';
 
+const VERIFYING_COVERAGE = 'Verifying coverage';
+
 export default {
     name: 'cart-dropdown',
     components: {},
     props: {
         showAsPaid: Boolean,
-        amountDueText: String
+        amountDueLabel: String
     },
     data() {
-        debugger;
         return {
             isExpanded: false,
             currencyFormatter: new Intl.NumberFormat('en-US', {
@@ -54,18 +47,17 @@ export default {
     },
     computed: {
         isVerified() {
-            const x = useMainStore().payment;
             return useMainStore().payment?.insuranceCoverage?.isVerified ?? false;
         },
+        amountDueDisplayed() {
+            return this.isVerified
+                ? this.getFormattedAmount(this.amountDue)
+                : VERIFYING_COVERAGE;
+        },
         amountDue() {
-            debugger;
-            if (!this.isVerified) {
-                return 'Verifying coverage';
-            }
-            if (this.showAsPaid) {
-                return 0;
-            }
-            return this.subTotal + this.salesTax;
+            return this.showAsPaid
+                ? 0
+                : this.subTotal + this.salesTax;
         },
         subTotal() {
             return 0;
@@ -137,7 +129,7 @@ export default {
         text-decoration: none;
     }
     .label {
-        font-weight: 500;
+        font-weight: $font-weight-bold;
         line-height: 1.625;
     }
 }
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index e263453f..8b03a875 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -21,7 +21,7 @@
                 <hr class="my-0" />
                 <cartDropdown
                     :showAsPaid="false"
-                    :amountDueText="amountDueText" />
+                    :amountDueLabel="amountDueText" />
                 <hr class="mt-0 mb-5" />
                 <div>Pia Alert Placeholder</div>
                 <paymentMethodQuestion