React file explorer

__test__/CanvasComponent.spec.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import isUUID from 'validator/lib/isUUID';
 import { mount } from 'enzyme';
-
 import { wrapInTestContext } from './__mocks__/dndReduxMock';
 import { getMockStore, getCanvasProps } from './__mocks__/reduxStoreMock';
 import CanvasComponent from '../src/components/CanvasComponent';

__test__/FileExplorer.spec.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { getMockStore } from './__mocks__/reduxStoreMock';
+import FileExplorerComponent from '../src/components/FileExplorer';
+import { wrapInTestContext } from './__mocks__/dndReduxMock';
+import TreeView from '@material-ui/lab/TreeView';
+import mock from 'mock-fs';
+
+describe('FileExplorerComponent', () => {
+    beforeAll(() => {
+        mock({
+            withchildren: {
+                testdir: {},
+                test: mock.file({ content: 'file contents', ctime: new Date(1) })
+            }
+        });
+    });
+    afterAll(mock.restore);
+
+    const domElement = document.getElementById('app');
+    const mountOptions = {
+        attachTo: domElement,
+    };
+    const store = getMockStore();
+
+    it('FileExplorer should render exactly one file explorer component', () => {
+        const FileExplorerContext = wrapInTestContext(FileExplorerComponent, store);
+        const wrapper = mount(<FileExplorerContext metaDirId={'99'} />, mountOptions);
+        const component = wrapper.find(FileExplorerComponent).first();
+        expect(component).toBeDefined();
+        expect(component).toHaveLength(1);
+    });
+
+    it('FileExplorer should render exactly one tree view component', () => {
+        const FileExplorerContext = wrapInTestContext(FileExplorerComponent, store);
+        const wrapper = mount(<FileExplorerContext metaDirId={'99'} />, mountOptions);
+        const component = wrapper.find(TreeView).first();
+        expect(component).toBeDefined();
+        expect(component).toHaveLength(1);
+    });
+
+    it('FileExplorer should correctly render root with no children', () => {
+        const FileExplorerContext = wrapInTestContext(FileExplorerComponent, store);
+        const wrapper = mount(<FileExplorerContext metaDirId={'99'} />, mountOptions);
+        const component = wrapper.find(TreeView).first();
+        expect(component.html()).toContain('tree');
+        expect(component.html()).toContain('MuiTreeView-root');
+        expect(component.html()).toContain('MuiTreeItem-root');
+        expect(component.html()).toContain('treeitem');
+        expect(component.html()).toContain('testdir');
+    });
+
+    it('FileExplorer should correctly render root with children', () => {
+        const FileExplorerContext = wrapInTestContext(FileExplorerComponent, store);
+        const wrapper = mount(<FileExplorerContext metaDirId={'24'} />, mountOptions);
+        const component = wrapper.find(TreeView).first();
+        expect(component.html()).toContain('tree');
+        expect(component.html()).toContain('MuiTreeView-root');
+        expect(component.html()).toContain('MuiTreeItem-root');
+        expect(component.html()).toContain('treeitem');
+        expect(component.html()).toContain('withchildren');
+    });
+});

__test__/FolderPicker.spec.tsx

@@ -0,0 +1,17 @@
+import FolderPicker from '../src/components/FolderPicker';
+import { createStore } from 'redux';
+import { rootReducer } from '../src/store/root';
+import { wrapInTestContext } from './__mocks__/dndReduxMock';
+import React from 'react';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+
+describe('FolderPicker', () => {
+    it('FolderPicker allows users to pick a directory for opening', () => {
+        const store = createStore(rootReducer);
+        const FolderPickerContext = wrapInTestContext(FolderPicker, store);
+        const ref = React.createRef();
+        const enzymeWrapper = mount(<Provider store={store}><FolderPickerContext ref={ref} /></Provider>);
+        expect(enzymeWrapper.find(FolderPicker)).toHaveLength(1);
+    });
+});

__test__/RenderTree.spec.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import RenderTree from '../src/components/RenderTree';
+import { Metadir } from '../src/types';
+
+describe('RenderTree', () => {
+    const handleClick = async (e: React.MouseEvent) => {
+        e.preventDefault();
+    }
+
+    const oneFoneD: Metadir = {
+        id: "24",
+        name: "withchildren",
+        path: "withchildren",
+        containsDir: ["withchildren/testdir"],
+        containsFile: ["withchildren/test"]
+    };
+    const noChildren: Metadir = {
+        id: "99",
+        name: "testdir",
+        path: "withchildren/testdir",
+        containsDir: [],
+        containsFile: []
+    };
+    const oneFnoD: Metadir = {
+        id: "63",
+        name: "withOneFile",
+        path: "noFoneD/withOneFile",
+        containsDir: [],
+        containsFile: ["withOneFile/foo"]
+    }
+    const noFoneD: Metadir = {
+        id: "2",
+        name: "withOneDir",
+        path: "withOneDir",
+        containsDir: ["noFoneD/withOneFile"],
+        containsFile: []
+    }
+    const metadirs: Metadir[] = [];
+    metadirs.push(oneFoneD);
+    metadirs.push(noChildren);
+    metadirs.push(oneFnoD);
+    metadirs.push(noFoneD);
+
+    it('RenderTree should return a valid JSX element for an empty directory', () => {
+        const component = RenderTree(noChildren, metadirs, handleClick);
+        expect(component).toBeDefined();
+        expect(component.key).toEqual("99");
+        expect(component.props.children[0]).toHaveLength(0);
+        expect(component.props.children[1]).toHaveLength(0);
+        expect(component.props.label).toEqual("testdir");
+        expect(component.props.nodeId).toEqual("99");
+    });
+
+    it('RenderTree should create a valid JSX element for a directory with one folder and one file', () => {
+        const component = RenderTree(oneFoneD, metadirs, handleClick);
+        expect(component).toBeDefined();
+        expect(component.key).toEqual("24");
+        expect(component.props.children[0]).toHaveLength(1);
+        expect(component.props.children[1]).toHaveLength(1);
+        expect(component.props.label).toEqual("withchildren");
+        expect(component.props.nodeId).toEqual("24");
+    });
+
+    it('RenderTree should create a valid JSX element for a directory with one file', () => {
+        const component = RenderTree(oneFnoD, metadirs, handleClick);
+        expect(component).toBeDefined();
+        expect(component.key).toEqual("63");
+        expect(component.props.children[0]).toHaveLength(0);
+        expect(component.props.children[1]).toHaveLength(1);
+        expect(component.props.label).toEqual("withOneFile");
+        expect(component.props.nodeId).toEqual("63");
+    });
+
+    it('RenderTree should create a valid JSX element for a directory with one directory', () => {
+        const component = RenderTree(noFoneD, metadirs, handleClick);
+        expect(component).toBeDefined();
+        expect(component.key).toEqual("2");
+        expect(component.props.children[1]).toHaveLength(0);
+        expect(component.props.children[0]).toHaveLength(1);
+        expect(component.props.label).toEqual("withOneDir");
+        expect(component.props.nodeId).toEqual("2");
+    });
+});

