services/workbench2/cypress/e2e/details-card.cy.js

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 describe('User Details Card tests', function () {
   6     let activeUser;
   7     let adminUser;
   8
   9     before(function () {
  10         // Only set up common users once. These aren't set up as aliases because
  11         // aliases are cleaned up after every test. Also it doesn't make sense
  12         // to set the same users on beforeEach() over and over again, so we
  13         // separate a little from Cypress' 'Best Practices' here.
  14         cy.getUser('admin', 'Admin', 'User', true, true)
  15             .as('adminUser')
  16             .then(function () {
  17                 adminUser = this.adminUser;
  18             });
  19         cy.getUser('activeUser1', 'Active', 'User', false, true)
  20             .as('activeUser')
  21             .then(function () {
  22                 activeUser = this.activeUser;
  23             });
  24         cy.on('uncaught:exception', (err, runnable) => {
  25             console.error(err);
  26         });
  27     });
  28
  29     beforeEach(function () {
  30         cy.clearCookies();
  31         cy.clearLocalStorage();
  32     });
  33
  34     it('should display the user details card', () => {
  35         cy.loginAs(adminUser);
  36
  37         cy.get('[data-cy=user-details-card]').should('be.visible');
  38         cy.get('[data-cy=user-details-card]').contains(adminUser.user.full_name).should('be.visible');
  39     });
  40
  41     it('shows the appropriate buttons in the multiselect toolbar', () => {
  42         const msButtonTooltips = ['View details', 'User account', 'API Details'];
  43
  44         cy.loginAs(activeUser);
  45
  46         cy.get('[data-cy=multiselect-button]').should('have.length', msButtonTooltips.length);
  47
  48         for (let i = 0; i < msButtonTooltips.length; i++) {
  49             cy.get('[data-cy=multiselect-button]').eq(i).trigger('mouseover');
  50             cy.get('body').contains(msButtonTooltips[i]).should('exist');
  51             cy.get('[data-cy=multiselect-button]').eq(i).trigger('mouseout');
  52         }
  53     });
  54 });
  55
  56 describe('Project Details Card tests', function () {
  57     let activeUser;
  58     let adminUser;
  59
  60     before(function () {
  61         // Only set up common users once. These aren't set up as aliases because
  62         // aliases are cleaned up after every test. Also it doesn't make sense
  63         // to set the same users on beforeEach() over and over again, so we
  64         // separate a little from Cypress' 'Best Practices' here.
  65         cy.getUser('admin', 'Admin', 'User', true, true)
  66             .as('adminUser')
  67             .then(function () {
  68                 adminUser = this.adminUser;
  69             });
  70         cy.getUser('activeUser1', 'Active', 'User', false, true)
  71             .as('activeUser')
  72             .then(function () {
  73                 activeUser = this.activeUser;
  74             });
  75         cy.on('uncaught:exception', (err, runnable) => {
  76             console.error(err);
  77         });
  78     });
  79
  80     beforeEach(function () {
  81         cy.clearCookies();
  82         cy.clearLocalStorage();
  83     });
  84
  85     it('should display the project details card', () => {
  86         const projName = `Test project (${Math.floor(999999 * Math.random())})`;
  87         cy.loginAs(adminUser);
  88
  89         // Create project
  90         cy.get('[data-cy=side-panel-button]').click();
  91         cy.get('[data-cy=side-panel-new-project]').click();
  92         cy.get('[data-cy=form-dialog]')
  93             .should('contain', 'New Project')
  94             .within(() => {
  95                 cy.get('[data-cy=name-field]').within(() => {
  96                     cy.get('input').type(projName);
  97                 });
  98             });
  99         cy.get('[data-cy=form-submit-btn]').click();
 100         cy.waitForDom().get('[data-cy=form-dialog]').should('not.exist');
 101
 102         cy.get('[data-cy=project-details-card]').should('be.visible');
 103         cy.get('[data-cy=project-details-card]').contains(projName).should('be.visible');
 104     });
 105
 106     it('shows the appropriate buttons in the multiselect toolbar', () => {
 107         const msButtonTooltips = [
 108             'View details',
 109             'Open in new tab',
 110             'Copy UUID',
 111             'Share',
 112             'Edit project',
 113             'Move to trash',
 114             'New project',
 115             'Move to',
 116             'Freeze project',
 117             'Add to favorites',
 118             'Copy link to clipboard',
 119             'Open with 3rd party client',
 120             'API Details',
 121         ];
 122
 123         const projName = `Test project (${Math.floor(999999 * Math.random())})`;
 124         cy.loginAs(activeUser);
 125
 126         // Create project
 127         cy.get('[data-cy=side-panel-button]').click();
 128         cy.get('[data-cy=side-panel-new-project]').click();
 129         cy.get('[data-cy=form-dialog]')
 130             .should('contain', 'New Project')
 131             .within(() => {
 132                 cy.get('[data-cy=name-field]').within(() => {
 133                     cy.get('input').type(projName);
 134                 });
 135             });
 136         cy.get('[data-cy=form-submit-btn]').should('exist').click();
 137         cy.waitForDom().get('[data-cy=form-dialog]').should('not.exist');
 138
 139         for (let i = 0; i < msButtonTooltips.length; i++) {
 140             cy.get('[data-cy=multiselect-button]').eq(i).should('exist');
 141             cy.get('[data-cy=multiselect-button]').eq(i).trigger('mouseover');
 142             cy.waitForDom();
 143             cy.get('body').within(() => {
 144                 cy.contains(msButtonTooltips[i]).should('exist');
 145             });
 146             cy.get('[data-cy=multiselect-button]').eq(i).trigger('mouseout');
 147         }
 148     });
 149
 150     it('should toggle description display', () => {
 151         const projName = `Test project (${Math.floor(999999 * Math.random())})`;
 152
 153         //a single line description shouldn't change the height of the card
 154         const projDescription = 'Science! True daughter of Old Time thou art! Who alterest all things with thy peering eyes.';
 155         //a multi-line description should change the height of the card
 156         const multiLineProjDescription = '{enter}Why preyest thou thus upon the poet’s heart,{enter}Vulture, whose wings are dull realities?';
 157
 158         cy.loginAs(adminUser);
 159
 160         // Create project
 161         cy.get('[data-cy=side-panel-button]').click();
 162         cy.get('[data-cy=side-panel-new-project]').click();
 163         cy.get('[data-cy=form-dialog]')
 164             .should('contain', 'New Project')
 165             .within(() => {
 166                 cy.get('[data-cy=name-field]').within(() => {
 167                     cy.get('input').type(projName);
 168                 });
 169             });
 170         cy.get('[data-cy=form-submit-btn]').click();
 171
 172         //check for no description
 173         cy.get('[data-cy=no-description').should('be.visible');
 174
 175         //add description
 176         cy.get('[data-cy=side-panel-tree]').contains('Home Projects').click();
 177         cy.get('[data-cy=project-panel] tbody tr').contains(projName).rightclick({ force: true });
 178         cy.get('[data-cy=context-menu]').contains('Edit').click();
 179         cy.get('[data-cy=form-dialog]').within(() => {
 180             cy.get('div[contenteditable=true]').click().type(projDescription);
 181             cy.get('[data-cy=form-submit-btn]').click();
 182         });
 183         cy.waitForDom();
 184         cy.get('[data-cy=project-panel]').should('be.visible');
 185         cy.get('[data-cy=project-panel] tbody tr').contains(projName).click({ force: true });
 186         cy.get('[data-cy=project-details-card]').contains(projName).should('be.visible');
 187
 188         cy.get('[data-cy=project-details-card]').contains(projDescription).should('not.be.visible');
 189         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 80);
 190         cy.get('[data-cy=toggle-description]').click();
 191         cy.waitForDom();
 192         cy.get('[data-cy=project-details-card]').contains(projDescription).should('be.visible');
 193         cy.get('[data-cy=project-details-card]').invoke('height').should('be.gt', 80);
 194
 195         // modify description to be multi-line
 196         cy.get('[data-cy=side-panel-tree]').contains('Home Projects').click();
 197         cy.get('[data-cy=project-panel] tbody tr').contains(projName).rightclick({ force: true });
 198         cy.get('[data-cy=context-menu]').contains('Edit').click();
 199         cy.get('[data-cy=form-dialog]').within(() => {
 200             cy.get('div[contenteditable=true]').click().type(multiLineProjDescription);
 201             cy.get('[data-cy=form-submit-btn]').click();
 202         });
 203         cy.get('[data-cy=project-panel] tbody tr').contains(projName).click({ force: true });
 204         cy.get('[data-cy=project-details-card]').contains(projName).should('be.visible');
 205
 206
 207         // card height should change if description is multi-line
 208         cy.get('[data-cy=project-details-card]').contains(projDescription).should('not.be.visible');
 209         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 80);
 210         cy.get('[data-cy=toggle-description]').click();
 211         cy.waitForDom();
 212         cy.get('[data-cy=project-details-card]').invoke('height').should('be.gt', 130);
 213         cy.get('[data-cy=toggle-description]').click();
 214         cy.waitForDom();
 215         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 80);
 216     });
 217
 218     // The following test is enabled on Electron only, as Chromium and Firefox
 219     // require permissions to access the clipboard.
 220     it('should display key/value pairs',  { browser: 'electron' }, () => {
 221         const projName = `Test project (${Math.floor(999999 * Math.random())})`;
 222         cy.loginAs(adminUser);
 223
 224         // Create project wih key/value pairs
 225         cy.get('[data-cy=side-panel-button]').click();
 226         cy.get('[data-cy=side-panel-new-project]').click();
 227         cy.get('[data-cy=form-dialog]')
 228             .should('contain', 'New Project')
 229             .within(() => {
 230                 cy.get('[data-cy=name-field]').within(() => {
 231                     cy.get('input').type(projName);
 232                 });
 233             });
 234
 235         cy.get('[data-cy=key-input]').should('be.visible').find('input').click().type('Animal');
 236         cy.get('[data-cy=value-input]').should('be.visible').find('input').click().type('Dog');
 237         cy.get('[data-cy=property-add-btn]').should('be.visible').click();
 238
 239         cy.get('[data-cy=key-input]').should('be.visible').find('input').click().type('Importance');
 240         cy.get('[data-cy=value-input]').should('be.visible').find('input').click().type('Critical');
 241         cy.get('[data-cy=property-add-btn]').should('be.visible').click();
 242
 243         cy.get('[data-cy=key-input]').should('be.visible').find('input').click().type('very long key');
 244         cy.get('[data-cy=value-input]').should('be.visible').find('input').click().type('very loooooooooooooooooooooooooooooooooooooooooooooooooooooong value');
 245         cy.get('[data-cy=property-add-btn]').should('be.visible').click();
 246
 247         cy.get('[data-cy=key-input]').should('be.visible').find('input').click().type('very long key 2');
 248         cy.get('[data-cy=value-input]').should('be.visible').find('input').click().type('very loooooooooooooooooooooooooooooooooooooooooooooooooooooong value 2');
 249         cy.get('[data-cy=property-add-btn]').should('be.visible').click();
 250
 251         cy.get('[data-cy=form-submit-btn]').click();
 252
 253         //toggle chips
 254         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 95);
 255         cy.get('[data-cy=toggle-description]').click();
 256         cy.waitForDom();
 257         cy.get('[data-cy=project-details-card]').invoke('height').should('be.gt', 96);
 258         cy.get('[data-cy=toggle-description').click();
 259         cy.waitForDom();
 260         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 95);
 261
 262         //check for key/value pairs in project details card
 263         // only run in electron because other browsers require permission for clipboard
 264         if (Cypress.browser.name === 'electron') {
 265             cy.get('[data-cy=toggle-description]').click();
 266             cy.waitForDom();
 267             cy.get('[data-cy=project-details-card]').contains('Animal').should('be.visible');
 268             cy.get('[data-cy=project-details-card]').contains('Importance').should('be.visible').click();
 269             cy.waitForDom();
 270                 cy.window().then((win) => {
 271                     win.navigator.clipboard.readText().then((text) => {
 272                         //wait is necessary due to known issue with cypress@13.7.1
 273                         cy.wait(1000);
 274                         expect(text).to.match(new RegExp(`Importance: Critical`));
 275                     });
 276                 });
 277         }
 278     });
 279 });