From b3f61601e751651914ac658073283b47afaf4e0b Mon Sep 17 00:00:00 2001 From: k3yi0 Date: Tue, 14 Jun 2022 15:19:29 +0200 Subject: [PATCH 1/4] chore(ui): add data-test attributes --- .../admin/components/chronograf/AllUsersTableHeader.tsx | 1 + ui/src/admin/components/chronograf/AllUsersTableRow.tsx | 2 ++ ui/src/admin/components/chronograf/AllUsersTableRowNew.js | 8 +++++++- ui/src/admin/components/chronograf/UsersTableRowNew.js | 2 +- .../reusable_ui/components/slide_toggle/SlideToggle.tsx | 2 +- ui/src/shared/components/Tags.tsx | 7 +++++-- 6 files changed, 17 insertions(+), 5 deletions(-) diff --git a/ui/src/admin/components/chronograf/AllUsersTableHeader.tsx b/ui/src/admin/components/chronograf/AllUsersTableHeader.tsx index 7c10db541..0f1ef748d 100644 --- a/ui/src/admin/components/chronograf/AllUsersTableHeader.tsx +++ b/ui/src/admin/components/chronograf/AllUsersTableHeader.tsx @@ -49,6 +49,7 @@ class AllUsersTableHeader extends Component { size={ComponentSize.Small} active={superAdminNewUsers} onChange={this.handleToggleClick} + entity="new-users-superAdmin" /> All new users are SuperAdmins diff --git a/ui/src/admin/components/chronograf/AllUsersTableRow.tsx b/ui/src/admin/components/chronograf/AllUsersTableRow.tsx index a298ae6ea..4ca953ee9 100644 --- a/ui/src/admin/components/chronograf/AllUsersTableRow.tsx +++ b/ui/src/admin/components/chronograf/AllUsersTableRow.tsx @@ -89,6 +89,7 @@ export default class AllUsersTableRow extends Component { color={ComponentColor.Success} disabled={this.userIsMe} tooltipText={this.toggleTooltipText} + entity="superAdmin" /> @@ -99,6 +100,7 @@ export default class AllUsersTableRow extends Component { type="btn-danger" text="Delete" customClass="table--show-on-row-hover" + testId="delete-user--button" /> diff --git a/ui/src/admin/components/chronograf/AllUsersTableRowNew.js b/ui/src/admin/components/chronograf/AllUsersTableRowNew.js index 3a0d76737..cf2584e42 100644 --- a/ui/src/admin/components/chronograf/AllUsersTableRowNew.js +++ b/ui/src/admin/components/chronograf/AllUsersTableRowNew.js @@ -152,19 +152,25 @@ class AllUsersTableRowNew extends Component { disabled={true} placeholder="OAuth Scheme..." value={scheme} + data-test="oauth-scheme--input" /> — - diff --git a/ui/src/admin/components/chronograf/UsersTableRowNew.js b/ui/src/admin/components/chronograf/UsersTableRowNew.js index 4dfcac98e..f48a459a4 100644 --- a/ui/src/admin/components/chronograf/UsersTableRowNew.js +++ b/ui/src/admin/components/chronograf/UsersTableRowNew.js @@ -125,7 +125,7 @@ class UsersTableRowNew extends Component { disabled={true} placeholder="OAuth Scheme..." value={scheme} - data-test="oauth-schema--input" + data-test="oauth-scheme--input" /> diff --git a/ui/src/reusable_ui/components/slide_toggle/SlideToggle.tsx b/ui/src/reusable_ui/components/slide_toggle/SlideToggle.tsx index 86c5d19f7..f3ed43f6e 100644 --- a/ui/src/reusable_ui/components/slide_toggle/SlideToggle.tsx +++ b/ui/src/reusable_ui/components/slide_toggle/SlideToggle.tsx @@ -63,7 +63,7 @@ class SlideToggle extends Component { private get dataTest(): string { const {active, entity} = this.props - return active ? `hide-${entity}--toggle` : `show-${entity}--toggle` + return active ? `turn-off-${entity}--toggle` : `turn-on-${entity}--toggle` } } diff --git a/ui/src/shared/components/Tags.tsx b/ui/src/shared/components/Tags.tsx index 5a0694d38..b63368371 100644 --- a/ui/src/shared/components/Tags.tsx +++ b/ui/src/shared/components/Tags.tsx @@ -33,6 +33,7 @@ const Tags: FunctionComponent = ({ item={item} onDelete={onDeleteTag} confirmText={confirmText} + testId={item.text || item.name || item} /> ) })} @@ -47,6 +48,7 @@ interface TagProps { confirmText?: string item: Item onDelete: (item: Item) => void + testId?: Item } @ErrorHandling @@ -56,9 +58,9 @@ class Tag extends PureComponent { } public render() { - const {item, confirmText} = this.props + const {item, confirmText, testId} = this.props return ( - + {item.text || item.name || item} { confirmText={confirmText} customClass="input-tag--remove" confirmAction={this.handleClickDelete(item)} + testId="delete-tag--button" /> ) From 2eafc7873e3bce9becc78a6bc4ab1e67ce9f57c6 Mon Sep 17 00:00:00 2001 From: k3yi0 Date: Tue, 14 Jun 2022 15:19:43 +0200 Subject: [PATCH 2/4] chore(cypress): add chronograf fixture file --- ui/cypress/fixtures/chronograf.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/cypress/fixtures/chronograf.json b/ui/cypress/fixtures/chronograf.json index ec6cc7f1c..cdbf87c5a 100644 --- a/ui/cypress/fixtures/chronograf.json +++ b/ui/cypress/fixtures/chronograf.json @@ -3,6 +3,7 @@ "name": "Smiley", "role": ["reader", "viewer"], "oauthProvider": "oauth-mock", - "oauth-scheme": "oauth" + "oauth-scheme": "oauth", + "orgs": ["Default"] } } \ No newline at end of file From eb2d655b8b57959025e591ffce5f6a34c0e8abac Mon Sep 17 00:00:00 2001 From: k3yi0 Date: Tue, 14 Jun 2022 16:00:08 +0200 Subject: [PATCH 3/4] chore(ui): eslint --- ui/src/shared/components/Tags.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/ui/src/shared/components/Tags.tsx b/ui/src/shared/components/Tags.tsx index b63368371..9db5a5fe8 100644 --- a/ui/src/shared/components/Tags.tsx +++ b/ui/src/shared/components/Tags.tsx @@ -60,7 +60,11 @@ class Tag extends PureComponent { public render() { const {item, confirmText, testId} = this.props return ( - + {item.text || item.name || item} Date: Tue, 14 Jun 2022 16:08:30 +0200 Subject: [PATCH 4/4] test(cypress): add All User test --- ui/cypress/integration/admin.test.ts | 96 ++++++++++++++++++++- ui/cypress/integration/queryBuilder.test.ts | 5 +- 2 files changed, 97 insertions(+), 4 deletions(-) diff --git a/ui/cypress/integration/admin.test.ts b/ui/cypress/integration/admin.test.ts index 1d01daaaf..0f9015a7a 100644 --- a/ui/cypress/integration/admin.test.ts +++ b/ui/cypress/integration/admin.test.ts @@ -84,6 +84,100 @@ describe('Use Admin tab', () => { }) }) }) + + describe('All Users', () => { + beforeEach(() => { + cy.visit(url + '/all-users') + }) + + it('add user, edit user, and remove it', () => { + cy.getByTestID('turn-on-new-users-superAdmin--toggle') + .click() + .should('have.class', 'active') + cy.getByTestID('add-user--button').click() + cy.getByTestID('new-user--table-row') + .should('exist') + .within(() => { + cy.getByTestID('cancel-new-user--button').click() + }) + cy.getByTestID('add-user--button').click() + cy.getByTestID('new-user--table-row') + .should('exist') + .within(() => { + cy.getByTestID('username--input').type(chronograf.user.name) + cy.getByTestID('dropdown-toggle').click() + cy.getByTestID('dropdown-ul') + .contains(chronograf.user.orgs[0]) + .click() + cy.getByTestID( + `dropdown-selected--${chronograf.user.orgs[0]}` + ).should('exist') + cy.getByTestID('oauth-provider--input').type( + chronograf.user.oauthProvider + ) + cy.getByTestID('confirm-new-user--button').click() + }) + + cy.getByTestID('turn-off-new-users-superAdmin--toggle') + .click() + .should('not.have.class', 'active') + + cy.getByTestID(`${chronograf.user.name}--table-row`) + .should('exist') + .realHover() + .then(() => { + cy.getByTestID(`${chronograf.user.name}--table-row`).within(() => { + cy.getByTestID('turn-off-superAdmin--toggle').click() + }) + }) + + cy.getByTestID(`${chronograf.user.name}--table-row`) + .realHover() + .then(() => { + cy.getByTestID(`${chronograf.user.name}--table-row`).within(() => { + cy.getByTestID(`${chronograf.user.orgs[0]}-tag--item`).should( + 'exist' + ) + + cy.getByTestID('delete-tag--button') + .click() + .within(() => { + cy.getByTestID('confirm-btn').click() + }) + + cy.getByTestID(`${chronograf.user.orgs[0]}-tag--item`).should( + 'not.exist' + ) + }) + }) + + cy.getByTestID(`${chronograf.user.name}--table-row`) + .realHover() + .then(() => { + cy.getByTestID(`${chronograf.user.name}--table-row`).within(() => { + cy.get('.tags-add') + .click() + .within(() => { + cy.get('.tags-add--menu-item') + .contains(chronograf.user.orgs[0]) + .click() + }) + }) + }) + + cy.getByTestID(`${chronograf.user.name}--table-row`) + .realHover() + .then(() => { + cy.getByTestID(`${chronograf.user.name}--table-row`).within(() => { + cy.getByTestID('delete-user--button') + .click() + .within(() => { + cy.getByTestID('confirm-btn').click() + }) + }) + }) + }) + }) }) describe('InfluxDB', () => { @@ -313,7 +407,7 @@ describe('Use Admin tab', () => { cy.get('th').contains('Users').should('exist') }) - cy.getByTestID('hide-users--toggle').click() + cy.getByTestID('turn-off-users--toggle').click() cy.getByTestID('admin-table--head').within(() => { cy.get('th').contains('Users').should('not.exist') }) diff --git a/ui/cypress/integration/queryBuilder.test.ts b/ui/cypress/integration/queryBuilder.test.ts index 4c0ce313b..24d21ead7 100644 --- a/ui/cypress/integration/queryBuilder.test.ts +++ b/ui/cypress/integration/queryBuilder.test.ts @@ -106,9 +106,8 @@ describe('query builder', () => { cy.getByTestID('builder-card--body').within(() => { cy.get('.dropdown-selected').click() cy.get('.dropdown-menu').within(() => { - cy.getByTestID('dropdown-item') - .contains('custom') - .click({force: true}) + cy.getByTestID('custom-dropdown-item') + .click() }) cy.get('input').type('13s{enter}') cy.get('.dropdown-selected').should('contain.text', '13s')