smoke-test centroids + graph overlay layer (#1189)

* add test labels

* prettier + add clcik return to clickOn()

* prettier + begin test

* finish label counting test

* add util to get coordinates of element

* add test id to labels

* add test to check overlay transform

* remove logs

* rename to match master

client/__tests__/e2e/e2e.test.js

@@ -281,3 +281,55 @@ describe("ui elements don't error", () => {
     await page.evaluate("window.scrollBy(0, 1000);");
   });
 });
+
+describe("centroid labels", () => {
+  test("labels are created", async () => {
+    await utils.clickOn("centroid-label-toggle");
+    const labels = Object.keys(data.categorical);
+    /* eslint-disable no-await-in-loop */
+    // Toggle colorby for each category and check to see if labels are generated
+    for (let i = 0, { length } = labels; i < length; i += 1) {
+      const label = labels[i];
+      await utils.clickOn(`colorby-${label}`);
+      const generatedLabels = await utils.getAllByClass("centroid-label");
+      // Number of labels generated should be equal to size of the object
+      expect(generatedLabels).toHaveLength(
+        Object.keys(data.categorical[label]).length
+      );
+    }
+    /* eslint-enable no-await-in-loop */
+  });
+});
+
+describe("graph overlay", () => {
+  test("transform centroids correctly", async () => {
+    const category = Object.keys(data.categorical)[0];
+    await utils.clickOn("centroid-label-toggle");
+    await utils.clickOn(`colorby-${category}`);
+    await utils.clickOn("mode-pan-zoom");
+    const panCoords = await cxgActions.calcDragCoordinates(
+      "layout-graph",
+      data.pan["coordinates-as-percent"]
+    );
+
+    const categoryValue = Object.keys(data.categorical[category])[0];
+    const initialCoordinates = await utils.getElementCoordinates(
+      `${categoryValue}-centroid-label`
+    );
+    await cxgActions.drag(
+      "layout-graph",
+      panCoords.start,
+      panCoords.end,
+      false
+    );
+    const terminalCoordinates = await utils.getElementCoordinates(
+      `${categoryValue}-centroid-label`
+    );
+    expect(terminalCoordinates[0] - initialCoordinates[0]).toBeCloseTo(
+      panCoords.end.x - panCoords.start.x
+    );
+    expect(terminalCoordinates[1] - initialCoordinates[1]).toBeCloseTo(
+      panCoords.end.y - panCoords.start.y
+    );
+  });
+});

client/__tests__/e2e/puppeteerUtils.js

@@ -1,5 +1,4 @@
 export const puppeteerUtils = page => ({
-
   async waitByID(testId, props = {}) {
     return page.waitForSelector(`[data-testid='${testId}']`, props);
   },
@@ -15,9 +14,8 @@ export const puppeteerUtils = page => ({
   },
 
   async getAllByClass(testClass) {
-    return page.$$eval(
+    return page.$$eval(`[data-testclass=${testClass}]`, eles =>
-      `[data-testclass=${testClass}]`,
+      eles.map(ele => ele.dataset.testid)
-      eles => eles.map(ele => ele.dataset.testid)
     );
   },
 
@@ -45,10 +43,11 @@ export const puppeteerUtils = page => ({
     await page.type(selector, text);
   },
 
-  async clickOn(testId, options={}) {
+  async clickOn(testid, options = {}) {
-    await this.waitByID(testId);
+    await this.waitByID(testid);
-    await page.click(`[data-testid='${testId}']`, options);
+    const click = await page.click(`[data-testid='${testid}']`, options);
     await page.waitFor(50);
+    return click;
   },
 
   async getOneElementInnerHTML(selector) {
@@ -59,6 +58,12 @@ export const puppeteerUtils = page => ({
   async getOneElementInnerText(selector) {
     await page.waitForSelector(selector);
     return page.$eval(selector, el => el.innerText);
+  },
+
+  async getElementCoordinates(testid) {
+    return page.$eval(`[data-testid='${testid}']`, elem => {
+      const { left, top } = elem.getBoundingClientRect();
+      return [left, top];
+    });
   }
 });
-

client/src/components/graph/overlays/centroidLabels.js

@@ -62,6 +62,8 @@ class CentroidLabels extends PureComponent {
           key={key}
           className="centroid-label"
           transform={`translate(${value[0]}, ${value[1]})`}
+          data-testclass="centroid-label"
+          data-testid={`${key}-centroid-label`}
         >
           <text
             transform={inverseTransform}

client/src/components/menubar/index.js

@@ -366,6 +366,8 @@ class MenuBar extends React.Component {
           disabled={graphInteractionMode === "zoom"}
         >
           <Button
+            type="button"
+            data-testid="centroid-label-toggle"
             icon="property"
             onClick={this.handleCentroidChange}
             active={showCentroidLabels}