test(EndToEnd): Labels tests (#146)

Author: grafakus

e2e/fixtures/pages/ExploreProfilesPage.ts

@@ -49,12 +49,17 @@ export class ExploreProfilesPage extends PyroscopePage {
 
   /* Time picker/refresh */
 
-  getTimePicker() {
+  getTimePickerButton() {
     return this.getByTestId('data-testid TimePicker Open Button');
   }
 
   async assertSelectedTimeRange(expectedTimeRange: string) {
-    await expect(this.getTimePicker()).toContainText(expectedTimeRange);
+    await expect(this.getTimePickerButton()).toContainText(expectedTimeRange);
+  }
+
+  async selectTimeRange(quickRangeLabel: string) {
+    await this.getTimePickerButton().click();
+    await this.getByTestId('data-testid TimePicker Overlay Content').getByText(quickRangeLabel).click();
   }
 
   getRefreshPicker() {
@@ -151,25 +156,40 @@ export class ExploreProfilesPage extends PyroscopePage {
     return this.getLayoutSwitcher().getByLabel(layoutName).click();
   }
 
-  /* No data switch */
+  /* Hide panels without data switcher */
 
-  async getNoDataSwitcher() {
-    const inputId = await this.getByLabel('Hide panels without data').getAttribute('for');
-    return this.locator(`input[type="checkbox"]#${inputId}`);
+  getHideNoDataSwitcher() {
+    return this.getByTestId('noDataSwitcher');
   }
 
-  async assertNoDataSwitcher(isChecked: boolean) {
-    const checkBoxInput = await this.getNoDataSwitcher();
-
+  async assertHideNoDataSwitcher(isChecked: boolean) {
     if (isChecked) {
-      await expect(checkBoxInput).toBeChecked();
+      await expect(this.getHideNoDataSwitcher()).toBeChecked();
     } else {
-      await expect(checkBoxInput).not.toBeChecked();
+      await expect(this.getHideNoDataSwitcher()).not.toBeChecked();
     }
   }
 
-  async selectNoData() {
-    return (await this.getNoDataSwitcher()).click();
+  async selectHidePanelsWithoutNoData() {
+    // weirdly the mouse is on the "Flame graph" panel action at this point
+    // so we have to move it for the label to become actionable
+    await this.page.mouse.move(0, 0);
+    await this.getByLabel('Hide panels without data').click();
+  }
+
+  /* Panel type switcher */
+
+  getPanelTypeSwitcher() {
+    return this.getByLabel('Panel type switcher');
+  }
+
+  async assertSelectedPanelType(expectedPanelType: string) {
+    const panelType = await this.getPanelTypeSwitcher().locator('input[checked]~label').textContent();
+    await expect(panelType?.trim()).toBe(expectedPanelType);
+  }
+
+  selectPanelType(panelType: string) {
+    return this.getPanelTypeSwitcher().getByLabel(panelType).click();
   }
 
   /* Scene body & grid panels */
@@ -191,6 +211,10 @@ export class ExploreProfilesPage extends PyroscopePage {
     await panel.getByLabel(actionLabel).click();
   }
 
+  async assertPanelHasNoData(panelTitle: string) {
+    await expect(this.getPanelByTitle(panelTitle).getByText('No data')).toBeVisible();
+  }
+
   async assertNoSpinner() {
     await expect(this.getByTestId('Spinner')).toHaveCount(0);
   }
@@ -255,6 +279,41 @@ export class ExploreProfilesPage extends PyroscopePage {
   }
 
   closeFlameGraphContextualMenu() {
-    return this.getByTestId('panel').getByRole('heading').click();
+    return this.getByTestId('header-container').first().click();
+  }
+
+  /* Group by */
+
+  getGroupByContainer() {
+    return this.getByTestId('groupByLabelsContainer');
+  }
+
+  getGroupByPanels() {
+    return this.getGroupByContainer().locator(`[data-viz-panel-key]`);
+  }
+
+  getGroupByLabelsSelector() {
+    return this.getGroupByContainer().getByLabel('Labels selector', { exact: true });
+  }
+
+  async selectGroupByLabel(label: string) {
+    await this.getGroupByLabelsSelector().getByLabel(label, { exact: true }).click();
+  }
+
+  getCompareButton() {
+    return this.getGroupByContainer().getByRole('button', { name: 'Compare' });
+  }
+
+  getClearComparisonButton() {
+    // getByRole('button', { name:... }) does not work :man_shrug:
+    return this.getGroupByContainer().getByTestId('clearComparison');
+  }
+
+  getStatsPanel(labelValue: string) {
+    return this.getGroupByContainer().getByTestId(`stats-panel-${labelValue}`);
+  }
+
+  async selectForComparison(panelTitle: string, target: string) {
+    await this.getStatsPanel(panelTitle).getByText(target).click();
   }
 }

e2e/fixtures/pages/PyroscopePage.ts

@@ -26,8 +26,8 @@ export class PyroscopePage {
     return this.page.getByTestId(testId);
   }
 
-  getByLabel(label: string) {
-    return this.page.getByLabel(label);
+  getByLabel(label: string, options?: Record<string, unknown>) {
+    return this.page.getByLabel(label, options);
   }
 
   getByText(text, options?: Record<string, unknown>) {

e2e/tests/all-services-view/all-services.spec.ts

@@ -21,6 +21,29 @@ test.describe('All services view', () => {
     await expect(exploreProfilesPage.getSceneBody()).toHaveScreenshot();
   });
 
+  test.describe('Main refresh button', () => {
+    test('To presrve the user context, the panels in grid remains in placeuntil "Refresh" is clicked', async ({
+      exploreProfilesPage,
+    }) => {
+      await expect(exploreProfilesPage.getPanels()).toHaveCount(3);
+      await expect(exploreProfilesPage.getPanelByTitle('load-generator')).toBeVisible();
+      await expect(exploreProfilesPage.getPanelByTitle('pyroscope')).toBeVisible();
+      await expect(exploreProfilesPage.getPanelByTitle('ride-sharing-app')).toBeVisible();
+
+      await exploreProfilesPage.selectTimeRange('Last 5 minutes');
+
+      await expect(exploreProfilesPage.getPanels()).toHaveCount(3);
+      await expect(exploreProfilesPage.getPanelByTitle('load-generator')).toBeVisible();
+      await expect(exploreProfilesPage.getPanelByTitle('pyroscope')).toBeVisible();
+      await expect(exploreProfilesPage.getPanelByTitle('ride-sharing-app')).toBeVisible();
+
+      await exploreProfilesPage.clickOnRefresh();
+
+      await expect(exploreProfilesPage.getPanels()).toHaveCount(1);
+      await expect(exploreProfilesPage.getPanelByTitle('pyroscope')).toBeVisible();
+    });
+  });
+
   test('Profile type selector', async ({ exploreProfilesPage }) => {
     await exploreProfilesPage.selectProfileType('memory/inuse_objects');
 
@@ -35,7 +58,6 @@ test.describe('All services view', () => {
     await expect(exploreProfilesPage.getPanels()).toHaveCount(2);
     await expect(exploreProfilesPage.getPanelByTitle('load-generator')).toBeVisible();
     await expect(exploreProfilesPage.getPanelByTitle('ride-sharing-app')).toBeVisible();
-    await expect(exploreProfilesPage.getPanelByTitle('pyroscope')).not.toBeVisible();
   });
 
   test('Layout switcher', async ({ exploreProfilesPage }) => {

e2e/tests/favorites-view/favorites-view.spec.ts

@@ -31,7 +31,7 @@ test.describe('Favorites view', () => {
     // body scene controls
     await exploreProfilesPage.assertQuickFilter('Search favorites (comma-separated regexes are supported)', '');
     await exploreProfilesPage.assertSelectedLayout('Grid');
-    await exploreProfilesPage.assertNoDataSwitcher(false);
+    await exploreProfilesPage.assertHideNoDataSwitcher(false);
 
     // body
     await expect(exploreProfilesPage.getSceneBody()).toHaveScreenshot();
@@ -56,10 +56,25 @@ test.describe('Favorites view', () => {
     });
   });
 
+  test('Hide no data switcher', async ({ exploreProfilesPage }) => {
+    await exploreProfilesPage.selectTimeRange('Last 5 minutes');
+
+    await expect(exploreProfilesPage.getPanels()).toHaveCount(4);
+    await expect(exploreProfilesPage.getPanelByTitle('pyroscope · goroutine (goroutine)')).toBeVisible();
+
+    await exploreProfilesPage.assertPanelHasNoData('load-generator · cpu (process_cpu)');
+    await exploreProfilesPage.assertPanelHasNoData('ride-sharing-app · inuse_space (memory)');
+    await exploreProfilesPage.assertPanelHasNoData('ride-sharing-app · samples (process_cpu) · vehicle (4)');
+
+    await exploreProfilesPage.selectHidePanelsWithoutNoData();
+
+    await expect(exploreProfilesPage.getPanels()).toHaveCount(1);
+    await expect(exploreProfilesPage.getPanelByTitle('pyroscope · goroutine (goroutine)')).toBeVisible();
+  });
+
   test.describe('Panel actions', () => {
     test('Labels action without "group by"', async ({ exploreProfilesPage }) => {
-      const panel = await exploreProfilesPage.getPanelByTitle('ride-sharing-app · inuse_space (memory)');
-      await panel.getByLabel('Labels').click();
+      await exploreProfilesPage.clickOnPanelAction('ride-sharing-app · inuse_space (memory)', 'Labels');
 
       await exploreProfilesPage.asserSelectedExplorationType('Labels');
       await exploreProfilesPage.assertSelectedService('ride-sharing-app');
@@ -73,8 +88,7 @@ test.describe('Favorites view', () => {
     });
 
     test('Labels action with "group by"', async ({ exploreProfilesPage }) => {
-      const panel = await exploreProfilesPage.getPanelByTitle('ride-sharing-app · samples (process_cpu) · vehicle (4)');
-      await panel.getByLabel('Labels').click();
+      await exploreProfilesPage.clickOnPanelAction('ride-sharing-app · samples (process_cpu) · vehicle (4)', 'Labels');
 
       await exploreProfilesPage.asserSelectedExplorationType('Labels');
       await exploreProfilesPage.assertSelectedService('ride-sharing-app');
@@ -88,8 +102,7 @@ test.describe('Favorites view', () => {
     });
 
     test('Flame graph action', async ({ exploreProfilesPage }) => {
-      const panel = await exploreProfilesPage.getPanelByTitle('ride-sharing-app · inuse_space (memory)');
-      await panel.getByLabel('Flame graph').click();
+      await exploreProfilesPage.clickOnPanelAction('ride-sharing-app · inuse_space (memory)', 'Flame graph');
 
       await exploreProfilesPage.asserSelectedExplorationType('Flame graph');
       await exploreProfilesPage.assertSelectedService('ride-sharing-app');
@@ -112,8 +125,7 @@ test.describe('Favorites view', () => {
     });
 
     test('Favorite action, after clicking on the main refresh button', async ({ exploreProfilesPage }) => {
-      const panel = await exploreProfilesPage.getPanelByTitle('ride-sharing-app · inuse_space (memory)');
-      await panel.getByLabel('Favorite').click();
+      await exploreProfilesPage.clickOnPanelAction('ride-sharing-app · inuse_space (memory)', 'Favorite');
 
       await exploreProfilesPage.clickOnRefresh();