Add tests

concord-consortium · Sep 17, 2024 · 861db2a · 861db2a
1 parent a39f279
commit 861db2a
Show file tree

Hide file tree

Showing 5 changed files with 235 additions and 0 deletions.
diff --git a/cypress/e2e/functional/tile_tests/bar_graph_tile_spec.js b/cypress/e2e/functional/tile_tests/bar_graph_tile_spec.js
@@ -335,4 +335,160 @@ context('Bar Graph Tile', function () {
     }
   });
 
+  it.only('Synchronizes selection', function () {
+    beforeTest();
+
+    clueCanvas.addTile('bargraph');
+
+    // Table dataset for testing:
+    // 4 instances of X / Y / Z
+    // 2 instances of XX / Y / Z
+    // 1 instance of X / YY / Z
+    clueCanvas.addTile('table');
+    tableTile.fillTable(tableTile.getTableTile(), [
+      ['X', 'Y', 'Z'],
+      ['XX', 'Y', 'Z'],
+      ['X', 'YY', 'Z'],
+      ['X', 'Y', 'Z'],
+      ['XX', 'Y', 'Z'],
+      ['X', 'Y', 'Z'],
+      ['X', 'Y', 'Z'],
+    ]);
+
+    barGraph.getTile().click();
+    clueCanvas.clickToolbarButton('bargraph', 'link-tile');
+    cy.get('select').select('Table Data 1');
+    cy.get('.modal-button').contains("Graph It!").click();
+
+    cy.log("Check synchronization of case selection with one attribute");
+
+    // Selecting cases in the table should highlight the corresponding bars in the bar graph
+    tableTile.getSelectedRow(workspaces[0]).should('have.length', 0);
+    for (const workspace of workspaces) {
+      barGraph.getBarHighlight(workspace).should('have.length', 0);
+    }
+    tableTile.getTableIndexColumnCell().eq(0).click(); // first X Y Z case, X bar selected
+    tableTile.getSelectedRow(workspaces[0]).should('have.length', 1);
+    barGraph.getBarHighlight(workspaces[0]).should('have.length', 1);
+    barGraph.getBarHighlight(workspaces[1]).should('have.length', 1);
+    // Selection is local, volatile state, so remote workspace should not be affected
+    barGraph.getBarHighlight(workspaces[2]).should('have.length', 0);
+    tableTile.getTableIndexColumnCell().eq(1).click({shiftKey: true}); // first XX Y Z case, X and XX bars selected
+    for (const workspace of workspaces.slice(0, 2)) {
+      barGraph.getBarHighlight(workspace).should('have.length', 2);
+    }
+    tableTile.getTableIndexColumnCell().eq(2).click({shiftKey: true}); // first X YY Z case, X and XX bars selected
+    for (const workspace of workspaces.slice(0, 2)) {
+      barGraph.getBarHighlight(workspace).should('have.length', 2);
+    }
+    tableTile.getTableIndexColumnCell().eq(0).click({shiftKey: true});
+    for (const workspace of workspaces.slice(0, 2)) {
+      barGraph.getBarHighlight(workspace).should('have.length', 2);
+    }
+    tableTile.getTableIndexColumnCell().eq(1).click({shiftKey: true});
+    for (const workspace of workspaces.slice(0, 2)) {
+      barGraph.getBarHighlight(workspace).should('have.length', 1);
+    }
+    tableTile.getTableIndexColumnCell().eq(2).click({shiftKey: true});
+    for (const workspace of workspaces.slice(0, 2)) {
+      barGraph.getBarHighlight(workspace).should('have.length', 0);
+    }
+
+    // Clicking on bars should select the corresponding cases in the table
+    tableTile.getSelectedRow(workspaces[0]).should('have.length', 0);
+    barGraph.getBar().eq(0).click();
+    for (const workspace of workspaces.slice(0, 2)) {
+      tableTile.getSelectedRow(workspace).should('have.length', 5); // All "X" cases
+    }
+    barGraph.getBar().eq(1).click();
+    for (const workspace of workspaces.slice(0, 2)) {
+      tableTile.getSelectedRow(workspace).should('have.length', 2); // All "XX" cases
+    }
+    // Unselect the two selected cases, which should be numbers 1 and 4
+    tableTile.getTableIndexColumnCell().eq(1).click({shiftKey: true});
+    tableTile.getTableIndexColumnCell().eq(4).click({shiftKey: true});
+    tableTile.getSelectedRow(workspaces[0]).should('have.length', 0);
+
+    cy.log("Check synchronization of case selection with two attributes");
+    barGraph.getSortByMenuButton().click();
+    barGraph.getChakraMenuItem().should('have.length', 3);
+    barGraph.getChakraMenuItem().eq(1).should('have.text', 'y').click();
+    barGraph.getBar().should("have.length", 3);
+
+    tableTile.getTableIndexColumnCell().eq(0).click(); // first X Y Z case, X Y bar selected
+    tableTile.getSelectedRow(workspaces[0]).should('have.length', 1);
+    barGraph.getBarHighlight(workspaces[0]).should('have.length', 1);
+    barGraph.getBarHighlight(workspaces[1]).should('have.length', 1);
+    // Selection is local, volatile state, so remote workspace should not be affected
+    barGraph.getBarHighlight(workspaces[2]).should('have.length', 0);
+
+    tableTile.getTableIndexColumnCell().eq(1).click({shiftKey: true}); // first XX Y Z case, X Y and XX Y bars selected
+    for (const workspace of workspaces.slice(0, 2)) {
+      barGraph.getBarHighlight(workspace).should('have.length', 2);
+    }
+    tableTile.getTableIndexColumnCell().eq(2).click({shiftKey: true}); // first X YY Z case, X Y, XX Y, and X YY bars selected
+    for (const workspace of workspaces.slice(0, 2)) {
+      barGraph.getBarHighlight(workspace).should('have.length', 3);
+    }
+    tableTile.getTableIndexColumnCell().eq(0).click({shiftKey: true});
+    for (const workspace of workspaces.slice(0, 2)) {
+      barGraph.getBarHighlight(workspace).should('have.length', 2);
+    }
+    tableTile.getTableIndexColumnCell().eq(1).click({shiftKey: true});
+    for (const workspace of workspaces.slice(0, 2)) {
+      barGraph.getBarHighlight(workspace).should('have.length', 1);
+    }
+    tableTile.getTableIndexColumnCell().eq(2).click({shiftKey: true});
+    for (const workspace of workspaces.slice(0, 2)) {
+      barGraph.getBarHighlight(workspace).should('have.length', 0);
+    }
+
+    // Clicking on bars should select the corresponding cases in the table
+    barGraph.getBar().eq(0).click();
+    for (const workspace of workspaces.slice(0, 2)) {
+      tableTile.getSelectedRow(workspace).should('have.length', 4); // All "X / Y" cases
+    }
+    barGraph.getBar().eq(1).click();
+    for (const workspace of workspaces.slice(0, 2)) {
+      tableTile.getSelectedRow(workspace).should('have.length', 1); // All "X / YY" cases
+    }
+    barGraph.getBar().eq(2).click();
+    for (const workspace of workspaces.slice(0, 2)) {
+      tableTile.getSelectedRow(workspace).should('have.length', 2); // All "XX / Y" cases
+    }
+
+    // Clicking bars in local read-only view also works and changes the main view, but not the remote view.
+    barGraph.getBar(workspaces[1]).eq(0).click();
+    for (const workspace of workspaces.slice(0, 2)) {
+      barGraph.getBarHighlight(workspace).should('have.length', 1);
+      tableTile.getSelectedRow(workspace).should('have.length', 4); // All "X / Y" cases
+    }
+    barGraph.getBar(workspaces[1]).eq(1).click();
+    for (const workspace of workspaces.slice(0, 2)) {
+      barGraph.getBarHighlight(workspace).should('have.length', 1);
+      tableTile.getSelectedRow(workspace).should('have.length', 1); // All "X / YY" cases
+    }
+    barGraph.getBar(workspaces[1]).eq(2).click();
+    for (const workspace of workspaces.slice(0, 2)) {
+      barGraph.getBarHighlight(workspace).should('have.length', 1);
+      tableTile.getSelectedRow(workspace).should('have.length', 2); // All "XX / Y" cases
+    }
+    // Unselect the two remaining selected cases
+    tableTile.getTableIndexColumnCell().eq(1).click({shiftKey: true});
+    tableTile.getTableIndexColumnCell().eq(4).click({shiftKey: true});
+    tableTile.getSelectedRow(workspaces[0]).should('have.length', 0);
+
+    // Clicking bars in remote read-only view does not change the main view, but does change itself.
+    barGraph.getBarHighlight(workspaces[2]).should('have.length', 0);
+    tableTile.getSelectedRow(workspaces[2]).should('have.length', 0);
+    barGraph.getBar(workspaces[2]).eq(0).click();
+    barGraph.getBarHighlight(workspaces[2]).should('have.length', 1);
+    tableTile.getSelectedRow(workspaces[2]).should('have.length', 4); // All "X / Y" cases
+    for (const workspace of workspaces.slice(0, 2)) {
+      barGraph.getBarHighlight(workspace).should('have.length', 0);
+      tableTile.getSelectedRow(workspace).should('have.length', 0); // All "XX / Y" cases
+    }
+
+  });
+
 });
