Merge branch 'upstream-development'

Author: pol-rivero

.eslintrc.yml

@@ -213,6 +213,7 @@ overrides:
   - files: 'app/test/**/*'
     rules:
       '@typescript-eslint/no-non-null-assertion': off
+      react/jsx-no-bind: off
   - files: 'script/**/*'
     rules:
       '@typescript-eslint/no-non-null-assertion': off

.prettierignore

@@ -9,6 +9,8 @@ yarn-error.log
 .idea/
 .eslintcache
 app/coverage
+script/coverage
+playwright-videos
 app/static/common
 app/test/fixtures
 gemoji

app/package.json

@@ -74,6 +74,8 @@
     "winston": "^3.6.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "8.20.1",
+    "@testing-library/react": "12.1.5",
     "electron-devtools-installer": "^4.0.0",
     "webpack-hot-middleware": "^2.10.0"
   }

app/src/ui/diff/syntax-highlighting/index.ts

@@ -17,7 +17,7 @@ import { DiffHunk, DiffLineType, DiffLine } from '../../../models/diff'
 import { getOldPathOrDefault } from '../../../lib/get-old-path'
 
 /** The maximum number of bytes we'll process for highlighting. */
-const MaxHighlightContentLength = 256 * 1024
+const MaxHighlightContentLength = 1024 * 1024
 
 // There is no good way to get the actual length of the old/new contents,
 // since we're directly truncating the git output to up to MaxHighlightContentLength

app/test/globals.mts

@@ -42,6 +42,7 @@ Object.assign(globalThis, {
 
 mock.module('electron', {
   namedExports: {
+    clipboard: { writeText: () => {} },
     shell: {},
     ipcRenderer: { on: mock.fn(x => {}) },
   },

app/test/helpers/ui/electron.ts

@@ -0,0 +1,17 @@
+import { clipboard } from 'electron'
+
+export function captureClipboardWrites() {
+  const writes = new Array<string>()
+  const previousWriteText = clipboard.writeText
+
+  clipboard.writeText = (text: string) => {
+    writes.push(text)
+  }
+
+  return {
+    writes,
+    restore() {
+      clipboard.writeText = previousWriteText
+    },
+  }
+}

app/test/helpers/ui/render.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+
+// This import MUST stay here — it runs side-effects that every UI test needs:
+// polyfilling ResizeObserver, aligning globalThis.Event/CustomEvent with jsdom,
+// and registering an afterEach(cleanup) hook. Tests should never import
+// '@testing-library/react' directly; they should import from this module
+// instead so these side-effects are guaranteed to run first.
+import './setup'
+
+import {
+  fireEvent,
+  render as rtlRender,
+  type RenderOptions,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react'
+
+type UIErrorRenderOptions = Omit<RenderOptions, 'queries'>
+
+/**
+ * Thin wrapper around Testing Library's render.
+ *
+ * This exists so that every test imports from this module rather than directly
+ * from '@testing-library/react'. Importing from here guarantees the './setup'
+ * side-effects (ResizeObserver polyfill, Event/CustomEvent alignment, and
+ * afterEach cleanup) have already executed before any component is rendered.
+ */
+export function render(
+  element: React.ReactElement,
+  options?: UIErrorRenderOptions
+) {
+  return rtlRender(element, options)
+}
+
+export { fireEvent, screen, waitFor, within }

app/test/helpers/ui/setup.ts

@@ -0,0 +1,28 @@
+import { cleanup } from '@testing-library/react'
+import { afterEach } from 'node:test'
+
+class TestResizeObserver {
+  public observe() {}
+
+  public unobserve() {}
+
+  public disconnect() {}
+}
+
+if (globalThis.ResizeObserver === undefined) {
+  Object.assign(globalThis, {
+    ResizeObserver: TestResizeObserver,
+  })
+}
+
+if (
+  typeof window !== 'undefined' &&
+  globalThis.CustomEvent !== window.CustomEvent
+) {
+  Object.assign(globalThis, {
+    CustomEvent: window.CustomEvent,
+    Event: window.Event,
+  })
+}
+
+afterEach(() => cleanup())

app/test/helpers/ui/timers.ts

@@ -0,0 +1,22 @@
+import { mock } from 'node:test'
+import { act } from 'react-dom/test-utils'
+
+type TimerApi = 'Date' | 'setTimeout'
+
+export function enableTestTimers(apis: ReadonlyArray<TimerApi>, now?: number) {
+  mock.timers.enable({ apis: [...apis] })
+
+  if (now !== undefined) {
+    mock.timers.setTime(now)
+  }
+}
+
+export function advanceTimersBy(ms: number) {
+  act(() => {
+    mock.timers.tick(ms)
+  })
+}
+
+export function resetTestTimers() {
+  mock.timers.reset()
+}

app/test/unit/ui/aria-live-container-test.tsx

@@ -0,0 +1,61 @@
+import assert from 'node:assert'
+import { afterEach, beforeEach, describe, it } from 'node:test'
+import * as React from 'react'
+
+import { AriaLiveContainer } from '../../../src/ui/accessibility/aria-live-container'
+import {
+  advanceTimersBy,
+  enableTestTimers,
+  resetTestTimers,
+} from '../../helpers/ui/timers'
+import { render } from '../../helpers/ui/render'
+
+describe('AriaLiveContainer', () => {
+  beforeEach(() => {
+    enableTestTimers(['Date', 'setTimeout'])
+  })
+
+  afterEach(() => {
+    resetTestTimers()
+  })
+
+  it('renders a polite live region with the provided id and message', () => {
+    const view = render(
+      <AriaLiveContainer id="branch-status" message="3 branches found" />
+    )
+
+    const container = view.container.querySelector('#branch-status.sr-only')
+
+    assert.notEqual(container, null)
+    assert.equal(container?.getAttribute('aria-live'), 'polite')
+    assert.equal(container?.getAttribute('aria-atomic'), 'true')
+    assert.equal(container?.textContent, '3 branches found')
+
+    view.rerender(<AriaLiveContainer id="branch-status" message={null} />)
+
+    assert.equal(container?.textContent, '')
+  })
+
+  it('rebuilds the message after tracked user input changes', () => {
+    const view = render(
+      <AriaLiveContainer message="1 result" trackedUserInput="m" />
+    )
+
+    const container = view.container.querySelector('.sr-only')
+
+    // Initial render toggles suffix from '' → '\u00A0\u00A0'
+    assert.equal(container?.textContent, '1 result\u00A0\u00A0')
+
+    view.rerender(
+      <AriaLiveContainer message="1 result" trackedUserInput="ma" />
+    )
+
+    // Debounce hasn't fired yet, so the message is unchanged
+    assert.equal(container?.textContent, '1 result\u00A0\u00A0')
+
+    advanceTimersBy(1001)
+
+    // After debounce, suffix toggles to '\u00A0'
+    assert.equal(container?.textContent, '1 result\u00A0')
+  })
+})