wip

Author: WilsonNet

dashboard/e2e/selectors/tree-details.ts

@@ -12,6 +12,7 @@ export const TREE_DETAILS_SELECTORS = {
   filters: {
     button: 'button:has-text("Filters")',
     drawer: 'aside',
+    drawerContent: '[role="dialog"]',
     filterButton: '[data-test-id="filter-button"]',
     cancelButton: '[data-test-id="filter-cancel-button"]',
     clearAllFilters: 'text="Clear all"',
@@ -64,10 +65,17 @@ export const TREE_DETAILS_SELECTORS = {
       inconclusive: 'button:has-text("Inconclusive:")',
     },
     testItem: 'tr',
+    expandedRows: 'tr:has(td[colspan])',
     detailsButton: '[data-test-id="details-button"]',
   },
 
   configTable: {
     link: (config: string) => `a:has-text("${config}")`,
   },
+
+  commitGraph: {
+    container: '[data-test-id="commit-navigation-graph"]',
+    svg: '[data-test-id="commit-navigation-graph"] svg',
+    marks: '[data-test-id="commit-navigation-graph"] [class*="MuiMarkElement"]',
+  },
 } as const;

dashboard/e2e/tree-details.spec.ts

@@ -4,7 +4,7 @@ import { TREE_DETAILS_SELECTORS, TREE_LISTING_SELECTORS } from './selectors';
 
 test.describe('Tree Details Page Tests', () => {
   const TREE_URL =
-    '/tree/mainline/master/c072629f05d7bca1148ab17690d7922a31423984';
+    'tree/android/android-mainline/7c5912a7c78d669e825093b8cbb57e6afaa88d11';
 
   test.beforeEach(async ({ page }) => {
     const timeout = 60000;
@@ -130,7 +130,9 @@ test.describe('Tree Details Page Tests', () => {
 
       await page.waitForTimeout(3000);
 
-      const expandedRows = page.locator('tr:has(td[colspan])');
+      const expandedRows = page.locator(
+        TREE_DETAILS_SELECTORS.testsTable.expandedRows,
+      );
       const hasExpandedRows = (await expandedRows.count()) > 0;
 
       if (hasExpandedRows) {
@@ -220,4 +222,75 @@ test.describe('Tree Details Page Tests', () => {
 
     await expect(searchInput).toHaveValue('defconfig');
   });
+
+  test('navigates back one commit via commit graph', async ({ page }) => {
+    await page.goto(TREE_URL, { timeout: 30000 });
+    await page.waitForLoadState('domcontentloaded');
+
+    const currentUrl = page.url();
+
+    // Wait for a visible commit graph (there may be multiple, get the last visible one)
+    const commitGraphContainer = page
+      .locator(TREE_DETAILS_SELECTORS.commitGraph.container)
+      .last();
+    await expect(commitGraphContainer).toBeVisible({ timeout: 30000 });
+
+    // Wait a bit for the graph to fully render
+    await page.waitForTimeout(2000);
+
+    // Look for clickable marks in the visible graph
+    const marks = commitGraphContainer.locator('[class*="MuiMarkElement"]');
+    const markCount = await marks.count();
+
+    // Ensure we actually have marks to click
+    expect(markCount).toBeGreaterThan(0);
+
+    // Click on the first mark (data point in the commit history)
+    await marks.first().click({ force: true });
+
+    // Wait for navigation to complete
+    await page.waitForTimeout(2000);
+
+    const newUrl = page.url();
+
+    // Verify URL changed (navigated to a different commit)
+    expect(newUrl).not.toBe(currentUrl);
+    expect(newUrl).toMatch(/\/tree\//);
+  });
+
+  test('clears all filters', async ({ page }) => {
+    await page.goto(TREE_URL, { timeout: 30000 });
+    await page.waitForLoadState('domcontentloaded');
+
+    // Open the filters drawer
+    const filterButton = page.locator(TREE_DETAILS_SELECTORS.filters.button);
+    await filterButton.waitFor({ state: 'visible', timeout: 10000 });
+    await filterButton.click();
+
+    // Wait for the drawer content to be visible (it's in a portal)
+    const drawerContent = page.locator(
+      TREE_DETAILS_SELECTORS.filters.drawerContent,
+    );
+    await expect(drawerContent).toBeVisible({ timeout: 10000 });
+
+    // Check if "Clear all" button exists and click it
+    const clearAllButton = page.locator(
+      TREE_DETAILS_SELECTORS.filters.clearAllFilters,
+    );
+    const hasClearAllButton = (await clearAllButton.count()) > 0;
+
+    if (hasClearAllButton) {
+      await clearAllButton.click();
+
+      await page.waitForTimeout(1000);
+    }
+
+    const cancelButton = page.locator(
+      TREE_DETAILS_SELECTORS.filters.cancelButton,
+    );
+    await expect(cancelButton).toBeVisible();
+    await cancelButton.click();
+
+    await expect(drawerContent).not.toBeVisible();
+  });
 });

dashboard/src/components/CommitNavigationGraph/CommitNavigationGraph.tsx

@@ -242,6 +242,7 @@ const CommitNavigationGraph = ({
         title={formatMessage({ id: messagesId.graphName })}
         content={
           <LineChart
+            dataTestId="commit-navigation-graph"
             xAxis={xAxis}
             series={series}
             slots={{

dashboard/src/components/LineChart/LineChart.tsx

@@ -34,6 +34,7 @@ export type TLineChartProps = {
   onMarkClick?: MUILineChartProps['onMarkClick'];
   slots?: MUILineChartProps['slots'];
   slotProps?: MUILineChartProps['slotProps'];
+  dataTestId?: string;
 };
 
 export const LineChart = ({
@@ -44,9 +45,10 @@ export const LineChart = ({
   slotProps,
   sx,
   onMarkClick,
+  dataTestId,
 }: TLineChartProps): JSX.Element => {
   return (
-    <div className="px-4">
+    <div className="px-4" data-test-id={dataTestId}>
       {labels && (
         <div className="mt-3 mb-0 flex justify-end gap-2">{labels}</div>
       )}