showBorder attribute for graph (Doenet#1981)

jaltekruse · Mar 7, 2023 · bb084b3 · bb084b3
1 parent 6b9db14
commit bb084b3
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 3 deletions.
diff --git a/cypress/e2e/DoenetML/tagSpecific/answer.cy.js b/cypress/e2e/DoenetML/tagSpecific/answer.cy.js
@@ -1110,7 +1110,7 @@ describe('Answer Tag Tests', function () {
 
 
       cy.log("Pressing enter does not submit")
-      cy.get(textinputAnchor).type(`{enter}`);
+      cy.get(textinputAnchor).type(`{enter}`).blur();
 
       cy.log('Test value displayed in browser')
       cy.get(textinputAnchor).should('have.value', ' hello there \n');

diff --git a/cypress/e2e/DoenetML/tagSpecific/graph.cy.js b/cypress/e2e/DoenetML/tagSpecific/graph.cy.js
@@ -1979,4 +1979,33 @@ describe('Graph Tag Tests', function () {
 
   });
 
+  it('show border', () => {
+    cy.window().then(async (win) => {
+      win.postMessage({
+        doenetML: `
+    <text>a</text>
+
+    <graph>
+    </graph>
+    
+    <graph showBorder>
+    </graph>
+    
+    <graph showBorder="false">
+    </graph>
+    `}, "*");
+    });
+
+    cy.get('#\\/_text1').should('have.text', 'a') //wait for page to load
+
+    // not sure what to test as don't know how to check renderer...
+    cy.window().then(async (win) => {
+      let stateVariables = await win.returnAllStateVariables1();
+      expect(stateVariables["/_graph1"].stateValues.showBorder).eq(true);
+      expect(stateVariables["/_graph2"].stateValues.showBorder).eq(true);
+      expect(stateVariables["/_graph3"].stateValues.showBorder).eq(false);
+    })
+
+  });
+
 });
diff --git a/src/Core/components/Graph.js b/src/Core/components/Graph.js
@@ -196,6 +196,14 @@ export default class Graph extends BlockComponent {
       defaultValue: false,
       public: true,
     };
+
+    attributes.showBorder = {
+      createComponentOfType: "boolean",
+      createStateVariable: "showBorder",
+      defaultValue: true,
+      public: true,
+      forRenderer: true,
+    };
     return attributes;
   }
 

diff --git a/src/Viewer/core.js b/src/Viewer/core.js
diff --git a/src/Viewer/renderers/graph.jsx b/src/Viewer/renderers/graph.jsx
@@ -148,7 +148,11 @@ export default React.memo(function Graph(props) {
     outerStyle = { display: "flex", justifyContent: SVs.horizontalAlign };
   }
 
-  divStyle.border = "2px solid var(--canvastext)";
+  if (SVs.showBorder) {
+    divStyle.border = "2px solid var(--canvastext)";
+  } else {
+    divStyle.border = "none";
+  }
   divStyle.marginBottom = "12px";
   divStyle.marginTop = "12px";
   divStyle.backgroundColor = "var(--canvas)";