@theia/scm 1.75.0-next.35 → 1.75.0-next.39

package/src/browser/scm-history-graph-helpers.spec.ts

@@ -15,8 +15,10 @@
 // *****************************************************************************
 
 import { expect } from 'chai';
-import { filterRefsForBadges, getRefBadgePresentation, getRefColorIndex } from './scm-history-graph-helpers';
-import { ScmHistoryItemRef, ScmHistoryProvider } from './scm-provider';
+import {
+    buildChangeTreeRows, ChangeTreeFileRow, ChangeTreeRow, filterRefsForBadges, getFileName, getRefBadgePresentation, getRefColorIndex
+} from './scm-history-graph-helpers';
+import { ScmHistoryItemChange, ScmHistoryItemRef, ScmHistoryProvider } from './scm-provider';
 
 describe('getRefColorIndex', () => {
 
@@ -116,3 +118,76 @@ describe('filterRefsForBadges', () => {
         expect(filterRefsForBadges(refs, provider, 'all', ['refs/heads/feature'])).to.deep.equal(refs);
     });
 });
+
+describe('buildChangeTreeRows', () => {
+
+    const rootUri = 'file:///repo';
+
+    function change(path: string): ScmHistoryItemChange {
+        return { uri: `${rootUri}/${path}`, modifiedUri: `${rootUri}/${path}` };
+    }
+
+    /** Renders the rows as indented lines, so the expectations read like a tree. */
+    function describeRows(rows: readonly ChangeTreeRow[]): string[] {
+        return rows.map(row => `${'  '.repeat(row.depth)}${row.type === 'folder' ? row.label + '/' : getFileName(row.path)}`);
+    }
+
+    it('keeps files at the root at depth 0', () => {
+        const rows = buildChangeTreeRows([change('a.ts'), change('b.ts')], rootUri, new Set());
+        expect(describeRows(rows)).to.deep.equal(['a.ts', 'b.ts']);
+    });
+
+    it('groups files under their folder', () => {
+        const rows = buildChangeTreeRows([change('src/a.ts'), change('src/b.ts')], rootUri, new Set());
+        expect(describeRows(rows)).to.deep.equal(['src/', '  a.ts', '  b.ts']);
+    });
+
+    it('compacts folder chains that hold a single child folder', () => {
+        const rows = buildChangeTreeRows([change('src/browser/a.ts')], rootUri, new Set());
+        expect(describeRows(rows)).to.deep.equal(['src/browser/', '  a.ts']);
+    });
+
+    it('stops compacting where a folder chain branches', () => {
+        const rows = buildChangeTreeRows([change('src/browser/a.ts'), change('src/node/b.ts')], rootUri, new Set());
+        expect(describeRows(rows)).to.deep.equal(['src/', '  browser/', '    a.ts', '  node/', '    b.ts']);
+    });
+
+    it('does not compact a folder that also holds files', () => {
+        const rows = buildChangeTreeRows([change('src/a.ts'), change('src/browser/b.ts')], rootUri, new Set());
+        expect(describeRows(rows)).to.deep.equal(['src/', '  browser/', '    b.ts', '  a.ts']);
+    });
+
+    it('sorts folders before files, each alphabetically', () => {
+        const rows = buildChangeTreeRows([change('z.ts'), change('a.ts'), change('src/b.ts')], rootUri, new Set());
+        expect(describeRows(rows)).to.deep.equal(['src/', '  b.ts', 'a.ts', 'z.ts']);
+    });
+
+    it('hides the descendants of a collapsed folder', () => {
+        const rows = buildChangeTreeRows([change('src/a.ts'), change('b.ts')], rootUri, new Set(['src']));
+        expect(describeRows(rows)).to.deep.equal(['src/', 'b.ts']);
+    });
+
+    it('addresses a compacted folder by its full path', () => {
+        const rows = buildChangeTreeRows([change('src/browser/a.ts')], rootUri, new Set(['src/browser']));
+        expect(describeRows(rows)).to.deep.equal(['src/browser/']);
+    });
+
+    it('carries the original change on each file row', () => {
+        const first = change('src/a.ts');
+        const rows = buildChangeTreeRows([first], rootUri, new Set());
+        expect(rows[1].type).to.equal('file');
+        expect((rows[1] as ChangeTreeFileRow).change).to.equal(first);
+    });
+
+    it('keeps the index of the change in the original list, so row keys stay stable', () => {
+        const rows = buildChangeTreeRows([change('z.ts'), change('src/a.ts')], rootUri, new Set());
+        // Sorted as: src/, src/a.ts (index 1), z.ts (index 0).
+        expect(rows.filter(row => row.type === 'file').map(row => (row as ChangeTreeFileRow).index)).to.deep.equal([1, 0]);
+    });
+
+    it('falls back to the full path when the change is outside the repository root', () => {
+        const outside: ScmHistoryItemChange = { uri: 'file:///elsewhere/x.ts', modifiedUri: 'file:///elsewhere/x.ts' };
+        const rows = buildChangeTreeRows([outside], rootUri, new Set());
+        expect(describeRows(rows)).to.deep.equal(['elsewhere/', '  x.ts']);
+    });
+});

