Fixes to Percy

client/app/components/TimeAgo.jsx

@@ -68,7 +68,7 @@ export class TimeAgo extends React.PureComponent {
   }
 
   render() {
-    return <span title={this.state.title}>{this.state.value}</span>;
+    return <span title={this.state.title} data-test="TimeAgo">{this.state.value}</span>;
   }
 }
 

client/app/components/type-picker.html

@@ -10,7 +10,7 @@ <h3 class="text-center">{{$ctrl.title}}</h3>
     </div>
 
     <div class="row">
-        <div class="col-lg-12 database-source" data-test="DatabaseSource">
+        <div class="col-lg-12 database-source" data-test="TypePicker">
             <div class="visual-card" ng-repeat="type in $ctrl.types | filter:$ctrl.filter:strict" ng-click="$ctrl.onTypeSelect(type)">
             <img ng-src="{{$ctrl.imgRoot}}/{{type.type}}.png" alt="{{type.name}}">
             <h3>{{type.name}}</h3>

client/app/pages/data-sources/show.html

@@ -6,7 +6,7 @@
                  on-type-select="setType"
                  ng-if="dataSource.type === undefined"></type-picker>
 
-    <div ng-if="dataSource.type !== undefined">
+    <div ng-if="dataSource.type !== undefined" data-test="DataSource">
       <div class="creation-container">
         <div class="col-xs-12 col-sm-4">
           <a ng-click="resetType()" ng-if="canChangeType">← Change <span class="hidden-xs">Type</span></a>

client/app/pages/groups/list.html

@@ -1,5 +1,5 @@
 <settings-screen>
-  <div class="row">
+  <div class="row" data-test="GroupList">
     <div class="col-md-12">
       <p ng-if="currentUser.hasPermission('admin')">
         <a ng-click="newGroup()" class="btn btn-default"><i class="fa fa-plus"></i> New Group</a>

client/app/pages/groups/show.html

@@ -1,50 +1,52 @@
 <settings-screen>
-  <group-name group="group"></group-name>
+  <div data-test="Group">
+    <group-name group="group"></group-name>
 
-  <div class="row">
-    <div class="col-lg-4">
-      <ul class="tab-nav">
-        <li role="presentation" class="active">
-          <a href="groups/{{group.id}}">Members</a>
-        </li>
-        <li role="presentation" ng-if="currentUser.isAdmin">
-          <a href="groups/{{group.id}}/data_sources">Data Sources</a>
-        </li>
-      </ul>
-    </div>
+    <div class="row">
+      <div class="col-lg-4">
+        <ul class="tab-nav">
+          <li role="presentation" class="active">
+            <a href="groups/{{group.id}}">Members</a>
+          </li>
+          <li role="presentation" ng-if="currentUser.isAdmin">
+            <a href="groups/{{group.id}}/data_sources">Data Sources</a>
+          </li>
+        </ul>
+      </div>
 
-    <div class="col-lg-8" ng-if="currentUser.isAdmin">
-      <ui-select ng-model="newMember.selected" on-select="addMember($item)">
-        <ui-select-match placeholder="Add New Member"></ui-select-match>
-        <ui-select-choices repeat="user in foundUsers | filter:$select.search" refresh="findUser($select.search)" refresh-delay="0"
-          ui-disable-choice="user.alreadyMember">
-          <div class="d-flex align-items-center">
-            <img ng-src="{{ user.profile_image_url }}" class="profile__image" height="24px">&nbsp;
-            <span ng-class="{'text-muted': user.is_disabled}">{{user.name}}</span>
-            <small ng-if="user.alreadyMember">(already member in this group)</small>
-          </div>
-        </ui-select-choices>
-      </ui-select>
+      <div class="col-lg-8" ng-if="currentUser.isAdmin">
+        <ui-select ng-model="newMember.selected" on-select="addMember($item)">
+          <ui-select-match placeholder="Add New Member"></ui-select-match>
+          <ui-select-choices repeat="user in foundUsers | filter:$select.search" refresh="findUser($select.search)" refresh-delay="0"
+            ui-disable-choice="user.alreadyMember">
+            <div class="d-flex align-items-center">
+              <img ng-src="{{ user.profile_image_url }}" class="profile__image" height="24px">&nbsp;
+              <span ng-class="{'text-muted': user.is_disabled}">{{user.name}}</span>
+              <small ng-if="user.alreadyMember">(already member in this group)</small>
+            </div>
+          </ui-select-choices>
+        </ui-select>
+      </div>
     </div>
-  </div>
-  <div class="row m-t-5">
-    <div class="col-lg-12">
-      <table class="table table-condensed table-hover" ng-show="members">
-        <tbody>
-          <tr ng-repeat="member in members">
-            <td width="50px">
-              <img ng-src="{{ member.profile_image_url }}" class="profile__image" height="40px" />
-            </td>
-            <td ng-class="{'text-muted': member.is_disabled}">
-              <a href="users/{{member.id}}">{{member.name}}</a>
-              <button class="pull-right btn btn-sm btn-danger" ng-click="removeMember(member)" ng-if="currentUser.isAdmin && (group.type != 'builtin' || currentUser.id != member.id)">Remove</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+    <div class="row m-t-5">
+      <div class="col-lg-12">
+        <table class="table table-condensed table-hover" ng-show="members">
+          <tbody>
+            <tr ng-repeat="member in members">
+              <td width="50px">
+                <img ng-src="{{ member.profile_image_url }}" class="profile__image" height="40px" />
+              </td>
+              <td ng-class="{'text-muted': member.is_disabled}">
+                <a href="users/{{member.id}}">{{member.name}}</a>
+                <button class="pull-right btn btn-sm btn-danger" ng-click="removeMember(member)" ng-if="currentUser.isAdmin && (group.type != 'builtin' || currentUser.id != member.id)">Remove</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
 
