fix: Measures for Selection banner not rendered (PT-187459320) (#1291)

[#187459320](https://www.pivotaltracker.com/story/show/187459320)
concord-consortium · May 31, 2024 · de57b1e · de57b1e
1 parent d43e803
commit de57b1e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 20 deletions.
diff --git a/v3/cypress/e2e/graph.spec.ts b/v3/cypress/e2e/graph.spec.ts
@@ -283,23 +283,21 @@ context("Graph UI", () => {
     cy.wait(500)
     cy.get("[data-testid=show-parent-toggles]").should("exist").and("have.text", "Show Parent Visibility Toggles")
   })
-  // TODO: Get the tests below working. For some reason, the banner isn't being rendered in Cypress even though it
-  // seems to render fine in the browser.
-  // it("It adds a banner to the graph when Show Measures for Selection is activated", () => {
-  //   cy.dragAttributeToTarget("table", "Sleep", "bottom")
-  //   cy.get("[data-testid=measures-for-selection-banner]").should("not.exist")
-  //   graph.getHideShowButton().click()
-  //   cy.wait(500)
-  //   cy.get("[data-testid=show-selection-measures]").click()
-  //   cy.wait(500)
-  //   cy.get("[data-testid=measures-for-selection-banner]")
-  //     .should("exist").and("have.text", "Showing measures for 0 selected cases")
-  //   graph.getHideShowButton().click()
-  //   cy.wait(500)
-  //   cy.get("[data-testid=show-selection-measures]").click()
-  //   cy.wait(500)
-  //   cy.get("[data-testid=measures-for-selection-banner]").should("not.exist")
-  // })
+  it("It adds a banner to the graph when Show Measures for Selection is activated", () => {
+    cy.dragAttributeToTarget("table", "Sleep", "bottom")
+    cy.get("[data-testid=measures-for-selection-banner]").should("not.exist")
+    graph.getHideShowButton().click()
+    cy.wait(500)
+    cy.get("[data-testid=show-selection-measures]").click()
+    cy.wait(500)
+    cy.get("[data-testid=measures-for-selection-banner]")
+      .should("exist").and("have.text", "Showing measures for 0 selected cases")
+    graph.getHideShowButton().click()
+    cy.wait(500)
+    cy.get("[data-testid=show-selection-measures]").click()
+    cy.wait(500)
+    cy.get("[data-testid=measures-for-selection-banner]").should("not.exist")
+  })
   it("disables Point Size control when display type is bars", () => {
     cy.dragAttributeToTarget("table", "Sleep", "bottom")
     cy.wait(500)

diff --git a/v3/src/components/graph/adornments/adornments.tsx b/v3/src/components/graph/adornments/adornments.tsx
@@ -38,7 +38,7 @@ export const Adornments = observer(function Adornments() {
     )
   }, [graphModel, layout])
 
-  if (!adornments?.length) return null
+  if (!adornments?.length && !graphModel.showMeasuresForSelection) return null
 
   const adornmentBanners = adornments.map((adornment: IAdornmentModel) => {
     const componentContentInfo = getAdornmentContentInfo(adornment.type)
@@ -50,7 +50,7 @@ export const Adornments = observer(function Adornments() {
       BannerComponent && adornment.isVisible &&
         <BannerComponent key={componentInfo.type} model={adornment} />
     )
-  })
+  }).filter(banner => banner !== undefined)
 
   const xAttrId = dataConfig?.attributeID("x")
   const xAttrType = dataConfig?.attributeType("x")
@@ -156,7 +156,7 @@ export const Adornments = observer(function Adornments() {
   )
   return (
     <>
-      {adornmentBanners &&
+      {(adornmentBanners.length > 0 || graphModel.showMeasuresForSelection) &&
         <div className="graph-adornments-banners" data-testid="graph-adornments-banners">
           {graphModel.showMeasuresForSelection && <MeasuresForSelectionBanner />}
           {adornmentBanners}