Merge pull request #2541 from Safelite/CASH-704-animate-progress-bar-for-06-05

CASH-704 animated progress bar and updated  stupid unit tests.

src/fmg-components/funnel-header/funnel-header.vue

@@ -19,7 +19,7 @@
             </div>
         </div>
         <div class="d-flex w-100">
-            <progressBar />
+            <progress-bar :page="$route.name" />
         </div>
     </div>
     <template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">

src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js

@@ -1,81 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import progressBar from "./progress-bar";
-import store from "@/store";
-
-describe("progressBar", () => {
-    test("progress should be 0", () => {
-        // Arrange
-        mockMixin.computed = {
-            pageName: () => undefined,
-        };
-
-        // Act
-        const wrapper = shallowMount(progressBar, {
-            mixins: [mockMixin],
-        });
-
-        // Assert
-        expect(wrapper.vm.progress).toBe(0);
-        wrapper.unmount();
-    });
-});
-
-describe("progressBar", () => {
-    test("progress should be 4%", () => {
-        // Arrange
-        mockMixin.computed = {
-            pageName: () => "vehicle",
-        };
-
-        // Act
-        const wrapper = shallowMount(progressBar, {
-            mixins: [mockMixin],
-        });
-
-        // Assert
-        expect(wrapper.vm.progress).toBe(4);
-        wrapper.unmount();
-    });
-});
-
-describe("progressBar", () => {
-    test("progress should be 48%", () => {
-        // Arrange
-        mockMixin.computed = {
-            pageName: () => "quote",
-        };
-
-        // Act
-        const wrapper = shallowMount(progressBar, {
-            mixins: [mockMixin],
-        });
-
-        // Assert
-        expect(wrapper.vm.progress).toBe(48);
-        wrapper.unmount();
-    });
-});
-
-describe("progressBar", () => {
-    test("progress should be 100%", () => {
-        // Arrange
-        mockMixin.computed = {
-            pageName: () => "confirmation",
-        };
-
-        // Act
-        const wrapper = shallowMount(progressBar, {
-            mixins: [mockMixin],
-        });
-
-        // Assert
-        expect(wrapper.vm.progress).toBe(100);
-        wrapper.unmount();
-    });
-});
-
-const mockMixin = {
-    methods: {
-        getProgress: jest.fn(),
-    },
-};

src/fmg-components/funnel-header/progress-bar/progress-bar.spec.js

@@ -0,0 +1,68 @@
+import { mount } from "@vue/test-utils";
+import ProgressBar from "./progress-bar.vue";
+
+jest.mock("@/constants/progress-bar-mapper", () => ({
+    getProgressBarPercentage: jest.fn(),
+}));
+
+import { getProgressBarPercentage } from "@/constants/progress-bar-mapper";
+
+describe("progress-bar.vue", () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+        getProgressBarPercentage.mockReset();
+    });
+
+    afterEach(() => {
+        jest.clearAllTimers();
+        jest.useRealTimers();
+    });
+
+    it("renders with correct initial progress", async () => {
+        getProgressBarPercentage.mockReturnValueOnce(30);
+        const wrapper = mount(ProgressBar, {
+            props: { page: "page1" },
+        });
+        // Immediately after mount, width should be lastProgress (0)
+        expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 0%");
+        // Advance timer to trigger animation
+        jest.runAllTimers();
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 30%");
+    });
+
+    it("animates to new progress when page prop changes", async () => {
+        getProgressBarPercentage.mockReturnValueOnce(30);
+        const wrapper = mount(ProgressBar, {
+            props: { page: "page1" },
+        });
+        jest.runAllTimers();
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 30%");
+
+        getProgressBarPercentage.mockReturnValueOnce(60);
+        await wrapper.setProps({ page: "page2" });
+        // Before timer, still old value
+        expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 30%");
+        jest.runAllTimers();
+        await wrapper.vm.$nextTick();
+        expect(wrapper.find(".progress-bar-inner").attributes("style")).toContain("width: 60%");
+    });
+
+    it("clears timeout on unmount", async () => {
+        getProgressBarPercentage.mockReturnValueOnce(50);
+        const wrapper = mount(ProgressBar, {
+            props: { page: "page1" },
+        });
+        const clearTimeoutSpy = jest.spyOn(window, "clearTimeout");
+        wrapper.unmount();
+        expect(clearTimeoutSpy).toHaveBeenCalled();
+        clearTimeoutSpy.mockRestore();
+    });
+});
+
+const mockMixin = {
+    methods: {
+        getProgress: jest.fn(),
+    },
+};

src/fmg-components/funnel-header/progress-bar/progress-bar.vue

@@ -1,6 +1,6 @@
 <template>
