Test/e2e tests december (merge commit)

Merge branch 'test/e2e-tests-december' into 'main'
* Delete fixtures between tests

* Add file download as part of e2e sharing test

* Add test for direct archive download

* Test direct file download via OPFS

* Add test for archive download with service worker

* Test service worker file download

* Improve flaky logout command

* Reset DB between tests. Reset deletes containers in swift and admin projects

* Make cypress test formatting consistent

* Update and reorder cypress commands

* Refactor container e2e tests

* Remove userInfo.cy.js old login tests, move missing to login.cy.js, refactor

* Update browser tests

* Check for error alert when adding a duplicate file for upload test. Unify quotation marks

* Add testid to progress toast

* Refactor cypress commands. Use file upload commands

* Update and finish upload e2e tests. Use upload folder creation instead of deprecated upload folder search

* Fix test to find a shared folder in a multi-page table

* Update table sharing test, test upload to shared folder. Add share command.

* Switch user instead of projects. Shorten wait time before toast

* Update sharing tests, remove reliance on UI text, add project switching command

* added download test

* added commands

* added tests

* init

Closes #952, #953, and #954
See merge request https://gitlab.ci.csc.fi/sds-dev/sd-connect/swift-browser-ui/-/merge_requests/236

Approved-by: Joonatan Mäkinen <[email protected]>
Co-authored-by: Monika Radaviciute <[email protected]>
Co-authored-by: Mariia <[email protected]>
Merged by Joonatan Mäkinen <[email protected]>

Author: Joonatan Mäkinen

swift_browser_ui_frontend/cypress.config.js

@@ -2,6 +2,7 @@ const { defineConfig } = require("cypress");
 const { cloudPlugin } = require("cypress-cloud/plugin");
 const { Client } = require("pg");
 const { spawn } = require("node:child_process");
+const { rmdir, existsSync } = require("fs");
 
 module.exports = defineConfig({
   fixturesFolder: "../tests/cypress/fixtures",
@@ -50,19 +51,44 @@ module.exports = defineConfig({
 
           return null;
         },
+        extractArchive({ directory, archive }) {
+          const cp = spawn("bash",
+            ["../tests/cypress/support/extractArchive.sh"],
+            {env: { DIR: directory, ARCHIVE: archive }},
+          );
+
+          cp.stderr.on("data", (data) => {
+            console.error(`stderr: ${data}`);
+          });
+          return null;
+        },
+        deleteFolder(folder) {
+          if (existsSync(folder)) {
+            rmdir(folder, { recursive: true }, (err) => {
+              if (err) console.error(err);
+            });
+          }
+          return null;
+        },
       });
       return cloudPlugin(on, config);
     },
     // baseUrl: "https://172.17.0.1:8081/",
-    baseUrl: "https://sd-connect.dev:8000/",
+    baseUrl: "https://sd-connect.dev:8081/",
 
     specPattern: "../tests/cypress/integration/**/*.cy.{js,jsx,ts,tsx}",
     supportFile: "../tests/cypress/support/index.js",
+    experimentalStudio: true,
+    textFileLocation: "../tests/cypress/fixtures/text-files/",
+    downloadsFolder: "../tests/cypress/fixtures/downloads/",
+    trashAssetsBeforeRuns: true,
   },
   env: {
     username: "swift",
     password: "veryfast",
     wrongusername: "swif11t",
     wrongpassword: "very11fast",
+    username2: "admin",
+    password2: "superuser",
   },
 });

swift_browser_ui_frontend/eslint.config.js swift_browser_ui_frontend/eslint.config.mjs

@@ -2,7 +2,6 @@
   "name": "swift_browser_ui_frontend_npm",
   "version": "2.0.1",
   "private": true,
-  "type": "module",
   "scripts": {
     "serve": "./build_wasm.sh && vite serve --mode development",
     "build": "./build_wasm.sh && vite build --mode production",
@@ -30,6 +29,7 @@
     "luxon": "^3.4.4",
     "rxjs": "^7.8.1",
     "sass": "^1.77.4",
+    "spark-md5": "^3.0.2",
     "vite": "^5.2.12",
     "vue": "^3.4.27",
     "vue-i18n": "^9.13.1",

swift_browser_ui_frontend/package.json

@@ -225,6 +225,7 @@ export default class UploadSocket {
     }
   }
 
