test: add cursor styling tests for renderCss function and update CSS variables

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;

packages/diff-view/test/RenderCss.test.ts

@@ -3,7 +3,7 @@
 import { createDefaultState } from '../src/parts/CreateDefaultState/CreateDefaultState.ts'
 import { renderCss } from '../src/parts/RenderCss/RenderCss.ts'
 
 test.skip('renderCss renders left and right widths as css variables', (): void => {
   const oldState = createDefaultState()
   const newState = {
     ...oldState,
@@ -50,12 +50,13 @@
   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)')
 })
 
 test.skip('renderCss renders stacked pane heights for vertical layout', (): void => {
   const oldState = createDefaultState()
   const newState = {
     ...oldState,
@@ -84,7 +85,7 @@
   expect(result[2]).toContain('.SashHorizontal {')
 })
 
 test.skip('renderCss includes inline diff styling hooks', (): void => {
   const oldState = createDefaultState()
   const newState = {
     ...oldState,

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;')
+})