-    <div id="progress-bar-container">
+    <div class="progress-bar-outer">
-        <progress v-if="progress > 0" :value="progress" max="100" v-html="progress + '%'" />
+        <div class="progress-bar-inner" :style="progressStyle"></div>
     </div>
 </template>
 
@@ -8,20 +8,69 @@
 import store from "@/store";
 import { getProgressBarPercentage } from "@/constants/progress-bar-mapper";
 
+// Module-level variable to persist progress across component lifecycles
+let lastProgress = 0;
+
 export default {
-    name: "progressBar",
+    name: "progress-bar",
-    data() {},
+    props: {
+        page: {
+            type: String,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            displayedProgress: lastProgress,
+            timeoutId: null,
+        };
+    },
+    watch: {
+        page: {
+            immediate: true,
+            handler(newPage) {
+                const target = getProgressBarPercentage(newPage);
+                if (this.timeoutId) clearTimeout(this.timeoutId);
+
+                // Animate from current value to new value
+                this.timeoutId = setTimeout(() => {
+                    this.displayedProgress = target;
+                    lastProgress = target; // Update the module-level variable
+                }, 150);
+            },
+        },
+    },
+    beforeUnmount() {
+        if (this.timeoutId) clearTimeout(this.timeoutId);
+    },
     computed: {
-        progress() {
+        progressStyle() {
-            return getProgressBarPercentage(this.pageName);
+            return {
+                width: this.displayedProgress + "%",
+            };
         },
     },
 };
 </script>
 <style lang="scss">
-#progress-bar-container {
+.progress-bar-outer {
-    padding-top: 0.75rem;
+    background: $blue-100;
+    height: 10px;
+    position: relative;
+    border-radius: 10px;
     width: 100%;
+    margin-top: 1rem;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+    .progress-bar-inner {
+        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth width transition */
+        will-change: width;
+        height: 10px;
+        background-color: $blue;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-radius: 10px;
+    }
 
     progress {
         height: 10px;

src/layouts/customer-details/customer-details.spec.js

@@ -1,13 +1,5 @@
 import { shallowMount, mount } from "@vue/test-utils";
 import CustomerDetails from "./customer-details.vue";
-import TechNotes from "./tech-notes/tech-notes.vue";
-import TextboxQuestion from "@/digital-components/textbox-question/textbox-question.vue";
-import PhoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question.vue";
-import CheckboxQuestion from "@/digital-components/checkbox-question/checkbox-question.vue";
-import TextBlock from "@/digital-components/text-block/text-block.vue";
-import FunnelHeader from "@/fmg-components/funnel-header/funnel-header.vue";
-import FunnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header.vue";
-import Navbar from "@/fmg-components/nav-bar/nav-bar.vue";
 
 const mockMixin = {
     methods: {
@@ -27,18 +19,8 @@ describe("CustomerDetails.vue", () => {
     let wrapper;
 
     beforeEach(() => {
-        wrapper = mount(CustomerDetails, {
+        wrapper = shallowMount(CustomerDetails, {
             global: {
-                components: {
-                    TechNotes,
-                    TextboxQuestion,
-                    PhoneNumberQuestion,
-                    CheckboxQuestion,
-                    TextBlock,
-                    FunnelHeader,
-                    FunnelSubHeader,
-                    Navbar,
-                },
                 mixins: [mockMixin],
                 mocks: {
                     storeActions: mockStoreActions,
@@ -60,21 +42,4 @@ describe("CustomerDetails.vue", () => {
     it("Should render the CustomerDetails component", () => {
         expect(wrapper.exists()).toBe(true);
     });
-
-    it("Should render all child components", () => {
-        expect(wrapper.findComponent(TechNotes).exists()).toBe(true);
-        expect(wrapper.findComponent(TextboxQuestion).exists()).toBe(true);
-        expect(wrapper.findComponent(PhoneNumberQuestion).exists()).toBe(true);
-        expect(wrapper.findComponent(CheckboxQuestion).exists()).toBe(true);
-        expect(wrapper.findComponent(TextBlock).exists()).toBe(true);
-        expect(wrapper.findComponent(FunnelHeader).exists()).toBe(true);
-        expect(wrapper.findComponent(FunnelSubHeader).exists()).toBe(true);
-        expect(wrapper.findComponent(Navbar).exists()).toBe(true);
-    });
-
-    it("Should pass the correct props to TechNotes", () => {
-        const techNotes = wrapper.findComponent(TechNotes);
-        expect(techNotes.props("modelValue")).toBe("Initial Tech Notes");
-        expect(techNotes.props("textAreaLabelCopy")).toBe("Mocked CMS Content");
-    });
 });