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>
nextcloud · Oct 25, 2023 · 5b0c27b · 5b0c27b
1 parent 888473f
commit 5b0c27b
Show file tree

Hide file tree

Showing 20 changed files with 559 additions and 670 deletions.
diff --git a/.drone.yml b/.drone.yml
@@ -1621,36 +1621,6 @@ trigger:
     - pull_request
     - push
 
----
-kind: pipeline
-name: acceptance-users
-
-steps:
-- name: submodules
-  image: ghcr.io/nextcloud/continuous-integration-alpine-git:latest
-  commands:
-    - git submodule update --init
-- name: acceptance-users
-  image: ghcr.io/nextcloud/continuous-integration-acceptance-php8.0:latest
-  commands:
-    - tests/acceptance/run-local.sh --timeout-multiplier 10 --nextcloud-server-domain acceptance-users --selenium-server selenium:4444 allow-git-repository-modifications features/users.feature
-
-services:
-- name: selenium
-  image: ghcr.io/nextcloud/continuous-integration-selenium:3.141.59
-  environment:
-    # Reduce default log level for Selenium server (INFO) as it is too
-    # verbose.
-    JAVA_OPTS: -Dselenium.LOGGER.level=WARNING
-
-trigger:
-  branch:
-    - master
-    - stable*
-  event:
-    - pull_request
-    - push
-
 ---
 kind: pipeline
 name: acceptance-apps

diff --git a/.github/workflows/cypress.yml b/.github/workflows/cypress.yml
@@ -23,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout app
-        uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v3.5.2
+        uses: actions/checkout@f43a0e5ff2bd294095638e18286ca9a3d1956744 # v3.6.0
 
       - name: Check composer.json
         id: check_composer
@@ -39,8 +39,8 @@ jobs:
         uses: skjnldsv/read-package-engines-version-actions@8205673bab74a63eb9b8093402fd9e0e018663a1 # v2.2
         id: versions
         with:
-          fallbackNode: "^14"
-          fallbackNpm: "^7"
+          fallbackNode: "^20"
+          fallbackNpm: "^9"
 
       - name: Set up node ${{ steps.versions.outputs.nodeVersion }}
         uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1

diff --git 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
@@ -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
@@ -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,18 +251,20 @@
 		<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">
 					{{ managerLabel }}
 				</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
@@ -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') }}