From 5b0c27b6dafb6ab6007339214c1d22d79e4b6f5d Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 18 Oct 2023 15:19:11 +0200
Subject: 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
* Move leftover acceptance tests for users from drone to cypress

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 apps/settings/src/components/UserList.vue          |  2 +-
 .../src/components/Users/UserListHeader.vue        | 12 ++++++
 apps/settings/src/components/Users/UserRow.vue     | 50 ++++++++++++++--------
 .../src/components/Users/UserRowActions.vue        |  3 +-
 4 files changed, 45 insertions(+), 22 deletions(-)

(limited to 'apps/settings/src')

diff --git a/apps/settings/src/components/UserList.vue b/apps/settings/src/components/UserList.vue
index 07e663d7912..5c7e9ba4dda 100644
--- a/apps/settings/src/components/UserList.vue
+++ b/apps/settings/src/components/UserList.vue
@@ -45,7 +45,7 @@
 			:data-component="UserRow"
 			:data-sources="filteredUsers"
 			data-key="id"
-			data-test-id="userList"
+			data-cy-user-list
 			:item-height="rowHeight"
 			:style="style"
 			:extra-props="{
diff --git a/apps/settings/src/components/Users/UserListHeader.vue b/apps/settings/src/components/Users/UserListHeader.vue
index 4ee0637d16b..e314bcb6a73 100644
--- a/apps/settings/src/components/Users/UserListHeader.vue
+++ b/apps/settings/src/components/Users/UserListHeader.vue
@@ -23,12 +23,14 @@
 <template>
 	<tr class="header">
 		<th class="header__cell header__cell--avatar"
+			data-cy-user-list-header-avatar
 			scope="col">
 			<span class="hidden-visually">
 				{{ t('settings', 'Avatar') }}
 			</span>
 		</th>
 		<th class="header__cell header__cell--displayname"
+			data-cy-user-list-header-displayname
 			scope="col">
 			<strong>
 				{{ t('settings', 'Display name') }}
@@ -39,33 +41,40 @@
 		</th>
 		<th class="header__cell"
 			:class="{ 'header__cell--obfuscated': hasObfuscated }"
+			data-cy-user-list-header-password
 			scope="col">
 			<span>{{ passwordLabel }}</span>
 		</th>
 		<th class="header__cell"
+			data-cy-user-list-header-email
 			scope="col">
 			<span>{{ t('settings', 'Email') }}</span>
 		</th>
 		<th class="header__cell header__cell--large"
+			data-cy-user-list-header-groups
 			scope="col">
 			<span>{{ t('settings', 'Groups') }}</span>
 		</th>
 		<th v-if="subAdminsGroups.length > 0 && settings.isAdmin"
 			class="header__cell header__cell--large"
+			data-cy-user-list-header-subadmins
 			scope="col">
 			<span>{{ t('settings', 'Group admin for') }}</span>
 		</th>
 		<th class="header__cell"
+			data-cy-user-list-header-quota
 			scope="col">
 			<span>{{ t('settings', 'Quota') }}</span>
 		</th>
 		<th v-if="showConfig.showLanguages"
 			class="header__cell header__cell--large"
+			data-cy-user-list-header-languages
 			scope="col">
 			<span>{{ t('settings', 'Language') }}</span>
 		</th>
 		<th v-if="showConfig.showUserBackend || showConfig.showStoragePath"
 			class="header__cell header__cell--large"
+			data-cy-user-list-header-storage-location
 			scope="col">
 			<span v-if="showConfig.showUserBackend">
 				{{ t('settings', 'User backend') }}
@@ -77,15 +86,18 @@
 		</th>
 		<th v-if="showConfig.showLastLogin"
 			class="header__cell"
+			data-cy-user-list-header-last-login
 			scope="col">
 			<span>{{ t('settings', 'Last login') }}</span>
 		</th>
 		<th class="header__cell header__cell--large header__cell--fill"