-      <div ng-hide="members.length">
-        No members.
+        <div ng-hide="members.length">
+          No members.
+        </div>
       </div>
     </div>
   </div>

client/app/pages/settings/organization.html

@@ -1,5 +1,5 @@
 <settings-screen>
-    <div class="row">
+    <div class="row" data-test="OrganizationSettings">
         <div class="col-md-offset-4 col-md-4">
             <h3 class="m-t-0">General</h3>
             <p>

cypress/cypress.js

@@ -33,8 +33,10 @@ function stopServer() {
 }
 
 function runCypressCI() {
-  if (process.env.PERCY_TOKEN_ENCODED) {
-    process.env.PERCY_TOKEN = atob(`${process.env.PERCY_TOKEN_ENCODED}`);
+  const { PERCY_TOKEN_ENCODED, CIRCLE_REPOSITORY_URL } = process.env;
+
+  if (PERCY_TOKEN_ENCODED && CIRCLE_REPOSITORY_URL && CIRCLE_REPOSITORY_URL.includes('getredash/redash')) {
+    process.env.PERCY_TOKEN = atob(`${PERCY_TOKEN_ENCODED}`);
   }
   execSync(
     'docker-compose run cypress ./node_modules/.bin/percy exec -- ./node_modules/.bin/cypress run --browser chrome',

cypress/integration/data-source/create_data_source_spec.js

@@ -4,8 +4,13 @@ describe('Create Data Source', () => {
     cy.visit('/data_sources/new');
   });
 
+  it('renders the page and takes a screenshot', () => {
+    cy.getByTestId('TypePicker').should('contain', 'PostgreSQL');
+    cy.percySnapshot('Create Data Source - Types');
+  });
+
   it('creates a new PostgreSQL data source', () => {
-    cy.getByTestId('DatabaseSource').contains('PostgreSQL').click();
+    cy.getByTestId('TypePicker').contains('PostgreSQL').click();
 
     cy.getByTestId('Name').type('Redash');
     cy.getByTestId('Host').type('{selectall}postgres');

cypress/integration/data-source/edit_data_source_spec.js

@@ -0,0 +1,15 @@
+describe('Edit Data Source', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.visit('/data_sources/1');
+  });
+
+  it('renders the page and takes a screenshot', () => {
+    cy.getByTestId('DataSource').within(() => {
+      cy.getByTestId('Name').should('have.value', 'Test PostgreSQL');
+      cy.getByTestId('Host').should('have.value', 'postgres');
+    });
+
+    cy.percySnapshot('Edit Data Source - PostgreSQL');
+  });
+});

cypress/integration/destination/create_destination_spec.js

@@ -0,0 +1,11 @@
+describe('Create Destination', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.visit('/destinations/new');
+  });
+
+  it('renders the page and takes a screenshot', () => {
+    cy.getByTestId('TypePicker').should('contain', 'Email');
+    cy.percySnapshot('Create Destination - Types');
+  });
+});

cypress/integration/group/edit_group_spec.js

@@ -0,0 +1,15 @@
+describe('Edit Group', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.visit('/groups/1');
+  });
+
+  it('renders the page and takes a screenshot', () => {
+    cy.getByTestId('Group').within(() => {
+      cy.get('h2').should('contain', 'admin');
+      cy.get('td').should('contain', 'Example Admin');
+    });
+
+    cy.percySnapshot('Group');
+  });
+});

cypress/integration/group/group_list_spec.js

@@ -0,0 +1,15 @@
+describe('Group List', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.visit('/groups');
+  });
+
+  it('renders the page and takes a screenshot', () => {
+    cy.getByTestId('GroupList')
+      .should('exist')
+      .and('contain', 'admin')
+      .and('contain', 'default');
+
+    cy.percySnapshot('Groups');
+  });
+});

cypress/integration/settings/organization_settings_spec.js

@@ -0,0 +1,14 @@
+describe('Settings', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.visit('/settings/organization');
+  });
+
+  it('renders the page and takes a screenshot', () => {
+    cy.getByTestId('OrganizationSettings').within(() => {
+      cy.get('select').should('have.value', 'DD/MM/YY');
+    });
+
+    cy.percySnapshot('Organization Settings');
+  });
+});

cypress/integration/user/edit_profile_spec.js

@@ -36,10 +36,11 @@ describe('Edit Profile', () => {
     });
   });
 
-  it('takes a screenshot', () => {
+  it('renders the page and takes a screenshot', () => {
     cy.getByTestId('ApiKey').then(($apiKey) => {
       $apiKey.val('secret');
     });
+
     cy.percySnapshot('User Profile');
   });
 

cypress/integration/user/user_list_spec.js

@@ -0,0 +1,14 @@
+describe('User List', () => {
+  beforeEach(() => {
+    cy.login();
+    cy.visit('/users');
+  });
+
+  it('renders the page and takes a screenshot', () => {
+    cy.getByTestId('TimeAgo').then(($timeAgo) => {
+      $timeAgo.text('an hour ago');
+    });
+
+    cy.percySnapshot('Users');
+  });
+});