Add VRT for <TreeDataGrid /> (#3903)

* Add `VRT` for `<TreeDataGrid />`

* Remove `if` condition

* Fix filename

* Fix if condition

* Fix screenshot name

* Does this work?

* Fix selector

* Update screenshots

Co-authored-by: amanmahajan7

* Fix key

* Update screenshots

Co-authored-by: amanmahajan7

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: amanmahajan7

.github/workflows/update-screenshots.yml

@@ -15,7 +15,7 @@ env:
 
 jobs:
   update-screenshots:
-    if: ${{ github.event.label.name == 'Update Screenshots' }}
+    if: ${{ github.event.label.name == 'Update Screenshots' || github.event_name == 'workflow_dispatch' }}
     runs-on: ubuntu-latest
 
     permissions:

test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-chromium-linux.png

@@ -0,0 +1,89 @@
+import { page } from 'vitest/browser';
+
+import { SelectColumn, TreeDataGrid, type Column } from '../../src';
+import { getTreeGrid } from '../browser/utils';
+
+interface Row {
+  id: number;
+  country: string;
+  year: number;
+}
+
+type SummaryRow = undefined;
+
+const topSummaryRows: readonly SummaryRow[] = [undefined];
+const bottomSummaryRows: readonly SummaryRow[] = [undefined];
+
+const columns: readonly Column<Row, SummaryRow>[] = [
+  SelectColumn,
+  {
+    key: 'sport',
+    name: 'Sport'
+  },
+  {
+    key: 'country',
+    name: 'Country'
+  },
+  {
+    key: 'year',
+    name: 'Year'
+  },
+  {
+    key: 'id',
+    name: 'Id',
+    renderGroupCell({ childRows }) {
+      return Math.min(...childRows.map((c) => c.id));
+    }
+  }
+];
+
+const rows: readonly Row[] = [
+  {
+    id: 1,
+    country: 'USA',
+    year: 2020
+  },
+  {
+    id: 2,
+    country: 'USA',
+    year: 2021
+  },
+  {
+    id: 3,
+    country: 'Canada',
+    year: 2021
+  },
+  {
+    id: 4,
+    country: 'Canada',
+    year: 2022
+  }
+];
+
+test('tree grid', async () => {
+  await page.render(
+    <TreeDataGrid
+      rowKeyGetter={rowKeyGetter}
+      columns={columns}
+      rows={rows}
+      topSummaryRows={topSummaryRows}
+      bottomSummaryRows={bottomSummaryRows}
+      groupBy={['country', 'year']}
+      rowGrouper={rowGrouper}
+      expandedGroupIds={new Set(['USA', 'USA__2020'])}
+      onExpandedGroupIdsChange={() => {}}
+    />
+  );
+
+  await expect(getTreeGrid()).toMatchScreenshot('tree-grid');
+});
+
+function rowKeyGetter(row: Row) {
+  return row.id;
+}
+
+function rowGrouper(rows: readonly Row[], columnKey: string) {
+  // @ts-expect-error
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+  return Object.groupBy(rows, (r) => r[columnKey]) as Record<string, readonly R[]>;
+}