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         //must be long enough to require a 2nd line
 152         const projDescription =
 153             'Science! true daughter of Old Time thou art! Who alterest all things with thy peering eyes. Why preyest thou thus upon the poet’s heart, Vulture, whose wings are dull realities? ';
 154         cy.loginAs(adminUser);
 155
 156         // Create project
 157         cy.get('[data-cy=side-panel-button]').click();
 158         cy.get('[data-cy=side-panel-new-project]').click();
 159         cy.get('[data-cy=form-dialog]')
 160             .should('contain', 'New Project')
 161             .within(() => {
 162                 cy.get('[data-cy=name-field]').within(() => {
 163                     cy.get('input').type(projName);
 164                 });
 165             });
 166         cy.get('[data-cy=form-submit-btn]').click();
 167
 168         //check for no description
 169         cy.get('[data-cy=no-description').should('be.visible');
 170
 171         //add description
 172         cy.get('[data-cy=side-panel-tree]').contains('Home Projects').click();
 173         cy.get('[data-cy=project-panel] tbody tr').contains(projName).rightclick({ force: true });
 174         cy.get('[data-cy=context-menu]').contains('Edit').click();
 175         cy.get('[data-cy=form-dialog]').within(() => {
 176             cy.get('div[contenteditable=true]').click().type(projDescription);
 177             cy.get('[data-cy=form-submit-btn]').click();
 178         });
 179         cy.get('[data-cy=project-panel] tbody tr').contains(projName).click({ force: true });
 180         cy.get('[data-cy=project-details-card]').contains(projName).should('be.visible');
 181
 182         //toggle description
 183         //description is always visible, even when collapsed
 184         cy.get('[data-cy=project-details-card]').contains(projDescription).should('be.visible');
 185         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 90);
 186         cy.get('[data-cy=toggle-description]').click();
 187         cy.waitForDom();
 188         cy.get('[data-cy=project-details-card]').invoke('height').should('be.gt', 91);
 189         cy.get('[data-cy=toggle-description]').click();
 190         cy.waitForDom();
 191         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 90);
 192     });
 193
 194     it('should display key/value pairs', () => {
 195         const projName = `Test project (${Math.floor(999999 * Math.random())})`;
 196         cy.loginAs(adminUser);
 197
 198         // Create project wih key/value pairs
 199         cy.get('[data-cy=side-panel-button]').click();
 200         cy.get('[data-cy=side-panel-new-project]').click();
 201         cy.get('[data-cy=form-dialog]')
 202             .should('contain', 'New Project')
 203             .within(() => {
 204                 cy.get('[data-cy=name-field]').within(() => {
 205                     cy.get('input').type(projName);
 206                 });
 207             });
 208
 209         cy.get('[data-cy=key-input]').should('be.visible').click().type('Animal');
 210         cy.get('[data-cy=value-input]').should('be.visible').click().type('Dog');
 211         cy.get('[data-cy=property-add-btn]').should('be.visible').click();
 212
 213         cy.get('[data-cy=key-input]').should('be.visible').click().type('Importance');
 214         cy.get('[data-cy=value-input]').should('be.visible').click().type('Critical');
 215         cy.get('[data-cy=property-add-btn]').should('be.visible').click();
 216
 217         cy.get('[data-cy=form-submit-btn]').click();
 218
 219         //toggle chips
 220         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 100);
 221         cy.get('[data-cy=toggle-chips]').click();
 222         cy.waitForDom();
 223         cy.get('[data-cy=project-details-card]').invoke('height').should('be.gt', 101);
 224         cy.get('[data-cy=toggle-chips').click();
 225         cy.waitForDom();
 226         cy.get('[data-cy=project-details-card]').invoke('height').should('be.lt', 100);
 227
 228         //check for key/value pairs in project details card
 229         cy.get('[data-cy=project-details-card]').contains('Animal').should('be.visible');
 230         cy.get('[data-cy=project-details-card]').contains('Importance').should('be.visible').click();
 231         cy.waitForDom();
 232         cy.window().then((win) => {
 233             win.navigator.clipboard.readText().then((text) => {
 234                 //wait is necessary due to known issue with cypress@13.7.1
 235                 cy.wait(1000);
 236                 expect(text).to.match(new RegExp(`Importance: Critical`));
 237             });
 238         });
 239     });
 240 });