Merge pull request desktop#21872 from desktop/ui-testing-library

UI testing library

Author: sergiou87

.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

@@ -72,6 +72,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/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')
+  })
+})

app/test/unit/ui/banner-surfaces-test.tsx

@@ -0,0 +1,146 @@
+import assert from 'node:assert'
+import { afterEach, beforeEach, describe, it } from 'node:test'
+import * as React from 'react'
+
+import { BranchAlreadyUpToDate } from '../../../src/ui/banners/branch-already-up-to-date-banner'
+import { Banner } from '../../../src/ui/banners/banner'
+import { CherryPickUndone } from '../../../src/ui/banners/cherry-pick-undone'
+import { SuccessBanner } from '../../../src/ui/banners/success-banner'
+import {
+  advanceTimersBy,
+  enableTestTimers,
+  resetTestTimers,
+} from '../../helpers/ui/timers'
+import { fireEvent, render, screen } from '../../helpers/ui/render'
+
+describe('banner surfaces', () => {
+  beforeEach(() => {
+    enableTestTimers(['setTimeout'])
+  })
+
+  afterEach(() => {
+    resetTestTimers()
+  })
+
+  it('focuses the first suitable banner element and auto-dismisses on focus out', () => {
+    let dismissed = 0
+
+    function onDismissed() {
+      dismissed++
+    }
+
+    const view = render(
+      <Banner id="test-banner" timeout={500} onDismissed={onDismissed}>
+        <a href="https://example.com/help">Learn more</a>
+      </Banner>
+    )
+
+    const banner = view.container.querySelector('#test-banner.banner')
+    const link = screen.getByRole('link', { name: 'Learn more' })
+    const dismissButton = screen.getByRole('button', {
+      name: 'Dismiss this message',
+    })
+
+    assert.notEqual(banner, null)
+    assert.ok(dismissButton)
+
+    advanceTimersBy(200)
+
+    assert.equal(document.activeElement, link)
+
+    fireEvent.focusOut(link, { relatedTarget: document.body })
+
+    advanceTimersBy(500)
+
+    assert.equal(dismissed, 1)
+  })
+
+  it('renders success banner content and triggers dismiss plus undo from the undo link', () => {
+    let dismissed = 0
+    let undone = 0
+
+    function onDismissed() {
+      dismissed++
+    }
+
+    function onUndo() {
+      undone++
+    }
+
+    render(
+      <SuccessBanner timeout={750} onDismissed={onDismissed} onUndo={onUndo}>
+        Branch renamed successfully.
+      </SuccessBanner>
+    )
+
+    const undoButton = screen.getByRole('button', { name: 'Undo' })
+
+    assert.ok(screen.getByText('Branch renamed successfully.'))
+    assert.notEqual(document.querySelector('.success-contents'), null)
+    assert.notEqual(document.querySelector('.green-circle .check-icon'), null)
+
+    fireEvent.click(undoButton)
+
+    assert.equal(dismissed, 1)
+    assert.equal(undone, 1)
+  })
+
+  it('renders branch up-to-date banner messages with and without the compared branch', () => {
+    function onDismissed() {}
+
+    const view = render(
+      <BranchAlreadyUpToDate
+        ourBranch="main"
+        theirBranch="origin/main"
+        onDismissed={onDismissed}
+      />
+    )
+
+    assert.ok(screen.getByText('main'))
+    assert.ok(screen.getByText('origin/main'))
+    assert.ok(
+      view.container.textContent?.includes('is already up to date with')
+    )
+
+    view.rerender(
+      <BranchAlreadyUpToDate ourBranch="release" onDismissed={onDismissed} />
+    )
+
+    assert.ok(screen.getByText('release'))
+    assert.ok(view.container.textContent?.includes('is already up to date'))
+  })
+
+  it('renders cherry-pick undone messages with singular and plural commit copy', () => {
+    function onDismissed() {}
+
+    const view = render(
+      <CherryPickUndone
+        countCherryPicked={1}
+        targetBranchName="main"
+        onDismissed={onDismissed}
+      />
+    )
+
+    assert.ok(
+      view.container.textContent?.includes(
+        'Cherry-pick undone. Successfully removed the 1 copied commit from'
+      )
+    )
+    assert.ok(screen.getByText('main'))
+
+    view.rerender(
+      <CherryPickUndone
+        countCherryPicked={3}
+        targetBranchName="release"
+        onDismissed={onDismissed}
+      />
+    )
+
+    assert.ok(
+      view.container.textContent?.includes(
+        'Cherry-pick undone. Successfully removed the 3 copied commits from'
+      )
+    )
+    assert.ok(screen.getByText('release'))
+  })
+})