15768: added manual form submit in searchbar spec Arvados-DCO-1.1-Signed-off-by:...
authorLisa Knox <lisaknox83@gmail.com>
Wed, 20 Sep 2023 14:56:16 +0000 (10:56 -0400)
committerLisa Knox <lisaknox83@gmail.com>
Wed, 20 Sep 2023 14:56:16 +0000 (10:56 -0400)
cypress/support/commands.js
src/views-components/search-bar/search-bar-view.tsx

index f09d959b8fe9ac6ec35b36f35bde9e7aa36799c2..199b5c13c570932b2ce5d5a2c0bc068da8a0577f 100644 (file)
@@ -28,8 +28,8 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
 
-const controllerURL = Cypress.env('controller_url');
-const systemToken = Cypress.env('system_token');
+const controllerURL = Cypress.env("controller_url");
+const systemToken = Cypress.env("system_token");
 let createdResources = [];
 
 // Clean up on a 'before' hook to allow post-mortem analysis on individual tests.
@@ -38,7 +38,7 @@ beforeEach(function () {
         return;
     }
     cy.log(`Cleaning ${createdResources.length} previously created resource(s)`);
-    createdResources.forEach(function({suffix, uuid}) {
+    createdResources.forEach(function ({ suffix, uuid }) {
         // Don't fail when a resource isn't already there, some objects may have
         // been removed, directly or indirectly, from the test that created them.
         cy.deleteResource(systemToken, suffix, uuid, false);
@@ -47,363 +47,343 @@ beforeEach(function () {
 });
 
 Cypress.Commands.add(
-    "doRequest", (method = 'GET', path = '', data = null, qs = null,
-        token = systemToken, auth = false, followRedirect = true, failOnStatusCode = true) => {
-    return cy.request({
-        method: method,
-        url: `${controllerURL.replace(/\/+$/, '')}/${path.replace(/^\/+/, '')}`,
-        body: data,
-        qs: auth ? qs : Object.assign({ api_token: token }, qs),
-        auth: auth ? { bearer: `${token}` } : undefined,
-        followRedirect: followRedirect,
-        failOnStatusCode: failOnStatusCode
-    });
-});
-
-Cypress.Commands.add(
-    "getUser", (username, first_name = '', last_name = '', is_admin = false, is_active = true) => {
-        // Create user if not already created
-        return cy.doRequest('POST', '/auth/controller/callback', {
-            auth_info: JSON.stringify({
-                email: `${username}@example.local`,
-                username: username,
-                first_name: first_name,
-                last_name: last_name,
-                alternate_emails: []
-            }),
-            return_to: ',https://example.local'
-        }, null, systemToken, true, false) // Don't follow redirects so we can catch the token
-        .its('headers.location').as('location')
-        // Get its token and set the account up as admin and/or active
-        .then(function () {
-            this.userToken = this.location.split("=")[1]
-            assert.isString(this.userToken)
-            return cy.doRequest('GET', '/arvados/v1/users', null, {
-                filters: `[["username", "=", "${username}"]]`
-            })
-            .its('body.items.0').as('aUser')
+    "doRequest",
+    (method = "GET", path = "", data = null, qs = null, token = systemToken, auth = false, followRedirect = true, failOnStatusCode = true) => {
+        return cy.request({
+            method: method,
+            url: `${controllerURL.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`,
+            body: data,
+            qs: auth ? qs : Object.assign({ api_token: token }, qs),
+            auth: auth ? { bearer: `${token}` } : undefined,
+            followRedirect: followRedirect,
+            failOnStatusCode: failOnStatusCode,
+        });
+    }
+);
+
+Cypress.Commands.add("getUser", (username, first_name = "", last_name = "", is_admin = false, is_active = true) => {
+    // Create user if not already created
+    return (
+        cy
+            .doRequest(
+                "POST",
+                "/auth/controller/callback",
+                {
+                    auth_info: JSON.stringify({
+                        email: `${username}@example.local`,
+                        username: username,
+                        first_name: first_name,
+                        last_name: last_name,
+                        alternate_emails: [],
+                    }),
+                    return_to: ",https://example.local",
+                },
+                null,
+                systemToken,
+                true,
+                false
+            ) // Don't follow redirects so we can catch the token
+            .its("headers.location")
+            .as("location")
+            // Get its token and set the account up as admin and/or active
             .then(function () {
-                cy.doRequest('PUT', `/arvados/v1/users/${this.aUser.uuid}`, {
-                    user: {
-                        is_admin: is_admin,
-                        is_active: is_active
-                    }
-                })
-                .its('body').as('theUser')
-                .then(function () {
-                    cy.doRequest('GET', '/arvados/v1/api_clients', null, {
-                        filters: `[["is_trusted", "=", false]]`,
-                        order: `["created_at desc"]`
+                this.userToken = this.location.split("=")[1];
+                assert.isString(this.userToken);
+                return cy
+                    .doRequest("GET", "/arvados/v1/users", null, {
+                        filters: `[["username", "=", "${username}"]]`,
                     })
-                    .its('body.items').as('apiClients')
+                    .its("body.items.0")
+                    .as("aUser")
                     .then(function () {
-                        if (this.apiClients.length > 0) {
-                            cy.doRequest('PUT', `/arvados/v1/api_clients/${this.apiClients[0].uuid}`, {
-                                api_client: {
-                                    is_trusted: true
-                                }
-                            })
-                            .its('body').as('updatedApiClient')
-                            .then(function() {
-                                assert(this.updatedApiClient.is_trusted);
-                            })
-                        }
-                    })
-                    .then(function () {
-                        return { user: this.theUser, token: this.userToken };
-                    })
-                })
+                        cy.doRequest("PUT", `/arvados/v1/users/${this.aUser.uuid}`, {
+                            user: {
+                                is_admin: is_admin,
+                                is_active: is_active,
+                            },
+                        })
+                            .its("body")
+                            .as("theUser")
+                            .then(function () {
+                                cy.doRequest("GET", "/arvados/v1/api_clients", null, {
+                                    filters: `[["is_trusted", "=", false]]`,
+                                    order: `["created_at desc"]`,
+                                })
+                                    .its("body.items")
+                                    .as("apiClients")
+                                    .then(function () {
+                                        if (this.apiClients.length > 0) {
+                                            cy.doRequest("PUT", `/arvados/v1/api_clients/${this.apiClients[0].uuid}`, {
+                                                api_client: {
+                                                    is_trusted: true,
+                                                },
+                                            })
+                                                .its("body")
+                                                .as("updatedApiClient")
+                                                .then(function () {
+                                                    assert(this.updatedApiClient.is_trusted);
+                                                });
+                                        }
+                                    })
+                                    .then(function () {
+                                        return { user: this.theUser, token: this.userToken };
+                                    });
+                            });
+                    });
             })
-        })
-    }
-)
-
-Cypress.Commands.add(
-    "createLink", (token, data) => {
-        return cy.createResource(token, 'links', {
-            link: JSON.stringify(data)
-        })
-    }
-)
-
-Cypress.Commands.add(
-    "createGroup", (token, data) => {
-        return cy.createResource(token, 'groups', {
-            group: JSON.stringify(data),
-            ensure_unique_name: true
-        })
-    }
-)
-
-Cypress.Commands.add(
-    "trashGroup", (token, uuid) => {
-        return cy.deleteResource(token, 'groups', uuid);
-    }
-)
+    );
+});
 
+Cypress.Commands.add("createLink", (token, data) => {
+    return cy.createResource(token, "links", {
+        link: JSON.stringify(data),
+    });
+});
 
-Cypress.Commands.add(
-    "createWorkflow", (token, data) => {
-        return cy.createResource(token, 'workflows', {
-            workflow: JSON.stringify(data),
-            ensure_unique_name: true
-        })
-    }
-)
+Cypress.Commands.add("createGroup", (token, data) => {
+    return cy.createResource(token, "groups", {
+        group: JSON.stringify(data),
+        ensure_unique_name: true,
+    });
+});
 
-Cypress.Commands.add(
-    "getCollection", (token, uuid) => {
-        return cy.getResource(token, 'collections', uuid)
-    }
-)
+Cypress.Commands.add("trashGroup", (token, uuid) => {
+    return cy.deleteResource(token, "groups", uuid);
+});
 
-Cypress.Commands.add(
-    "createCollection", (token, data) => {
-        return cy.createResource(token, 'collections', {
-            collection: JSON.stringify(data),
-            ensure_unique_name: true
-        })
-    }
-)
+Cypress.Commands.add("createWorkflow", (token, data) => {
+    return cy.createResource(token, "workflows", {
+        workflow: JSON.stringify(data),
+        ensure_unique_name: true,
+    });
+});
 
-Cypress.Commands.add(
-    "updateCollection", (token, uuid, data) => {
-        return cy.updateResource(token, 'collections', uuid, {
-            collection: JSON.stringify(data)
-        })
-    }
-)
+Cypress.Commands.add("getCollection", (token, uuid) => {
+    return cy.getResource(token, "collections", uuid);
+});
 
-Cypress.Commands.add(
-    "getContainer", (token, uuid) => {
-        return cy.getResource(token, 'containers', uuid)
-    }
-)
+Cypress.Commands.add("createCollection", (token, data) => {
+    return cy.createResource(token, "collections", {
+        collection: JSON.stringify(data),
+        ensure_unique_name: true,
+    });
+});
 
-Cypress.Commands.add(
-    "updateContainer", (token, uuid, data) => {
-        return cy.updateResource(token, 'containers', uuid, {
-            container: JSON.stringify(data)
-        })
-    }
-)
+Cypress.Commands.add("updateCollection", (token, uuid, data) => {
+    return cy.updateResource(token, "collections", uuid, {
+        collection: JSON.stringify(data),
+    });
+});
 
-Cypress.Commands.add(
-    'createContainerRequest', (token, data) => {
-        return cy.createResource(token, 'container_requests', {
-            container_request: JSON.stringify(data),
-            ensure_unique_name: true
-        })
-    }
-)
+Cypress.Commands.add("getContainer", (token, uuid) => {
+    return cy.getResource(token, "containers", uuid);
+});
 
-Cypress.Commands.add(
-    "updateContainerRequest", (token, uuid, data) => {
-        return cy.updateResource(token, 'container_requests', uuid, {
-            container_request: JSON.stringify(data)
-        })
-    }
-)
+Cypress.Commands.add("updateContainer", (token, uuid, data) => {
+    return cy.updateResource(token, "containers", uuid, {
+        container: JSON.stringify(data),
+    });
+});
 
-Cypress.Commands.add(
-    "createLog", (token, data) => {
-        return cy.createResource(token, 'logs', {
-            log: JSON.stringify(data)
-        })
-    }
-)
+Cypress.Commands.add("createContainerRequest", (token, data) => {
+    return cy.createResource(token, "container_requests", {
+        container_request: JSON.stringify(data),
+        ensure_unique_name: true,
+    });
+});
 
-Cypress.Commands.add(
-    "logsForContainer", (token, uuid, logType, logTextArray = []) => {
-        let logs = [];
-        for (const logText of logTextArray) {
-            logs.push(cy.createLog(token, {
-                object_uuid: uuid,
-                event_type: logType,
-                properties: {
-                    text: logText
-                }
-            }).as('lastLogRecord'))
-        }
-        cy.getAll('@lastLogRecord').then(function () {
-            return logs;
-        })
-    }
-)
+Cypress.Commands.add("updateContainerRequest", (token, uuid, data) => {
+    return cy.updateResource(token, "container_requests", uuid, {
+        container_request: JSON.stringify(data),
+    });
+});
 
-Cypress.Commands.add(
-    "createVirtualMachine", (token, data) => {
-        return cy.createResource(token, 'virtual_machines', {
-            virtual_machine: JSON.stringify(data),
-            ensure_unique_name: true
-        })
-    }
-)
+Cypress.Commands.add("createLog", (token, data) => {
+    return cy.createResource(token, "logs", {
+        log: JSON.stringify(data),
+    });
+});
 
-Cypress.Commands.add(
-    "getResource", (token, suffix, uuid) => {
-        return cy.doRequest('GET', `/arvados/v1/${suffix}/${uuid}`, null, {}, token)
-            .its('body')
-            .then(function (resource) {
-                return resource;
-            })
+Cypress.Commands.add("logsForContainer", (token, uuid, logType, logTextArray = []) => {
+    let logs = [];
+    for (const logText of logTextArray) {
+        logs.push(
+            cy
+                .createLog(token, {
+                    object_uuid: uuid,
+                    event_type: logType,
+                    properties: {
+                        text: logText,
+                    },
+                })
+                .as("lastLogRecord")
+        );
     }
-)
+    cy.getAll("@lastLogRecord").then(function () {
+        return logs;
+    });
+});
 
-Cypress.Commands.add(
-    "createResource", (token, suffix, data) => {
-        return cy.doRequest('POST', '/arvados/v1/' + suffix, data, null, token, true)
-            .its('body')
-            .then(function (resource) {
-                createdResources.push({suffix, uuid: resource.uuid});
-                return resource;
-            })
-    }
-)
+Cypress.Commands.add("createVirtualMachine", (token, data) => {
+    return cy.createResource(token, "virtual_machines", {
+        virtual_machine: JSON.stringify(data),
+        ensure_unique_name: true,
+    });
+});
 
-Cypress.Commands.add(
-    "deleteResource", (token, suffix, uuid, failOnStatusCode = true) => {
-        return cy.doRequest('DELETE', '/arvados/v1/' + suffix + '/' + uuid, null, null, token, false, true, failOnStatusCode)
-            .its('body')
-            .then(function (resource) {
-                return resource;
-            })
-    }
-)
+Cypress.Commands.add("getResource", (token, suffix, uuid) => {
+    return cy
+        .doRequest("GET", `/arvados/v1/${suffix}/${uuid}`, null, {}, token)
+        .its("body")
+        .then(function (resource) {
+            return resource;
+        });
+});
 
-Cypress.Commands.add(
-    "updateResource", (token, suffix, uuid, data) => {
-        return cy.doRequest('PATCH', '/arvados/v1/' + suffix + '/' + uuid, data, null, token, true)
-            .its('body')
-            .then(function (resource) {
-                return resource;
-            })
-    }
-)
+Cypress.Commands.add("createResource", (token, suffix, data) => {
+    return cy
+        .doRequest("POST", "/arvados/v1/" + suffix, data, null, token, true)
+        .its("body")
+        .then(function (resource) {
+            createdResources.push({ suffix, uuid: resource.uuid });
+            return resource;
+        });
+});
 
-Cypress.Commands.add(
-    "loginAs", (user) => {
-        cy.clearCookies()
-        cy.clearLocalStorage()
-        cy.visit(`/token/?api_token=${user.token}`);
-        cy.url({timeout: 10000}).should('contain', '/projects/');
-        cy.get('div#root').should('contain', 'Arvados Workbench (zzzzz)');
-        cy.get('div#root').should('not.contain', 'Your account is inactive');
-    }
-)
+Cypress.Commands.add("deleteResource", (token, suffix, uuid, failOnStatusCode = true) => {
+    return cy
+        .doRequest("DELETE", "/arvados/v1/" + suffix + "/" + uuid, null, null, token, false, true, failOnStatusCode)
+        .its("body")
+        .then(function (resource) {
+            return resource;
+        });
+});
 
-Cypress.Commands.add(
-    "testEditProjectOrCollection", (container, oldName, newName, newDescription, isProject = true) => {
-        cy.get(container).contains(oldName).rightclick();
-        cy.get('[data-cy=context-menu]').contains(isProject ? 'Edit project' : 'Edit collection').click();
-        cy.get('[data-cy=form-dialog]').within(() => {
-            cy.get('input[name=name]').clear().type(newName);
-            cy.get(isProject ? 'div[contenteditable=true]' : 'input[name=description]').clear().type(newDescription);
-            cy.get('[data-cy=form-submit-btn]').click();
+Cypress.Commands.add("updateResource", (token, suffix, uuid, data) => {
+    return cy
+        .doRequest("PATCH", "/arvados/v1/" + suffix + "/" + uuid, data, null, token, true)
+        .its("body")
+        .then(function (resource) {
+            return resource;
         });
+});
 
-        cy.get(container).contains(newName).rightclick();
-        cy.get('[data-cy=context-menu]').contains(isProject ? 'Edit project' : 'Edit collection').click();
-        cy.get('[data-cy=form-dialog]').within(() => {
-            cy.get('input[name=name]').should('have.value', newName);
+Cypress.Commands.add("loginAs", user => {
+    cy.clearCookies();
+    cy.clearLocalStorage();
+    cy.visit(`/token/?api_token=${user.token}`);
+    cy.url({ timeout: 10000 }).should("contain", "/projects/");
+    cy.get("div#root").should("contain", "Arvados Workbench (zzzzz)");
+    cy.get("div#root").should("not.contain", "Your account is inactive");
+});
 
-            if (isProject) {
-                cy.get('span[data-text=true]').contains(newDescription);
-            } else {
-                cy.get('input[name=description]').should('have.value', newDescription);
-            }
+Cypress.Commands.add("testEditProjectOrCollection", (container, oldName, newName, newDescription, isProject = true) => {
+    cy.get(container).contains(oldName).rightclick();
+    cy.get("[data-cy=context-menu]")
+        .contains(isProject ? "Edit project" : "Edit collection")
+        .click();
+    cy.get("[data-cy=form-dialog]").within(() => {
+        cy.get("input[name=name]").clear().type(newName);
+        cy.get(isProject ? "div[contenteditable=true]" : "input[name=description]")
+            .clear()
+            .type(newDescription);
+        cy.get("[data-cy=form-submit-btn]").click();
+    });
 
-            cy.get('[data-cy=form-cancel-btn]').click();
-        });
-    }
-)
+    cy.get(container).contains(newName).rightclick();
+    cy.get("[data-cy=context-menu]")
+        .contains(isProject ? "Edit project" : "Edit collection")
+        .click();
+    cy.get("[data-cy=form-dialog]").within(() => {
+        cy.get("input[name=name]").should("have.value", newName);
+
+        if (isProject) {
+            cy.get("span[data-text=true]").contains(newDescription);
+        } else {
+            cy.get("input[name=description]").should("have.value", newDescription);
+        }
 
-Cypress.Commands.add(
-    "doSearch", (searchTerm) => {
-        cy.get('[data-cy=searchbar-input-field]').type(`{selectall}${searchTerm}{enter}`);
-    }
-)
+        cy.get("[data-cy=form-cancel-btn]").click();
+    });
+});
 
-Cypress.Commands.add(
-    "goToPath", (path) => {
-        return cy.window().its('appHistory').invoke('push', path);
-    }
-)
+Cypress.Commands.add("doSearch", searchTerm => {
+    cy.get("[data-cy=searchbar-input-field]").type(`{selectall}${searchTerm}{enter}`);
+    cy.get("[data-cy=searchbar-parent-form]").submit();
+});
 
-Cypress.Commands.add('getAll', (...elements) => {
-    const promise = cy.wrap([], { log: false })
+Cypress.Commands.add("goToPath", path => {
+    return cy.window().its("appHistory").invoke("push", path);
+});
+
+Cypress.Commands.add("getAll", (...elements) => {
+    const promise = cy.wrap([], { log: false });
 
     for (let element of elements) {
-        promise.then(arr => cy.get(element).then(got => cy.wrap([...arr, got])))
+        promise.then(arr => cy.get(element).then(got => cy.wrap([...arr, got])));
     }
 
-    return promise
-})
+    return promise;
+});
 
-Cypress.Commands.add('shareWith', (srcUserToken, targetUserUUID, itemUUID, permission = 'can_write') => {
+Cypress.Commands.add("shareWith", (srcUserToken, targetUserUUID, itemUUID, permission = "can_write") => {
     cy.createLink(srcUserToken, {
         name: permission,
-        link_class: 'permission',
+        link_class: "permission",
         head_uuid: itemUUID,
-        tail_uuid: targetUserUUID
+        tail_uuid: targetUserUUID,
     });
-})
+});
 
-Cypress.Commands.add('addToFavorites', (userToken, userUUID, itemUUID) => {
+Cypress.Commands.add("addToFavorites", (userToken, userUUID, itemUUID) => {
     cy.createLink(userToken, {
         head_uuid: itemUUID,
-        link_class: 'star',
-        name: '',
+        link_class: "star",
+        name: "",
         owner_uuid: userUUID,
         tail_uuid: userUUID,
     });
-})
+});
 
-Cypress.Commands.add('createProject', ({
-    owningUser,
-    targetUser,
-    projectName,
-    canWrite,
-    addToFavorites
-}) => {
-    const writePermission = canWrite ? 'can_write' : 'can_read';
+Cypress.Commands.add("createProject", ({ owningUser, targetUser, projectName, canWrite, addToFavorites }) => {
+    const writePermission = canWrite ? "can_write" : "can_read";
 
     cy.createGroup(owningUser.token, {
         name: `${projectName} ${Math.floor(Math.random() * 999999)}`,
-        group_class: 'project',
-    }).as(`${projectName}`).then((project) => {
-        if (targetUser && targetUser !== owningUser) {
-            cy.shareWith(owningUser.token, targetUser.user.uuid, project.uuid, writePermission);
-        }
-        if (addToFavorites) {
-            const user = targetUser ? targetUser : owningUser;
-            cy.addToFavorites(user.token, user.user.uuid, project.uuid);
-        }
-    });
+        group_class: "project",
+    })
+        .as(`${projectName}`)
+        .then(project => {
+            if (targetUser && targetUser !== owningUser) {
+                cy.shareWith(owningUser.token, targetUser.user.uuid, project.uuid, writePermission);
+            }
+            if (addToFavorites) {
+                const user = targetUser ? targetUser : owningUser;
+                cy.addToFavorites(user.token, user.user.uuid, project.uuid);
+            }
+        });
 });
 
 Cypress.Commands.add(
-    'upload',
+    "upload",
     {
-        prevSubject: 'element',
+        prevSubject: "element",
     },
     (subject, file, fileName, binaryMode = true) => {
         cy.window().then(window => {
-            const blob = binaryMode
-                ? b64toBlob(file, '', 512)
-                : new Blob([file], {type: 'text/plain'});
+            const blob = binaryMode ? b64toBlob(file, "", 512) : new Blob([file], { type: "text/plain" });
             const testFile = new window.File([blob], fileName);
 
-            cy.wrap(subject).trigger('drop', {
+            cy.wrap(subject).trigger("drop", {
                 dataTransfer: { files: [testFile] },
             });
-        })
+        });
     }
-)
+);
 
-function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
-    const byteCharacters = atob(b64Data)
-    const byteArrays = []
+function b64toBlob(b64Data, contentType = "", sliceSize = 512) {
+    const byteCharacters = atob(b64Data);
+    const byteArrays = [];
 
     for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
         const slice = byteCharacters.slice(offset, offset + sliceSize);
@@ -419,78 +399,85 @@ function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
     }
 
     const blob = new Blob(byteArrays, { type: contentType });
-    return blob
+    return blob;
 }
 
 // From https://github.com/cypress-io/cypress/issues/7306#issuecomment-1076451070=
 // This command requires the async package (https://www.npmjs.com/package/async)
-Cypress.Commands.add('waitForDom', () => {
-    cy.window().then({
-        // Don't timeout before waitForDom finishes
-        timeout: 10000
-    }, win => {
-      let timeElapsed = 0;
-
-      cy.log("Waiting for DOM mutations to complete");
-
-      return new Cypress.Promise((resolve) => {
-        // set the required variables
-        let async = require("async");
-        let observerConfig = { attributes: true, childList: true, subtree: true };
-        let items = Array.apply(null, { length: 50 }).map(Number.call, Number);
-        win.mutationCount = 0;
-        win.previousMutationCount = null;
-
-        // create an observer instance
-        let observer = new win.MutationObserver((mutations) => {
-          mutations.forEach((mutation) => {
-            // Only record "attributes" type mutations that are not a "class" mutation.
-            // If the mutation is not an "attributes" type, then we always record it.
-            if (mutation.type === 'attributes' && mutation.attributeName !== 'class') {
-              win.mutationCount += 1;
-            } else if (mutation.type !== 'attributes') {
-              win.mutationCount += 1;
-            }
-          });
-
-          // initialize the previousMutationCount
-          if (win.previousMutationCount == null) win.previousMutationCount = 0;
-        });
-
-        // watch the document body for the specified mutations
-        observer.observe(win.document.body, observerConfig);
-
-        // check the DOM for mutations up to 50 times for a maximum time of 5 seconds
-        async.eachSeries(items, function iteratee(item, callback) {
-          // keep track of the elapsed time so we can log it at the end of the command
-          timeElapsed = timeElapsed + 100;
-
-          // make each iteration of the loop 100ms apart
-          setTimeout(() => {
-            if (win.mutationCount === win.previousMutationCount) {
-              // pass an argument to the async callback to exit the loop
-              return callback('Resolved - DOM changes complete.');
-            } else if (win.previousMutationCount != null) {
-              // only set the previous count if the observer has checked the DOM at least once
-              win.previousMutationCount = win.mutationCount;
-              return callback();
-            } else if (win.mutationCount === 0 && win.previousMutationCount == null && item === 4) {
-              // this is an early exit in case nothing is changing in the DOM. That way we only
-              // wait 500ms instead of the full 5 seconds when no DOM changes are occurring.
-              return callback('Resolved - Exiting early since no DOM changes were detected.');
-            } else {
-              // proceed to the next iteration
-              return callback();
-            }
-          }, 100);
-        }, function done() {
-          // Log the total wait time so users can see it
-          cy.log(`DOM mutations ${timeElapsed >= 5000 ? "did not complete" : "completed"} in ${timeElapsed} ms`);
-
-          // disconnect the observer and resolve the promise
-          observer.disconnect();
-          resolve();
-        });
-      });
-    });
-  });
+Cypress.Commands.add("waitForDom", () => {
+    cy.window().then(
+        {
+            // Don't timeout before waitForDom finishes
+            timeout: 10000,
+        },
+        win => {
+            let timeElapsed = 0;
+
+            cy.log("Waiting for DOM mutations to complete");
+
+            return new Cypress.Promise(resolve => {
+                // set the required variables
+                let async = require("async");
+                let observerConfig = { attributes: true, childList: true, subtree: true };
+                let items = Array.apply(null, { length: 50 }).map(Number.call, Number);
+                win.mutationCount = 0;
+                win.previousMutationCount = null;
+
+                // create an observer instance
+                let observer = new win.MutationObserver(mutations => {
+                    mutations.forEach(mutation => {
+                        // Only record "attributes" type mutations that are not a "class" mutation.
+                        // If the mutation is not an "attributes" type, then we always record it.
+                        if (mutation.type === "attributes" && mutation.attributeName !== "class") {
+                            win.mutationCount += 1;
+                        } else if (mutation.type !== "attributes") {
+                            win.mutationCount += 1;
+                        }
+                    });
+
+                    // initialize the previousMutationCount
+                    if (win.previousMutationCount == null) win.previousMutationCount = 0;
+                });
+
+                // watch the document body for the specified mutations
+                observer.observe(win.document.body, observerConfig);
+
+                // check the DOM for mutations up to 50 times for a maximum time of 5 seconds
+                async.eachSeries(
+                    items,
+                    function iteratee(item, callback) {
+                        // keep track of the elapsed time so we can log it at the end of the command
+                        timeElapsed = timeElapsed + 100;
+
+                        // make each iteration of the loop 100ms apart
+                        setTimeout(() => {
+                            if (win.mutationCount === win.previousMutationCount) {
+                                // pass an argument to the async callback to exit the loop
+                                return callback("Resolved - DOM changes complete.");
+                            } else if (win.previousMutationCount != null) {
+                                // only set the previous count if the observer has checked the DOM at least once
+                                win.previousMutationCount = win.mutationCount;
+                                return callback();
+                            } else if (win.mutationCount === 0 && win.previousMutationCount == null && item === 4) {
+                                // this is an early exit in case nothing is changing in the DOM. That way we only
+                                // wait 500ms instead of the full 5 seconds when no DOM changes are occurring.
+                                return callback("Resolved - Exiting early since no DOM changes were detected.");
+                            } else {
+                                // proceed to the next iteration
+                                return callback();
+                            }
+                        }, 100);
+                    },
+                    function done() {
+                        // Log the total wait time so users can see it
+                        cy.log(`DOM mutations ${timeElapsed >= 5000 ? "did not complete" : "completed"} in ${timeElapsed} ms`);
+
+                        // disconnect the observer and resolve the promise
+                        observer.disconnect();
+                        resolve();
+                    }
+                );
+            });
+        }
+    );
+});
index 284083477f00e2f4c13f1d13cee483367bbbf630..eba281c9f0854c275454f61ee91142d7d59ab110 100644 (file)
@@ -2,73 +2,61 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React from 'react';
-import { compose } from 'redux';
-import {
-    IconButton,
-    Paper,
-    StyleRulesCallback,
-    withStyles,
-    WithStyles,
-    Tooltip,
-    InputAdornment, Input,
-} from '@material-ui/core';
-import SearchIcon from '@material-ui/icons/Search';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import { ArvadosTheme } from 'common/custom-theme';
-import { SearchView } from 'store/search-bar/search-bar-reducer';
-import {
-    SearchBarBasicView,
-    SearchBarBasicViewDataProps,
-    SearchBarBasicViewActionProps
-} from 'views-components/search-bar/search-bar-basic-view';
+import React from "react";
+import { compose } from "redux";
+import { IconButton, Paper, StyleRulesCallback, withStyles, WithStyles, Tooltip, InputAdornment, Input } from "@material-ui/core";
+import SearchIcon from "@material-ui/icons/Search";
+import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
+import { ArvadosTheme } from "common/custom-theme";
+import { SearchView } from "store/search-bar/search-bar-reducer";
+import { SearchBarBasicView, SearchBarBasicViewDataProps, SearchBarBasicViewActionProps } from "views-components/search-bar/search-bar-basic-view";
 import {
     SearchBarAutocompleteView,
     SearchBarAutocompleteViewDataProps,
-    SearchBarAutocompleteViewActionProps
-} from 'views-components/search-bar/search-bar-autocomplete-view';
+    SearchBarAutocompleteViewActionProps,
+} from "views-components/search-bar/search-bar-autocomplete-view";
 import {
     SearchBarAdvancedView,
     SearchBarAdvancedViewDataProps,
-    SearchBarAdvancedViewActionProps
-} from 'views-components/search-bar/search-bar-advanced-view';
+    SearchBarAdvancedViewActionProps,
+} from "views-components/search-bar/search-bar-advanced-view";
 import { KEY_CODE_DOWN, KEY_CODE_ESC, KEY_CODE_UP, KEY_ENTER } from "common/codes";
-import { debounce } from 'debounce';
-import { Vocabulary } from 'models/vocabulary';
-import { connectVocabulary } from '../resource-properties-form/property-field-common';
+import { debounce } from "debounce";
+import { Vocabulary } from "models/vocabulary";
+import { connectVocabulary } from "../resource-properties-form/property-field-common";
 
-type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'view';
+type CssRules = "container" | "containerSearchViewOpened" | "input" | "view";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
     return {
         container: {
-            position: 'relative',
-            width: '100%',
+            position: "relative",
+            width: "100%",
             borderRadius: theme.spacing.unit / 2,
             zIndex: theme.zIndex.modal,
         },
         containerSearchViewOpened: {
-            position: 'relative',
-            width: '100%',
+            position: "relative",
+            width: "100%",
             borderRadius: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px 0 0`,
             zIndex: theme.zIndex.modal,
         },
         input: {
-            border: 'none',
-            padding: `0`
+            border: "none",
+            padding: `0`,
         },
         view: {
-            position: 'absolute',
-            width: '100%',
-            zIndex: 1
-        }
+            position: "absolute",
+            width: "100%",
+            zIndex: 1,
+        },
     };
 };
 
-export type SearchBarDataProps = SearchBarViewDataProps
-    & SearchBarAutocompleteViewDataProps
-    & SearchBarAdvancedViewDataProps
-    SearchBarBasicViewDataProps;
+export type SearchBarDataProps = SearchBarViewDataProps &
+    SearchBarAutocompleteViewDataProps &
+    SearchBarAdvancedViewDataProps &
+    SearchBarBasicViewDataProps;
 
 interface SearchBarViewDataProps {
     searchValue: string;
@@ -78,10 +66,10 @@ interface SearchBarViewDataProps {
     vocabulary?: Vocabulary;
 }
 
-export type SearchBarActionProps = SearchBarViewActionProps
-    & SearchBarAutocompleteViewActionProps
-    & SearchBarAdvancedViewActionProps
-    SearchBarBasicViewActionProps;
+export type SearchBarActionProps = SearchBarViewActionProps &
+    SearchBarAutocompleteViewActionProps &
+    SearchBarAdvancedViewActionProps &
+    SearchBarBasicViewActionProps;
 
 interface SearchBarViewActionProps {
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
@@ -144,9 +132,11 @@ const handleDropdownClick = (e: React.MouseEvent, props: SearchBarViewProps) =>
     }
 };
 
-export const SearchBarView = compose(connectVocabulary, withStyles(styles))(
+export const SearchBarView = compose(
+    connectVocabulary,
+    withStyles(styles)
+)(
     class extends React.Component<SearchBarViewProps> {
-
         debouncedSearch = debounce(() => {
             this.props.onSearch(this.props.searchValue);
         }, 1000);
@@ -154,12 +144,12 @@ export const SearchBarView = compose(connectVocabulary, withStyles(styles))(
         handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
             this.debouncedSearch();
             this.props.onChange(event);
-        }
+        };
 
         handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
             this.debouncedSearch.clear();
             this.props.onSubmit(event);
-        }
+        };
 
         componentWillUnmount() {
             this.debouncedSearch.clear();
@@ -170,14 +160,14 @@ export const SearchBarView = compose(connectVocabulary, withStyles(styles))(
             const { classes, isPopoverOpen } = this.props;
             return (
                 <>
+                    {isPopoverOpen && <Backdrop onClick={props.closeView} />}
 
-                    {isPopoverOpen &&
-                        <Backdrop onClick={props.closeView} />}
-
-                    <Paper className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container} >
-                        <form onSubmit={this.handleSubmit}>
+                    <Paper className={isPopoverOpen ? classes.containerSearchViewOpened : classes.container}>
+                        <form
+                            data-cy="searchbar-parent-form"
+                            onSubmit={this.handleSubmit}>
                             <Input
-                                data-cy='searchbar-input-field'
+                                data-cy="searchbar-input-field"
                                 className={classes.input}
                                 onChange={this.handleChange}
                                 placeholder="Search"
@@ -188,7 +178,7 @@ export const SearchBarView = compose(connectVocabulary, withStyles(styles))(
                                 onKeyDown={e => handleKeyDown(e, props)}
                                 startAdornment={
                                     <InputAdornment position="start">
-                                        <Tooltip title='Search'>
+                                        <Tooltip title="Search">
                                             <IconButton type="submit">
                                                 <SearchIcon />
                                             </IconButton>
@@ -197,57 +187,69 @@ export const SearchBarView = compose(connectVocabulary, withStyles(styles))(
                                 }
                                 endAdornment={
                                     <InputAdornment position="end">
-                                        <Tooltip title='Advanced search'>
+                                        <Tooltip title="Advanced search">
                                             <IconButton onClick={e => handleDropdownClick(e, props)}>
                                                 <ArrowDropDownIcon />
                                             </IconButton>
                                         </Tooltip>
                                     </InputAdornment>
-                                } />
+                                }
+                            />
                         </form>
-                        <div className={classes.view}>
-                            {isPopoverOpen && getView({ ...props })}
-                        </div>
-                    </Paper >
+                        <div className={classes.view}>{isPopoverOpen && getView({ ...props })}</div>
+                    </Paper>
                 </>
             );
         }
-    });
+    }
+);
 
 const getView = (props: SearchBarViewProps) => {
     switch (props.currentView) {
         case SearchView.AUTOCOMPLETE:
-            return <SearchBarAutocompleteView
-                navigateTo={props.navigateTo}
-                searchResults={props.searchResults}
-                searchValue={props.searchValue}
-                selectedItem={props.selectedItem} />;
+            return (
+                <SearchBarAutocompleteView
+                    navigateTo={props.navigateTo}
+                    searchResults={props.searchResults}
+                    searchValue={props.searchValue}
+                    selectedItem={props.selectedItem}
+                />
+            );
         case SearchView.ADVANCED:
-            return <SearchBarAdvancedView
-                closeAdvanceView={props.closeAdvanceView}
-                tags={props.tags}
-                saveQuery={props.saveQuery} />;
+            return (
+                <SearchBarAdvancedView
+                    closeAdvanceView={props.closeAdvanceView}
+                    tags={props.tags}
+                    saveQuery={props.saveQuery}
+                />
+            );
         default:
-            return <SearchBarBasicView
-                onSetView={props.onSetView}
-                onSearch={props.onSearch}
-                loadRecentQueries={props.loadRecentQueries}
-                savedQueries={props.savedQueries}
-                deleteSavedQuery={props.deleteSavedQuery}
-                editSavedQuery={props.editSavedQuery}
-                selectedItem={props.selectedItem} />;
+            return (
+                <SearchBarBasicView
+                    onSetView={props.onSetView}
+                    onSearch={props.onSearch}
+                    loadRecentQueries={props.loadRecentQueries}
+                    savedQueries={props.savedQueries}
+                    deleteSavedQuery={props.deleteSavedQuery}
+                    editSavedQuery={props.editSavedQuery}
+                    selectedItem={props.selectedItem}
+                />
+            );
     }
 };
 
-const Backdrop = withStyles<'backdrop'>(theme => ({
+const Backdrop = withStyles<"backdrop">(theme => ({
     backdrop: {
-        position: 'fixed',
+        position: "fixed",
         top: 0,
         right: 0,
         bottom: 0,
         left: 0,
-        zIndex: theme.zIndex.modal
-    }
-}))(
-    ({ classes, ...props }: WithStyles<'backdrop'> & React.HTMLProps<HTMLDivElement>) =>
-        <div className={classes.backdrop} {...props} />);
+        zIndex: theme.zIndex.modal,
+    },
+}))(({ classes, ...props }: WithStyles<"backdrop"> & React.HTMLProps<HTMLDivElement>) => (
+    <div
+        className={classes.backdrop}
+        {...props}
+    />
+));