Skip to content

Commit

Permalink
test(settings): Users table
Browse files Browse the repository at this point in the history
Signed-off-by: Christopher Ng <chrng8@gmail.com>
  • Loading branch information
Pytal committed Jul 13, 2023
1 parent 8faa1a4 commit faf2b23
Show file tree
Hide file tree
Showing 10 changed files with 286 additions and 117 deletions.
7 changes: 5 additions & 2 deletions apps/settings/src/components/Users/UserRow.vue
Expand Up @@ -44,6 +44,7 @@
{{ t('settings', 'Edit display name') }}
</label>
<NcTextField :id="'displayName' + uniqueId"
data-test="displayNameField"
ref="displayNameField"
:show-trailing-button="true"
class="user-row-text-field"
Expand Down Expand Up @@ -211,7 +212,8 @@
</td>
<td v-if="showConfig.showLanguages"
class="row__cell row__cell--large">
class="row__cell row__cell--large"
data-test="language">
<template v-if="idState.editing">
<label class="hidden-visually"
:for="'language' + uniqueId">
Expand Down Expand Up @@ -248,7 +250,8 @@
<td v-if="showConfig.showLastLogin"
:title="userLastLoginTooltip"
class="row__cell">
class="row__cell"
data-test="lastLogin">
<span v-if="!isObfuscated">{{ userLastLogin }}</span>
</td>
Expand Down
109 changes: 103 additions & 6 deletions cypress/e2e/settings/users.cy.ts
Expand Up @@ -24,22 +24,119 @@ import { User } from '@nextcloud/cypress'

const admin = new User('admin', 'admin')
const jdoe = new User('jdoe', 'jdoe')
const john = new User('john', '123456')

