fix(settings): Stablize user list cypress tests

* Use common `data-testid` to identify elements rather than to depend on internal classes or properties
* Force clean the state for the user tests

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

apps/settings/src/components/UserList.vue

@@ -45,7 +45,7 @@
 			:data-component="UserRow"
 			:data-sources="filteredUsers"
 			data-key="id"
-			data-test-id="userList"
+			data-testid="userList"
 			:item-height="rowHeight"
 			:style="style"
 			:extra-props="{

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

@@ -36,11 +36,11 @@
 				:user="user.id" />
 		</td>
 
-		<td class="row__cell row__cell--displayname" data-test-id="cell-displayname">
+		<td class="row__cell row__cell--displayname" data-testid="cell-displayname">
 			<template v-if="editing && user.backendCapabilities.setDisplayName">
 				<NcTextField ref="displayNameField"
 					class="user-row-text-field"
-					data-test-id="input-displayName"
+					data-testid="input-displayName"
 					:data-test-loading="`${loading.displayName}`"
 					:trailing-button-label="t('settings', 'Submit')"
 					:class="{ 'icon-loading-small': loading.displayName }"
@@ -63,12 +63,12 @@
 			</template>
 		</td>
 
-		<td data-test-id="cell-password"
+		<td data-testid="cell-password"
 			class="row__cell"
 			:class="{ 'row__cell--obfuscated': hasObfuscated }">
 			<template v-if="editing && settings.canChangePassword && user.backendCapabilities.setPassword">
 				<NcTextField class="user-row-text-field"
-					data-test-id="input-password"
+					data-testid="input-password"
 					:data-test-loading="`${loading.password}`"
 					:trailing-button-label="t('settings', 'Submit')"
 					:class="{'icon-loading-small': loading.password}"
@@ -91,11 +91,11 @@
 			</span>
 		</td>
 
-		<td class="row__cell" data-test-id="cell-email">
+		<td class="row__cell" data-testid="cell-email">
 			<template v-if="editing">
 				<NcTextField class="user-row-text-field"
 					:class="{'icon-loading-small': loading.mailAddress}"
-					data-test-id="input-email"
+					data-testid="input-email"
 					:data-test-loading="`${loading.mailAddress}`"
 					:show-trailing-button="true"
 					:trailing-button-label="t('settings', 'Submit')"
@@ -115,7 +115,7 @@
 			</span>
 		</td>
 
-		<td class="row__cell row__cell--large row__cell--multiline" data-test-id="cell-groups">
+		<td class="row__cell row__cell--large row__cell--multiline" data-testid="cell-groups">
 			<template v-if="editing">
 				<label class="hidden-visually"
 					:for="'groups' + uniqueId">
@@ -145,7 +145,7 @@
 		</td>
 
 		<td v-if="subAdminsGroups.length > 0 && settings.isAdmin"
-			data-test-id="cell-subadmins"
+			data-testid="cell-subadmins"
 			class="row__cell row__cell--large row__cell--multiline">
 			<template v-if="editing && settings.isAdmin && subAdminsGroups.length > 0">
 				<label class="hidden-visually"
@@ -172,7 +172,7 @@
 			</span>
 		</td>
 
-		<td class="row__cell" data-test-id="cell-quota">
+		<td class="row__cell" data-testid="cell-quota">
 			<template v-if="editing">
 				<label class="hidden-visually"
 					:for="'quota' + uniqueId">
@@ -181,7 +181,7 @@
 				<NcSelect v-model="editedUserQuota"
 					:close-on-select="true"
 					:create-option="validateQuota"
-					data-test-id="input-quota"
+					data-testid="input-quota"
 					:data-test-loading="`${loading.quota}`"
 					:disabled="isLoadingField"
 					:loading="loading.quota"
@@ -206,7 +206,7 @@
 
 		<td v-if="showConfig.showLanguages"
 			class="row__cell row__cell--large"
-			data-test-id="cell-language">
+			data-testid="cell-language">
 			<template v-if="editing">
 				<label class="hidden-visually"
 					:for="'language' + uniqueId">
@@ -230,7 +230,7 @@
 		</td>
 
 		<td v-if="showConfig.showUserBackend || showConfig.showStoragePath"
-			data-test-id="cell-storageLocation"
+			data-testid="cell-storageLocation"
 			class="row__cell row__cell--large">
 			<template v-if="!isObfuscated">
 				<span v-if="showConfig.showUserBackend">{{ user.backend }}</span>
@@ -245,19 +245,19 @@
 		<td v-if="showConfig.showLastLogin"
 			:title="userLastLoginTooltip"
 			class="row__cell"
-			data-test-id="cell-lastLogin">
+			data-testid="cell-lastLogin">
 			<span v-if="!isObfuscated">{{ userLastLogin }}</span>
 		</td>
 
-		<td class="row__cell row__cell--large row__cell--fill" data-test-id="cell-manager">
+		<td class="row__cell row__cell--large row__cell--fill" data-testid="cell-manager">
 			<template v-if="editing">
 				<label class="hidden-visually"
 					:for="'manager' + uniqueId">
 					{{ managerLabel }}
 				</label>
 				<NcSelect v-model="currentManager"
 					class="select--fill"
