From d8acf33d02f022a5b1b47e29a6c112d8585aadd1 Mon Sep 17 00:00:00 2001
From: Boris Goldowsky <bgoldowsky@concord.org>
Date: Wed, 11 Sep 2024 08:29:54 -0400
Subject: [PATCH] Add test for vertical layout

---
 .../tile_tests/bar_graph_tile_spec.js         | 29 +++++++++++++------
 cypress/support/elements/tile/BarGraphTile.js |  4 +++
 2 files changed, 24 insertions(+), 9 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
index 329a3b9a4..829558e4a 100644
--- a/cypress/e2e/functional/tile_tests/bar_graph_tile_spec.js
+++ b/cypress/e2e/functional/tile_tests/bar_graph_tile_spec.js
@@ -73,6 +73,15 @@ context('Bar Graph Tile', function () {
   it('Can link data ', function () {
     beforeTest();
 
+    clueCanvas.addTile('bargraph');
+    barGraph.getTiles().click();
+    barGraph.getYAxisLabel().should('have.text', 'Counts');
+    barGraph.getXAxisPulldown().should('have.text', 'Categories');
+    barGraph.getYAxisTickLabel().should('not.exist');
+    barGraph.getXAxisTickLabel().should('not.exist');
+    barGraph.getLegendArea().should('not.exist');
+    barGraph.getBar().should('not.exist');
+
     // Table dataset for testing:
     // 4 instances of X / Y / Z
     // 2 instances of XX / Y / Z
@@ -88,16 +97,8 @@ context('Bar Graph Tile', function () {
       ['X', 'Y', 'Z'],
     ]);
 
-    clueCanvas.addTile('bargraph');
-    barGraph.getTiles().click();
-    barGraph.getYAxisLabel().should('have.text', 'Counts');
-    barGraph.getXAxisPulldown().should('have.text', 'Categories');
-    barGraph.getYAxisTickLabel().should('not.exist');
-    barGraph.getXAxisTickLabel().should('not.exist');
-    barGraph.getLegendArea().should('not.exist');
-    barGraph.getBar().should('not.exist');
-
     cy.log('Link bar graph');
+    barGraph.getTile().click();
     clueCanvas.clickToolbarButton('bargraph', 'link-tile');
     cy.get('select').select('Table Data 1');
     cy.get('.modal-button').contains("Graph It!").click();
@@ -111,6 +112,16 @@ context('Bar Graph Tile', function () {
     barGraph.getSortByMenuButton().should('have.text', 'None');
     barGraph.getSecondaryValueName().should('have.length', 1).and('have.text', 'x');
 
+    cy.log('Legend should move to bottom when tile is narrow');
+    barGraph.getTileContent().should('have.class', 'horizontal').and('not.have.class', 'vertical');
+    clueCanvas.addTileByDrag('table', 'right');
+    clueCanvas.addTileByDrag('table', 'right');
+    barGraph.getTileContent().should('have.class', 'vertical').and('not.have.class', 'horizontal');
+    clueCanvas.getUndoTool().click(); // undo add table
+    clueCanvas.getUndoTool().click(); // undo add table
+    tableTile.getTableTile().should('have.length', 1);
+    barGraph.getTileContent().should('have.class', 'horizontal').and('not.have.class', 'vertical');
+
     cy.log('Change Sort By');
     barGraph.getSortByMenuButton().click();
     barGraph.getChakraMenuItem().should('have.length', 3);
diff --git a/cypress/support/elements/tile/BarGraphTile.js b/cypress/support/elements/tile/BarGraphTile.js
index 6eeea9068..5fe641923 100644
--- a/cypress/support/elements/tile/BarGraphTile.js
+++ b/cypress/support/elements/tile/BarGraphTile.js
@@ -12,6 +12,10 @@ class BarGraphTile {
     return this.getTile(tileIndex, workspaceClass).find(`.editable-tile-title-text`);
   }
 
+  getTileContent(tileIndex = 0, workspaceClass) {
+    return this.getTile(tileIndex, workspaceClass).find(`[data-testid="bar-graph-content"]`);
+  }
+
   getChakraMenuItem(tileIndex = 0, workspaceClass) {
     return cy.get(`body .chakra-portal button`).filter(':visible');
   }