describe('Settings: Create and delete users', function() {
before(function() {
cy.login(admin)
// open the User settings
cy.visit('/settings/users')
})

after(() => {
cy.deleteUser(jdoe)
beforeEach(function() {
cy.login(admin)
cy.listUsers().then((users) => {
cy.login(admin)
if (users.includes('john')) {
// ensure created user is deleted
cy.deleteUser(john).login(admin)
// ensure deleted user is not present
cy.reload().login(admin)
}
})
})

it('Can create a user', function() {
// open the New user modal
cy.get('button#new-user-button').click()

cy.get('form[data-test="form"]').within(() => {
// see that the username is ""
cy.get('input[data-test="username"]').should('exist').and('have.value', '')
// set the username to john
cy.get('input[data-test="username"]').type('john')
// see that the username is john
cy.get('input[data-test="username"]').should('have.value', 'john')
// see that the password is ""
cy.get('input[type="password"]').should('exist').and('have.value', '')
// set the password to 123456
cy.get('input[type="password"]').type('123456')
// see that the password is 123456
cy.get('input[type="password"]').should('have.value', '123456')
// submit the new user form
cy.get('button[type="submit"]').click()
})

// Ignore failure if modal is not shown
cy.once('fail', (error) => {
expect(error.name).to.equal('AssertionError')
expect(error).to.have.property('node', '.modal-container')
})
// Make sure no confirmation modal is shown on top of the New user modal
cy.get('body').find('.modal-container').then(($modals) => {
if ($modals.length > 1) {
cy.wrap($modals.first()).find('input[type="password"]').type(admin.password)
cy.wrap($modals.first()).find('button').contains('Confirm').click()
}
})

// see that the created user is in the list
cy.get(`tbody.user-list__body tr td[data-test="john"]`).parents('tr').within(() => {
// see that the list of users contains the user john
cy.contains('john').should('exist')
})
})

it('Can create a user with additional field data', function() {
// open the New user modal
cy.get('button#new-user-button').click()

cy.get('form[data-test="form"]').within(() => {
// set the username
cy.get('input[data-test="username"]').should('exist').and('have.value', '')
cy.get('input[data-test="username"]').type('john')
cy.get('input[data-test="username"]').should('have.value', 'john')
// set the display name
cy.get('input[data-test="displayName"]').should('exist').and('have.value', '')
cy.get('input[data-test="displayName"]').type('John Smith')
cy.get('input[data-test="displayName"]').should('have.value', 'John Smith')
// set the email
cy.get('input[data-test="email"]').should('exist').and('have.value', '')
cy.get('input[data-test="email"]').type('john@example.org')
cy.get('input[data-test="email"]').should('have.value', 'john@example.org')
// set the password
cy.get('input[type="password"]').should('exist').and('have.value', '')
cy.get('input[type="password"]').type('123456')
cy.get('input[type="password"]').should('have.value', '123456')
// submit the new user form
cy.get('button[type="submit"]').click()
})

// Ignore failure if modal is not shown
cy.once('fail', (error) => {
expect(error.name).to.equal('AssertionError')
expect(error).to.have.property('node', '.modal-container')
})
// Make sure no confirmation modal is shown on top of the New user modal
cy.get('body').find('.modal-container').then(($modals) => {
if ($modals.length > 1) {
cy.wrap($modals.first()).find('input[type="password"]').type(admin.password)
cy.wrap($modals.first()).find('button').contains('Confirm').click()
}
})

// see that the created user is in the list
cy.get(`tbody.user-list__body tr td[data-test="john"]`).parents('tr').within(() => {
// see that the list of users contains the user john
cy.contains('john').should('exist')
})
})

it('Can delete a user', function() {
// ensure user exists
// create user
cy.createUser(jdoe).login(admin)

// open the User settings
cy.visit('/settings/users')
// ensure created user is present
cy.reload().login(admin)

// see that the user is in the list
cy.get(`tbody.user-list__body tr td[data-test="${jdoe.userId}"]`).parents('tr').within(() => {
Expand Down
116 changes: 116 additions & 0 deletions cypress/e2e/settings/users_columns.cy.ts
@@ -0,0 +1,116 @@
/**
* @copyright 2023 Christopher Ng <chrng8@gmail.com>
*
* @author Christopher Ng <chrng8@gmail.com>
*
* @license AGPL-3.0-or-later
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/

import { User } from '@nextcloud/cypress'

const admin = new User('admin', 'admin')

describe('Settings: Show and hide columns', function() {
before(function() {
cy.login(admin)
// open the User settings
cy.visit('/settings/users')
})

beforeEach(function() {
// open the settings pane
cy.get('.app-navigation button.settings-button').click()
// reset all toggles
cy.get('.app-navigation #app-settings__content input[type="checkbox"]').uncheck({ force: true })
// enable the last login toggle
cy.get('.app-navigation #app-settings__content').within(() => {
cy.get('[data-test="showLastLogin"] input[type="checkbox"]').check({ force: true })
})
// close the settings pane
cy.get('.app-navigation button.settings-button').click()
})

it('Can show a column', function() {
// see that the language column is not in the header
cy.get(`.user-list__header tr`).within(() => {
cy.contains('Language').should('not.exist')
})

// see that the language column is not in all user rows
cy.get(`tbody.user-list__body tr`).each(($row) => {
cy.wrap($row).get('[data-test="language"]').should('not.exist')
})

// open the settings pane
cy.get('.app-navigation button.settings-button').click()

// enable the languages toggle
cy.get('.app-navigation #app-settings__content').within(() => {
cy.get('[data-test="showLanguages"] input[type="checkbox"]').should('not.be.checked')
cy.get('[data-test="showLanguages"] input[type="checkbox"]').check({ force: true })
cy.get('[data-test="showLanguages"] input[type="checkbox"]').should('be.checked')
})

// close the settings pane
cy.get('.app-navigation button.settings-button').click()

// see that the language column is in the header
cy.get(`.user-list__header tr`).within(() => {
cy.contains('Language').should('exist')
})

// see that the language column is in all user rows
cy.get(`tbody.user-list__body tr`).each(($row) => {
cy.wrap($row).get('[data-test="language"]').should('exist')
})
})

it('Can hide a column', function() {
// see that the last login column is in the header
cy.get(`.user-list__header tr`).within(() => {
cy.contains('Last login').should('exist')
})

// see that the last login column is in all user rows
cy.get(`tbody.user-list__body tr`).each(($row) => {
cy.wrap($row).get('[data-test="lastLogin"]').should('exist')
})

// open the settings pane
cy.get('.app-navigation button.settings-button').click()

// disable the last login toggle
cy.get('.app-navigation #app-settings__content').within(() => {
cy.get('[data-test="showLastLogin"] input[type="checkbox"]').should('be.checked')
cy.get('[data-test="showLastLogin"] input[type="checkbox"]').uncheck({ force: true })
cy.get('[data-test="showLastLogin"] input[type="checkbox"]').should('not.be.checked')
})

// close the settings pane
cy.get('.app-navigation button.settings-button').click()

// see that the last login column is not in the header
cy.get(`.user-list__header tr`).within(() => {
cy.contains('Last login').should('not.exist')
})

// see that the last login column is not in all user rows
cy.get(`tbody.user-list__body tr`).each(($row) => {
cy.wrap($row).get('[data-test="lastLogin"]').should('not.exist')
})
})
})
8 changes: 4 additions & 4 deletions cypress/e2e/settings/users_disable.cy.ts
Expand Up @@ -29,6 +29,8 @@ describe('Settings: Disable and enable users', function() {
before(function() {
cy.createUser(jdoe)
cy.login(admin)
// open the User settings
cy.visit('/settings/users')
})

after(() => {
Expand All @@ -38,8 +40,7 @@ describe('Settings: Disable and enable users', function() {
it('Can disable the user', function() {
// ensure user is enabled
cy.enableUser(jdoe)
// open the User settings
cy.visit('/settings/users')

// see that the user is in the list of active users
cy.get(`tbody.user-list__body tr td[data-test="${jdoe.userId}"]`).parents('tr').within(() => {
// see that the list of users contains the user jdoe
Expand All @@ -64,13 +65,12 @@ describe('Settings: Disable and enable users', function() {
it('Can enable the user', function() {
// ensure user is disabled
cy.enableUser(jdoe, false)
// open the User settings
cy.visit('/settings/users')

// Open disabled users section
cy.get('#disabled a').click()
cy.url().should('match', /\/disabled/)

// see that the user is in the list of active users
cy.get(`tbody.user-list__body tr td[data-test="${jdoe.userId}"]`).parents('tr').within(() => {
// see that the list of disabled users contains the user jdoe
cy.contains(jdoe.userId).should('exist')
Expand Down
55 changes: 52 additions & 3 deletions cypress/e2e/settings/users_modify.cy.ts
Expand Up @@ -29,16 +29,65 @@ describe('Settings: Change user properties', function() {
before(function() {
cy.createUser(jdoe)
cy.login(admin)
// open the User settings
cy.visit('/settings/users')
})

beforeEach(function() {
cy.get(`tbody.user-list__body tr td[data-test="${jdoe.userId}"]`).parents('tr').within(() => {
// reset edit mode for the user jdoe
cy.get('td.row__cell--actions .action-items > button:first-of-type')
.invoke('attr', 'title')
.then((title) => {
if (title === 'Done') {
cy.get('td.row__cell--actions .action-items > button:first-of-type').click()
}
})
})
})

after(() => {
cy.deleteUser(jdoe)
})

it('Can change the password', function() {
// open the User settings
cy.visit('/settings/users')
it('Can change the display name', function() {
cy.get(`tbody.user-list__body tr td[data-test="${jdoe.userId}"]`).parents('tr').within(() => {
// see that the list of users contains the user jdoe
cy.contains(jdoe.userId).should('exist')
// toggle the edit mode for the user jdoe
cy.get('td.row__cell--actions .action-items > button:first-of-type').click()
})

cy.get(`tbody.user-list__body tr td[data-test="${jdoe.userId}"]`).parents('tr').within(() => {
// set the display name
cy.get('input[data-test="displayNameField"]').should('exist').and('have.value', 'jdoe')
cy.get('input[data-test="displayNameField"]').clear()
cy.get('input[data-test="displayNameField"]').type('John Doe')
cy.get('input[data-test="displayNameField"]').should('have.value', 'John Doe')
cy.get('input[data-test="displayNameField"] ~ button').click()

// Ignore failure if modal is not shown
cy.once('fail', (error) => {
expect(error.name).to.equal('AssertionError')
expect(error).to.have.property('node', '.modal-container')
})
// Make sure no confirmation modal is shown
cy.root().closest('body').find('.modal-container').then(($modal) => {
if ($modal.length > 0) {
cy.wrap($modal).find('input[type="password"]').type(admin.password)
cy.wrap($modal).find('button').contains('Confirm').click()
}
})

// see that the display name cell is done loading
cy.get('.user-row-text-field.icon-loading-small').should('exist')
cy.waitUntil(() => cy.get('.user-row-text-field.icon-loading-small').should('not.exist'), { timeout: 10000 })
})
// Success message is shown
cy.get('.toastify.toast-success').contains(/Display.+name.+was.+successfully.+changed/i).should('exist')
})

it('Can change the password', function() {
cy.get(`tbody.user-list__body tr td[data-test="${jdoe.userId}"]`).parents('tr').within(() => {
// see that the list of users contains the user jdoe
cy.contains(jdoe.userId).should('exist')
Expand Down
4 changes: 2 additions & 2 deletions dist/settings-users-8351.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/settings-users-8351.js.map

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/settings-vue-settings-apps-users-management.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/settings-vue-settings-apps-users-management.js.map

Large diffs are not rendered by default.

0 comments on commit faf2b23

Please sign in to comment.