package/src/browser/scm-history-graph-helpers.ts

@@ -83,6 +83,105 @@ export function getRepoRelativePath(uri: string, rootUri: string | undefined): s
     return fullPath;
 }
 
+export interface ChangeTreeRowBase {
+    /** Repo-relative path of the row; the expansion key for folders. */
+    readonly path: string;
+    /** Nesting level, used for indentation. */
+    readonly depth: number;
+}
+
+export interface ChangeTreeFolderRow extends ChangeTreeRowBase {
+    readonly type: 'folder';
+    /** Segments rendered for this row; a compacted chain shows `browser/model`. */
+    readonly label: string;
+}
+
+export interface ChangeTreeFileRow extends ChangeTreeRowBase {
+    readonly type: 'file';
+    readonly change: ScmHistoryItemChange;
+    /** Position of the change in the list it came from, so row keys stay stable. */
+    readonly index: number;
+}
+
+export type ChangeTreeRow = ChangeTreeFolderRow | ChangeTreeFileRow;
+
+interface ChangeTreeFolder {
+    readonly folders: Map<string, ChangeTreeFolder>;
+    readonly files: { change: ScmHistoryItemChange; index: number; name: string }[];
+}
+
+/**
+ * Arranges history item changes into the rows of a file tree: folders before
+ * files, each sorted by name, with single-child folder chains compacted into
+ * one row (`src/browser`) the way VS Code's SCM tree renders them. Folders
+ * listed in `collapsedFolders` (by their full path) hide their descendants.
+ */
+export function buildChangeTreeRows(
+    changes: readonly ScmHistoryItemChange[],
+    rootUri: string | undefined,
+    collapsedFolders: ReadonlySet<string>
+): ChangeTreeRow[] {
+    const root: ChangeTreeFolder = { folders: new Map(), files: [] };
+    changes.forEach((change, index) => {
+        const relativePath = getRepoRelativePath(change.modifiedUri ?? change.originalUri ?? change.uri, rootUri);
+        const segments = relativePath.split('/').filter(segment => segment.length > 0);
+        const name = segments.pop() ?? relativePath;
+        let folder = root;
+        for (const segment of segments) {
+            let child = folder.folders.get(segment);
+            if (!child) {
+                child = { folders: new Map(), files: [] };
+                folder.folders.set(segment, child);
+            }
+            folder = child;
+        }
+        folder.files.push({ change, index, name });
+    });
+
+    const rows: ChangeTreeRow[] = [];
+    collectChangeTreeRows(root, '', '', 0, collapsedFolders, rows);
+    return rows;
+}
+
+function collectChangeTreeRows(
+    folder: ChangeTreeFolder,
+    path: string,
+    label: string,
+    depth: number,
+    collapsedFolders: ReadonlySet<string>,
+    rows: ChangeTreeRow[]
+): void {
+    for (const name of [...folder.folders.keys()].sort(compareNames)) {
+        let child = folder.folders.get(name)!;
+        let childPath = path ? `${path}/${name}` : name;
+        let childLabel = label ? `${label}/${name}` : name;
+        // Compact a chain of folders that each hold nothing but one folder.
+        while (child.files.length === 0 && child.folders.size === 1) {
+            const [onlyName, onlyChild] = [...child.folders][0];
+            child = onlyChild;
+            childPath = `${childPath}/${onlyName}`;
+            childLabel = `${childLabel}/${onlyName}`;
+        }
+        rows.push({ type: 'folder', path: childPath, label: childLabel, depth });
+        if (!collapsedFolders.has(childPath)) {
+            collectChangeTreeRows(child, childPath, '', depth + 1, collapsedFolders, rows);
+        }
+    }
+    for (const file of [...folder.files].sort((left, right) => compareNames(left.name, right.name))) {
+        rows.push({
+            type: 'file',
+            path: path ? `${path}/${file.name}` : file.name,
+            depth,
+            change: file.change,
+            index: file.index
+        });
+    }
+}
+
+function compareNames(left: string, right: string): number {
+    return left.localeCompare(right);
+}
+
 /**
  * Returns the ref-based color index of the given ref (0 = current ref,
  * 1 = remote ref, 2 = base ref), or `undefined` when the ref is none of

package/src/browser/scm-history-graph-model.spec.ts

@@ -404,3 +404,134 @@ describe('ScmHistoryGraphModel - ref colors and current item', () => {
         expect(model.entries.every(e => !e.isCurrent)).to.be.true;
     });
 });
+
+describe('ScmHistoryGraphModel - view mode', () => {
+
+    it('shows the changes of a history item as a list by default', () => {
+        const { model } = createModel(new StubHistoryProvider());
+        expect(model.viewMode).to.equal('list');
+    });
+
+    it('switches the view mode', () => {
+        const { model } = createModel(new StubHistoryProvider());
+        model.setViewMode('tree');
+        expect(model.viewMode).to.equal('tree');
+    });
+
+    it('notifies listeners when the view mode changes', () => {
+        const { model } = createModel(new StubHistoryProvider());
+        let changes = 0;
+        model.onDidChange(() => changes++);
+
+        model.setViewMode('tree');
+
+        expect(changes).to.equal(1);
+    });
+
+    it('does not notify listeners when the view mode is unchanged', () => {
+        const { model } = createModel(new StubHistoryProvider());
+        model.setViewMode('tree');
+        let changes = 0;
+        model.onDidChange(() => changes++);
+
+        model.setViewMode('tree');
+
+        expect(changes).to.equal(0);
+    });
+
+    it('does not reload history when the view mode changes', async () => {
+        const provider = new StubHistoryProvider();
+        provider.pages = [makeItems(1, 10)];
+        const { model, loadPage } = createModel(provider);
+        await loadPage();
+        const requestsBefore = provider.receivedOptions.length;
+
+        model.setViewMode('tree');
+        await nextTick();
+
+        expect(provider.receivedOptions).to.have.length(requestsBefore);
+    });
+});
+
+describe('ScmHistoryGraphModel - revealing the current history item', () => {
+
+    function createProviderAt(revision: string): StubHistoryProvider {
+        const provider = new StubHistoryProvider();
+        provider.currentHistoryItemRef = { id: 'refs/heads/main', name: 'main', revision };
+        return provider;
+    }
+
+    it('requests a reveal of the index of the current history item', async () => {
+        const provider = createProviderAt('c3');
+        provider.pages = [makeItems(1, 10)];
+        const { model, loadPage } = createModel(provider);
+        await loadPage();
+        const revealed: number[] = [];
+        model.onDidRequestReveal(revealedIndex => revealed.push(revealedIndex));
+
+        const index = await model.revealCurrentHistoryItem();
+
+        expect(index).to.equal(2);
+        expect(revealed).to.deep.equal([2]);
+    });
+
+    it('loads further pages until the current history item is found', async () => {
+        const provider = createProviderAt('c55');
+        provider.pages = [makeItems(1, PAGE_SIZE), makeItems(PAGE_SIZE + 1, PAGE_SIZE)];
+        const { model, loadPage } = createModel(provider);
+        await loadPage();
+        expect(model.entries).to.have.length(PAGE_SIZE);
+
+        const index = await model.revealCurrentHistoryItem();
+
+        expect(index).to.equal(54);
+        expect(model.entries).to.have.length(2 * PAGE_SIZE);
+    });
+
+    it('does not request a reveal when the current history item is not in the history', async () => {
+        const provider = createProviderAt('not-loaded');
+        provider.pages = [makeItems(1, 10)];
+        const { model, loadPage } = createModel(provider);
+        await loadPage();
+        const revealed: number[] = [];
+        model.onDidRequestReveal(revealedIndex => revealed.push(revealedIndex));
+
+        const index = await model.revealCurrentHistoryItem();
+
+        expect(index).to.be.undefined;
+        expect(revealed).to.be.empty;
+    });
+
+    it('does not request a reveal when the provider has no current history item ref', async () => {
+        const provider = new StubHistoryProvider();
+        provider.pages = [makeItems(1, 10)];
+        const { model, loadPage } = createModel(provider);
+        await loadPage();
+        const revealed: number[] = [];
+        model.onDidRequestReveal(revealedIndex => revealed.push(revealedIndex));
+
+        const index = await model.revealCurrentHistoryItem();
+
+        expect(index).to.be.undefined;
+        expect(revealed).to.be.empty;
+    });
+
+    it('stops paging when further pages add no new items', async () => {
+        const provider = createProviderAt('never-returned');
+        const page = makeItems(1, PAGE_SIZE);
+        // A provider that keeps returning the same full page: `hasMore` stays true
+        // forever, so only a no-progress guard can end the search.
+        provider.provideHistoryItems = async options => {
+            provider.receivedOptions.push(options);
+            return page;
+        };
+        const { model, loadPage } = createModel(provider);
+        await loadPage();
+        expect(model.hasMore).to.be.true;
+
+        const index = await model.revealCurrentHistoryItem();
+
+        expect(index).to.be.undefined;
+        expect(model.entries).to.have.length(PAGE_SIZE);
+    });
+});

package/src/browser/scm-history-graph-model.ts

@@ -16,7 +16,7 @@
 
 import { injectable, inject, postConstruct, named } from '@theia/core/shared/inversify';
 import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
-import { Emitter } from '@theia/core/lib/common/event';
+import { Emitter, Event } from '@theia/core/lib/common/event';
 import { CancellationTokenSource } from '@theia/core/lib/common/cancellation';
 import { ScmService } from './scm-service';
 import { ScmHistoryItem, ScmHistoryItemRef, ScmHistoryProvider, ScmHistoryOptions } from './scm-provider';
@@ -27,6 +27,9 @@ import { ScmPreferences } from '../common/scm-preferences';
 
 export const PAGE_SIZE = 50;
 
+/** How the changes of an expanded history item are laid out. */
+export type ScmHistoryViewMode = 'list' | 'tree';
+
 export const ScmHistoryGraphModelProvider = Symbol('ScmHistoryGraphModelProvider');
 /**
  * Resolves the {@link ScmHistoryGraphModel} singleton on first use. The model
@@ -63,10 +66,15 @@ export class ScmHistoryGraphModel {
     protected _provider: ScmHistoryProvider | undefined;
     /** Explicitly picked ref ids to filter the graph by; `undefined` = auto (current/remote/base). */
     protected _historyItemRefFilter: string[] | undefined;