__test__/__mocks__/reduxStoreMock.ts

@@ -2,7 +2,7 @@ import { DateTime } from 'luxon';
 import { v4 } from 'uuid';
 import parsePath from 'parse-path';
 
-import { Canvas, Stack, Card, Filetype, Metafile, Repository } from '../../src/types';
+import { Canvas, Stack, Card, Filetype, Metafile, Repository, Metadir } from '../../src/types';
 import { createStore } from 'redux';
 import { rootReducer } from '../../src/store/root';
 
@@ -13,6 +13,7 @@ type initStateT = {
   filetypes: { [id: string]: Filetype };
   metafiles: { [id: string]: Metafile };
   repos: { [id: string]: Repository };
+  metadirs: { [id: string]: Metadir };
 }
 const validCardUUID = v4();
 const initialState: initStateT = {
@@ -93,6 +94,22 @@ const initialState: initStateT = {
       password: 'pass123',
       token: '934394304234231'
     }
+  },
+  metadirs: {
+    99: {
+      id: '99',
+      name: 'testdir',
+      path: 'withchildren/testdir',
+      containsDir: [],
+      containsFile: []
+    },
+    24: {
+      id: '24',
+      name: 'withchildren',
+      path: 'withchildren',
+      containsDir: ["withchildren/testdir"],
+      containsFile: ['withchildren/test']
+    }
   }
 };
 

__test__/explorer.spec.ts

@@ -0,0 +1,47 @@
+import { generateFileTreeActions } from '../src/containers/explorer';
+import mock from 'mock-fs';
+
+describe('explorer.generateTreeNodeObject', () => {
+
+    beforeAll(() => {
+        mock({
+            foo: {
+                bar: mock.file({ content: 'file contents', ctime: new Date(1) }),
+                baz: mock.file({ content: 'file contents', ctime: new Date(1) }),
+                zap: {
+                    zed: {
+                        beq: mock.file({ content: 'file contents', ctime: new Date(1) }),
+                        bup: mock.file({ content: 'file contents', ctime: new Date(1) })
+                    },
+                    zip: mock.file({ content: 'file contents', ctime: new Date(1) }),
+                }
+            },
+            zonk: {
+                zork: mock.file({ content: 'file contents', ctime: new Date(1) }),
+            },
+            imp: {
+                bamp: {},
+            },
+            empty: {},
+        });
+    });
+
+    afterAll(mock.restore);
+
+    it('generateFileTreeActions parses a directory populated with directories and files', () => {
+        return expect(generateFileTreeActions('foo')).resolves.toHaveLength(8);
+    });
+
+    it('generateFileTreeActions parses a directory with one file', () => {
+        return expect(generateFileTreeActions('zonk')).resolves.toHaveLength(2);
+    });
+
+    it('generateFileTreeActions parses a directory with one directory', () => {
+        return expect(generateFileTreeActions('imp')).resolves.toHaveLength(2);
+    });
+
+    it('generateFileTreeActions parses an empty directory', () => {
+        return expect(generateFileTreeActions('empty')).resolves.toHaveLength(1);
+    });
+
+});

__test__/extractFileTreeNames.spec.ts

@@ -0,0 +1,31 @@
+import mock from 'mock-fs';
+import { extractFileTreeNames } from '../src/containers/filetree';
+
+describe('extractFileTreeActions', () => {
+
+  beforeAll(() => {
+    mock({
+      foo: {
+        bar: mock.file({ content: 'file contents', ctime: new Date(1) }),
+        baz: mock.file({ content: 'file contents', ctime: new Date(1) }),
+        zap: {
+          zed: {
+            beq: mock.file({ content: 'file contents', ctime: new Date(1) }),
+            bup: mock.file({ content: 'file contents', ctime: new Date(1) })
+          },
+          zip: mock.file({ content: 'file contents', ctime: new Date(1) }),
+        }
+      }
+    });
+  });
+
+  afterAll(mock.restore);
+
+  it('extractFileTreeNames locates direct descendant subfiles and subdirectories', async () => {
+    return expect(extractFileTreeNames('foo/zap/zed/')).resolves.toHaveLength(3);
+  });
+
+  it('extractFileTreeNames locates all subfiles and subdirectories in a file tree', async () => {
+    return expect(extractFileTreeNames('foo/')).resolves.toHaveLength(8);
+  });
+});