Chore: Harden panel-layouts test by wrapping synchronous checks in `.toPass()` (#108849)

harden panel layouts test by wrapping synchronous checks in .toPass()

e2e-playwright/dashboard-new-layouts/dashboards-panel-layouts.spec.ts

@@ -69,11 +69,14 @@ test.describe(
       // Get initial positions - standard width should have panels on different rows
       const firstPanelTop = await getPanelTop(dashboardPage, selectors);
       const lastPanel = dashboardPage.getByGrafanaSelector(selectors.components.Panels.Panel.title('New panel')).last();
-      const lastPanelBox = await lastPanel.boundingBox();
-      const lastPanelTop = lastPanelBox?.y || 0;
 
-      // Verify standard layout has panels on different rows
+      expect(async () => {
-      expect(lastPanelTop).toBeGreaterThan(firstPanelTop);
+        const lastPanelBox = await lastPanel.boundingBox();
+        const lastPanelTop = lastPanelBox?.y || 0;
+
+        // Verify standard layout has panels on different rows
+        expect(lastPanelTop).toBeGreaterThan(firstPanelTop);
+      }).toPass();
 
       // Change to narrow min column width
       await dashboardPage
@@ -82,11 +85,13 @@ test.describe(
       await page.getByRole('option', { name: 'Narrow' }).click();
 
       // Verify narrow layout has all panels on same row
-      const firstPanelTopNarrow = await getPanelTop(dashboardPage, selectors);
+      expect(async () => {
-      const lastPanelBoxNarrow = await lastPanel.boundingBox();
+        const firstPanelTopNarrow = await getPanelTop(dashboardPage, selectors);
-      const lastPanelTopNarrow = lastPanelBoxNarrow?.y || 0;
+        const lastPanelBoxNarrow = await lastPanel.boundingBox();
+        const lastPanelTopNarrow = lastPanelBoxNarrow?.y || 0;
 
-      expect(lastPanelTopNarrow).toBe(firstPanelTopNarrow);
+        expect(lastPanelTopNarrow).toBe(firstPanelTopNarrow);
+      }).toPass();
 
       await saveDashboard(dashboardPage, selectors);
       await page.reload();
@@ -99,11 +104,13 @@ test.describe(
         )
       ).toHaveValue('Narrow');
 
-      const firstPanelTopReload = await getPanelTop(dashboardPage, selectors);
+      expect(async () => {
-      const lastPanelBoxReload = await lastPanel.boundingBox();
+        const firstPanelTopReload = await getPanelTop(dashboardPage, selectors);
-      const lastPanelTopReload = lastPanelBoxReload?.y || 0;
+        const lastPanelBoxReload = await lastPanel.boundingBox();
+        const lastPanelTopReload = lastPanelBoxReload?.y || 0;
 
-      expect(lastPanelTopReload).toBe(firstPanelTopReload);
+        expect(lastPanelTopReload).toBe(firstPanelTopReload);
+      }).toPass();
     });
 
     test('can change to custom min column width in auto grid layout', async ({ dashboardPage, selectors, page }) => {
@@ -220,22 +227,28 @@ test.describe(
         .click();
       await page.getByRole('option', { name: 'Short' }).click();
 
-      const shortHeight = await getPanelHeight(dashboardPage, selectors);
+      await expect(async () => {
-      expect(shortHeight).toBeLessThan(regularRowHeight);
+        const shortHeight = await getPanelHeight(dashboardPage, selectors);
+        expect(shortHeight).toBeLessThan(regularRowHeight);
+      }).toPass();
 
       await dashboardPage
         .getByGrafanaSelector(selectors.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight)
         .click();
       await page.getByRole('option', { name: 'Tall' }).click();
 
-      const tallHeight = await getPanelHeight(dashboardPage, selectors);
+      await expect(async () => {
-      expect(tallHeight).toBeGreaterThan(regularRowHeight);
+        const tallHeight = await getPanelHeight(dashboardPage, selectors);
+        expect(tallHeight).toBeGreaterThan(regularRowHeight);
+      }).toPass();
 
       await saveDashboard(dashboardPage, selectors);
       await page.reload();
 
-      const tallHeightAfterReload = await getPanelHeight(dashboardPage, selectors);
+      await expect(async () => {
-      expect(tallHeightAfterReload).toBeGreaterThan(regularRowHeight);
+        const tallHeightAfterReload = await getPanelHeight(dashboardPage, selectors);
+        expect(tallHeightAfterReload).toBeGreaterThan(regularRowHeight);
+      }).toPass();
 
       await dashboardPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.editButton).click();
 
@@ -243,8 +256,10 @@ test.describe(
         dashboardPage.getByGrafanaSelector(selectors.components.PanelEditor.ElementEditPane.AutoGridLayout.rowHeight)
       ).toHaveValue('Tall');
 
-      const tallHeightAfterEdit = await getPanelHeight(dashboardPage, selectors);
+      await expect(async () => {
-      expect(tallHeightAfterEdit).toBeGreaterThan(regularRowHeight);
+        const tallHeightAfterEdit = await getPanelHeight(dashboardPage, selectors);
+        expect(tallHeightAfterEdit).toBeGreaterThan(regularRowHeight);
+      }).toPass();
     });
 
     test('can change to custom row height in auto grid layout', async ({ dashboardPage, selectors, page }) => {
@@ -276,15 +291,19 @@ test.describe(
         .getByGrafanaSelector(selectors.components.PanelEditor.ElementEditPane.AutoGridLayout.customRowHeight)
         .blur();
 
-      const customHeight = await getPanelHeight(dashboardPage, selectors);
+      await expect(async () => {
-      expect(customHeight).toBeCloseTo(800, 5); // Allow some tolerance for rendering differences
+        const customHeight = await getPanelHeight(dashboardPage, selectors);
-      expect(customHeight).toBeGreaterThan(regularRowHeight);
+        expect(customHeight).toBeCloseTo(800, 5); // Allow some tolerance for rendering differences
+        expect(customHeight).toBeGreaterThan(regularRowHeight);
+      }).toPass();
 
       await saveDashboard(dashboardPage, selectors);
       await page.reload();
 
-      const customHeightAfterReload = await getPanelHeight(dashboardPage, selectors);
+      await expect(async () => {
-      expect(customHeightAfterReload).toBeCloseTo(800, 5);
+        const customHeightAfterReload = await getPanelHeight(dashboardPage, selectors);
+        expect(customHeightAfterReload).toBeCloseTo(800, 5);
+      }).toPass();
 
       await dashboardPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.editButton).click();
 
@@ -329,14 +348,18 @@ test.describe(
         .getByGrafanaSelector(selectors.components.PanelEditor.ElementEditPane.AutoGridLayout.fillScreen)
         .click({ force: true });
 
-      const fillScreenHeight = await getPanelHeight(dashboardPage, selectors);
+      await expect(async () => {
-      expect(fillScreenHeight).toBeGreaterThan(initialHeight);
+        const fillScreenHeight = await getPanelHeight(dashboardPage, selectors);
+        expect(fillScreenHeight).toBeGreaterThan(initialHeight);
+      }).toPass();
 
       await saveDashboard(dashboardPage, selectors);
       await page.reload();
 
-      const fillScreenHeightAfterReload = await getPanelHeight(dashboardPage, selectors);
+      await expect(async () => {
-      expect(fillScreenHeightAfterReload).toBeGreaterThan(initialHeight);
+        const fillScreenHeightAfterReload = await getPanelHeight(dashboardPage, selectors);
+        expect(fillScreenHeightAfterReload).toBeGreaterThan(initialHeight);
+      }).toPass();
 
       await dashboardPage.getByGrafanaSelector(selectors.components.NavToolbar.editDashboard.editButton).click();
 
@@ -344,8 +367,10 @@ test.describe(
         dashboardPage.getByGrafanaSelector(selectors.components.PanelEditor.ElementEditPane.AutoGridLayout.fillScreen)
       ).toBeChecked();
 
-      const fillScreenHeightAfterEdit = await getPanelHeight(dashboardPage, selectors);
+      await expect(async () => {
-      expect(fillScreenHeightAfterEdit).toBeGreaterThan(initialHeight);
+        const fillScreenHeightAfterEdit = await getPanelHeight(dashboardPage, selectors);
+        expect(fillScreenHeightAfterEdit).toBeGreaterThan(initialHeight);
+      }).toPass();
     });
   }
 );