-					data-test-id="input-manager"
+					data-testid="input-manager"
 					:data-test-loading="`${loading.manager}`"
 					:input-id="'manager' + uniqueId"
 					:close-on-select="true"
@@ -277,7 +277,7 @@
 			</span>
 		</td>
 
-		<td class="row__cell row__cell--actions" data-test-id="cell-actions">
+		<td class="row__cell row__cell--actions" data-testid="cell-actions">
 			<UserRowActions v-if="visible && !isObfuscated && canEdit && !loading.all"
 				:actions="userActions"
 				:disabled="isLoadingField"

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

@@ -25,7 +25,7 @@
 	<NcActions :aria-label="t('settings', 'Toggle user actions menu')"
 		:disabled="disabled"
 		:inline="1">
-		<NcActionButton data-test-id="button-toggleEdit"
+		<NcActionButton data-testid="button-toggleEdit"
 			:data-test="`${edit}`"
 			:disabled="disabled"
 			@click="toggleEdit">

cypress/e2e/settings/usersUtils.ts

@@ -20,6 +20,8 @@
  *
  */
 
+import type { User } from '@nextcloud/cypress'
+
 /**
  * Assert that `element` does not exist or is not visible
  * Useful in cases such as when NcModal is opened/closed rapidly
@@ -38,7 +40,7 @@ export function assertNotExistOrNotVisible(element: JQuery<HTMLElement>) {
  * @return Cypress chainable object
  */
 export function getUserList() {
-	return cy.get('[data-test-id="userList"]')
+	return cy.get('[data-testid="userList"]')
 }
 
 /**
@@ -73,3 +75,23 @@ export function handlePasswordConfirmation(adminPassword = 'admin') {
 		.root().closest('body')
 		.then(($body) => handleModal(cy.wrap($body)))
 }
+
+/**
+ * Toggle the edit button of the user row
+ * @param user The user row to edit
+ * @param toEdit True if it should be switch to edit mode, false to switch to read-only
+ */
+export function toggleEditButton(user: User, toEdit = true) {
+	// see that the list of users contains the user
+	getUserListRow(user.userId).should('exist')
+		// toggle the edit mode for the user
+		.find('[data-testid="cell-actions"]')
+		// replace with following (more error resilent) with nextcloud-vue 8
+		// find('[data-testid="button-toggleEdit"]')
+		.find(`button[aria-label="${toEdit ? 'Edit' : 'Done'}"]`)
+		.if()
+		.click({ force: true })
+		.else()
+		// otherwise ensure the button is already in edit mode
+		.then(() => getUserListRow(user.userId).find(`[data-testid="cell-actions"] button[aria-label="${toEdit ? 'Done' : 'Edit'}"]`).should('exist'))
+}

cypress/e2e/settings/users_columns.cy.ts

@@ -78,7 +78,7 @@ describe('Settings: Show and hide columns', function() {
 
 		// see that the language column is in all user rows
 		getUserList().find('tbody tr').each(($row) => {
-			cy.wrap($row).get('[data-test-id="cell-language"]').should('exist')
+			cy.wrap($row).get('[data-testid="cell-language"]').should('exist')
 		})
 	})
 
@@ -90,7 +90,7 @@ describe('Settings: Show and hide columns', function() {
 
 		// see that the last login column is in all user rows
 		getUserList().find('tbody tr').each(($row) => {
-			cy.wrap($row).get('[data-test-id="cell-lastLogin"]').should('exist')
+			cy.wrap($row).get('[data-testid="cell-lastLogin"]').should('exist')
 		})
 
 		// open the settings dialog
@@ -113,7 +113,7 @@ describe('Settings: Show and hide columns', function() {
 
 		// see that the last login column is not in all user rows
 		getUserList().find('tbody tr').each(($row) => {
-			cy.wrap($row).get('[data-test-id="cell-lastLogin"]').should('not.exist')
+			cy.wrap($row).get('[data-testid="cell-lastLogin"]').should('not.exist')
 		})
 	})
 })

cypress/e2e/settings/users_groups.cy.ts

@@ -92,21 +92,21 @@ describe('Settings: Assign user to a group', { testIsolation: false }, () => {
 
 	it('switch into user edit mode', () => {
 		getUserListRow(testUser.userId)
-			.find('[data-test-id="cell-actions"] button[aria-label="Edit"]')
+			.find('[data-testid="cell-actions"] button[aria-label="Edit"]')
 			.click({ force: true })
 		getUserListRow(testUser.userId)
-			.find('[data-test-id="cell-groups"] input')
+			.find('[data-testid="cell-groups"] input')
 			.should('exist')
 	})
 
 	it('assign the group', () => {
 		// focus inside the input
 		getUserListRow(testUser.userId)
-			.find('[data-test-id="cell-groups"] input')
+			.find('[data-testid="cell-groups"] input')
 			.click({ force: true })
 		// enter the group name
 		getUserListRow(testUser.userId)
-			.find('[data-test-id="cell-groups"] input')
+			.find('[data-testid="cell-groups"] input')
 			.type(`${groupName.slice(0, 5)}`) // only type part as otherwise we would create a new one with the same name
 		cy.contains('li.vs__dropdown-option', groupName)
 			.click({ force: true })