Percy: Introduce hide-in-percy and hide diff problematic elements (ge…

…tredash#3689)
pushpay · Nov 14, 2019 · 11b8de3 · 11b8de3
1 parent 571623a
commit 11b8de3
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/client/app/assets/less/inc/misc.less b/client/app/assets/less/inc/misc.less
@@ -225,4 +225,13 @@
     height: 37px;
     border-radius: 2px;
     width: 37px;
+}
+
+/* --------------------------------------------------------
+    Percy
+-----------------------------------------------------------*/
+@media only percy {
+    .hide-in-percy, .pace {
+        visibility: hidden;
+    }
 }
diff --git a/client/app/components/users/UserEdit.jsx b/client/app/components/users/UserEdit.jsx
@@ -179,7 +179,7 @@ export default class UserEdit extends React.Component {
       <Form layout="vertical">
         <hr />
         <Form.Item label="API Key" className="m-b-10">
-          <InputWithCopy id="apiKey" value={user.apiKey} data-test="ApiKey" readOnly />
+          <InputWithCopy id="apiKey" className="hide-in-percy" value={user.apiKey} data-test="ApiKey" readOnly />
         </Form.Item>
         <Button
           className="w-100"

diff --git a/client/cypress/integration/user/edit_profile_spec.js b/client/cypress/integration/user/edit_profile_spec.js
@@ -38,10 +38,7 @@ describe('Edit Profile', () => {
 
   it('renders the page and takes a screenshot', () => {
     cy.getByTestId('Groups').should('contain', 'admin');
-    cy.getByTestId('ApiKey').then(($apiKey) => {
-      $apiKey.val('secret');
-      cy.percySnapshot('User Profile');
-    });
+    cy.percySnapshot('User Profile');
   });
 
   context('changing password', () => {