From: Daniel Kutyła <daniel.kutyla@contractors.roche.com>
Date: Fri, 11 Sep 2020 22:41:59 +0000 (+0200)
Subject: 16243: Added tests
X-Git-Tag: 2.1.0~9^2~3
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/0c1fb93d6aa22e4f3e7bd9b857b7b4e953d2f763

16243: Added tests

Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>
---

diff --git a/src/components/collection-panel-files/collection-panel-files.test.tsx b/src/components/collection-panel-files/collection-panel-files.test.tsx
new file mode 100644
index 00000000..86f823a0
--- /dev/null
+++ b/src/components/collection-panel-files/collection-panel-files.test.tsx
@@ -0,0 +1,116 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { configure, shallow, mount } from "enzyme";
+import { WithStyles } from "@material-ui/core";
+import * as Adapter from "enzyme-adapter-react-16";
+import { TreeItem, TreeItemStatus } from '../tree/tree';
+import { FileTreeData } from '../file-tree/file-tree-data';
+import { CollectionFileType } from "../../models/collection-file";
+import { CollectionPanelFilesComponent, CollectionPanelFilesProps, CssRules } from './collection-panel-files';
+import { SearchInput } from '../search-input/search-input';
+
+configure({ adapter: new Adapter() });
+
+jest.mock('~/components/file-tree/file-tree', () => ({
+    FileTree: () => 'FileTree',
+}));
+
+describe('<CollectionPanelFiles />', () => {
+    let props: CollectionPanelFilesProps & WithStyles<CssRules>;
+
+    beforeEach(() => {
+        props = {
+            classes: {} as Record<CssRules, string>,
+            items: [],
+            isWritable: true,
+            isLoading: false,
+            tooManyFiles: false,
+            onUploadDataClick: jest.fn(),
+            onSearchChange: jest.fn(),
+            onItemMenuOpen: jest.fn(),
+            onOptionsMenuOpen: jest.fn(),
+            onSelectionToggle: jest.fn(),
+            onCollapseToggle: jest.fn(),
+            onFileClick: jest.fn(),
+            loadFilesFunc: jest.fn(),
+            currentItemUuid: '',
+        };
+    });
+
+    it('renders properly', () => {
+        // when
+        const wrapper = shallow(<CollectionPanelFilesComponent {...props} />);
+
+        // then
+        expect(wrapper).not.toBeUndefined();
+    });
+
+    it('filters out files', () => {
+        // given
+        const searchPhrase = 'test';
+        const items: Array<TreeItem<FileTreeData>> = [
+            {
+                data: {
+                    url: '',
+                    type: CollectionFileType.DIRECTORY,
+                    name: 'test',
+                },
+                id: '1',
+                open: true,
+                active: true,
+                status: TreeItemStatus.LOADED,
+            },
+            {
+                data: {
+                    url: '',
+                    type: CollectionFileType.FILE,
+                    name: 'test123',
+                },
+                id: '2',
+                open: true,
+                active: true,
+                status: TreeItemStatus.LOADED,
+            },
+            {
+                data: {
+                    url: '',
+                    type: CollectionFileType.FILE,
+                    name: 'another-file',
+                },
+                id: '3',
+                open: true,
+                active: true,
+                status: TreeItemStatus.LOADED,
+            }
+        ];
+
+        // setup
+        props.items = items;
+        const wrapper = mount(<CollectionPanelFilesComponent {...props} />);
+        wrapper.find(SearchInput).simulate('change', { target: { value: searchPhrase } });
+        
+        // when
+        setTimeout(() => { // we have to use set timeout because of the debounce
+            expect(wrapper.find('FileTree').prop('items'))
+            .toEqual([
+                {
+                    data: { url: '', type: 'directory', name: 'test' },
+                    id: '1',
+                    open: true,
+                    active: true,
+                    status: 'loaded'
+                },
+                {
+                    data: { url: '', type: 'file', name: 'test123' },
+                    id: '2',
+                    open: true,
+                    active: true,
+                    status: 'loaded'
+                }
+            ]);
+        }, 0);
+    });
+});
\ No newline at end of file
diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index f9c24b62..5a7566ff 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -28,7 +28,7 @@ export interface CollectionPanelFilesProps {
     currentItemUuid?: string;
 }
 
-type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button' | 'centeredLabel' | 'cardHeaderContent' | 'cardHeaderContentTitle';
+export type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button' | 'centeredLabel' | 'cardHeaderContent' | 'cardHeaderContentTitle';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     root: {
@@ -69,80 +69,77 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
     },
 });
 
