From 4c2c72d649f421f63ba95b7bf3978491f78a6c72 Mon Sep 17 00:00:00 2001
From: Lucas Di Pentima <lucas@di-pentima.com.ar>
Date: Wed, 17 Mar 2021 17:24:29 -0300
Subject: [PATCH] 16848: Fixes unit tests.

DetailsAttribute component needed a mocked store to be able to be tested
inside TokenDialog. Extracted the layout related code to a simpler component
so that can be used directly and tested is easier.
Also, fixed a couple of assertions on the token dialog tests.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas@di-pentima.com.ar>
---
 .../details-attribute/details-attribute.tsx   | 49 +++++++++++--------
 .../token-dialog/token-dialog.test.tsx        |  4 +-
 .../token-dialog/token-dialog.tsx             | 31 ++++++------
 3 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/src/components/details-attribute/details-attribute.tsx b/src/components/details-attribute/details-attribute.tsx
index 2cecc8ce..026157f4 100644
--- a/src/components/details-attribute/details-attribute.tsx
+++ b/src/components/details-attribute/details-attribute.tsx
@@ -85,9 +85,8 @@ export const DetailsAttribute = connect(mapStateToProps)(withStyles(styles)(
         }
 
         render() {
-            const { uuidEnhancer, label, link, value, children, classes, classLabel,
-                classValue, lowercaseValue, onValueClick, linkToUuid,
-                localCluster, remoteHostsConfig, sessions, copyValue } = this.props;
+            const { uuidEnhancer, link, value, classes, linkToUuid,
+                localCluster, remoteHostsConfig, sessions } = this.props;
             let valueNode: React.ReactNode;
 
             if (linkToUuid) {
@@ -104,23 +103,33 @@ export const DetailsAttribute = connect(mapStateToProps)(withStyles(styles)(
                 valueNode = value;
             }
 
-            return <Typography component="div" className={classes.attribute}>
-                <Typography component="div" className={classnames([classes.label, classLabel])}>{label}</Typography>
-                <Typography
-                    onClick={onValueClick}
-                    component="div"
-                    className={classnames([classes.value, classValue, { [classes.lowercaseValue]: lowercaseValue }])}>
-                    {valueNode}
-                    {children}
-                    {(linkToUuid || copyValue) && <Tooltip title="Copy to clipboard">
-                        <span className={classes.copyIcon}>
-                            <CopyToClipboard text={linkToUuid || copyValue || ""} onCopy={() => this.onCopy("Copied")}>
-                                <CopyIcon />
-                            </CopyToClipboard>
-                        </span>
-                    </Tooltip>}
-                </Typography>
-            </Typography>;
+            return <DetailsAttributeComponent {...this.props} value={valueNode} onCopy={this.onCopy} />;
         }
     }
 ));
+
+interface DetailsAttributeComponentProps {
+    value: React.ReactNode;
+    onCopy?: (msg: string) => void;
+}
+
+export const DetailsAttributeComponent = withStyles(styles)(
+    (props: DetailsAttributeDataProps & WithStyles<CssRules> & DetailsAttributeComponentProps) =>
+        <Typography component="div" className={props.classes.attribute}>
+            <Typography component="div" className={classnames([props.classes.label, props.classLabel])}>{props.label}</Typography>
+            <Typography
+                onClick={props.onValueClick}
+                component="div"
+                className={classnames([props.classes.value, props.classValue, { [props.classes.lowercaseValue]: props.lowercaseValue }])}>
+                {props.value}
+                {props.children}
+                {(props.linkToUuid || props.copyValue) && props.onCopy && <Tooltip title="Copy to clipboard">
+                    <span className={props.classes.copyIcon}>
+                        <CopyToClipboard text={props.linkToUuid || props.copyValue || ""} onCopy={() => props.onCopy!("Copied")}>
+                            <CopyIcon />
+                        </CopyToClipboard>
+                    </span>
+                </Tooltip>}
+            </Typography>
+        </Typography>);
+
diff --git a/src/views-components/token-dialog/token-dialog.test.tsx b/src/views-components/token-dialog/token-dialog.test.tsx
index 928001ab..d9548612 100644
--- a/src/views-components/token-dialog/token-dialog.test.tsx
+++ b/src/views-components/token-dialog/token-dialog.test.tsx
@@ -39,12 +39,12 @@ describe('<CurrentTokenDialog />', () => {
 
     it('should show the token expiration if present', () => {
       expect(props.tokenExpiration).toBeUndefined();
-      expect(wrapper.html()).not.toContain('Expires at:');
+      expect(wrapper.html()).toContain('This token does not have an expiration date');
 
       const someDate = '2140-01-01T00:00:00.000Z'
       props.tokenExpiration = new Date(someDate);
       wrapper = mount(<TokenDialogComponent {...props} />);
-      expect(wrapper.html()).toContain('Expires at:');
+      expect(wrapper.html()).toContain(props.tokenExpiration.toLocaleString());
     });
 
     it('should show a create new token button when allowed', () => {
diff --git a/src/views-components/token-dialog/token-dialog.tsx b/src/views-components/token-dialog/token-dialog.tsx
index 2a77ea34..714a13b9 100644
--- a/src/views-components/token-dialog/token-dialog.tsx
+++ b/src/views-components/token-dialog/token-dialog.tsx
@@ -27,7 +27,8 @@ import {
 import { DefaultCodeSnippet } from '~/components/default-code-snippet/default-code-snippet';
 import { snackbarActions, SnackbarKind } from '~/store/snackbar/snackbar-actions';
 import { getNewExtraToken } from '~/store/auth/auth-action';
-import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
+import { DetailsAttributeComponent } from '~/components/details-attribute/details-attribute';
+// import { DetailsAttribute } from '~/components/details-attribute/details-attribute';
 
 type CssRules = 'link' | 'paper' | 'button' | 'actionButton' | 'codeBlock';
 
@@ -114,20 +115,20 @@ unset ARVADOS_API_HOST_INSECURE`
                         </a>
                     </Typography>
                 </Typography>
-                <Typography  paragraph={true}>
-                    <DetailsAttribute label='API Host' value={data.apiHost} copyValue={data.apiHost} />
-                    <DetailsAttribute label='API Token' value={data.token} copyValue={data.token} />
-                    <DetailsAttribute label='Token expiration' value={tokenExpiration} />
-                    { this.props.canCreateNewTokens && <Button
-                        onClick={() => this.onGetNewToken()}
-                        color="primary"
-                        size="small"
-                        variant="contained"
-                        className={classes.actionButton}
-                    >
-                        GET NEW TOKEN
-                    </Button> }
-                </Typography>
+
+                <DetailsAttributeComponent label='API Host' value={data.apiHost} copyValue={data.apiHost} onCopy={this.onCopy} />
+                <DetailsAttributeComponent label='API Token' value={data.token} copyValue={data.token} onCopy={this.onCopy} />
+                <DetailsAttributeComponent label='Token expiration' value={tokenExpiration} />
+                { this.props.canCreateNewTokens && <Button
+                    onClick={() => this.onGetNewToken()}
+                    color="primary"
+                    size="small"
+                    variant="contained"
+                    className={classes.actionButton}
+                >
+                    GET NEW TOKEN
+                </Button> }
+
                 <Typography paragraph={true}>
                     Paste the following lines at a shell prompt to set up the necessary environment for Arvados SDKs to authenticate to your account.
                 </Typography>
-- 
2.30.2