+
   // Get headers for download
   async getHeaders(id, container, fileList, pubkey, owner, ownerName) {
     let headers = {};
@@ -401,6 +402,7 @@ export default class UploadSocket {
     container,
     objects,
     owner = "",
+    test = false,
   ) {
 
     //get random id
@@ -416,25 +418,34 @@ export default class UploadSocket {
       // Download directly into the file if available.
       // Otherwise, use streaming + ServiceWorker.
       if (!this.useServiceWorker) {
+        const fileName = objects[0].replace(".c4gh", "");
+
+        if (test) {
+          //OPFS root for direct download e2e testing
+          const testDirHandle = await navigator.storage.getDirectory();
+          fileHandle =
+            await testDirHandle.getFileHandle(fileName, { create: true });
+        }
+        else {
         // Match the file identifier
-        const fident = objects[0].replace(".c4gh", "")
-          .match(/(?<!^)\.[^.]{1,}$/g);
-        const opts = {
-          suggestedName: objects[0].split("/").at(-1).replace(".c4gh", ""),
-        };
-
-        if (fident) {
-          opts.types = [
-            {
-              description: "Generic file",
-              accept: {
-                "application/octet-stream": [fident],
+          const fident = objects[0].replace(".c4gh", "")
+            .match(/(?<!^)\.[^.]{1,}$/g);
+          const opts = {
+            suggestedName: fileName,
+          };
+
+          if (fident) {
+            opts.types = [
+              {
+                description: "Generic file",
+                accept: {
+                  "application/octet-stream": [fident],
+                },
               },
-            },
-          ];
+            ];
+          }
+          fileHandle = await window.showSaveFilePicker(opts);
         }
-        fileHandle = await window.showSaveFilePicker(opts);
-
         this.downWorker.postMessage({
           command: "downloadFile",
           id: sessionId,
@@ -443,6 +454,7 @@ export default class UploadSocket {
           handle: fileHandle,
           owner: owner,
           ownerName: ownerName,
+          test: test,
         });
       } else {
         if (DEV) {
@@ -463,17 +475,25 @@ export default class UploadSocket {
       // Download directly into the archive if available.
       // Otherwise, use streaming + ServiceWorker.
       if (!this.useServiceWorker) {
-        fileHandle = await window.showSaveFilePicker({
-          suggestedName: `${container}_download.tar`,
-          types: [
-            {
-              description: "Tar archive (uncompressed)",
-              accept: {
-                "application/x-tar": [".tar"],
+        const fileName = `${container}_download.tar`;
+        if (test) {
+          //OPFS root for direct download e2e testing
+          const testDirHandle = await navigator.storage.getDirectory();
+          fileHandle =
+            await testDirHandle.getFileHandle(fileName, { create: true });
+        } else {
+          fileHandle = await window.showSaveFilePicker({
+            suggestedName: fileName,
+            types: [
+              {
+                description: "Tar archive (uncompressed)",
+                accept: {
+                  "application/x-tar": [".tar"],
+                },
               },
-            },
-          ],
-        });
+            ],
+          });
+        }
         this.downWorker.postMessage({
           command: "downloadFiles",
           id: sessionId,
@@ -482,6 +502,7 @@ export default class UploadSocket {
           handle: fileHandle,
           owner: owner,
           ownerName: ownerName,
+          test: test,
         });
       } else {
         navigator.serviceWorker.ready.then(reg => {

swift_browser_ui_frontend/pnpm-lock.yaml

@@ -49,6 +49,7 @@
       <c-sidenavigationitem
         v-for="item of navigationMenuItems"
         :key="item.title"
+        :data-testid="item.testid + '-mobile'"
       >
         <div slot="main">
           <span :class="'mdi ' + item.icon" />
@@ -64,7 +65,7 @@
             :key="subItem.title"
             :href="subItem.href"
             :target="subItem.href && '_blank'"
-            :data-testid="subItem.testid"
+            :data-testid="subItem.testid + '-mobile'"
             @click="() => {
               (subItem.route || subItem.href) && handleItemRoute(subItem);
               subItem.action && subItem.action();
@@ -260,7 +261,7 @@ c-menu {
 }
 
 @media screen and (min-width: 768px) {
-  c-navigationbutton {
+  c-navigationbutton, c-sidenavigation {
     display: none;
   }
 }

swift_browser_ui_frontend/src/common/socket.js

@@ -4,6 +4,7 @@
     because csc-ui wont recognise it otherwise. -->
     <c-data-table
       id="obj-table"
+      data-testid="object-table"
       :data.prop="objects"
       :headers.prop="hideTags ?
         headers.filter(header => header.key !== 'tags'): headers"
@@ -229,13 +230,14 @@ export default {
               component: {
                 tag: "c-button",
                 params: {
+                  testid: "download-object",
                   text: true,
                   size: "small",
                   title: "Download",
                   path: mdiTrayArrowDown,
-                  onClick: () => {
+                  onClick: ({ event }) => {
                     item.name.match(".c4gh") || item?.subfolder
-                      ? this.beginDownload(item)
+                      ? this.beginDownload(item, event.isTrusted)
                       : this.navDownload(item.url);
                   },
                   disabled: this.owner != undefined &&
@@ -248,6 +250,7 @@ export default {
               component: {
                 tag: "c-button",
                 params: {
+                  testid: "edit-object-tags",
                   text: true,
                   size: "small",
                   title: "Edit tags",
@@ -269,6 +272,7 @@ export default {
               component: {
                 tag: "c-button",
                 params: {
+                  testid: "delete-object",
                   text: true,
                   size: "small",
                   title: "Delete object",
@@ -411,7 +415,12 @@ export default {
         this.$emit("selected-rows", event.detail);
       }
     },
-    beginDownload(object) {
+    beginDownload(object, eventTrusted) {
+      //add test param to test direct downloads
+      //by using origin private file system (OPFS)
+      //automated testing creates untrusted events
+      const test = eventTrusted === undefined ? false: !eventTrusted;
+
       if (object?.subfolder) {
         const subfolderFiles = this
           .objs
@@ -424,6 +433,7 @@ export default {
           this.$route.params.container,
           subfolderFiles,
           this.$route.params.owner ? this.$route.params.owner : "",
+          test,
         ).then(() => {
           if (DEV) console.log(`Started downloading subfolder ${object.name}`);
         }).catch(() => {
@@ -434,6 +444,7 @@ export default {
           this.$route.params.container,
           [object.name],
           this.$route.params.owner ? this.$route.params.owner : "",
+          test,
         ).then(() => {
           if (DEV) console.log(`Started downloading object ${object.name}`);
         }).catch(() => {

swift_browser_ui_frontend/src/components/BrowserMainNavbar.vue

@@ -11,6 +11,7 @@ Inspired by https://github.com/buefy/buefy/blob/3b3ae60e448ddfd669f20570d40812fd
     </c-button>
     <input
       ref="input"
+      data-testid="select-files-input"
       :value="modelValue"
       type="file"
       multiple

swift_browser_ui_frontend/src/components/CObjectTable.vue

@@ -3,6 +3,7 @@
   because csc-ui wont recognise it otherwise. -->
   <c-data-table
     id="container-table"
+    data-testid="container-table"
     :data.prop="containers"
     :headers.prop="hideTags ?
       headers.filter(header => header.key !== 'tags'): headers"
@@ -276,13 +277,15 @@ export default {
                   component: {
                     tag: "c-button",
                     params: {
+                      testid: "download-container",
                       text: true,
                       size: "small",
                       title: this.$t("message.download.download"),
-                      onClick: () => {
+                      onClick: ({ event }) => {
                         this.beginDownload(
                           item.name,
                           item.owner ? item.owner : "",
+                          event.isTrusted,
                         );
                       },
                       target: "_blank",
@@ -298,6 +301,7 @@ export default {
                   component: {
                     tag: "c-button",
                     params: {
+                      testid: "share-container",
                       text: true,
                       size: "small",
                       title: this.$t("message.share.share"),
@@ -510,11 +514,17 @@ export default {
             this.paginationOptions.itemCount - 1,
         });
     },
-    beginDownload(container, owner) {
+    beginDownload(container, owner, eventTrusted) {
+      //add test param to test direct downloads
+      //by using origin private file system (OPFS)
+      //automated testing creates untrusted events
+      const test = eventTrusted === undefined ? false : !eventTrusted;
+
       this.$store.state.socket.addDownload(
         container,
         [],
         owner,
+        test,
       ).then(() => {
         if (DEV) console.log(`Started downloading all objects from container ${container}`);
       }).catch(() => {

swift_browser_ui_frontend/src/components/CUploadButton.vue

@@ -19,7 +19,7 @@
         <c-menu
           :key="optionsKey"
           :items.prop="tableOptions"
-          options-testid="table-options-selector"
+          data-testid="table-options-selector"
         >
           <span class="menu-active display-options-menu">
             <i class="mdi mdi-tune" />

swift_browser_ui_frontend/src/components/ContainerTable.vue

@@ -2,6 +2,7 @@
   <c-card
     ref="createFolderContainer"
     class="add-folder"
+    data-testid="create-folder-modal"
     @keydown="handleKeyDown"
   >
     <div
@@ -66,6 +67,7 @@
       <c-button
         outlined
         size="large"
+        data-testid="cancel-save-folder"
         @click="toggleCreateFolderModal(false)"
         @keyup.enter="toggleCreateFolderModal(true)"
       >

swift_browser_ui_frontend/src/components/Containers.vue

@@ -32,6 +32,7 @@
           </c-button>
           <c-button
             id="delete-objs-btn"
+            data-testid="confirm-delete-objects"
             @click="deleteObjects()"
             @keyup.enter="deleteObjects()"
           >