From 1d290090166ba02d8e89e2c2476f948b2ca7cf48 Mon Sep 17 00:00:00 2001
From: Lucas Di Pentima <lucas@di-pentima.com.ar>
Date: Fri, 20 Nov 2020 18:54:38 -0300
Subject: [PATCH] 13494: Adds integration test for collection version browsing.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas@di-pentima.com.ar>
---
 cypress/integration/collection-panel.spec.js  | 83 +++++++++++++++++++
 .../confirmation-dialog.tsx                   | 52 ++++++------
 .../details-panel/collection-details.tsx      |  5 +-
 .../collection-panel/collection-panel.tsx     |  2 +-
 4 files changed, 115 insertions(+), 27 deletions(-)

diff --git a/cypress/integration/collection-panel.spec.js b/cypress/integration/collection-panel.spec.js
index 63a25a25..5776fcaa 100644
--- a/cypress/integration/collection-panel.spec.js
+++ b/cypress/integration/collection-panel.spec.js
@@ -300,4 +300,87 @@ describe('Collection panel tests', function() {
             cy.get('[data-cy=collection-files-panel]').should('contain', 'bar');
         });
     });
+
+    it.only('uses the collection version browser to view a previous version', function() {
+        const colName = `Test Collection ${Math.floor(Math.random() * 999999)}`;
+
+        // Creates the collection using the admin token so we can set up
+        // a bogus manifest text without block signatures.
+        cy.createCollection(adminUser.token, {
+            name: colName,
+            owner_uuid: activeUser.user.uuid,
+            manifest_text: ". 37b51d194a7513e45b56f6524f2d51f2+3 0:3:foo 0:3:bar\n"})
+        .as('collection').then(function() {
+            // Visit collection, check basic information
+            cy.loginAs(activeUser)
+            cy.visit(`/collections/${this.collection.uuid}`);
+            cy.get('[data-cy=collection-info-panel]').should('not.contain', 'This is an old version');
+            cy.get('[data-cy=read-only-icon]').should('not.exist');
+            cy.get('[data-cy=collection-version-number]').should('contain', '1');
+            cy.get('[data-cy=collection-info-panel]').should('contain', colName);
+            cy.get('[data-cy=collection-files-panel]').should('contain', 'foo').and('contain', 'bar');
+
+            // Modify collection, expect version number change
+            cy.get('[data-cy=collection-files-panel]').contains('foo').rightclick();
+            cy.get('[data-cy=context-menu]').contains('Remove').click();
+            cy.get('[data-cy=confirmation-dialog]').should('contain', 'Removing file');
+            cy.get('[data-cy=confirmation-dialog-ok-btn]').click();
+            cy.get('[data-cy=collection-version-number]').should('contain', '2');
+            cy.get('[data-cy=collection-files-panel]').should('not.contain', 'foo').and('contain', 'bar');
+
+            // Click on version number, check version browser. Click on past version.
+            cy.get('[data-cy=collection-version-browser]').should('not.exist');
+            cy.get('[data-cy=collection-version-number]').contains('2').click();
+            cy.get('[data-cy=collection-version-browser]')
+                .should('contain', 'Nr').and('contain', 'Size').and('contain', 'Date')
+                .within(() => {
+                    // Version 1: 6 bytes in size
+                    cy.get('[data-cy=collection-version-browser-select-1]')
+                        .should('contain', '1').and('contain', '6 B');
+                    // Version 2: 3 bytes in size (one file removed)
+                    cy.get('[data-cy=collection-version-browser-select-2]')
+                        .should('contain', '2').and('contain', '3 B');
+                    cy.get('[data-cy=collection-version-browser-select-3]')
+                        .should('not.exist');
+                    cy.get('[data-cy=collection-version-browser-select-1]')
+                        .click();
+            });
+            cy.get('[data-cy=collection-info-panel]').should('contain', 'This is an old version');
+            cy.get('[data-cy=read-only-icon]').should('exist');
+            cy.get('[data-cy=collection-version-number]').should('contain', '1');
+            cy.get('[data-cy=collection-info-panel]').should('contain', colName);
+            cy.get('[data-cy=collection-files-panel]')
+                .should('contain', 'foo').and('contain', 'bar');
+
+            // Click on "head version" link, confirm that it's the latest version.
+            cy.get('[data-cy=collection-info-panel]').contains('head version').click();
+            cy.get('[data-cy=collection-info-panel]')
+                .should('not.contain', 'This is an old version');
+            cy.get('[data-cy=read-only-icon]').should('not.exist');
+            cy.get('[data-cy=collection-version-number]').should('contain', '2');
+            cy.get('[data-cy=collection-info-panel]').should('contain', colName);
+            cy.get('[data-cy=collection-files-panel]').
+                should('not.contain', 'foo').and('contain', 'bar');
+
+            // Make another change, confirm new version.
+            cy.get('[data-cy=collection-panel-options-btn]').click();
+            cy.get('[data-cy=context-menu]').contains('Edit collection').click();
+            cy.get('[data-cy=form-dialog]')
+                .should('contain', 'Edit Collection')
+                .within(() => {
+                    // appends some text
+                    cy.get('input').first().type(' renamed');
+                });
+            cy.get('[data-cy=form-submit-btn]').click();
+            cy.get('[data-cy=collection-info-panel]')
+                .should('not.contain', 'This is an old version');
+            cy.get('[data-cy=read-only-icon]').should('not.exist');
+            cy.get('[data-cy=collection-version-number]').should('contain', '3');
+            cy.get('[data-cy=collection-info-panel]').should('contain', colName + ' renamed');
+            cy.get('[data-cy=collection-files-panel]')
+                .should('not.contain', 'foo').and('contain', 'bar');
+            cy.get('[data-cy=collection-version-browser-select-3]')
+                .should('contain', '3').and('contain', '3 B');
+        });
+    });
 })
