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.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 link to clipboard',
 111             'Open with 3rd party client',
 112             'API Details',
 113             'Share',
 114             'New project',
 115             'Edit project',
 116             'Move to',
 117             'Move to trash',
 118             'Freeze project',
 119             'Add to favorites',
 120         ];
 121
 122         const projName = `Test project (${Math.floor(999999 * Math.random())})`;
 123         cy.loginAs(activeUser);
 124
 125         // Create project
 126         cy.get('[data-cy=side-panel-button]').click();
 127         cy.get('[data-cy=side-panel-new-project]').click();
 128         cy.get('[data-cy=form-dialog]')
 129             .should('contain', 'New Project')
 130             .within(() => {
 131                 cy.get('[data-cy=name-field]').within(() => {
 132                     cy.get('input').type(projName);
 133                 });
 134             });
 135         cy.get('[data-cy=form-submit-btn]').click();
 136         cy.get('[data-cy=form-dialog]').should('not.exist');
 137
 138         for (let i = 0; i < msButtonTooltips.length; i++) {
 139             cy.get('[data-cy=multiselect-button]').eq(i).should('exist');
 140             cy.get('[data-cy=multiselect-button]').eq(i).trigger('mouseover');
 141             cy.waitForDom();
 142             cy.get('body').within(() => {
 143                 cy.contains(msButtonTooltips[i]).should('exist');
 144             });
 145             cy.get('[data-cy=multiselect-button]').eq(i).trigger('mouseout');
 146         }
 147     });
 148
 149     it('should toggle description display', () => {
 150         const projName = `Test project (${Math.floor(999999 * Math.random())})`;
 151
 152         //a single line description shouldn't change the height of the card
 153         const projDescription = 'Science! True daughter of Old Time thou art! Who alterest all things with thy peering eyes.';
 154         //a multi-line description should change the height of the card
 155         const multiLineProjDescription = '{enter}Why preyest thou thus upon the poet’s heart,{enter}Vulture, whose wings are dull realities?';
 156
 157         cy.loginAs(adminUser);
 158
 159         // Create project
 160         cy.get('[data-cy=side-panel-button]').click();
 161         cy.get('[data-cy=side-panel-new-project]').click();
 162         cy.get('[data-cy=form-dialog]')
 163             .should('contain', 'New Project')
 164             .within(() => {
 165                 cy.get('[data-cy=name-field]').within(() => {
 166                     cy.get('input').type(projName);
 167                 });
 168             });
 169         cy.get('[data-cy=form-submit-btn]').click();
 170
 171         //check for no description
 172         cy.get('[data-cy=no-description').should('be.visible');
 173
 174         //add description
 175         cy.get('[data-cy=side-panel-tree]').contains('Home Projects').click();
 176         cy.get('[data-cy=project-panel] tbody tr').contains(projName).rightclick({ force: true });
 177         cy.get('[data-cy=context-menu]').contains('Edit').click();
 178         cy.get('[data-cy=form-dialog]').within(() => {
 179             cy.get('div[contenteditable=true]').click().type(projDescription);
 180             cy.get('[data-cy=form-submit-btn]').click();
 181         });
 182         cy.get('[data-cy=project-panel] tbody tr').contains(projName).click({ force: true });
 183         cy.get('[data-cy=project-details-card]').contains(projName).should('be.visible');
 184
 185         //card height should not change if description is a single line
 186         cy.get('[data-cy=project-details-card]').contains(projDescription).should('be.visible');
 187         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 90);
 188         cy.get('[data-cy=toggle-description]').click();
 189         cy.waitForDom();
 190         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 90);
 191         cy.get('[data-cy=toggle-description]').click();
 192         cy.waitForDom();
 193         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 90);
 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         //card height should change if description is multi-line
 207         cy.get('[data-cy=project-details-card]').contains(projDescription).should('be.visible');
 208         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 90);
 209         cy.get('[data-cy=toggle-description]').click();
 210         cy.waitForDom();
 211         cy.get('[data-cy=project-details-card]').invoke('height').should('be.gt', 90);
 212         cy.get('[data-cy=toggle-description]').click();
 213         cy.waitForDom();
 214         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 90);
 215     });
 216
 217     it('should display key/value pairs', () => {
 218         const projName = `Test project (${Math.floor(999999 * Math.random())})`;
 219         cy.loginAs(adminUser);
 220
 221         // Create project wih key/value pairs
 222         cy.get('[data-cy=side-panel-button]').click();
 223         cy.get('[data-cy=side-panel-new-project]').click();
 224         cy.get('[data-cy=form-dialog]')
 225             .should('contain', 'New Project')
 226             .within(() => {
 227                 cy.get('[data-cy=name-field]').within(() => {
 228                     cy.get('input').type(projName);
 229                 });
 230             });
 231
 232         cy.get('[data-cy=key-input]').should('be.visible').click().type('Animal');
 233         cy.get('[data-cy=value-input]').should('be.visible').click().type('Dog');
 234         cy.get('[data-cy=property-add-btn]').should('be.visible').click();
 235
 236         cy.get('[data-cy=key-input]').should('be.visible').click().type('Importance');
 237         cy.get('[data-cy=value-input]').should('be.visible').click().type('Critical');
 238         cy.get('[data-cy=property-add-btn]').should('be.visible').click();
 239
 240         cy.get('[data-cy=key-input]').should('be.visible').click().type('very long key');
 241         cy.get('[data-cy=value-input]').should('be.visible').click().type('very loooooooooooooooooooooooooooooooooooooooooooooooooooooong value');
 242         cy.get('[data-cy=property-add-btn]').should('be.visible').click();
 243
 244         cy.get('[data-cy=key-input]').should('be.visible').click().type('very long key 2');
 245         cy.get('[data-cy=value-input]').should('be.visible').click().type('very loooooooooooooooooooooooooooooooooooooooooooooooooooooong value 2');
 246         cy.get('[data-cy=property-add-btn]').should('be.visible').click();
 247
 248         cy.get('[data-cy=form-submit-btn]').click();
 249
 250         //toggle chips
 251         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 95);
 252         cy.get('[data-cy=toggle-chips]').click();
 253         cy.waitForDom();
 254         cy.get('[data-cy=project-details-card]').invoke('height').should('be.gt', 96);
 255         cy.get('[data-cy=toggle-chips').click();
 256         cy.waitForDom();
 257         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 95);
 258
 259         //check for key/value pairs in project details card
 260         cy.get('[data-cy=project-details-card]').contains('Animal').should('be.visible');
 261         cy.get('[data-cy=project-details-card]').contains('Importance').should('be.visible').click();
 262         cy.waitForDom();
 263         cy.window().then((win) => {
 264             win.navigator.clipboard.readText().then((text) => {
 265                 //wait is necessary due to known issue with cypress@13.7.1
 266                 cy.wait(1000);
 267                 expect(text).to.match(new RegExp(`Importance: Critical`));
 268             });
 269         });
 270     });
 271 });