[ARVADOS-WORKBENCH2] updated: 1.4.1-425-g0c1fb93d
Git user
git at public.arvados.org
Mon Sep 14 18:11:39 UTC 2020
Summary of changes:
.../collection-panel-files.test.tsx | 116 +++++++++++++++++
.../collection-panel-files.tsx | 145 ++++++++++-----------
2 files changed, 187 insertions(+), 74 deletions(-)
create mode 100644 src/components/collection-panel-files/collection-panel-files.test.tsx
via 0c1fb93d6aa22e4f3e7bd9b857b7b4e953d2f763 (commit)
from 22821296e913d4be63d4a40c33e7c28c5582cdd5 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 0c1fb93d6aa22e4f3e7bd9b857b7b4e953d2f763
Author: Daniel Kutyła <daniel.kutyla at contractors.roche.com>
Date: Sat Sep 12 00:41:59 2020 +0200
16243: Added tests
Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla at 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);
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list