diff --git a/cypress/support/elements/tile/BarGraphTile.js b/cypress/support/elements/tile/BarGraphTile.js
@@ -56,6 +56,10 @@ class BarGraphTile {
     return this.getChartArea(workspaceClass, tileIndex).find(`.visx-bar`);
   }
 
+  getBarHighlight(workspaceClass, tileIndex = 0) {
+    return this.getChartArea(workspaceClass, tileIndex).find(`.bar-highlight`);
+  }
+
   getLegendArea(workspaceClass, tileIndex = 0) {
     return this.getTile(workspaceClass, tileIndex).find(`.bar-graph-legend`);
   }

diff --git a/cypress/support/elements/tile/TableToolTile.js b/cypress/support/elements/tile/TableToolTile.js
@@ -41,6 +41,9 @@ class TableToolTile{
     getTableRow(){
       return cy.get('.canvas .rdg-row');
     }
+    getSelectedRow(workspaceClass) {
+      return cy.get(`${wsclass(workspaceClass)} .canvas .rdg-row.highlighted`);
+    }
     getColumnHeaderText(i){
       return cy.get('.column-header-cell .editable-header-cell .header-name').text();
     }

diff --git a/src/plugins/bar-graph/bar-graph-content.test.ts b/src/plugins/bar-graph/bar-graph-content.test.ts
@@ -118,6 +118,28 @@ Object {
     ]);
   });
 
