Merge pull request gchq#17 from jpelbertrios/gchqgh-7-ui-develop

Gh 07 ui develop

ui/jest.config.js

@@ -4,6 +4,14 @@ module.exports = {
     transform: {
       "^.+\\.tsx?$": "ts-jest"
     },
+    coverageThreshold: {
+      global: {
+        branches: 60,
+        functions: 70,
+        lines: 80,
+        statements: 80
+      }
+    },
     globals: {
       "ts-jest": {
         diagnostics: false

ui/test/components/AddGraph.test.tsx

@@ -1,9 +1,10 @@
 import {mount} from 'enzyme';
 import React from 'react';
 import AddGraph from "../../src/components/AddGraph/AddGraph";
-import Dropzone from 'react-dropzone'
-import {fireEvent, render} from '@testing-library/react'
+import {DropzoneArea} from 'material-ui-dropzone';
+
 const wrapper = mount(<AddGraph/>);
+
 describe('When AddGraph mounts', () => {
 
     it('should have a Graph Id text field', () => {
@@ -22,96 +23,35 @@ describe('When AddGraph mounts', () => {
         const submitButton = wrapper.find('button').at(2).text();
         expect(submitButton).toBe("Add Graph");
     });
-
-
 });
 describe('Dropzone behaviour', () => {
-    function flushPromises(ui: JSX.Element, container: any) {
-        return new Promise(resolve =>
-            setImmediate(() => {
-                render(ui, {container});
-                resolve(container)
-            })
-        )
-    }
-
-    function dispatchEvt(node: any, type: any, data: any) {
-        const event = new Event(type, {bubbles: true});
-        Object.assign(event, data);
-        fireEvent(node, event)
-    }
-
-    function mockData(files: Array<File>) {
-        return {
-            dataTransfer: {
-                files,
-                items: files.map(file => ({
-                    kind: 'file',
-                    type: file.type,
-                    getAsFile: () => file
-                })),
-                types: ['Files']
-            }
-        }
-    }
-
-    it('renders the root and input nodes with the necessary props', () => {
-        const {container} = render(
-            <Dropzone>
-                {({getRootProps, getInputProps}) => (
-                    <div {...getRootProps()}>
-                        <input {...getInputProps()} />
-                    </div>
-                )}
-            </Dropzone>
-        );
-        expect(container.innerHTML).toMatchSnapshot()
-    });
-    test('runs onDragEnter when a file is dragged in component', async () => {
-        const file = new File([
-            JSON.stringify({ping: true})
-        ], 'ping.json', {type: 'application/json'});
-        const data = mockData([file]);
-        const onDragEnter = jest.fn();
-
-        const ui = (
-            <Dropzone onDragEnter={onDragEnter}>
-                {({getRootProps, getInputProps}) => (
-                    <div {...getRootProps()}>
-                        <input {...getInputProps()} />
-                    </div>
-                )}
-            </Dropzone>
+    it("should fire onChange handler", () => {
+        const handleDropzoneChange = jest.fn();
+        const dzwrapper = mount(
+            <DropzoneArea
+            showPreviews={true}
+            onChange={handleDropzoneChange}
+
+
+            showPreviewsInDropzone={false}
+            useChipsForPreview
+
+            previewText="Selected files"
+            clearOnUnmount={true}
+            acceptedFiles={['application/json']}
+            filesLimit={1}
+        />
         );
-        const {container} = render(ui);
-        const dropzone = container.querySelector('div');
-
-        dispatchEvt(dropzone, 'dragenter', data);
-        await flushPromises(ui, container);
-
-        expect(onDragEnter).toHaveBeenCalled()
-    });
-    it('runs onChange when a change happens in the component', () => {
-        const inputProps = {
-            onChange: jest.fn()
-        };
-
-        const ui = (
-            <Dropzone>
-                {({ getRootProps, getInputProps }) => (
-                    <div {...getRootProps()}>
-                        <input {...getInputProps(inputProps)} />
-                    </div>
-                )}
-            </Dropzone>
-        );
-
-        const { container } = render(ui);
-        const input = container.querySelector('input');
-
-        fireEvent.change(input);
-        expect(inputProps.onChange).toHaveBeenCalled()
-    })
+        // find the DropzoneArea node
+        const dropzoneAreaWrapper = dzwrapper.find(DropzoneArea);
+        // call its onChange prop
+        dropzoneAreaWrapper.prop('onChange')();
+        // check handleDropzoneChange has been called
+        expect(handleDropzoneChange).toHaveBeenCalled();
+      });
+
+
+
     it('should have an input that accepts files', () => {
 
         const dropZone= wrapper.find('input').at(1);
@@ -122,6 +62,7 @@ describe('Dropzone behaviour', () => {
         const dropZone= wrapper.find('input').at(1);
         expect(dropZone.props().accept).toBe('application/json')
     })
-
+
+
 
 });

ui/test/components/UserGuide.test.tsx

@@ -2,7 +2,9 @@ import {mount} from 'enzyme';
 import React from 'react';
 import UserGuide from "../../src/components/UserGuide/UserGuide";
 import ReactJson from "react-json-view";
+
 const wrapper = mount(<UserGuide/>);
+
 const exampleJSON= {
     "elements": {
         "edges": {
@@ -54,13 +56,8 @@ describe('When UserGuide mounts', () => {
         const exampleSchema = wrapper.find('div.react-json-view');
 
         const display= mount(<ReactJson src={exampleJSON} theme="summerfruit:inverted" displayDataTypes={false} displayObjectSize={false} name={"schema"}/>)
+
         expect(exampleSchema).toHaveLength(1);
         expect(exampleSchema.html()).toBe(display.html())
-
     });
-
-
-
-
-
-});
+});