+			data-cy-user-list-header-manager
 			scope="col">
 			<!-- TRANSLATORS This string describes a manager in the context of an organization -->
 			<span>{{ t('settings', 'Manager') }}</span>
 		</th>
 		<th class="header__cell header__cell--actions"
+			data-cy-user-list-header-actions
 			scope="col">
 			<span class="hidden-visually">
 				{{ t('settings', 'User actions') }}
diff --git a/apps/settings/src/components/Users/UserRow.vue b/apps/settings/src/components/Users/UserRow.vue
index a013077a582..15995d2e4e7 100644
--- a/apps/settings/src/components/Users/UserRow.vue
+++ b/apps/settings/src/components/Users/UserRow.vue
@@ -25,8 +25,8 @@
 
 <template>
 	<tr class="user-list__row"
-		:data-test="user.id">
-		<td class="row__cell row__cell--avatar">
+		:data-cy-user-row="user.id">
+		<td class="row__cell row__cell--avatar" data-cy-user-list-cell-avatar>
 			<NcLoadingIcon v-if="isLoadingUser"
 				:name="t('settings', 'Loading user …')"
 				:size="32" />
@@ -36,12 +36,12 @@
 				:user="user.id" />
 		</td>
 
-		<td class="row__cell row__cell--displayname" data-test-id="cell-displayname">
+		<td class="row__cell row__cell--displayname" data-cy-user-list-cell-displayname>
 			<template v-if="editing && user.backendCapabilities.setDisplayName">
 				<NcTextField ref="displayNameField"
 					class="user-row-text-field"
-					data-test-id="input-displayName"
-					:data-test-loading="`${loading.displayName}`"
+					data-cy-user-list-input-displayname
+					:data-loading="loading.displayName || undefined"
 					:trailing-button-label="t('settings', 'Submit')"
 					:class="{ 'icon-loading-small': loading.displayName }"
 					:show-trailing-button="true"
@@ -63,13 +63,13 @@
 			</template>
 		</td>
 
-		<td data-test-id="cell-password"
+		<td data-cy-user-list-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-test-loading="`${loading.password}`"
+					data-cy-user-list-input-password
+					:data-loading="loading.password || undefined"
 					:trailing-button-label="t('settings', 'Submit')"
 					:class="{'icon-loading-small': loading.password}"
 					:show-trailing-button="true"
@@ -91,10 +91,12 @@
 			</span>
 		</td>
 
-		<td class="row__cell" data-test-id="cell-email">
+		<td class="row__cell" data-cy-user-list-cell-email>
 			<template v-if="editing">
 				<NcTextField class="user-row-text-field"
 					:class="{'icon-loading-small': loading.mailAddress}"
+					data-cy-user-list-input-email
+					:data-loading="loading.mailAddress || undefined"
 					:show-trailing-button="true"
 					:trailing-button-label="t('settings', 'Submit')"
 					:label="t('settings', 'Set new email address')"
@@ -113,13 +115,15 @@
 			</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-cy-user-list-cell-groups>
 			<template v-if="editing">
 				<label class="hidden-visually"
 					:for="'groups' + uniqueId">
 					{{ t('settings', 'Add user to group') }}
 				</label>
-				<NcSelect :input-id="'groups' + uniqueId"
+				<NcSelect data-cy-user-list-input-groups
+					:data-loading="loading.groups || undefined"
+					:input-id="'groups' + uniqueId"
 					:close-on-select="false"
 					:disabled="isLoadingField"
 					:loading="loading.groups"
@@ -143,14 +147,16 @@
 		</td>
 
 		<td v-if="subAdminsGroups.length > 0 && settings.isAdmin"
-			data-test-id="cell-subadmins"
+			data-cy-user-list-cell-subadmins
 			class="row__cell row__cell--large row__cell--multiline">
 			<template v-if="editing && settings.isAdmin && subAdminsGroups.length > 0">
 				<label class="hidden-visually"
 					:for="'subadmins' + uniqueId">
 					{{ t('settings', 'Set user as admin for') }}
 				</label>
