From e21c61c5c899d37744c4ef064a99b972ee7b6836 Mon Sep 17 00:00:00 2001
From: Le Vivilet <levivilet@pm.me>
Date: Wed, 22 Apr 2026 23:01:40 +0200
Subject: [PATCH] test: add cursor styling tests for renderCss function and
 update CSS variables

---
 .../src/parts/RenderCss/RenderCss.ts          |  4 +++-
 packages/diff-view/test/RenderCss.test.ts     |  3 ++-
 .../diff-view/test/RenderCssCursor.test.ts    | 19 +++++++++++++++++++
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 packages/diff-view/test/RenderCssCursor.test.ts

diff --git a/packages/diff-view/src/parts/RenderCss/RenderCss.ts b/packages/diff-view/src/parts/RenderCss/RenderCss.ts
index 4921d46..5c2a84c 100644
--- a/packages/diff-view/src/parts/RenderCss/RenderCss.ts
+++ b/packages/diff-view/src/parts/RenderCss/RenderCss.ts
@@ -23,6 +23,7 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
   --DiffEditorHeight: ${height}px;
   --EditorRowHeight: ${itemHeight}px;
   --ScrollBarHeight: ${scrollBarHeight}px;
+  --ScrollBarBackgroundImage: ${scrollBarBackgroundImage};
   --ScrollBarThumbTop: ${scrollBarThumbTop}px;
 }
 
@@ -96,6 +97,7 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
 
 .DiffEditorRows {
   contain: strict;
+  cursor: text;
   flex: 1;
   font-family: monospace;
   min-width: 0;
@@ -186,7 +188,7 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
 
 .DiffScrollBar {
   background-color: rgba(128, 128, 128, 0.15);
-  background-image: ${scrollBarBackgroundImage};
+  background-image: var(--ScrollBarBackgroundImage);
   border-radius: 4px;
   height: 100%;
   position: absolute;
diff --git a/packages/diff-view/test/RenderCss.test.ts b/packages/diff-view/test/RenderCss.test.ts
index ae977f1..50a53de 100644
--- a/packages/diff-view/test/RenderCss.test.ts
+++ b/packages/diff-view/test/RenderCss.test.ts
@@ -50,7 +50,8 @@ test.skip('renderCss renders left and right widths as css variables', (): void =
   expect(result[2]).toContain('overflow: auto;')
   expect(result[2]).toContain('.DiffEditorSpacerTop {')
   expect(result[2]).toContain('.DiffScrollBarThumb {')
-  expect(result[2]).toContain('background-image: linear-gradient(to bottom, transparent 0%,')
+  expect(result[2]).toContain('--ScrollBarBackgroundImage: linear-gradient(to bottom, transparent 0%,')
+  expect(result[2]).toContain('background-image: var(--ScrollBarBackgroundImage);')
   expect(result[2]).toContain('rgba(248, 81, 73, 0.72) 0%')
   expect(result[2]).toContain('rgba(46, 160, 67, 0.72)')
 })
diff --git a/packages/diff-view/test/RenderCssCursor.test.ts b/packages/diff-view/test/RenderCssCursor.test.ts
new file mode 100644
index 0000000..58a2112
--- /dev/null
+++ b/packages/diff-view/test/RenderCssCursor.test.ts
@@ -0,0 +1,19 @@
+import { expect, test } from '@jest/globals'
+import { createDefaultState } from '../src/parts/CreateDefaultState/CreateDefaultState.ts'
+import { renderCss } from '../src/parts/RenderCss/RenderCss.ts'
+
+test('renderCss applies a text cursor only to the diff rows surface', (): void => {
+  const oldState = createDefaultState()
+  const newState = {
+    ...oldState,
+    id: 1,
+  }
+
+  const result = renderCss(oldState, newState)
+
+  expect(result[2]).toContain('.DiffEditorRows {')
+  expect(result[2]).toContain('cursor: text;')
+  expect(result[2]).toContain('.DiffEditorGutter {')
+  expect(result[2]).toContain('.SashVertical {')
+  expect(result[2]).toContain('cursor: col-resize;')
+})