Merge pull request #357 from mcastre/feature/fix-screenshot-map-controls

Add Custom Attribute to Hide UI Controls on Image Capture
MinisterioPublicoRJ · Oct 5, 2017 · 308d4b1 · 308d4b1
2 parents a83247c + 4b6aaed
commit 308d4b1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -12,7 +12,7 @@ const Header = ({onHeaderClick, showTooltipMenu}) => {
                 <img src={require('../../assets/img/logo.png')} alt="InLoco" className="application-header--logo"/>
             </a>
             </div>
-            <a className="application-header--menu-button fa fa-bars focus-menu" role="button" onClick={onHeaderClick}>
+            <a className="application-header--menu-button fa fa-bars focus-menu" role="button" onClick={onHeaderClick} data-html2canvas-ignore={true}>
                 <span className={className}>Comece por aqui.</span>
             </a>
         </div>

diff --git a/src/components/Toolbar/Toolbar.js b/src/components/Toolbar/Toolbar.js
@@ -46,7 +46,8 @@ const Toolbar = ({
         }
     }
     return (
-        <div className={className}>
+        // the data-html2canvas-ignore attribute tells html2canvas to ignore rendering this element on image capture
+        <div className={className} data-html2canvas-ignore={true}>
             {
                 items.map( (item, index) => {
                     var itemClassName = "toolbar-item " + item.className

diff --git a/tests/Header/__snapshots__/Header.test.js.snap b/tests/Header/__snapshots__/Header.test.js.snap
@@ -7,15 +7,27 @@ exports[`Header component renders correctly with no data 1`] = `
   <div
     className="application-header--logo-placeholder"
   >
-    <img
-      alt="InLoco"
-      className="application-header--logo"
-      src={Object {}}
-    />
+    <a
+      href="http://apps.mprj.mp.br/sistema/mpmapas/home.html"
+      target="_blank"
+    >
+      <img
+        alt="InLoco"
+        className="application-header--logo"
+        src={Object {}}
+      />
+    </a>
   </div>
   <a
-    className="application-header--menu-button fa fa-bars"
+    className="application-header--menu-button fa fa-bars focus-menu"
+    data-html2canvas-ignore={true}
     role="button"
-  />
+  >
+    <span
+      className="menu-button--tootltip hidden"
+    >
+      Comece por aqui.
+    </span>
+  </a>
 </div>
 `;
diff --git a/tests/SearchLayer/__snapshots__/SearchLayer.test.js.snap b/tests/SearchLayer/__snapshots__/SearchLayer.test.js.snap
@@ -18,8 +18,9 @@ exports[`SearchLayer component renders correctly with no data 1`] = `
     <input
       className="search-layer--input"
       id="searchLayer"
+      onClick={[Function]}
       onKeyUp={[Function]}
-      placeholder="Ex.: Educação"
+      placeholder="Ex.: Escolas"
       type="text"
     />
   </label>