tests: add expiration date integration and unit tests

owncloud · Sep 19, 2021 · ad49927 · ad49927
1 parent 0579eca
commit ad49927
Show file tree

Hide file tree

Showing 18 changed files with 769 additions and 529 deletions.
diff --git a/__fixtures__/recipients.js b/__fixtures__/recipients.js
@@ -0,0 +1,3 @@
+export default {
+  users: [{ label: 'bob', value: { shareType: 0, shareWith: 'bob', userType: 0 } }]
+}
diff --git a/__mocks__/sdk.js b/__mocks__/sdk.js
@@ -6,6 +6,7 @@ import fixtureSharedViaLinksFiles from '../__fixtures__/sharedViaLinkFiles'
 import fixtureSharedWithMeFiles from '../__fixtures__/sharedWithMeFiles'
 import fixtureDeletedFiles from '../__fixtures__/deletedFiles'
 import fixturePublicFiles from '../__fixtures__/publicFiles'
+import fixtureRecipients from '../__fixtures__/recipients'
 
 export default {
   files: {
@@ -41,6 +42,64 @@ export default {
     list: path => fixturePublicFiles[path]
   },
   shares: {
-    getShares: () => new Promise(resolve => resolve())
+    getShares: () => Promise.resolve(),
+    getRecipients,
+    shareFileWithUser: (path, id, params) =>
+      Promise.resolve({
+        shareInfo: {
+          id: 1,
+          share_type: 0,
+          uid_owner: 'alice', // TODO: get user dynamically
+          displayname_owner: 'alice', // TODO: get user dynamically
+          permissions: params.permissions,
+          stime: new Date().getTime(),
+          expiration: params.expirationDate,
+          uid_file_owner: 'alice', // TODO: get user dynamically
+          displayname_file_owner: 'alice', // TODO: get user dynamically
+          path,
+          item_type: 'folder', // TODO: get item type dynamically
+          item_source: 10,
+          file_source: 10,
+          file_parent: 6,
+          file_target: path,
+          share_with: id,
+          share_with_displayname: id
+        }
+      }),
+    shareFileWithGroup: () => Promise.resolve(),
+    updateShare: (id, params) => {
+      const share = {
+        shareInfo: {
+          id,
+          share_type: 0,
+          uid_owner: 'alice', // TODO: get user dynamically
+          displayname_owner: 'alice', // TODO: get user dynamically
+          permissions: params.permissions,
+          stime: new Date().getTime(),
+          uid_file_owner: 'alice', // TODO: get user dynamically
+          displayname_file_owner: 'alice', // TODO: get user dynamically
+          path: '/Documents', // TODO: get path dynamically
+          item_type: 'folder', // TODO: get item type dynamically
+          item_source: 10,
+          file_source: 10,
+          file_parent: 6,
+          file_target: '/Documents', // TODO: get path dynamically
+          share_with: 'bob', // TODO: get user dynamically
+          share_with_displayname: 'bob' // TODO: get user dynamically
+        }
+      }
+
+      if (params.expireDate) {
+        share.shareInfo.expiration = params.expireDate
+      }
+
+      return Promise.resolve(share)
+    }
   }
 }
+
+function getRecipients(query) {
+  const users = fixtureRecipients.users.filter(user => user.label.includes(query))
+
+  return { exact: { users, groups: [], remotes: [] }, users: [], groups: [], remotes: [] }
+}
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-typescript": "^8.2.5",
     "@testing-library/jest-dom": "^5.13.0",
+    "@testing-library/user-event": "^13.2.1",
     "@testing-library/vue": "^5.6.2",
     "@types/cucumber": "^7.0.0",
     "@types/jest": "^26.0.23",

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/AutocompleteItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/AutocompleteItem.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="uk-flex uk-flex-middle oc-py-xs" :class="collaboratorClass">
+  <div
+    :data-testid="`recipient-autocomplete-item-${item.label}`"
+    class="uk-flex uk-flex-middle oc-py-xs"
+    :class="collaboratorClass"
+  >
     <avatar-image
       v-if="isUser"
       class="oc-mr-s"

diff --git a/...es/web-app-files/src/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.vue b/...es/web-app-files/src/components/SideBar/Shares/Collaborators/CollaboratorsEditOptions.vue
@@ -1,12 +1,11 @@
 <template>
-  <div>
+  <div class="recipient-edit-options">
     <hr />
     <oc-button
       id="files-collaborators-role-button"
       appearance="raw"
       justify-content="left"
       gap-size="xsmall"
-      class="oc-mr-s"
     >
       <translate v-if="isAdvancedRoleSelected" key="advanced-permissions-select"
         >Invite with custom permissions</translate
@@ -42,10 +41,12 @@
         :max-date="maxExpirationDate"
         :locale="$language.current"
         class="files-recipient-expiration-datepicker"
+        data-testid="recipient-datepicker"
       >
         <template #default="{ togglePopover }">
           <oc-button
             id="files-collaborators-expiration-button"
+            data-testid="recipient-datepicker-btn"
             appearance="raw"
             justify-content="left"
             gap-size="xsmall"
@@ -61,10 +62,19 @@
             >
               Expires %{expires}
             </translate>
-            <oc-icon name="expand_more" />
+            <oc-icon v-if="!enteredExpirationDate" name="expand_more" />
           </oc-button>
         </template>
       </date-picker>
+      <oc-button
+        v-if="!expirationDateEnforced && enteredExpirationDate"
+        data-testid="recipient-edit-expiration-btn-remove"
+        appearance="raw"
+        :aria-label="$gettext('Remove expiration date')"
+        @click="clearExpirationDate"
+      >
+        <oc-icon name="close" />
+      </oc-button>
     </template>
     <template v-if="$_ocCollaborators_hasAdditionalPermissions">
       <label v-if="!isAdvancedRoleSelected" class="oc-label oc-mt-s">
@@ -374,12 +384,22 @@ export default {
 
     disabledExpirationDates(date) {
       return date < this.minExpirationDate || date > this.maxExpirationDate
+    },
+
+    clearExpirationDate() {
+      this.enteredExpirationDate = null
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.recipient-edit-options {
+  align-items: center;
+  display: flex;
+  gap: var(--oc-space-small);
+}
+
 .files-recipient-role-drop {
   &-list {
     background-color: var(--oc-color-swatch-inverse-default);
@@ -414,7 +434,7 @@ export default {
 }
 
 .files-recipient-expiration-datepicker::v-deep .vc-highlight {
-  // !important to overwrite the inline style
+  // `!important` to overwrite the inline style
   background-color: var(--oc-color-swatch-primary-default) !important;
 }
 </style>
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditCollaborator.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditCollaborator.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="files-collaborators-collaborator-edit-dialog">
+  <div data-testid="recipient-dialog-edit" class="files-collaborators-collaborator-edit-dialog">
     <h4
       id="collaborator-edit-hint"
       tabindex="-1"
@@ -58,6 +58,7 @@
           v-else
           id="files-collaborators-collaborator-save-share-button"
           key="edit-collaborator-saving-button"
+          data-testid="recipient-edit-btn-save"
           :aria-label="$gettext('Save Share')"
           :disabled="!$_hasChanges"
           variation="primary"
@@ -155,15 +156,10 @@ export default {
         // if the role has changed, always return true. The user doesn't need to understand if two bitmasks of different roles are the same!
         return true
       }
-      // FIXME: Datepicker is not displaying correct timezone so for now we add it manually
-      const originalExpirationDate = this.originalExpirationDate
-      // ? DateTime.fromJSDate(this.originalExpirationDate)
-      //     .plus({ minutes: DateTime.now().offset })
-      //     .toISO()
-      // : null
-
-      const exactExpirationDate = DateTime.fromISO(this.expirationDate).ts
-      const exactOriginalExpirationDate = DateTime.fromISO(originalExpirationDate).ts
+      const exactExpirationDate = this.expirationDate
+        ? DateTime.fromISO(this.expirationDate).ts
+        : null
+      const exactOriginalExpirationDate = DateTime.fromISO(this.originalExpirationDate).ts
 
       if (exactExpirationDate !== exactOriginalExpirationDate) {
         return true
@@ -201,7 +197,7 @@ export default {
         // Map bitmask to role to get the correct role in case the advanced role was mapped to existing role
         role: bitmaskToRole(bitmask, this.highlightedFile.type === 'folder', !this.isOcis),
         permissions: bitmask,
-        expirationDate: this.expirationDate
+        expirationDate: this.expirationDate || ''
       })
         .then(() => this.$_ocCollaborators_cancelChanges())
         .catch(errors => {

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/NewCollaborator.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/NewCollaborator.vue
@@ -1,10 +1,11 @@
 <template>
-  <div class="files-collaborators-collaborator-add-dialog">
+  <div class="files-collaborators-collaborator-add-dialog" data-testid="new-collaborator">
     <div class="oc-mb">
       <oc-select
         id="files-share-invite-input"
         ref="ocSharingAutocomplete"
         v-model="selectedCollaborators"
+        data-testid="new-collaborator-select"
         :options="autocompleteResults"
         :loading="searchInProgress"
         :multiple="true"
@@ -60,6 +61,7 @@
           v-else
           id="files-collaborators-collaborator-save-new-share-button"
           key="new-collaborator-save-button"
+          data-testid="new-collaborator-share-btn"
           :disabled="!$_isValid"
           variation="primary"
           appearance="filled"

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RecipientContainer.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RecipientContainer.vue
@@ -1,5 +1,9 @@
 <template>
-  <oc-recipient class="files-share-invite-recipient" :recipient="formattedRecipient">
+  <oc-recipient
+    :data-testid="`recipient-container-${formattedRecipient.name}`"
+    class="files-share-invite-recipient"
+    :recipient="formattedRecipient"
+  >
     <template #append>
       <oc-button
         class="files-share-invite-recipient-btn-remove"

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ShowCollaborator.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ShowCollaborator.vue
@@ -1,5 +1,10 @@
 <template>
-  <oc-table-simple top class="files-collaborators-collaborator" role="presentation">
+  <oc-table-simple
+    :data-testid="`collaborator-item-${collaborator.collaborator.name}`"
+    top
+    class="files-collaborators-collaborator"
+    role="presentation"
+  >
     <oc-tr class="files-collaborators-collaborator-table-row-info">
       <oc-td width="shrink" class="oc-py-rm oc-pr-s">
         <div key="collaborator-avatar-loaded">
@@ -124,7 +129,10 @@
               </oc-tag>
             </li>
             <li v-if="collaborator.expires" class="oc-py-rm">
-              <oc-tag class="files-collaborators-collaborator-expires">
+              <oc-tag
+                data-testid="recipient-info-expiration-date"
+                class="files-collaborators-collaborator-expires"
+              >
                 <oc-icon name="text-calendar" />
                 <translate :translate-params="{ expires: expirationDate }">
                   Expires %{expires}
@@ -154,6 +162,7 @@
           <oc-button
             v-if="$_editButtonVisible"
             v-oc-tooltip="editShareHint"
+            :data-testid="`recipient-${collaborator.collaborator.name}-btn-edit`"
             :aria-label="editShareHint"
             appearance="raw"
             class="files-collaborators-collaborator-edit oc-mr-xs"

diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -10,6 +10,7 @@
         <div v-if="$_ocCollaborators_canShare" class="oc-mt-s oc-mb-s">
           <oc-button
             ref="addCollaborators"
+            data-testid="file-shares-add-btn"
             variation="primary"
             class="files-collaborators-open-add-share-dialog-button"
             @click="$_ocCollaborators_addShare"
@@ -28,6 +29,7 @@
           <h4 class="shared-with-label" v-text="sharedWithLabel" />
           <oc-button
             v-oc-tooltip="sharedWithTooltip"
+            data-testid="collaborators-show-people"
             appearance="raw"
             :aria-label="sharedWithTooltip"
             @click="onClickSharedWith"

diff --git a/packages/web-app-files/tests/integration/helpers/date.js b/packages/web-app-files/tests/integration/helpers/date.js
@@ -0,0 +1,12 @@
+/**
+ * Adds a given number of days to the current date
+ * @param {number} days number of days to be added to the current date
+ * @returns date in the future with added days
+ */
+export function getDateInFuture(days) {
+  const date = new Date()
+
+  date.setDate(new Date().getDate() + days)
+
+  return date
+}