Feature/highlight on base viz

cypress/integration/line-chart.spec.js

@@ -0,0 +1,146 @@
+/// <reference types="Cypress" />
+
+context("Line Chart", () => {
+
+  const header = () => cy.get(".cube-header-bar");
+  const timeFilter = () => cy.get(".filter-tile .filter:first");
+  const lineChart = () => cy.get(".measure-line-chart");
+  const highlighter = () => lineChart().find(".highlighter");
+  const highlighterFrame = () => highlighter().find(".frame");
+  const highlightModal = () => cy.get(".highlight-modal");
+  const acceptHighlight = () => highlightModal().find(".accept");
+  const dropHighlight = () => highlightModal().find(".drop");
+
+  describe("Highlight", () => {
+
+    const urls = {
+      timeSplit: "http://localhost:9090/#wiki/4/N4IgbglgzgrghgGwgLzgFwgewHYgFwhLYCmAtAMYAWcATmiADQgYC2xyOx+IAomuQHoAqgBUAwoxAAzCAjTEaUfAG1QaAJ4AHLgVZcmNYlO57JegAoKsAEyV5VIazBrosuAuYCMAEUlR5mviknkwa2twI6MT+IAC+ALoJTFCaSGh2DmE6zBBskta5xNhQbiaFkgDmLtgwkTQQGtzmIp4AEn6YdPighsa65aFa2QVsxaVMBYbkGDjccFDkRQXYFXFMSCwN+DUICEkgUFbRKj1GCkWLc9bWxNaSUp0s6N3MQ9w3UnC19ExgiDDZNavcIENjzZxcfaaCDYEjWbyFMY4DIgKhwWHEBCSbBwNgpOCXJjQABKmAARph6PEmNCMdYAMqdegEODXW6SBDECpLba1PZAA"
+    };
+
+    const assertHighlighterPosition = (expectedLeft, expectedWidth) =>
+      highlighterFrame().should($frame => {
+        const frame = $frame.get(0);
+        expect(frame.offsetLeft).to.eq(expectedLeft);
+        expect(frame.offsetWidth).to.eq(expectedWidth);
+      });
+
+    beforeEach(() => {
+      cy.visit(urls.timeSplit);
+    });
+
+    describe("Highlight selection with click", () => {
+      beforeEach(() => {
+        lineChart().click(100, 200);
+      });
+
+      describe("selecting highlight", () => {
+        it("should show highlight modal", () => {
+          highlightModal().should("exist");
+        });
+
+        it("should show time period on highlight modal", () => {
+          highlightModal().should("contain", "12 Sep 2015 3:00 - 12 Sep 2015 4:00");
+        });
+
+        it("should show highlighter", () => {
+          highlighter().should("exist");
+        });
+
+        it("should show highlighter on correct coordinates", () => {
+          assertHighlighterPosition(90, 30);
+        });
+      });
+
+      describe("accept highlight", () => {
+        it("should hide highlight modal after accept", () => {
+          acceptHighlight().click();
+
+          // we check for line chart existence first, so cypress won't give us false positive
+          // because base-visualisation shows loader
+          lineChart().should("exist");
+          highlightModal().should("not.exist");
+        });
+
+        it("should hide highlighter after accept", () => {
+          acceptHighlight().click();
+
+          // we check for line chart existence first, so cypress won't give us false positive
+          // because base-visualisation shows loader
+          lineChart().should("exist");
+          highlighter().should("not.exist");
+        });
+
+        it("accepting highlight should change time filter", () => {
+          acceptHighlight().click();
+
+          timeFilter().should("contain", "12 Sep 2015 3:00 - 12 Sep 2015 4:00");
+        });
+      });
+
+      describe("reselect highlight", () => {
+        it("should show moved highlight modal", () => {
+          lineChart().click(500, 200);
+
+          highlightModal().should("contain", "12 Sep 2015 16:00 - 12 Sep 2015 17:00");
+        });
+
+        it("should show moved highlighter", () => {
+          lineChart().click(500, 200);
+
+          assertHighlighterPosition(480, 30);
+        });
+      });
+
+      describe("drop highlight", () => {
+        it("should hide highlight modal after cancel", () => {
+          dropHighlight().click();
+
+          highlightModal().should("not.exist");
+        });
+
+        it("should hide highlight modal after cancel", () => {
+          dropHighlight().click();
+
+          highlighter().should("not.exist");
+        });
+
+        it("should hide highlight modal after clicking outside visualisation", () => {
+          header().click();
+
+          highlightModal().should("not.exist");
+        });
+
+        it("should hide highlighter after clicking outside visualisation", () => {
+          header().click();
+
+          highlighter().should("not.exist");
+        });
+      });
+    });
+
+    describe("Highlight selection with drag", () => {
+      beforeEach(() => {
+        lineChart()
+          .trigger("mousedown", 200, 100)
+          .trigger("mousemove", 500, 100)
+          .trigger("mouseup");
+      });
+
+      it("should show highlight modal", () => {
+        highlightModal().should("exist");
+      });
+
+      it("should show time period on highlight modal", () => {
+        highlightModal().should("contain", "12 Sep 2015 6:00 - 12 Sep 2015 14:00");
+      });
+
+      it("should show highlighter", () => {
+        highlighter().should("exist");
+      });
+
+      it("should show highlighter on correct coordinates", () => {
+        assertHighlighterPosition(180, 240);
+      });
+    });
+  });
+});

cypress/integration/table.spec.js

