16439: Adds SidePanelButton clickability tests.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas@di-pentima.com.ar>

diff --git a/cypress/integration/side-panel.spec.js b/cypress/integration/side-panel.spec.js
new file mode 100644 (file)
index 0000000..95b5640
--- /dev/null
+++ b/cypress/integration/side-panel.spec.js
@@ -0,0 +1,78 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+describe('Side panel tests', function() {
+    let activeUser;
+    let adminUser;
+
+    before(function() {
+        // Only set up common users once. These aren't set up as aliases because
+        // aliases are cleaned up after every test. Also it doesn't make sense
+        // to set the same users on beforeEach() over and over again, so we
+        // separate a little from Cypress' 'Best Practices' here.
+        cy.getUser('admin', 'Admin', 'User', true, true)
+            .as('adminUser').then(function() {
+                adminUser = this.adminUser;
+            }
+        );
+        cy.getUser('user', 'Active', 'User', false, true)
+            .as('activeUser').then(function() {
+                activeUser = this.activeUser;
+            }
+        );
+    })
+
+    beforeEach(function() {
+        cy.clearCookies()
+        cy.clearLocalStorage()
+    })
+
+    it('enables the +NEW side panel button on users home project', function() {
+        cy.loginAs(activeUser);
+        cy.visit(`/projects/${activeUser.user.uuid}`);
+        cy.get('[data-cy=side-panel-button]')
+            .should('exist')
+            .and('not.be.disabled');
+    })
+
+    it('disables or enables the +NEW side panel button on depending on project permissions', function() {
+        cy.loginAs(activeUser);
+        [true, false].map(function(isWritable) {
+            cy.createGroup(adminUser.token, {
+                name: `Test ${isWritable ? 'writable' : 'read-only'} project`,
+                group_class: 'project',
+            }).as('sharedGroup').then(function() {
+                cy.createLink(adminUser.token, {
+                    name: isWritable ? 'can_write' : 'can_read',
+                    link_class: 'permission',
+                    head_uuid: this.sharedGroup.uuid,
+                    tail_uuid: activeUser.user.uuid
+                })
+                cy.visit(`/projects/${this.sharedGroup.uuid}`);
+                cy.get('[data-cy=side-panel-button]')
+                    .should('exist')
+                    .and(`${isWritable ? 'not.' : ''}be.disabled`);
+            })
+        })
+    })
+
+    it('disables the +NEW side panel button on appropriate sections', function() {
+        cy.loginAs(activeUser);
+        [
+            {url: '/shared-with-me', label: 'Shared with me'},
+            {url: '/public-favorites', label: 'Public Favorites'},
+            {url: '/favorites', label: 'My Favorites'},
+            {url: '/workflows', label: 'Workflows'},
+            {url: '/all_processes', label: 'All Processes'},
+            {url: '/trash', label: 'Trash'},
+        ].map(function(section) {
+            cy.visit(section.url);
+            cy.get('[data-cy=breadcrumb-first]')
+                .should('contain', section.label);
+            cy.get('[data-cy=side-panel-button]')
+                .should('exist')
+                .and('be.disabled');
+        })
+    })
+})
\ No newline at end of file

diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
index 207823307c9284b31fa0a4ca969f974b74a9ea23..8ed0f0c4094d96b86246d7ed322d5e0873bbd5b2 100644 (file)
--- a/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -34,7 +34,7 @@ export interface BreadcrumbsProps {
 
 export const Breadcrumbs = withStyles(styles)(
     ({ classes, onClick, onContextMenu, items }: BreadcrumbsProps & WithStyles<CssRules>) =>
-    <Grid container alignItems="center" wrap="nowrap">
+    <Grid container data-cy='breadcrumbs' alignItems="center" wrap="nowrap">
     {
         items.map((item, index) => {
             const isLastItem = index === items.length - 1;
@@ -44,6 +44,12 @@ export const Breadcrumbs = withStyles(styles)(
                     {isFirstItem ? null : <IllegalNamingWarning name={item.label} />}
                     <Tooltip title={item.label}>
                         <Button
+                            data-cy={
+                                isFirstItem
+                                ? 'breadcrumb-first'
+                                : isLastItem
+                                    ? 'breadcrumb-last'
+                                    : false}
                             color="inherit"
                             className={isLastItem ? classes.currentItem : classes.item}
                             onClick={() => onClick(item)}

diff --git a/src/views-components/side-panel-button/side-panel-button.tsx b/src/views-components/side-panel-button/side-panel-button.tsx
index 5e547740a1231b25a52fa24207716f40f5cb0acd..07784c5ec3ffa20e4c41564d1dd9eb84fd1f772d 100644 (file)
--- a/src/views-components/side-panel-button/side-panel-button.tsx
+++ b/src/views-components/side-panel-button/side-panel-button.tsx
@@ -93,7 +93,7 @@ export const SidePanelButton = withStyles(styles)(
                 return <Toolbar>
                     <Grid container>
                         <Grid container item xs alignItems="center" justify="flex-start">
-                            <Button variant="contained" disabled={!enabled}
+                            <Button data-cy="side-panel-button" variant="contained" disabled={!enabled}
                                 color="primary" size="small" className={classes.button}
                                 aria-owns={anchorEl ? 'aside-menu-list' : undefined}
                                 aria-haspopup="true"
@@ -108,13 +108,13 @@ export const SidePanelButton = withStyles(styles)(
                                 onClose={this.handleClose}
                                 onClick={this.handleClose}
                                 transformOrigin={transformOrigin}>
-                                <MenuItem className={classes.menuItem} onClick={this.handleNewCollectionClick}>
+                                <MenuItem data-cy='side-panel-new-collection' className={classes.menuItem} onClick={this.handleNewCollectionClick}>
                                     <CollectionIcon className={classes.icon} /> New collection
                                 </MenuItem>
-                                <MenuItem className={classes.menuItem} onClick={this.handleRunProcessClick}>
+                                <MenuItem data-cy='side-panel-run-process' className={classes.menuItem} onClick={this.handleRunProcessClick}>
                                     <ProcessIcon className={classes.icon} /> Run a process
                                 </MenuItem>
-                                <MenuItem className={classes.menuItem} onClick={this.handleNewProjectClick}>
+                                <MenuItem data-cy='side-panel-new-project' className={classes.menuItem} onClick={this.handleNewProjectClick}>
                                     <ProjectIcon className={classes.icon} /> New project
                                 </MenuItem>
                             </Menu>