+  it("returns expected array when a case is selected with primary attribute", () => {
+    const content = TestingBarGraphContentModel.create({ });
+    content.setSharedModel(sharedSampleDataSet());
+    content.setPrimaryAttribute("att-s");
+    content.sharedModel?.dataSet.setSelectedCases([content.sharedModel?.dataSet.cases[0].__id__]);
+    expect(content.dataArray).toEqual([
+      { "att-s": "cat", "value": { count: 2, selected: true }},
+      { "att-s": "owl", "value": { count: 2, selected: false }}
+    ]);
+    content.sharedModel?.dataSet.setSelectedCases([content.sharedModel?.dataSet.cases[2].__id__]);
+    expect(content.dataArray).toEqual([
+      { "att-s": "cat", "value": { count: 2, selected: false }},
+      { "att-s": "owl","value": { count: 2, selected: true }}
+    ]);
+    content.sharedModel?.dataSet.selectAllCases();
+    expect(content.dataArray).toEqual([
+      { "att-s": "cat", "value": { count: 2, selected: true }},
+      { "att-s": "owl","value": { count: 2, selected: true }}
+    ]);
+
+  });
+
   it("sets first dataset attribute as the primary attribute by default", () => {
     const content = TestingBarGraphContentModel.create({ });
     content.setSharedModel(sharedSampleDataSet());
@@ -138,6 +160,55 @@ Object {
     ]);
   });
 