+export const CollectionPanelFilesComponent = ({ onItemMenuOpen, onSearchChange, onOptionsMenuOpen, onUploadDataClick, classes,
+    isWritable, isLoading, tooManyFiles, loadFilesFunc, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) => {
+    const { useState, useEffect } = React;
+    const [searchValue, setSearchValue] = useState('');
 
+    useEffect(() => {
+        onSearchChange(searchValue);
+    }, [searchValue]);
 
-export const CollectionPanelFiles =
-    withStyles(styles)(
-        ({ onItemMenuOpen, onSearchChange, onOptionsMenuOpen, onUploadDataClick, classes,
-            isWritable, isLoading, tooManyFiles, loadFilesFunc, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) => {
-            const { useState, useEffect } = React;
-            const [searchValue, setSearchValue] = useState('');
+    return (<Card data-cy='collection-files-panel' className={classes.root}>
+        <CardHeader
+            title={
+                <div className={classes.cardHeaderContent}>
+                    <span className={classes.cardHeaderContentTitle}>Files</span>
+                    <SearchInput
+                        value={searchValue}
+                        onSearch={setSearchValue} />
+                </div>
+            }
+            className={classes.cardSubheader}
+            classes={{ action: classes.button }}
+            action={<>
+                {isWritable &&
+                    <Button
+                        data-cy='upload-button'
+                        onClick={onUploadDataClick}
+                        variant='contained'
+                        color='primary'
+                        size='small'>
+                        <DownloadIcon className={classes.uploadIcon} />
+                    Upload data
+                </Button>}
+                {!tooManyFiles &&
+                    <Tooltip title="More options" disableFocusListener>
+                        <IconButton
+                            data-cy='collection-files-panel-options-btn'
+                            onClick={(ev) => onOptionsMenuOpen(ev, isWritable)}>
+                            <CustomizeTableIcon />
+                        </IconButton>
+                    </Tooltip>}
+            </>
+            } />
+        {tooManyFiles
+            ? <div className={classes.centeredLabel}>
+                File listing may take some time, please click to browse: <Button onClick={loadFilesFunc}><DownloadIcon />Show files</Button>
+            </div>
+            : <>
+                <Grid container justify="space-between">
+                    <Typography variant="caption" className={classes.nameHeader}>
+                        Name
+                </Typography>
+                    <Typography variant="caption" className={classes.fileSizeHeader}>
+                        File size
+                </Typography>
+                </Grid>
+                {isLoading
+                    ? <div className={classes.centeredLabel}><CircularProgress /></div>
+                    : <div style={{ height: 'calc(100% - 60px)' }}>
+                        <FileTree
+                            onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)}
+                            {...treeProps}
+                            items={treeProps.items.filter((item) => {
+                                if (item.data.type === CollectionFileType.FILE) {
+                                    return item.data.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+                                }
 
-            useEffect(() => {
-                onSearchChange(searchValue);
-            }, [searchValue]);
-
-            return (<Card data-cy='collection-files-panel' className={classes.root}>
-                <CardHeader
-                    title={
-                        <div className={classes.cardHeaderContent}>
-                            <span className={classes.cardHeaderContentTitle}>Files</span>
-                            <SearchInput
-                                value={searchValue}
-                                onSearch={setSearchValue} />
-                        </div>
-                    }
-                    className={classes.cardSubheader}
-                    classes={{ action: classes.button }}
-                    action={<>
-                        {isWritable &&
-                            <Button
-                                data-cy='upload-button'
-                                onClick={onUploadDataClick}
-                                variant='contained'
-                                color='primary'
-                                size='small'>
-                                <DownloadIcon className={classes.uploadIcon} />
-                            Upload data
-                        </Button>}
-                        {!tooManyFiles &&
-                            <Tooltip title="More options" disableFocusListener>
-                                <IconButton
-                                    data-cy='collection-files-panel-options-btn'
-                                    onClick={(ev) => onOptionsMenuOpen(ev, isWritable)}>
-                                    <CustomizeTableIcon />
-                                </IconButton>
-                            </Tooltip>}
-                    </>
-                    } />
-                {tooManyFiles
-                    ? <div className={classes.centeredLabel}>
-                        File listing may take some time, please click to browse: <Button onClick={loadFilesFunc}><DownloadIcon />Show files</Button>
-                    </div>
-                    : <>
-                        <Grid container justify="space-between">
-                            <Typography variant="caption" className={classes.nameHeader}>
-                                Name
-                        </Typography>
-                            <Typography variant="caption" className={classes.fileSizeHeader}>
-                                File size
-                        </Typography>
-                        </Grid>
-                        {isLoading
-                            ? <div className={classes.centeredLabel}><CircularProgress /></div>
-                            : <div style={{ height: 'calc(100% - 60px)' }}>
-                                <FileTree
-                                    onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)}
-                                    {...treeProps}
-                                    items={treeProps.items.filter((item) => {
-                                        if (item.data.type === CollectionFileType.FILE) {
-                                            return item.data.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
-                                        }
-
-                                        return true;
-                                    })} /></div>}
-                    </>
-                }
-            </Card>);
+                                return true;
+                            })} /></div>}
+            </>
         }
-    );
+    </Card>);
+};
+
+export const CollectionPanelFiles = withStyles(styles)(CollectionPanelFilesComponent);