diff --git a/apps/desktop/src/composables/__tests__/useDiffScrollSync.spec.ts b/apps/desktop/src/composables/__tests__/useDiffScrollSync.spec.ts new file mode 100644 index 0000000000..ca5cbf1227 --- /dev/null +++ b/apps/desktop/src/composables/__tests__/useDiffScrollSync.spec.ts @@ -0,0 +1,41 @@ +import { ref } from "vue"; +import { describe, expect, it } from "vitest"; +import type { DiffHunk } from "@/components/diff/DiffHunkBuilder"; +import { useDiffScrollSync } from "@/composables/useDiffScrollSync"; + +function createPane(scrollTop: number, scrollLeft: number): HTMLElement { + return { scrollTop, scrollLeft } as HTMLElement; +} + +function createScrollSync(leftPane: HTMLElement, rightPane: HTMLElement) { + return useDiffScrollSync({ + container: ref(), + leftPane: ref(leftPane), + rightPane: ref(rightPane), + hunks: ref([]), + }); +} + +describe("useDiffScrollSync", () => { + it("syncs vertical and horizontal scroll from left to right", () => { + const leftPane = createPane(100, 240); + const rightPane = createPane(0, 0); + const { syncScroll } = createScrollSync(leftPane, rightPane); + + syncScroll("left"); + + expect(rightPane.scrollTop).toBe(100); + expect(rightPane.scrollLeft).toBe(240); + }); + + it("syncs vertical and horizontal scroll from right to left", () => { + const leftPane = createPane(0, 0); + const rightPane = createPane(80, 160); + const { syncScroll } = createScrollSync(leftPane, rightPane); + + syncScroll("right"); + + expect(leftPane.scrollTop).toBe(80); + expect(leftPane.scrollLeft).toBe(160); + }); +}); diff --git a/apps/desktop/src/composables/useDiffScrollSync.ts b/apps/desktop/src/composables/useDiffScrollSync.ts index 48cc79e24b..5a63ab9bb7 100644 --- a/apps/desktop/src/composables/useDiffScrollSync.ts +++ b/apps/desktop/src/composables/useDiffScrollSync.ts @@ -18,6 +18,7 @@ export function useDiffScrollSync({ container, leftPane, rightPane, hunks }: Use if (!source || !target) return; isSyncingScroll.value = true; target.scrollTop = source.scrollTop; + target.scrollLeft = source.scrollLeft; isSyncingScroll.value = false; }