-				<NcSelect :input-id="'subadmins' + uniqueId"
+				<NcSelect data-cy-user-list-input-subadmins
+					:data-loading="loading.subadmins || undefined"
+					:input-id="'subadmins' + uniqueId"
 					:close-on-select="false"
 					:disabled="isLoadingField"
 					:loading="loading.subadmins"
@@ -170,7 +176,7 @@
 			</span>
 		</td>
 
-		<td class="row__cell" data-test-id="cell-quota">
+		<td class="row__cell" data-cy-user-list-cell-quota>
 			<template v-if="editing">
 				<label class="hidden-visually"
 					:for="'quota' + uniqueId">
@@ -179,6 +185,8 @@
 				<NcSelect v-model="editedUserQuota"
 					:close-on-select="true"
 					:create-option="validateQuota"
+					data-cy-user-list-input-quota
+					:data-loading="loading.quota || undefined"
 					:disabled="isLoadingField"
 					:loading="loading.quota"
 					:append-to-body="false"
@@ -202,13 +210,15 @@
 
 		<td v-if="showConfig.showLanguages"
 			class="row__cell row__cell--large"
-			data-test-id="cell-language">
+			data-cy-user-list-cell-language>
 			<template v-if="editing">
 				<label class="hidden-visually"
 					:for="'language' + uniqueId">
 					{{ t('settings', 'Set the language') }}
 				</label>
 				<NcSelect :id="'language' + uniqueId"
+					data-cy-user-list-input-language
+					:data-loading="loading.languages || undefined"
 					:allow-empty="false"
 					:disabled="isLoadingField"
 					:loading="loading.languages"
@@ -226,7 +236,7 @@
 		</td>
 
 		<td v-if="showConfig.showUserBackend || showConfig.showStoragePath"
-			data-test-id="cell-storageLocation"
+			data-cy-user-list-cell-storage-location
 			class="row__cell row__cell--large">
 			<template v-if="!isObfuscated">
 				<span v-if="showConfig.showUserBackend">{{ user.backend }}</span>
@@ -241,11 +251,11 @@
 		<td v-if="showConfig.showLastLogin"
 			:title="userLastLoginTooltip"
 			class="row__cell"
-			data-test-id="cell-lastLogin">
+			data-cy-user-list-cell-last-login>
 			<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-cy-user-list-cell-manager>
 			<template v-if="editing">
 				<label class="hidden-visually"
 					:for="'manager' + uniqueId">
@@ -253,6 +263,8 @@
 				</label>
 				<NcSelect v-model="currentManager"
 					class="select--fill"
+					data-cy-user-list-input-manager
+					:data-loading="loading.manager || undefined"
 					:input-id="'manager' + uniqueId"
 					:close-on-select="true"
 					:disabled="isLoadingField"
@@ -271,7 +283,7 @@
 			</span>
 		</td>
 
-		<td class="row__cell row__cell--actions" data-test-id="cell-actions">
+		<td class="row__cell row__cell--actions" data-cy-user-list-cell-actions>
 			<UserRowActions v-if="visible && !isObfuscated && canEdit && !loading.all"
 				:actions="userActions"
 				:disabled="isLoadingField"
diff --git a/apps/settings/src/components/Users/UserRowActions.vue b/apps/settings/src/components/Users/UserRowActions.vue
index b7a2de19f64..61134367bf6 100644
--- a/apps/settings/src/components/Users/UserRowActions.vue
+++ b/apps/settings/src/components/Users/UserRowActions.vue
@@ -25,8 +25,7 @@
 	<NcActions :aria-label="t('settings', 'Toggle user actions menu')"
 		:disabled="disabled"
 		:inline="1">
-		<NcActionButton data-test-id="button-toggleEdit"
-			:data-test="`${edit}`"
+		<NcActionButton :data-cy-user-list-action-toggle-edit="`${edit}`"
 			:disabled="disabled"
 			@click="toggleEdit">
 			{{ edit ? t('settings', 'Done') : t('settings', 'Edit') }}
-- 
cgit v1.2.3