refactor: remove hacks for share role tests

packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue

@@ -36,7 +36,7 @@
       >
         <li v-for="role in availableRoles" :key="role.id">
           <oc-button
-            :id="`files-recipient-role-drop-btn-${getRoleName(role)}`"
+            :id="`files-recipient-role-drop-btn-${role.id}`"
             ref="roleSelect"
             justify-content="space-between"
             class="files-recipient-role-drop-btn oc-p-s"
@@ -142,20 +142,6 @@ export default defineComponent({
       emit('optionChange', unref(selectedRole))
     }
 
-    // FIXME: only needed for e2e and acceptance tests, map id to human readable element id
-    const getRoleName = (role: ShareRole) => {
-      const map = {
-        'b1e2218d-eef8-4d4c-b82d-0f1a1b48f3b5': 'viewer',
-        'a8d5fe5e-96e3-418d-825b-534dbdf22b99': 'viewer',
-        '2d00ce52-1fc2-4dbc-8b95-a73b73395f5a': 'editor',
-        'fb6c3e19-e378-47e5-b277-9732f9de6e21': 'editor',
-        '58c63c02-1d89-4572-916a-870abc5a1b7d': 'editor',
-        '312c0871-5ef7-4b3a-85b6-0e4074c64049': 'manager',
-        '1c996275-f1c9-4e71-abdf-a42f6495e960': 'uploader'
-      }
-      return map[role.id]
-    }
-
     return {
       ability,
       user,
@@ -165,8 +151,7 @@ export default defineComponent({
       selectedRole,
       availableRoles,
       isSelectedRole,
-      selectRole,
-      getRoleName
+      selectRole
     }
   },
   computed: {
@@ -177,7 +162,7 @@ export default defineComponent({
       return 'files-collaborators-role-button-new'
     },
     inviteLabel() {
-      return this.$gettext(this.selectedRole?.label || '')
+      return this.$gettext(this.selectedRole?.displayName || '')
     }
   },
 

packages/web-app-files/src/components/SideBar/Shares/Shared/RoleItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <span :id="`files-role-${roleName}`" class="roles-select-role-item">
+  <span :id="`files-role-${(role as ShareRole).id}`" class="roles-select-role-item">
     <span
       class="oc-text-bold oc-display-block oc-width-1-1"
       v-text="$gettext((role as ShareRole).displayName)"
@@ -13,7 +13,7 @@
 
 <script lang="ts">
 import { ShareRole } from '@ownclouders/web-client/src/helpers'
-import { computed, defineComponent, PropType } from 'vue'
+import { defineComponent, PropType } from 'vue'
 
 export default defineComponent({
   name: 'RoleItem',
@@ -22,24 +22,6 @@ export default defineComponent({
       type: Object as PropType<ShareRole>,
       required: true
     }
-  },
-  setup(props) {
-    // FIXME: only needed for e2e and acceptance tests, map id to human readable element id
-    const roleName = computed(() => {
-      const map = {
-        'b1e2218d-eef8-4d4c-b82d-0f1a1b48f3b5': 'viewer',
-        'a8d5fe5e-96e3-418d-825b-534dbdf22b99': 'viewer',
-        '2d00ce52-1fc2-4dbc-8b95-a73b73395f5a': 'editor',
-        'fb6c3e19-e378-47e5-b277-9732f9de6e21': 'editor',
-        '58c63c02-1d89-4572-916a-870abc5a1b7d': 'editor',
-        '312c0871-5ef7-4b3a-85b6-0e4074c64049': 'manager',
-        '1c996275-f1c9-4e71-abdf-a42f6495e960': 'uploader'
-      }
-
-      return map[(props.role as ShareRole).id]
-    })
-
-    return { roleName }
   }
 })
 </script>

packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/RoleDropdown.spec.ts

@@ -18,15 +18,15 @@ describe('RoleDropdown', () => {
   it('renders a button with existing role if given', () => {
     const { wrapper } = getWrapper({
       mountType: shallowMount,
-      existingRole: mock<ShareRole>({ label: 'Can edit' })
+      existingRole: mock<ShareRole>({ displayName: 'Can edit' })
     })
     expect(wrapper.find(selectors.recipientRoleBtn).exists()).toBeTruthy()
     expect(wrapper.find(`${selectors.recipientRoleBtn} span`).text()).toEqual('Can edit')
   })
   it('does not render a button if only one role is available', () => {
     const { wrapper } = getWrapper({
       mountType: shallowMount,
-      availableShareRoles: [mock<ShareRole>({ displayName: 'Viewer', description: '', label: '' })]
+      availableShareRoles: [mock<ShareRole>({ displayName: 'Can view', description: '' })]
     })
     expect(wrapper.find(selectors.recipientRoleBtn).exists()).toBeFalsy()
   })
@@ -42,8 +42,8 @@ function getWrapper({
   mountType = mount,
   existingRole = null,
   availableShareRoles = [
-    mock<ShareRole>({ displayName: 'Viewer', description: '', label: 'Can view' }),
-    mock<ShareRole>({ displayName: 'Editor', description: '', label: 'Can edit' })
+    mock<ShareRole>({ displayName: 'Can view', description: '' }),
+    mock<ShareRole>({ displayName: 'Can edit', description: '' })
   ]
 } = {}) {
   return {

packages/web-pkg/src/components/CreateLinkModal.vue

@@ -3,7 +3,7 @@
     <oc-list class="role-dropdown-list">
       <li v-for="(type, i) in availableLinkTypes" :key="`role-dropdown-${i}`">
         <oc-button
-          :id="`files-role-${getLinkId(type)}`"
+          :id="`files-role-${getLinkRoleByType(type).id}`"
           :ref="(el: any) => (roleRefs[type] = el)"
           :class="{
             selected: isSelectedLinkType(type),
@@ -317,22 +317,6 @@ export default defineComponent({
       }
     }
 
-    // FIXME: only needed for e2e and acceptance tests, map id to human readable element id
-    const getLinkId = (type: SharingLinkType) => {
-      const id = getLinkRoleByType(type).id
-
-      const map = {
-        internal: 'internal',
-        view: 'viewer',
-        upload: 'contributor',
-        edit: 'editor',
-        createOnly: 'uploader',
-        blocksDownload: 'blocksDownload'
-      }
-
-      return map[id]
-    }
-
     onMounted(() => {
       const activeRoleOption = unref(roleRefs)[unref(selectedType)]
       if (activeRoleOption) {
@@ -358,7 +342,6 @@ export default defineComponent({
       updateSelectedLinkType,
       updatePassword,
       getLinkRoleByType,
-      getLinkId,
 
       // unit tests
       onConfirm

packages/web-pkg/src/components/LinkRoleDropdown.vue

@@ -28,7 +28,7 @@
     <oc-list class="role-dropdown-list">
       <li v-for="(type, i) in availableLinkTypeOptions" :key="`role-dropdown-${i}`">
         <oc-button
-          :id="`files-role-${getLinkId(type)}`"
+          :id="`files-role-${getLinkRoleByType(type).id}`"
           :class="{
             selected: isSelectedType(type),
             'oc-background-primary-gradient': isSelectedType(type)
@@ -96,29 +96,12 @@ export default defineComponent({
 
     const dropUuid = uuid.v4()
 
-    // FIXME: only needed for e2e and acceptance tests, map id to human readable element id
-    const getLinkId = (type: SharingLinkType) => {
-      const id = getLinkRoleByType(type).id
-
-      const map = {
-        internal: 'internal',
-        view: 'viewer',
-        upload: 'contributor',
-        edit: 'editor',
-        createOnly: 'uploader',
-        blocksDownload: 'blocksDownload'
-      }
-
-      return map[id]
-    }
-
     return {
       isSelectedType,
       updateSelectedType,
       currentLinkRoleLabel,
       dropUuid,
-      getLinkRoleByType,
-      getLinkId
+      getLinkRoleByType
     }
   }
 })

packages/web-pkg/src/composables/piniaStores/shares/shares.ts

@@ -45,20 +45,9 @@ export const useSharesStore = defineStore('shares', () => {
       [GraphShareRoleIdMap.SpaceManager]: 'user-star'
     }
 
-    const $gettext = (str: string) => str // dummy
-    const ShareRoleLabelMap = {
-      [GraphShareRoleIdMap.Viewer]: $gettext('Can view'),
-      [GraphShareRoleIdMap.SpaceViewer]: $gettext('Can view'),
-      [GraphShareRoleIdMap.FileEditor]: $gettext('Can edit'),
-      [GraphShareRoleIdMap.FolderEditor]: $gettext('Can edit'),
-      [GraphShareRoleIdMap.SpaceEditor]: $gettext('Can edit'),
-      [GraphShareRoleIdMap.SpaceManager]: $gettext('Can manage')
-    }
-
     graphRoles.value = values.map((v) => ({
       ...v,
-      icon: ShareRoleIconMap[v.id] || 'user',
-      label: ShareRoleLabelMap[v.id] || v.displayName
+      icon: ShareRoleIconMap[v.id] || 'user'
     }))
   }
 

tests/acceptance/pageObjects/FilesPageElement/publicLinksDialog.js

@@ -594,16 +594,22 @@ module.exports = {
       selector: '#files-file-link-role-button'
     },
     roleViewer: {
-      selector: '#files-role-viewer'
+      selector: '//span[contains(@class,"role-dropdown-list-option-label") and text()="Can view"]',
+      locateStrategy: 'xpath'
     },
     roleContributor: {
-      selector: '#files-role-contributor'
+      selector:
+        '//span[contains(@class,"role-dropdown-list-option-label") and text()="Can upload"]',
+      locateStrategy: 'xpath'
     },
     roleEditor: {
-      selector: '#files-role-editor'
+      selector: '//span[contains(@class,"role-dropdown-list-option-label") and text()="Can edit"]',
+      locateStrategy: 'xpath'
     },
     roleUploader: {
-      selector: '#files-role-uploader'
+      selector:
+        '//span[contains(@class,"role-dropdown-list-option-label") and text()="Secret File Drop"]',
+      locateStrategy: 'xpath'
     },
     publicLinkEditRoleButton: {
       selector:

tests/e2e/cucumber/steps/ui/adminSettings.ts

@@ -2,7 +2,7 @@ import { DataTable, Then, When } from '@cucumber/cucumber'
 import { World } from '../../environment'
 import { objects } from '../../../support'
 import { expect } from '@playwright/test'
-import { shareRoles } from '../../../support/objects/app-files/share/collaborator'
+import { shareRoles } from '../../../support/api/share/share'
 
 Then(
   /^"([^"]*)" (should|should not) see the following space(?:s)?$/,

tests/e2e/support/api/share/share.ts

@@ -2,7 +2,6 @@ import join from 'join-path'
 
 import { checkResponseStatus, request } from '../http'
 import { User } from '../../types'
-import { shareRoles } from '../../objects/app-files/share/collaborator'
 
 export const shareTypes: Readonly<{
   user: string
@@ -18,6 +17,22 @@ export const shareTypes: Readonly<{
   space: '7'
 }
 
+export const shareRoles: Readonly<{
+  'Invited people': string
+  'Can upload': string
+  'Can manage': string
+  'Can edit': string
+  'Can view': string
+  'Secret File Drop': string
+}> = {
+  'Invited people': 'internal',
+  'Can upload': 'contributor',
+  'Can manage': 'manager',
+  'Can edit': 'editor',
+  'Can view': 'viewer',
+  'Secret File Drop': 'uploader'
+}
+
 export const createShare = async ({
   user,
   path,

tests/e2e/support/objects/app-files/link/actions.ts

@@ -3,7 +3,6 @@ import util from 'util'
 import { sidebar } from '../utils'
 import { getActualExpiryDate } from '../../../utils/datePicker'
 import { clickResource } from '../resource/actions'
-import { shareRoles } from '../share/collaborator'
 
 export interface createLinkArgs {
   page: Page
@@ -62,7 +61,7 @@ export type publicLinkAndItsEditButtonVisibilityArgs = {
   resource?: string
   space?: boolean
 }
-const publicLinkSetRoleButton = `#files-role-%s`
+const publicLinkSetRoleButton = `//span[contains(@class,"role-dropdown-list-option-label") and text()='%s']`
 const linkExpiryDatepicker = '.link-expiry-picker:not(.vc-container)'
 const publicLinkEditRoleButton =
   `//h4[contains(@class, "oc-files-file-link-name") and text()="%s"]//ancestor::li//div[contains(@class, "link-details")]/` +
@@ -121,7 +120,7 @@ export const createLink = async (args: createLinkArgs): Promise<string> => {
   }
   await page.locator(addPublicLinkButton).click()
   if (role) {
-    await page.locator(util.format(publicLinkSetRoleButton, shareRoles[role])).click()
+    await page.locator(util.format(publicLinkSetRoleButton, role)).click()
   }
 
   role === 'Invited people'
@@ -170,7 +169,7 @@ export const changeRole = async (args: changeRoleArgs): Promise<string> => {
         res.request().method() === 'PATCH' &&
         res.status() === 200
     ),
-    page.locator(util.format(publicLinkSetRoleButton, shareRoles[role])).click()
+    page.locator(util.format(publicLinkSetRoleButton, role)).click()
   ])
 
   const message = await page.locator(linkUpdateDialog).textContent()

tests/e2e/support/objects/app-files/share/collaborator.ts

@@ -55,33 +55,16 @@ export interface IAccessDetails {
 
 export type CollaboratorType = 'user' | 'group'
 
-export const shareRoles: Readonly<{
-  'Invited people': string
-  'Can upload': string
-  'Can manage': string
-  'Can edit': string
-  'Can view': string
-  'Secret File Drop': string
-}> = {
-  'Invited people': 'internal',
-  'Can upload': 'contributor',
-  'Can manage': 'manager',
-  'Can edit': 'editor',
-  'Can view': 'viewer',
-  'Secret File Drop': 'uploader'
-}
-
 export default class Collaborator {
   private static readonly invitePanel = '//*[@id="oc-files-sharing-sidebar"]'
   private static readonly inviteInput = '#files-share-invite-input'
   private static readonly newCollaboratorRoleDropdown =
     '//*[@id="files-collaborators-role-button-new"]'
-  private static readonly newCollaboratorRoleItemSelector = '//*[@id="files-role-%s"]'
   private static readonly sendInvitationButton = '#new-collaborators-form-create-button'
   private static readonly collaboratorRoleDropdownButton =
     '%s//button[contains(@class,"files-recipient-role-select-btn")]'
   private static readonly collaboratorRoleItemSelector =
-    '%s//ul[contains(@class,"files-recipient-role-drop-list")]//button[@id="files-recipient-role-drop-btn-%s"]'
+    '%s//span[contains(@class,"roles-select-role-item")]/span[text()="%s"]'
   private static readonly collaboratorEditDropdownButton =
     '%s//button[contains(@class,"collaborator-edit-dropdown-options-btn")]'
   private static readonly collaboratorUserSelector = '//*[@data-testid="collaborator-user-item-%s"]'
@@ -160,11 +143,11 @@ export default class Collaborator {
   ): Promise<void> {
     if (!dropdownSelector) {
       dropdownSelector = Collaborator.newCollaboratorRoleDropdown
-      itemSelector = Collaborator.newCollaboratorRoleItemSelector
+      itemSelector = util.format(Collaborator.collaboratorRoleItemSelector, '')
     }
     await page.click(dropdownSelector)
 
-    return await page.click(util.format(itemSelector, shareRoles[role]))
+    return await page.click(util.format(itemSelector, role))
   }
 
   static async changeCollaboratorRole(args: CollaboratorArgs): Promise<void> {