diff --git a/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js b/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js deleted file mode 100644 index 3daca46bd..000000000 --- a/src/fmg-components/funnel-header/progress-bar/progres-bar.spec.js +++ /dev/null @@ -1,68 +0,0 @@ -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(), - }, -}; diff --git a/src/fmg-components/funnel-header/progress-bar/progress-bar.spec.js b/src/fmg-components/funnel-header/progress-bar/progress-bar.spec.js new file mode 100644 index 000000000..22c24ed4a --- /dev/null +++ b/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(), + }, +}; diff --git a/src/layouts/customer-details/customer-details.spec.js b/src/layouts/customer-details/customer-details.spec.js index c2cae147d..33a379091 100644 --- a/src/layouts/customer-details/customer-details.spec.js +++ b/src/layouts/customer-details/customer-details.spec.js @@ -42,4 +42,4 @@ describe("CustomerDetails.vue", () => { it("Should render the CustomerDetails component", () => { expect(wrapper.exists()).toBe(true); }); -}); \ No newline at end of file +});