+  it("returns expected array when a case is selected with primary and secondary attributes", () => {
+    const content = TestingBarGraphContentModel.create({ });
+    content.setSharedModel(sharedSampleDataSet());
+    content.setPrimaryAttribute("att-s");
+    content.setSecondaryAttribute("att-l");
+    content.sharedModel?.dataSet.setSelectedCases([content.sharedModel?.dataSet.cases[0].__id__]);
+    expect(content.dataArray).toEqual([
+      { "att-s": "cat", "yard": { count: 2, selected: true }},
+      { "att-s": "owl", "yard": { count: 1, selected: false }, "forest": { count: 1, selected: false }}
+    ]);
+    content.sharedModel?.dataSet.setSelectedCases([content.sharedModel?.dataSet.cases[3].__id__]);
+    expect(content.dataArray).toEqual([
+      { "att-s": "cat", "yard": { count: 2, selected: false }},
+      { "att-s": "owl", "yard": { count: 1, selected: false }, "forest": { count: 1, selected: true }}
+    ]);
+    content.sharedModel?.dataSet.selectAllCases();
+    expect(content.dataArray).toEqual([
+      { "att-s": "cat", "yard": { count: 2, selected: true }},
+      { "att-s": "owl", "yard": { count: 1, selected: true }, "forest": { count: 1, selected: true }}
+    ]);
+  });
+
+  it("selects cases based on primary and secondary attributes", () => {
+    const content = TestingBarGraphContentModel.create({ });
+    content.setSharedModel(sharedSampleDataSet());
+    const dataSet = content.sharedModel?.dataSet;
+    expect(dataSet).toBeDefined();
+    content.setPrimaryAttribute("att-s");
+    content.setSecondaryAttribute("att-l");
+
+    content.selectCasesByValues("cat", undefined);
+    expect(dataSet?.selectedCaseIds.map(c => dataSet?.caseIndexFromID(c))).toEqual([0, 1]);
+
+    content.selectCasesByValues("owl", undefined);
+    expect(dataSet?.selectedCaseIds.map(c => dataSet?.caseIndexFromID(c))).toEqual([2, 3]);
+
+    content.selectCasesByValues("cat", "yard");
+    expect(dataSet?.selectedCaseIds.map(c => dataSet?.caseIndexFromID(c))).toEqual([0, 1]);
+
+    content.selectCasesByValues("owl", "yard");
+    expect(dataSet?.selectedCaseIds.map(c => dataSet?.caseIndexFromID(c))).toEqual([2]);
+
+    content.selectCasesByValues("owl", "forest");
+    expect(dataSet?.selectedCaseIds.map(c => dataSet?.caseIndexFromID(c))).toEqual([3]);
+
+    content.selectCasesByValues("cat", "forest");
+    expect(dataSet?.selectedCaseIds.map(c => dataSet?.caseIndexFromID(c))).toEqual([]);
+  });
+
   it("fills in missing values with (no value)", () => {
     const content = TestingBarGraphContentModel.create({ });
     const dataSet = sharedSampleDataSet();

diff --git a/src/plugins/bar-graph/chart-area.tsx b/src/plugins/bar-graph/chart-area.tsx
@@ -227,6 +227,7 @@ function BarHighlight({ x, y, width, height }: IBarHighlightProps) {
       width={width + 8}
       height={height + 8}
       fill="#14F49E"
+      className="bar-highlight"
     />
   );
 }