From 961978716315ad4e9bcec78819f8d43593e7354c Mon Sep 17 00:00:00 2001 From: Gabriel Dutra Date: Thu, 14 Feb 2019 16:41:13 -0200 Subject: [PATCH 1/5] Add check for repository url --- .circleci/docker-compose.cypress.yml | 1 + cypress/cypress.js | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/.circleci/docker-compose.cypress.yml b/.circleci/docker-compose.cypress.yml index 5305f41d4e..096acdeb1f 100644 --- a/.circleci/docker-compose.cypress.yml +++ b/.circleci/docker-compose.cypress.yml @@ -38,6 +38,7 @@ services: PERCY_BRANCH: ${CIRCLE_BRANCH} PERCY_COMMIT: ${CIRCLE_SHA1} PERCY_PULL_REQUEST: ${CIRCLE_PR_NUMBER} + REPOSITORY_URL: ${CIRCLE_REPOSITORY_URL} redis: image: redis:3.0-alpine restart: unless-stopped diff --git a/cypress/cypress.js b/cypress/cypress.js index 0dda6e4cff..5c47133879 100644 --- a/cypress/cypress.js +++ b/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, REPOSITORY_URL } = process.env + + if (PERCY_TOKEN_ENCODED && REPOSITORY_URL && 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', From 3df95566289c923b9cf5ec924d919501444fcf8c Mon Sep 17 00:00:00 2001 From: Gabriel Dutra Date: Thu, 14 Feb 2019 17:17:33 -0200 Subject: [PATCH 2/5] Use CIRCLE_REPOSITORY_URL directly --- .circleci/docker-compose.cypress.yml | 1 - cypress/cypress.js | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/.circleci/docker-compose.cypress.yml b/.circleci/docker-compose.cypress.yml index 096acdeb1f..5305f41d4e 100644 --- a/.circleci/docker-compose.cypress.yml +++ b/.circleci/docker-compose.cypress.yml @@ -38,7 +38,6 @@ services: PERCY_BRANCH: ${CIRCLE_BRANCH} PERCY_COMMIT: ${CIRCLE_SHA1} PERCY_PULL_REQUEST: ${CIRCLE_PR_NUMBER} - REPOSITORY_URL: ${CIRCLE_REPOSITORY_URL} redis: image: redis:3.0-alpine restart: unless-stopped diff --git a/cypress/cypress.js b/cypress/cypress.js index 5c47133879..ad4b12846e 100644 --- a/cypress/cypress.js +++ b/cypress/cypress.js @@ -33,9 +33,9 @@ function stopServer() { } function runCypressCI() { - const { PERCY_TOKEN_ENCODED, REPOSITORY_URL } = process.env + const { PERCY_TOKEN_ENCODED, CIRCLE_REPOSITORY_URL } = process.env; - if (PERCY_TOKEN_ENCODED && REPOSITORY_URL && REPOSITORY_URL.includes('getredash/redash')) { + if (PERCY_TOKEN_ENCODED && CIRCLE_REPOSITORY_URL && CIRCLE_REPOSITORY_URL.includes('getredash/redash')) { process.env.PERCY_TOKEN = atob(`${PERCY_TOKEN_ENCODED}`); } execSync( From e72ba07c26a90306fc0655af3312e41b47c64768 Mon Sep 17 00:00:00 2001 From: Gabriel Dutra Date: Fri, 15 Feb 2019 19:05:30 -0200 Subject: [PATCH 3/5] Change percy waiting to be with resources instead of time --- cypress/integration/percy/page_screenshots.js | 52 ++++++++++++++++--- 1 file changed, 44 insertions(+), 8 deletions(-) diff --git a/cypress/integration/percy/page_screenshots.js b/cypress/integration/percy/page_screenshots.js index 15d2d54fe5..4de134cfd5 100644 --- a/cypress/integration/percy/page_screenshots.js +++ b/cypress/integration/percy/page_screenshots.js @@ -1,19 +1,55 @@ const pages = [ - { name: 'Create Data Source - Types', url: '/data_sources/new' }, - { name: 'Edit Data Source - PostgreSQL', url: '/data_sources/1' }, - { name: 'Users', url: '/users' }, - { name: 'Groups', url: '/groups' }, - { name: 'Group', url: '/groups/1' }, - { name: 'Create Destination - Types', url: '/destinations/new' }, - { name: 'Organization Settings', url: '/settings/organization' }, + { + name: 'Create Data Source - Types', + url: '/data_sources/new', + resources: [ '/api/data_sources/types' ], + }, + { + name: 'Edit Data Source - PostgreSQL', + url: '/data_sources/1', + resources: [ '/api/data_sources/1' ], + }, + { + name: 'Users', + url: '/users', + resources: [ '/api/users**' ], + }, + { + name: 'Groups', + url: '/groups', + resources: [ '/api/groups' ], + }, + { + name: 'Group', + url: '/groups/1', + resources: [ '/api/groups/1' ], + }, + { + name: 'Create Destination - Types', + url: '/destinations/new', + resources: [ '/api/destinations/types' ], + }, + { + name: 'Organization Settings', + url: '/settings/organization', + resources: [ '/api/settings/organization' ], + }, ]; describe('Percy Page Screenshots', () => { pages.forEach((page) => { it(`takes a screenshot of ${page.name}`, () => { + cy.server(); + page.resources.forEach((resource) => { + cy.route(resource).as(resource); + }); + cy.login(); cy.visit(page.url); - cy.wait(1000); + + page.resources.forEach((resource) => { + cy.wait(`@${resource}`); + }); cy.percySnapshot(page.name); }); }); From 4f0483f84f3785e11a24481ac355ae7b22399dc7 Mon Sep 17 00:00:00 2001 From: Gabriel Dutra Date: Fri, 15 Feb 2019 19:54:40 -0200 Subject: [PATCH 4/5] Add data sources types resource to Edit Data Source + eslint fixes --- cypress/integration/percy/page_screenshots.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/cypress/integration/percy/page_screenshots.js b/cypress/integration/percy/page_screenshots.js index 4de134cfd5..c0c09067e2 100644 --- a/cypress/integration/percy/page_screenshots.js +++ b/cypress/integration/percy/page_screenshots.js @@ -2,37 +2,37 @@ const pages = [ { name: 'Create Data Source - Types', url: '/data_sources/new', - resources: [ '/api/data_sources/types' ], + resources: ['/api/data_sources/types'], }, { name: 'Edit Data Source - PostgreSQL', url: '/data_sources/1', - resources: [ '/api/data_sources/1' ], + resources: ['/api/data_sources/1', '/api/data_sources/types'], }, { name: 'Users', url: '/users', - resources: [ '/api/users**' ], + resources: ['/api/users**'], }, { name: 'Groups', url: '/groups', - resources: [ '/api/groups' ], + resources: ['/api/groups'], }, { name: 'Group', url: '/groups/1', - resources: [ '/api/groups/1' ], + resources: ['/api/groups/1'], }, { name: 'Create Destination - Types', url: '/destinations/new', - resources: [ '/api/destinations/types' ], + resources: ['/api/destinations/types'], }, { name: 'Organization Settings', url: '/settings/organization', - resources: [ '/api/settings/organization' ], + resources: ['/api/settings/organization'], }, ]; @@ -46,7 +46,7 @@ describe('Percy Page Screenshots', () => { cy.login(); cy.visit(page.url); - + page.resources.forEach((resource) => { cy.wait(`@${resource}`); }); From 94d7f8acab52df23d3627727f5a9402affdec151 Mon Sep 17 00:00:00 2001 From: Gabriel Dutra Date: Sat, 16 Feb 2019 21:02:33 -0200 Subject: [PATCH 5/5] Separate Page Screenshots in different spec files --- client/app/components/TimeAgo.jsx | 2 +- client/app/components/type-picker.html | 2 +- client/app/pages/data-sources/show.html | 2 +- client/app/pages/groups/list.html | 2 +- client/app/pages/groups/show.html | 86 ++++++++++--------- client/app/pages/settings/organization.html | 2 +- .../data-source/create_data_source_spec.js | 7 +- .../data-source/edit_data_source_spec.js | 15 ++++ .../destination/create_destination_spec.js | 11 +++ cypress/integration/group/edit_group_spec.js | 15 ++++ cypress/integration/group/group_list_spec.js | 15 ++++ cypress/integration/percy/page_screenshots.js | 56 ------------ .../settings/organization_settings_spec.js | 14 +++ cypress/integration/user/edit_profile_spec.js | 3 +- cypress/integration/user/user_list_spec.js | 14 +++ 15 files changed, 141 insertions(+), 105 deletions(-) create mode 100644 cypress/integration/data-source/edit_data_source_spec.js create mode 100644 cypress/integration/destination/create_destination_spec.js create mode 100644 cypress/integration/group/edit_group_spec.js create mode 100644 cypress/integration/group/group_list_spec.js delete mode 100644 cypress/integration/percy/page_screenshots.js create mode 100644 cypress/integration/settings/organization_settings_spec.js create mode 100644 cypress/integration/user/user_list_spec.js diff --git a/client/app/components/TimeAgo.jsx b/client/app/components/TimeAgo.jsx index 7969d8b0c7..281f972188 100644 --- a/client/app/components/TimeAgo.jsx +++ b/client/app/components/TimeAgo.jsx @@ -68,7 +68,7 @@ export class TimeAgo extends React.PureComponent { } render() { - return {this.state.value}; + return {this.state.value}; } } diff --git a/client/app/components/type-picker.html b/client/app/components/type-picker.html index c622f17cba..4ffe2c1259 100644 --- a/client/app/components/type-picker.html +++ b/client/app/components/type-picker.html @@ -10,7 +10,7 @@

{{$ctrl.title}}

-
+
{{type.name}}

{{type.name}}

diff --git a/client/app/pages/data-sources/show.html b/client/app/pages/data-sources/show.html index c513d1f196..5883654482 100644 --- a/client/app/pages/data-sources/show.html +++ b/client/app/pages/data-sources/show.html @@ -6,7 +6,7 @@ on-type-select="setType" ng-if="dataSource.type === undefined"> -
+
← Change diff --git a/client/app/pages/groups/list.html b/client/app/pages/groups/list.html index d9013f9b2c..260fff9d87 100644 --- a/client/app/pages/groups/list.html +++ b/client/app/pages/groups/list.html @@ -1,5 +1,5 @@ -
+

New Group diff --git a/client/app/pages/groups/show.html b/client/app/pages/groups/show.html index 7d82df03f1..027adfe717 100644 --- a/client/app/pages/groups/show.html +++ b/client/app/pages/groups/show.html @@ -1,50 +1,52 @@ - +

+ -
-
- -
+
+
+ +
-
- - - -
-   - {{user.name}} - (already member in this group) -
- - +
+ + + +
+   + {{user.name}} + (already member in this group) +
+ + +
-
-
-
- - - - - - - -
- - - {{member.name}} - -
+
+
+ + + + + + + +
+ + + {{member.name}} + +
-
- No members. +
+ No members. +
diff --git a/client/app/pages/settings/organization.html b/client/app/pages/settings/organization.html index bb63ac7b16..d73be31876 100644 --- a/client/app/pages/settings/organization.html +++ b/client/app/pages/settings/organization.html @@ -1,5 +1,5 @@ -
+

General

diff --git a/cypress/integration/data-source/create_data_source_spec.js b/cypress/integration/data-source/create_data_source_spec.js index 52adef85fc..fe0c3370e6 100644 --- a/cypress/integration/data-source/create_data_source_spec.js +++ b/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'); diff --git a/cypress/integration/data-source/edit_data_source_spec.js b/cypress/integration/data-source/edit_data_source_spec.js new file mode 100644 index 0000000000..d1d39dcc5e --- /dev/null +++ b/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'); + }); +}); diff --git a/cypress/integration/destination/create_destination_spec.js b/cypress/integration/destination/create_destination_spec.js new file mode 100644 index 0000000000..3c82a316dd --- /dev/null +++ b/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'); + }); +}); diff --git a/cypress/integration/group/edit_group_spec.js b/cypress/integration/group/edit_group_spec.js new file mode 100644 index 0000000000..def48ee27d --- /dev/null +++ b/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'); + }); +}); diff --git a/cypress/integration/group/group_list_spec.js b/cypress/integration/group/group_list_spec.js new file mode 100644 index 0000000000..ef2afde4c8 --- /dev/null +++ b/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'); + }); +}); diff --git a/cypress/integration/percy/page_screenshots.js b/cypress/integration/percy/page_screenshots.js deleted file mode 100644 index c0c09067e2..0000000000 --- a/cypress/integration/percy/page_screenshots.js +++ /dev/null @@ -1,56 +0,0 @@ -const pages = [ - { - name: 'Create Data Source - Types', - url: '/data_sources/new', - resources: ['/api/data_sources/types'], - }, - { - name: 'Edit Data Source - PostgreSQL', - url: '/data_sources/1', - resources: ['/api/data_sources/1', '/api/data_sources/types'], - }, - { - name: 'Users', - url: '/users', - resources: ['/api/users**'], - }, - { - name: 'Groups', - url: '/groups', - resources: ['/api/groups'], - }, - { - name: 'Group', - url: '/groups/1', - resources: ['/api/groups/1'], - }, - { - name: 'Create Destination - Types', - url: '/destinations/new', - resources: ['/api/destinations/types'], - }, - { - name: 'Organization Settings', - url: '/settings/organization', - resources: ['/api/settings/organization'], - }, -]; - -describe('Percy Page Screenshots', () => { - pages.forEach((page) => { - it(`takes a screenshot of ${page.name}`, () => { - cy.server(); - page.resources.forEach((resource) => { - cy.route(resource).as(resource); - }); - - cy.login(); - cy.visit(page.url); - - page.resources.forEach((resource) => { - cy.wait(`@${resource}`); - }); - cy.percySnapshot(page.name); - }); - }); -}); diff --git a/cypress/integration/settings/organization_settings_spec.js b/cypress/integration/settings/organization_settings_spec.js new file mode 100644 index 0000000000..74960ca456 --- /dev/null +++ b/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'); + }); +}); diff --git a/cypress/integration/user/edit_profile_spec.js b/cypress/integration/user/edit_profile_spec.js index 99d3d58ee3..91e5236d60 100644 --- a/cypress/integration/user/edit_profile_spec.js +++ b/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'); }); diff --git a/cypress/integration/user/user_list_spec.js b/cypress/integration/user/user_list_spec.js new file mode 100644 index 0000000000..3b19b3995c --- /dev/null +++ b/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'); + }); +});