@@ -0,0 +1,142 @@
+context("Table", () => {
+
+  const header = () => cy.get(".cube-header-bar");
+  const filterTileRow = () => cy.get(".filter-tile");
+  const filterOverflowButton = () => filterTileRow().find(".overflow");
+  const filterTile = (i) => filterTileRow().find(`.filter:nth-child(${i})`);
+  const overflowMenu = () => cy.get(".overflow-menu");
+  const overflowTile = (i) => overflowMenu().find(`.filter:nth-child(${i})`);
+  const table = () => cy.get(".table");
+  const clickTarget = () => table().find(".event-target");
+  const highlightModal = () => cy.get(".highlight-modal");
+  const acceptHighlight = () => highlightModal().find(".accept");
+  const dropHighlight = () => highlightModal().find(".drop");
+  const findSegment = label => table().find(`.segment:contains("${label}")`);
+  const nthRow = n => table().find(`.row:nth-child(${n})`);
+
+  describe("Highlight", () => {
+    const urls = {
+      threeSplits: "http://localhost:9090/#wiki/4/N4IgbglgzgrghgGwgLzgFwgewHYgFwhpwBGCApiADSEQC2ZyOFBAomgMYD0AqgCoDCVEADMICNGQBOUfAG1QaAJ4AHZjXpDJZYfnUVqGegAUpWACYy88kGZiT0WXASMBGACJCoE5fgC0LgxU1BHQyLxAAXwBdaOooZSQ0S2slVV0vSQhsAHMhMzoybChHXXYACzhsbDIET0xJNHxQLR0CODMzMjMhVLUoUzC8iC12DBxdTqh2QvycoVVMzG6CSOokWghGvABWAAYIygUg9LRMuep8+iKSgmw4eni4abqGppAW3XbO7sC0gn7MoMLsMyKMbjYwtNsLNctQFuZdKsQOtNvhtgcjn8QBksrCbAVruMCMo4Nl9Nj6ltmtpPh0uj1jv8BjJgSMxk4IVMZrj5qYloiDsi6KidvsonFmXJqcIpIVnm06T8RPVaOg3r0Jto4DBxEIwIgYGokRqCPQ4LAtJFxSBlFlqmY3ATijhkiBypVqrVqHcHiTntRoAAlTDETCNa22qpdADKlNp3yE5DJ0Pw2B1CAiQA="
+    };
+
+    beforeEach(() => {
+      cy.visit(urls.threeSplits);
+      clickSegment("Main");
+    });
+
+    function clickSegment(label) {
+      return findSegment(label)
+        .then($segment => {
+          const {top: scrollerOffset} = $segment.closest(".scroller").offset();
+          const {left, top: segmentOffset} = $segment.offset();
+          const height = $segment.height();
+          // force because we have overlay upon overlay in table
+          clickTarget().click(left, segmentOffset - scrollerOffset + (height / 2), { force: true });
+        });
+    }
+
+    function assertSegmentRowHighlight(label) {
+      const segment = findSegment(label);
+      segment
+        .should("have.class", "selected")
+        .then($segment => {
+          const index = $segment.index();
+          nthRow(index + 1).should("have.class", "selected");
+        });
+    }
+
+    function assertNoRowHighlightIsSelected() {
+      table().find(".row.selected").should("not.exist");
+      table().find(".segment.selected").should("not.exist");
+    }
+
+    function assertFilterTileValues(values, overflowValues) {
+      values.forEach((value, idx) => {
+        filterTile(idx + 1).should("contain", value);
+      });
+
+      filterOverflowButton().click();
+      overflowValues.forEach((value, idx) => {
+        overflowTile(idx + 1).should("contain", value);
+      });
+    }
+
+    describe("selecting highlight", () => {
+      it("should show highlight modal", () => {
+        highlightModal().should("exist");
+      });
+
+      it("should show time period on highlight modal", () => {
+        highlightModal().should("contain", "Main");
+      });
+
+      it("should show row highlight", () => {
+        assertSegmentRowHighlight("Main");
+      });
+    });
+
+    describe("accept highlight", () => {
+      it("should hide highlight modal after accept", () => {
+        acceptHighlight().click();
+
+        // we check for table existence first, so cypress won't give us false positive
+        // because base-visualisation shows loader
+        table().should("exist");
+        highlightModal().should("not.exist");
+      });
+
+      it("should hide row highlight after accept", () => {
+        acceptHighlight().click();
+
+        assertNoRowHighlightIsSelected();
+      });
+
+      it("accepting highlight should change filters", () => {
+        acceptHighlight().click();
+
+        assertFilterTileValues(["Latest day", "Channel:en"], ["Namespace:Main"]);
+      });
+    });
+
+    describe("reselect highlight", () => {
+      it("should show moved highlight modal", () => {
+        clickSegment("Lava Fire");
+
+        highlightModal().should("contain", "Lava Fire");
+      });
+
+      it("should show moved highlighter", () => {
+        clickSegment("Lava Fire");
+
+        assertSegmentRowHighlight("Lava Fire");
+      });
+    });
+
+    describe("drop highlight", () => {
+      it("should hide highlight modal after cancel", () => {
+        dropHighlight().click();
+
+        highlightModal().should("not.exist");
+      });
+
+      it("should hide highlight modal after cancel", () => {
+        dropHighlight().click();
+
+        assertNoRowHighlightIsSelected();
+      });
+
+      it("should hide highlight modal after clicking outside visualisation", () => {
+        header().click();
+
+        highlightModal().should("not.exist");
+      });
+
+      it("should hide highlighter after clicking outside visualisation", () => {
+        header().click();
+
+        assertNoRowHighlightIsSelected();
+      });
+    });
+
+  });
+});