Integration test for links (#105)

* Update galata

* Add helper for opening a session

* Add tests on linked dataset display

* Add link editor test

* prettier

* Move the link test which seems to be corrupted by the viewer creation one

* Fix tests ?

* Use simple histograms to avoid snapshot diff

* update screenshot

* last snapshots

Author: brichet

examples/session3.glu

@@ -1,4 +1,38 @@
 {
+  "34cde72b-5653-4c88-b631-06a958d51e7e": {
+    "_type": "glue.viewers.histogram.qt.data_viewer.HistogramViewer",
+    "pos": [
+      0,
+      0
+    ],
+    "session": "Session",
+    "size": [
+      614,
+      560
+    ],
+    "state": {
+      "values": {
+        "layer": "w5_psc"
+      }
+    }
+  },
+  "3e7db9a2-c244-4e6e-a4fd-157329304711": {
+    "_type": "glue.viewers.histogram.qt.data_viewer.HistogramViewer",
+    "pos": [
+      614,
+      0
+    ],
+    "session": "Session",
+    "size": [
+      614,
+      560
+    ],
+    "state": {
+      "values": {
+        "layer": "w6_psc"
+      }
+    }
+  },
   "CallbackList": {
     "_type": "echo.containers.CallbackList",
     "values": [
@@ -613,7 +647,8 @@
     ],
     "viewers": [
       [
-        "ImageViewer"
+        "34cde72b-5653-4c88-b631-06a958d51e7e",
+        "3e7db9a2-c244-4e6e-a4fd-157329304711"
       ]
     ]
   },

ui-tests/package.json

@@ -9,7 +9,7 @@
     "test:update": "npx playwright test --update-snapshots"
   },
   "devDependencies": {
-    "@jupyterlab/galata": "^5.0.0-beta.0",
+    "@jupyterlab/galata": "^5.0.0",
     "@playwright/test": "^1.32.0",
     "rimraf": "^3.0.2"
   }

ui-tests/tests/test.spec.ts

@@ -1,4 +1,5 @@
 import { IJupyterLabPageFixture, expect, test } from '@jupyterlab/galata';
+import { Locator } from '@playwright/test';
 
 async function closeSideTab(page: IJupyterLabPageFixture): Promise<void> {
   await page
@@ -7,37 +8,102 @@ async function closeSideTab(page: IJupyterLabPageFixture): Promise<void> {
     .click();
 }
 
+async function openSession(
+  page: IJupyterLabPageFixture,
+  session: string,
+  waitUntilReady = true
+): Promise<void> {
+  await expect(page.getByText(`${session}.glu`)).toBeVisible();
+  await page.getByText(`${session}.glu`).dblclick();
+  if (waitUntilReady) {
+    // TODO Wait for spinner to not be visible once we have one
+    await page.waitForSelector('.bqplot');
+  }
+}
+
+async function createLink(
+  page: IJupyterLabPageFixture,
+  datasets: [string, string],
+  attributes: [string, string]
+): Promise<void> {
+  // Switch to link editor
+  await (await page.waitForSelector('text="Link Data"')).click();
+
+  await page.click(
+    `.glue-LinkEditor-linkingDatasetsPanel:first-child > div:text('${datasets[0]}')`
+  );
+  await page.click(
+    `.glue-LinkEditor-linkingDatasetsPanel:last-child > div:text('${datasets[1]}')`
+  );
+
+  let attr = page.locator(
+    `.firstAttributePanel > div:text('${attributes[0]}')`
+  );
+  if (!(await attr.getAttribute('class'))?.includes('selected')) {
+    await page.click(`.firstAttributePanel > div:text('${attributes[0]}')`);
+  }
+  attr = page.locator(`.secondAttributePanel > div:text('${attributes[1]}')`);
+  if (!(await attr.getAttribute('class'))?.includes('selected')) {
+    await page.click(`.secondAttributePanel > div:text('${attributes[1]}')`);
+  }
+
+  await page.click('.glue-LinkEditor-linkingGlueButton');
+}
+
+async function selectPlotRange(
+  page: IJupyterLabPageFixture,
+  viewer: Locator
+): Promise<void> {
+  await viewer.locator('button[value="bqplot:xrange"]').click();
+
+  await page.waitForSelector('g.selector.brushintsel');
+
+  const figureBox = await viewer.locator('.bqplot.figure').boundingBox();
+  await page.mouse.move(
+    figureBox!.x + figureBox!.width / 3,
+    figureBox!.y + figureBox!.height / 3
+  );
+  await page.mouse.down();
+  await page.mouse.move(
+    figureBox!.x + figureBox!.width / 2,
+    figureBox!.y + figureBox!.height / 2
+  );
+  await page.mouse.up();
+  await expect(viewer.locator('.glue__subset-select')).toContainText(
+    ' Subset 1 '
+  );
+}
+
 /**
  * Don't load JupyterLab webpage before running the tests.
  * This is required to ensure we capture all log messages.
  */
-test.use({ autoGoto: false });
+test.use({
+  autoGoto: false,
+  mockSettings: {
+    '@jupyterlab/apputils-extension:notification': {
+      fetchNews: 'false'
+    }
+  }
+});
 
 test('should render session file', async ({ page }) => {
   await page.goto();
 
-  await expect(page.getByText('session.glu')).toBeVisible();
-  await page.getByText('session.glu').dblclick();
+  await openSession(page, 'session');
 
   await closeSideTab(page);
 
-  // TODO Wait for spinner to not be visible once we have one
-  await page.waitForSelector('.bqplot');
-
   expect(await page.screenshot()).toMatchSnapshot('session-tab1.png');
 });
 
 test('should switch tab', async ({ page }) => {
   await page.goto();
 
-  await expect(page.getByText('session.glu')).toBeVisible();
-  await page.getByText('session.glu').dblclick();
+  await openSession(page, 'session');
 
   await closeSideTab(page);
 
-  // TODO Wait for spinner to not be visible once we have one
-  await page.waitForSelector('.bqplot');
-
   // Switch tab
   await page.getByRole('tab', { name: 'Tab 2' }).click();
 
@@ -49,11 +115,7 @@ test('should switch tab', async ({ page }) => {
 test('should open link editor', async ({ page }) => {
   await page.goto();
 
-  await expect(page.getByText('session.glu')).toBeVisible();
-  await page.getByText('session.glu').dblclick();
-
-  // TODO Wait for spinner to not be visible once we have one
-  await page.waitForSelector('.bqplot');
+  await openSession(page, 'session');
 
   // Switch to link editor
   await (await page.waitForSelector('text="Link Data"')).click();
@@ -64,21 +126,17 @@ test('should open link editor', async ({ page }) => {
 test('should open the control panel on widget clicking', async ({ page }) => {
   await page.goto();
 
-  await expect(page.getByText('session.glu')).toBeVisible();
-  await page.getByText('session.glu').dblclick();
-  await page.waitForSelector('.bqplot');
+  await openSession(page, 'session');
   await page.getByText('Histogram Viewer').click();
-  await page.getByText('TAB 1 - HISTOGRAMVIEWER');
+  page.getByText('TAB 1 - HISTOGRAMVIEWER');
 
   expect(await page.screenshot()).toMatchSnapshot('control-panel.png');
 });
 
 test('should hide the control panel on tab switching', async ({ page }) => {
   await page.goto();
 
-  await expect(page.getByText('session.glu')).toBeVisible();
-  await page.getByText('session.glu').dblclick();
-  await page.waitForSelector('.bqplot');
+  await openSession(page, 'session');
   await page.getByText('Histogram Viewer').click();
   await page.getByText('TAB 1 - HISTOGRAMVIEWER');
 
@@ -90,12 +148,44 @@ test('should hide the control panel on tab switching', async ({ page }) => {
   );
 });
 
+test('should add and delete link', async ({ page }) => {
+  await page.goto();
+
+  await openSession(page, 'session');
+
+  let linkCreated = false;
+  await createLink(
+    page,
+    ['w5', 'w5_psc'],
+    ['Pixel Axis 1 [x]', 'Pixel Axis 0 [x]']
+  );
+
+  const summaries = page.locator('.glue-LinkEditor-summaryIdentity');
+  const summariesCount = await summaries.count();
+
+  expect(summariesCount).toBe(3);
+
+  for (let i = 0; i < summariesCount; i++) {
+    if (
+      (await summaries.nth(i).innerText()) ===
+      'Pixel Axis 1 [x]\nPixel Axis 0 [x]'
+    ) {
+      linkCreated = true;
+      break;
+    }
+  }
+
+  expect(linkCreated).toBeTruthy();
+
+  // Remove the last link
+  await page.click('.glue-LinkEditor-deleteButton:last-child');
+  expect(await summaries.count()).toBe(2);
+});
+
 test('should add new dataset and create a viewer', async ({ page }) => {
   await page.goto();
 
-  await expect(page.getByText('session.glu')).toBeVisible();
-  await page.getByText('session.glu').dblclick();
-  await page.waitForSelector('.bqplot');
+  await openSession(page, 'session');
 
   // Open the "Add Data" dialog
   await page.getByText('Add Data').click();
@@ -154,3 +244,111 @@ test('should add new dataset and create a viewer', async ({ page }) => {
     'add-data-viewer-created.png'
   );
 });
+
+test('should display linked data', async ({ page }) => {
+  await page.goto();
+
+  await openSession(page, 'session3');
+
+  // Create a link between the ID of datasets
+  await createLink(page, ['w5_psc', 'w6_psc'], ['ID', 'ID']);
+
+  await page.getByRole('tab', { name: 'Tab 1' }).click();
+  const viewers = page.locator('.glue-item');
+
+  // force the size of histograms for snapshot comparison
+  viewers
+    .first()
+    .locator('.bqplot.figure > svg.svg-figure > g > rect')
+    .evaluate(element => {
+      element.style.width = '571px';
+      element.style.height = '410px';
+    });
+
+  viewers
+    .last()
+    .locator('.bqplot.figure > svg.svg-figure > g > rect')
+    .evaluate(element => {
+      element.style.width = '571px';
+      element.style.height = '410px';
+    });
+
+  // select a range.
+  await selectPlotRange(page, viewers.first());
+
+  // expect the selected area and the linked one to match.
+  expect(
+    await viewers
+      .first()
+      .locator('.bqplot.figure > svg.svg-figure > g > rect')
+      .screenshot()
+  ).toMatchSnapshot('histogram-selection.png');
+
+  expect(
+    await viewers
+      .last()
+      .locator('.bqplot.figure > svg.svg-figure > g > rect')
+      .screenshot()
+  ).toMatchSnapshot('histogram-linked-selection.png');
+});
+
+test('should delete and restore links', async ({ page }) => {
+  await page.goto();
+
+  await openSession(page, 'session3');
+
+  // remove the existing links
+  await (await page.waitForSelector('text="Link Data"')).click();
+  const deleteButton = page.locator('.glue-LinkEditor-deleteButton');
+  while (await deleteButton.count()) {
+    await deleteButton.first().click();
+  }
+
+  // select attributes in viewers
+  await page.getByRole('tab', { name: 'Tab 1' }).click();
+  const viewers = page.locator('.glue-item');
+
+  // force the size of histograms for snapshot comparison
+  viewers
+    .first()
+    .locator('.bqplot.figure > svg.svg-figure > g > rect')
+    .evaluate(element => {
+      element.style.width = '571px';
+      element.style.height = '410px';
+    });
+
+  viewers
+    .last()
+    .locator('.bqplot.figure > svg.svg-figure > g > rect')
+    .evaluate(element => {
+      element.style.width = '571px';
+      element.style.height = '410px';
+    });
+
+  // select a range.
+  await selectPlotRange(page, viewers.first());
+
+  // expect the selected area and the linked one to match
+  expect(
+    await viewers
+      .first()
+      .locator('.bqplot.figure > svg.svg-figure > g > rect')
+      .screenshot()
+  ).toMatchSnapshot('histogram-selection.png');
+
+  expect(
+    await viewers
+      .last()
+      .locator('.bqplot.figure > svg.svg-figure > g > rect')
+      .screenshot()
+  ).toMatchSnapshot('histogram-no-selection.png');
+
+  await createLink(page, ['w5_psc', 'w6_psc'], ['ID', 'ID']);
+  await page.getByRole('tab', { name: 'Tab 1' }).click();
+  expect(
+    await viewers
+      .last()
+      .locator('.bqplot.figure > svg.svg-figure > g > rect')
+      .screenshot()
+  ).toMatchSnapshot('histogram-linked-selection.png');
+});