src/components/collection-panel-files/collection-panel-files.test.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from "react";
   6 import { configure, shallow, mount } from "enzyme";
   7 import { WithStyles } from "@material-ui/core";
   8 import * as Adapter from "enzyme-adapter-react-16";
   9 import { TreeItem, TreeItemStatus } from '../tree/tree';
  10 import { FileTreeData } from '../file-tree/file-tree-data';
  11 import { CollectionFileType } from "../../models/collection-file";
  12 import { CollectionPanelFilesComponent, CollectionPanelFilesProps, CssRules } from './collection-panel-files';
  13 import { SearchInput } from '../search-input/search-input';
  14
  15 configure({ adapter: new Adapter() });
  16
  17 jest.mock('~/components/file-tree/file-tree', () => ({
  18     FileTree: () => 'FileTree',
  19 }));
  20
  21 describe('<CollectionPanelFiles />', () => {
  22     let props: CollectionPanelFilesProps & WithStyles<CssRules>;
  23
  24     beforeEach(() => {
  25         props = {
  26             classes: {} as Record<CssRules, string>,
  27             items: [],
  28             isWritable: true,
  29             isLoading: false,
  30             tooManyFiles: false,
  31             onUploadDataClick: jest.fn(),
  32             onSearchChange: jest.fn(),
  33             onItemMenuOpen: jest.fn(),
  34             onOptionsMenuOpen: jest.fn(),
  35             onSelectionToggle: jest.fn(),
  36             onCollapseToggle: jest.fn(),
  37             onFileClick: jest.fn(),
  38             loadFilesFunc: jest.fn(),
  39             currentItemUuid: '',
  40         };
  41     });
  42
  43     it('renders properly', () => {
  44         // when
  45         const wrapper = shallow(<CollectionPanelFilesComponent {...props} />);
  46
  47         // then
  48         expect(wrapper).not.toBeUndefined();
  49     });
  50
  51     it('filters out files', () => {
  52         // given
  53         const searchPhrase = 'test';
  54         const items: Array<TreeItem<FileTreeData>> = [
  55             {
  56                 data: {
  57                     url: '',
  58                     type: CollectionFileType.DIRECTORY,
  59                     name: 'test',
  60                 },
  61                 id: '1',
  62                 open: true,
  63                 active: true,
  64                 status: TreeItemStatus.LOADED,
  65             },
  66             {
  67                 data: {
  68                     url: '',
  69                     type: CollectionFileType.FILE,
  70                     name: 'test123',
  71                 },
  72                 id: '2',
  73                 open: true,
  74                 active: true,
  75                 status: TreeItemStatus.LOADED,
  76             },
  77             {
  78                 data: {
  79                     url: '',
  80                     type: CollectionFileType.FILE,
  81                     name: 'another-file',
  82                 },
  83                 id: '3',
  84                 open: true,
  85                 active: true,
  86                 status: TreeItemStatus.LOADED,
  87             }
  88         ];
  89
  90         // setup
  91         props.items = items;
  92         const wrapper = mount(<CollectionPanelFilesComponent {...props} />);
  93         wrapper.find(SearchInput).simulate('change', { target: { value: searchPhrase } });
  94
  95         // when
  96         setTimeout(() => { // we have to use set timeout because of the debounce
  97             expect(wrapper.find('FileTree').prop('items'))
  98             .toEqual([
  99                 {
 100                     data: { url: '', type: 'directory', name: 'test' },
 101                     id: '1',
 102                     open: true,
 103                     active: true,
 104                     status: 'loaded'
 105                 },
 106                 {
 107                     data: { url: '', type: 'file', name: 'test123' },
 108                     id: '2',
 109                     open: true,
 110                     active: true,
 111                     status: 'loaded'
 112                 }
 113             ]);
 114         }, 0);
 115     });
 116 });