[arvados-workbench2] updated: 2.6.0-109-g26d62700
git repository hosting
git at public.arvados.org
Wed Sep 20 14:56:20 UTC 2023
Summary of changes:
cypress/support/commands.js | 725 ++++++++++-----------
.../search-bar/search-bar-view.tsx | 178 ++---
2 files changed, 446 insertions(+), 457 deletions(-)
via 26d627007be2bd8fc68844b43651b1897a56e391 (commit)
from 76d90fca59fbc3cd21ea1af01922eeaf63f2e79a (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 26d627007be2bd8fc68844b43651b1897a56e391
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Wed Sep 20 10:56:16 2023 -0400
15768: added manual form submit in searchbar spec Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index f09d959b..199b5c13 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -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();
+ }
+ );
+ });
+ }
+ );
+});
diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index 28408347..eba281c9 100644
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -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}
+ />
+));
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list