Rename unit test, format code.

This commit is contained in:
Bryan Mauger 2025-05-20 15:49:33 -04:00
parent 3c3d8f59f1
commit 7dc04377fe
3 changed files with 69 additions and 69 deletions

View file

@ -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(),
},
};

View file

@ -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(),
},
};

View file

@ -42,4 +42,4 @@ describe("CustomerDetails.vue", () => {
it("Should render the CustomerDetails component", () => {
expect(wrapper.exists()).toBe(true);
});
});
});