diff --git a/src/components/confirmation-dialog/confirmation-dialog.tsx b/src/components/confirmation-dialog/confirmation-dialog.tsx
index 257eadf3..a5a2fb45 100644
--- a/src/components/confirmation-dialog/confirmation-dialog.tsx
+++ b/src/components/confirmation-dialog/confirmation-dialog.tsx
@@ -10,7 +10,7 @@ import { WarningIcon } from '~/components/icon/icon';
 export interface ConfirmationDialogDataProps {
     title: string;
     text: string;
-    info?: string; 
+    info?: string;
     cancelButtonLabel?: string;
     confirmButtonLabel?: string;
 }
@@ -21,27 +21,31 @@ export interface ConfirmationDialogProps {
 
 export const ConfirmationDialog = (props: ConfirmationDialogProps & WithDialogProps<ConfirmationDialogDataProps>) =>
     <Dialog open={props.open}>
-        <DialogTitle>{props.data.title}</DialogTitle>
-        <DialogContent style={{ display: 'flex', alignItems: 'center' }}>
-            <WarningIcon />
-            <DialogContentText style={{ paddingLeft: '8px' }}>
-                <div>{props.data.text}</div>
-                <div>{props.data.info}</div>
-            </DialogContentText>
-        </DialogContent>
-        <DialogActions style={{ margin: '0px 24px 24px' }}>
-            <Button
-                variant='text'
-                color='primary'
-                onClick={props.closeDialog}>
-                {props.data.cancelButtonLabel || 'Cancel'}
-            </Button>
-            <Button
-                variant='contained'
-                color='primary'
-                type='submit'
-                onClick={props.onConfirm}>
-                {props.data.confirmButtonLabel || 'Ok'}
-            </Button>
-        </DialogActions>
+        <div data-cy='confirmation-dialog'>
+            <DialogTitle>{props.data.title}</DialogTitle>
+            <DialogContent style={{ display: 'flex', alignItems: 'center' }}>
+                <WarningIcon />
+                <DialogContentText style={{ paddingLeft: '8px' }}>
+                    <div>{props.data.text}</div>
+                    <div>{props.data.info}</div>
+                </DialogContentText>
+            </DialogContent>
+            <DialogActions style={{ margin: '0px 24px 24px' }}>
+                <Button
+                    data-cy='confirmation-dialog-cancel-btn'
+                    variant='text'
+                    color='primary'
+                    onClick={props.closeDialog}>
+                    {props.data.cancelButtonLabel || 'Cancel'}
+                </Button>
+                <Button
+                    data-cy='confirmation-dialog-ok-btn'
+                    variant='contained'
+                    color='primary'
+                    type='submit'
+                    onClick={props.onConfirm}>
+                    {props.data.confirmButtonLabel || 'Ok'}
+                </Button>
+            </DialogActions>
+        </div>
     </Dialog>;
diff --git a/src/views-components/details-panel/collection-details.tsx b/src/views-components/details-panel/collection-details.tsx
index 500b0506..b0449bff 100644
--- a/src/views-components/details-panel/collection-details.tsx
+++ b/src/views-components/details-panel/collection-details.tsx
@@ -84,7 +84,7 @@ const mapDispatchToProps = () =>
 const CollectionVersionBrowser = withStyles(styles)(
     connect(mapStateToProps, mapDispatchToProps)(
         ({ currentCollection, versions, showVersion, classes }: CollectionVersionBrowserProps & CollectionVersionBrowserDispatchProps & WithStyles<CssRules>) => {
-            return <>
+            return <div data-cy="collection-version-browser">
                 <Grid container>
                     <Grid item xs={2}>
                         <Typography variant="caption" className={classes.versionBrowserHeader}>
@@ -105,6 +105,7 @@ const CollectionVersionBrowser = withStyles(styles)(
                     const isSelectedVersion = !!(currentCollection && currentCollection.uuid === item.uuid);
                     return (
                         <ListItem button style={{padding: '4px'}}
+                            data-cy={`collection-version-browser-select-${item.version}`}
                             key={item.version}
                             onClick={e => showVersion(item)}
                             selected={isSelectedVersion}>
@@ -127,5 +128,5 @@ const CollectionVersionBrowser = withStyles(styles)(
                     );
                 })}
                 </Grid>
-            </>;
+            </div>;
         }));
\ No newline at end of file
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index 57c11fb8..b7bd3a62 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -316,7 +316,7 @@ export const CollectionDetailsAttributes = (props: { item: CollectionResource, t
                 label='Version number'
                 value={ showVersionBrowser !== undefined
                     ? <Tooltip title="Open version browser"><ButtonLink underline='none' className={classes.button} onClick={() => showVersionBrowser()}>
-                        {item.version}
+                        {<span data-cy='collection-version-number'>{item.version}</span>}
                     </ButtonLink></Tooltip>
                     : item.version
                 }
-- 
2.30.2