Test tree item checkbox API

[alexr00]

Refs: #116141

• anyOS @rebornix
• anyOS @bpasero

Complexity: 5
Roles: Developer, Engineering Manager

Create Issue

---

The tree item checkbox API has been finalized.

vscode/src/vscode-dts/vscode.d.ts

Lines 10880 to 10884 in 2e9aae6

	/**
	* {@link TreeItemCheckboxState TreeItemCheckboxState} of the tree item.
	* {@link TreeDataProvider.onDidChangeTreeData onDidChangeTreeData} should be fired when {@link TreeItem.checkboxState checkboxState} changes.
	*/
	checkboxState?: TreeItemCheckboxState | { readonly state: TreeItemCheckboxState; readonly tooltip?: string; readonly accessibilityInformation?: AccessibilityInformation };

vscode/src/vscode-dts/vscode.d.ts

Lines 10396 to 10432 in 2e9aae6

	/**
	* By default, when the children of a tree item have already been fetched, child checkboxes are automatically managed based on the checked state of the parent tree item.
	* If the tree item is collapsed by default (meaning that the children haven't yet been fetched) then child checkboxes will not be updated.
	* To override this behavior and manage child and parent checkbox state in the extension, set this to `true`.
	*
	* Examples where {@link TreeViewOptions.manageCheckboxStateManually} is false, the default behavior:
	*
	* 1. A tree item is checked, then its children are fetched. The children will be checked.
	*
	* 2. A tree item's parent is checked. The tree item and all of it's siblings will be checked.
	* - [ ] Parent
	* - [ ] Child 1
	* - [ ] Child 2
	* When the user checks Parent, the tree will look like this:
	* - [x] Parent
	* - [x] Child 1
	* - [x] Child 2
	*
	* 3. A tree item and all of it's siblings are checked. The parent will be checked.
	* - [ ] Parent
	* - [ ] Child 1
	* - [ ] Child 2
	* When the user checks Child 1 and Child 2, the tree will look like this:
	* - [x] Parent
	* - [x] Child 1
	* - [x] Child 2
	*
	* 4. A tree item is unchecked. The parent will be unchecked.
	* - [x] Parent
	* - [x] Child 1
	* - [x] Child 2
	* When the user unchecks Child 1, the tree will look like this:
	* - [ ] Parent
	* - [ ] Child 1
	* - [x] Child 2
	*/
	manageCheckboxStateManually?: boolean;

vscode/src/vscode-dts/vscode.d.ts

Lines 10694 to 10697 in 2e9aae6

	/**
	* An event to signal that an element or root has either been checked or unchecked.
	*/
	readonly onDidChangeCheckboxState: Event<TreeCheckboxChangeEvent<T>>;

To verify, you'll need to use this checkbox property in a tree view. If you don't have an extension that could benefit from having checkboxes, you can use the tree view sample and add the checkbox property here:

https://github.com/microsoft/vscode-extension-samples/blob/f7b27a91779e770b8f8f0e6791bcefc5d9c64035/tree-view-sample/src/testView.ts#L77-L81

And listen for the checkbox change event on this tree view:

https://github.com/microsoft/vscode-extension-samples/blob/f7b27a91779e770b8f8f0e6791bcefc5d9c64035/tree-view-sample/src/testView.ts#L6-L7

Things to verify:

• Read all the JS doc for the API. Verify that it makes sense to you.
• Verify that by default, if you check the checkbox of a node with children, the children get checked. Verify that when you check all children, the parent gets checked. Also verify that you see this reflected in the onDidChangeCheckboxState.
• Verify that if you set the manageCheckboxStateManually option that you do not see the children and parents get automatically checked as described in the previous point.
• Verify that the checkbox tool tip and accessibility information are applied in the way you'd expect.