test(settings): Users table

Signed-off-by: Christopher Ng <chrng8@gmail.com>

apps/settings/src/components/Users/UserRow.vue

@@ -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"
@@ -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">
@@ -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>
 

cypress/e2e/settings/users.cy.ts

@@ -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(() => {

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')
+		})
+	})
+})

cypress/e2e/settings/users_disable.cy.ts

@@ -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(() => {
@@ -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
@@ -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')

cypress/e2e/settings/users_modify.cy.ts

@@ -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')

tests/acceptance/features/users.feature

@@ -1,64 +1,6 @@
 @apache
 Feature: users
 
-  Scenario: create a new user
-    Given I act as Jane
-    And I am logged in as the admin
-    And I open the User settings
-    And I click the New user button
-    And I see that the new user form is shown
-    When I create user unknownUser with password 123456acb
-    Then I see that the list of users contains the user unknownUser
-
-  Scenario: create a new user with a custom display name
-    Given I am logged in as the admin
-    And I open the User settings
-    When I click the New user button
-    And I see that the new user form is shown
-    And I set the user name for the new user to "test"
-    And I set the display name for the new user to "Test display name"
-    And I set the password for the new user to "123456acb"
-    And I create the new user
-    Then I see that the list of users contains the user "test"
-#    And I see that the display name for the user "test" is "Test display name"
-
-#  Scenario: delete a user
-#    Given I act as Jane
-#    And I am logged in as the admin
-#    And I open the User settings
-#    And I see that the list of users contains the user user0
-#    And I open the actions menu for the user user0
-#    And I see that the "Delete user" action in the user0 actions menu is shown
-#    When I click the "Delete user" action in the user0 actions menu
-#    And I click the "Delete user0's account" button of the confirmation dialog
-#    Then I see that the list of users does not contains the user user0
-
-#  Scenario: disable a user
-#    Given I act as Jane
-#    And I am logged in as the admin
-#    And I open the User settings
-#    And I see that the list of users contains the user user0
-#    And I open the actions menu for the user user0
-#    And I see that the "Disable user" action in the user0 actions menu is shown
-#    When I click the "Disable user" action in the user0 actions menu
-#    Then I see that the list of users does not contains the user user0
-#    When I open the "Disabled users" section
-#    Then I see that the list of users contains the user user0
-
-#  Scenario: users navigation without disabled users
-#    Given I act as Jane
-#    And I am logged in as the admin
-#    And I open the User settings
-#    And I open the "Disabled users" section
-#    And I see that the list of users contains the user disabledUser
-#    And I open the actions menu for the user disabledUser
-#    And I see that the "Enable user" action in the disabledUser actions menu is shown
-#    When I click the "Enable user" action in the disabledUser actions menu
-#    Then I see that the section "Disabled users" is not shown
-#    # check again after reloading the settings
-#    When I open the User settings
-#    Then I see that the section "Disabled users" is not shown
-
   Scenario: assign user to a group
     Given I act as Jane
     And I am logged in as the admin
@@ -101,44 +43,6 @@ Feature: users
     # When I click the "Yes" button of the confirmation dialog
     # Then I see that the section Group1 is not shown
 
-  Scenario: change columns visibility
-    Given I act as Jane
-    And I am logged in as the admin
-    And I open the User settings
-    And I open the settings
-    And I see that the settings are opened
-    When I toggle the showLanguages checkbox in the settings
-    Then I see that the "Language" column is shown
-    When I toggle the showLastLogin checkbox in the settings
-    Then I see that the "Last login" column is shown
-    When I toggle the showStoragePath checkbox in the settings
-    Then I see that the "Storage location" column is shown
-    When I toggle the showUserBackend checkbox in the settings
-    Then I see that the "User backend" column is shown
-
-#  Scenario: change display name
-#    Given I act as Jane
-#    And I am logged in as the admin
-#    And I open the User settings
-#    And I see that the list of users contains the user user0
-#    And I see that the displayName of user0 is user0
-#    When I set the displayName for user0 to user1
-#    And I see that the displayName cell for user user0 is done loading
-#    Then I see that the displayName of user0 is user1
-
-#  Scenario: change password
-#    Given I act as Jane
-#    And I am logged in as the admin
-#    And I open the User settings
-#    And I see that the list of users contains the user user0
-#    When I toggle the edit mode for the user user0
-#    Then I see that the edit mode is on for user user0
-#    And I see that the password of user0 is ""
-#    When I set the password for user0 to 123456
-#    And I see that the password cell for user user0 is done loading
-#    # password input is emptied on change
-#    Then I see that the password of user0 is ""
-
 #  Scenario: change email
 #    Given I act as Jane
 #    And I am logged in as the admin