+    protected _viewMode: ScmHistoryViewMode = 'list';
 
     protected readonly onDidChangeEmitter = new Emitter<void>();
     readonly onDidChange = this.onDidChangeEmitter.event;
 
+    protected readonly onDidRequestRevealEmitter = new Emitter<number>();
+    /** Fired with the index of an entry the view should scroll to and select. */
+    readonly onDidRequestReveal: Event<number> = this.onDidRequestRevealEmitter.event;
+
     protected cancelSource = new CancellationTokenSource();
 
     @postConstruct()
@@ -74,6 +82,7 @@ export class ScmHistoryGraphModel {
         this.toDispose.pushAll([
             Disposable.create(() => this.toDisposeOnProviderChange.dispose()),
             this.onDidChangeEmitter,
+            this.onDidRequestRevealEmitter,
             this.scmService.onDidChangeSelectedRepository(() => this.refresh()),
             this.scmPreferences.onPreferenceChanged(e => {
                 if (e.preferenceName === 'scm.graph.pageSize') {
@@ -98,6 +107,23 @@ export class ScmHistoryGraphModel {
         return this._historyItemRefFilter;
     }
 
+    /** How the changes of an expanded history item are laid out. */
+    get viewMode(): ScmHistoryViewMode {
+        return this._viewMode;
+    }
+
+    /**
+     * Switches how the changes of an expanded history item are laid out. This
+     * only affects rendering, so the loaded history is kept as is.
+     */
+    setViewMode(viewMode: ScmHistoryViewMode): void {
+        if (this._viewMode === viewMode) {
+            return;
+        }
+        this._viewMode = viewMode;
+        this.onDidChangeEmitter.fire();
+    }
+
     /**
      * Sets the ref ids to filter the graph by (`undefined` returns to auto
      * mode) and reloads the graph.
@@ -200,6 +226,35 @@ export class ScmHistoryGraphModel {
         this.loadPage();
     }
 
+    /**
+     * Locates the commit the current history item ref points at, loading
+     * further pages while it is outside the loaded range, and asks the view to
+     * reveal it. Returns its index, or `undefined` when there is no current
+     * history item ref or the commit is not part of the graph (e.g. the ref is
+     * excluded by the filter).
+     */
+    async revealCurrentHistoryItem(): Promise<number | undefined> {
+        let index = this.indexOfCurrentHistoryItem();
+        while (index === undefined && this._hasMore) {
+            const loadedBefore = this._entries.length;
+            await this.loadMore();
+            if (this._entries.length === loadedBefore) {
+                // The page added nothing new; paging further cannot find the item.
+                break;
+            }
+            index = this.indexOfCurrentHistoryItem();
+        }
+        if (index !== undefined) {
+            this.onDidRequestRevealEmitter.fire(index);
+        }
+        return index;
+    }
+
+    protected indexOfCurrentHistoryItem(): number | undefined {
+        const index = this._entries.findIndex(entry => entry.isCurrent);
+        return index === -1 ? undefined : index;
+    }
+
     async loadMore(): Promise<void> {
         if (this._loading || !this._hasMore) {
             return;

package/src/browser/scm-history-graph-widget.spec.ts

@@ -18,10 +18,13 @@ import { enableJSDOM } from '@theia/core/lib/browser/test/jsdom';
 const disableJSDOM = enableJSDOM();
 
 import { expect } from 'chai';
+import * as React from '@theia/core/shared/react';
+import { Emitter } from '@theia/core/lib/common/event';
 import { ContextKey, ContextKeyServiceDummyImpl, ContextKeyValue } from '@theia/core/lib/browser/context-key-service';
 import { ScmContextKeyService } from './scm-context-key-service';
 import { ScmHistoryGraphWidget } from './scm-history-graph-widget';
-import { ScmHistoryProvider } from './scm-provider';
+import { GraphRow } from './scm-history-graph-lanes';
+import { ScmHistoryItemChange, ScmHistoryProvider } from './scm-provider';
 
 disableJSDOM();
 
@@ -110,3 +113,198 @@ describe('ScmHistoryGraphWidget context keys', () => {
         expect(scmContextKeys.scmCurrentHistoryItemRefHasRemote.get()).to.equal(true);
     });
 });
+
+describe('ScmHistoryGraphWidget reveal', () => {
+    let restoreJSDOM: () => void;
+    let widget: ScmHistoryGraphWidget;
+    let requestReveal: Emitter<number>;
+    let scrolledTo: { index: number; align?: string }[];
+
+    beforeEach(() => {
+        restoreJSDOM = enableJSDOM();
+        requestReveal = new Emitter<number>();
+        scrolledTo = [];
+
+        widget = new ScmHistoryGraphWidget();
+        const raw = widget as unknown as Record<string, unknown>;
+        raw.scmContextKeys = createScmContextKeyService();
+        raw.scmPreferences = { onPreferenceChanged: new Emitter<{ preferenceName: string }>().event };
+        raw.model = {
+            provider: undefined,
+            entries: [],
+            hasMore: false,
+            loading: false,
+            hasAttemptedLoad: true,
+            isCurrentRefInFilter: () => true,
+            onDidChange: new Emitter<void>().event,
+            onDidRequestReveal: requestReveal.event
+        };
+        raw.listRef = { current: { scrollToIndex: (location: { index: number; align?: string }) => scrolledTo.push(location) } };
+        // Rendering is out of scope here and would otherwise run asynchronously,
+        // after JSDOM has been torn down again.
+        raw.update = () => { };
+        (widget as unknown as { init(): void }).init();
+    });
+
+    afterEach(() => {
+        widget.dispose();
+        restoreJSDOM();
+    });
+
+    function selectedIndex(): number {
+        return (widget as unknown as { selectedIndex: number }).selectedIndex;
+    }
+
+    it('should scroll to the entry the model asks to reveal', () => {
+        requestReveal.fire(4);
+        expect(scrolledTo).to.deep.equal([{ index: 4, align: 'center' }]);
+    });
+
+    it('should select the entry the model asks to reveal', () => {
+        requestReveal.fire(4);
+        expect(selectedIndex()).to.equal(4);
+    });
+
+    it('should stop revealing once disposed', () => {
+        widget.dispose();
+        requestReveal.fire(4);
+        expect(scrolledTo).to.be.empty;
+    });
+});
+
+const ROOT_URI = 'file:///repo';
+
+/** Builds the change rows of `commit-1` in the given view mode. */
+function renderChanges(widget: ScmHistoryGraphWidget, viewMode: 'list' | 'tree', paths: string[]): React.ReactElement {
+    const raw = widget as unknown as Record<string, unknown>;
+    raw.model = { viewMode };
+    raw.scmService = { selectedRepository: { provider: { rootUri: ROOT_URI } } };
+    raw.labelProvider = { getIcon: () => 'file-icon' };
+    const changes: ScmHistoryItemChange[] = paths.map(path => ({
+        uri: `${ROOT_URI}/${path}`,
+        modifiedUri: `${ROOT_URI}/${path}`,
+        originalUri: `${ROOT_URI}/${path}`
+    }));
+    const graphRow: GraphRow = { lane: 0, color: 0, topColor: 0, edges: [], hasContinuation: false, hasTopLine: false };
+    const render = widget as unknown as {
+        renderChangesRows(itemId: string, svgWidth: number, graphRow: GraphRow, changes: ScmHistoryItemChange[]): React.ReactElement;
+    };
+    return render.renderChangesRows('commit-1', 22, graphRow, changes);
+}
+
+function allElements(node: React.ReactNode): React.ReactElement[] {
+    const result: React.ReactElement[] = [];
+    const visit = (candidate: React.ReactNode): void => {
+        if (Array.isArray(candidate)) {
+            candidate.forEach(visit);
+        } else if (React.isValidElement(candidate)) {
+            result.push(candidate);
+            visit((candidate.props as { children?: React.ReactNode }).children);
+        }
+    };
+    visit(node);
+    return result;
+}
+
+function elementsWithClass(node: React.ReactNode, className: string): React.ReactElement[] {
+    return allElements(node).filter(element => {
+        const elementClass = (element.props as { className?: unknown }).className;
+        return typeof elementClass === 'string' && elementClass.includes(className);
+    });
+}
+
+/** The rendered name of a row — the `name scm-history-change-name` span it holds. */
+function nameOf(row: React.ReactElement): string {
+    const name = allElements(row).find(element => (element.props as { className?: unknown }).className === 'name scm-history-change-name');
+    return String((name?.props as { children?: unknown })?.children ?? '');
+}
+
+function folderLabels(rows: React.ReactElement): string[] {
+    return elementsWithClass(rows, 'scm-history-change-folder-row').map(nameOf);
+}
+
+function fileNames(rows: React.ReactElement): string[] {
+    return elementsWithClass(rows, 'scm-history-change-row')
+        .filter(row => !((row.props as { className: string }).className.includes('scm-history-change-folder-row')))
+        .map(nameOf);
+}
+
+describe('ScmHistoryGraphWidget change tree folders', () => {
+    let restoreJSDOM: () => void;
+    let widget: ScmHistoryGraphWidget;
+
+    beforeEach(() => {
+        restoreJSDOM = enableJSDOM();
+        widget = new ScmHistoryGraphWidget();
+        const raw = widget as unknown as Record<string, unknown>;
+        raw.update = () => { };
+    });
+
+    afterEach(() => {
+        widget.dispose();
+        restoreJSDOM();
+    });
+
+    function internals(): {
+        isFolderCollapsed(itemId: string, path: string): boolean;
+        toggleFolder(itemId: string, path: string): void;
+        collapsedFolders: Map<string, Set<string>>;
+    } {
+        return widget as unknown as ReturnType<typeof internals>;
+    }
+
+    it('should show folders expanded by default', () => {
+        expect(internals().isFolderCollapsed('commit-1', 'src')).to.be.false;
+    });
+
+    it('should collapse a folder on toggle', () => {
+        internals().toggleFolder('commit-1', 'src');
+        expect(internals().isFolderCollapsed('commit-1', 'src')).to.be.true;
+    });
+
+    it('should expand a collapsed folder on toggle', () => {
+        internals().toggleFolder('commit-1', 'src');
+        internals().toggleFolder('commit-1', 'src');
+        expect(internals().isFolderCollapsed('commit-1', 'src')).to.be.false;
+    });
+
+    it('should keep folder state separate per history item', () => {
+        internals().toggleFolder('commit-1', 'src');
+        expect(internals().isFolderCollapsed('commit-2', 'src')).to.be.false;
+    });
+
+    it('should render a folder row per folder of the change tree', () => {
+        const rows = renderChanges(widget, 'tree', ['src/browser/a.ts', 'src/node/b.ts']);
+        expect(folderLabels(rows)).to.deep.equal(['src', 'browser', 'node']);
+        expect(fileNames(rows)).to.deep.equal(['a.ts', 'b.ts']);
+    });
+
+    it('should render expanded folders with a down twistie', () => {
+        const rows = renderChanges(widget, 'tree', ['src/a.ts']);
+        expect(elementsWithClass(rows, 'codicon-chevron-down')).to.have.length(1);
+    });
+
+    it('should render a flat list of files without folder rows in list mode', () => {
+        const rows = renderChanges(widget, 'list', ['src/browser/a.ts', 'src/node/b.ts']);
+        expect(folderLabels(rows)).to.be.empty;
+        expect(fileNames(rows)).to.deep.equal(['a.ts', 'b.ts']);
+    });
+
+    it('should drop the files of a collapsed folder and turn its twistie', () => {
+        internals().toggleFolder('commit-1', 'src');
+        const rows = renderChanges(widget, 'tree', ['src/browser/a.ts', 'src/node/b.ts']);
+        expect(folderLabels(rows)).to.deep.equal(['src']);
+        expect(fileNames(rows)).to.be.empty;
+        expect(elementsWithClass(rows, 'codicon-chevron-right')).to.have.length(1);
+    });
+
+    it('should forget folder state when the history item is collapsed again', () => {
+        const raw = widget as unknown as { expandedIds: Set<string>; handleRowClick(idx: number, entry: unknown): void };
+        raw.expandedIds.add('commit-1');
+        internals().toggleFolder('commit-1', 'src');
+
+        raw.handleRowClick(0, { item: { id: 'commit-1' } });
+
+        expect(internals().collapsedFolders.has('commit-1')).to.be.false;
+    });
+});