Tests for all Components

src/elements/NewTagPopup/NewTagPopup.js

@@ -0,0 +1,65 @@
+import React from "react";
+import Modal from 'react-bootstrap/Modal'
+import {Form} from "react-bootstrap";
+
+class NewTagPopup extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+        this.props = props;
+    }
+
+    render() {
+        return (
+            <>
+                <Modal
+                    show={this.props.show}
+                    onHide={this.props.onHide}
+                    size="lg"
+                    aria-labelledby="contained-modal-title-vcenter"
+                    centered>
+                    <Modal.Header closeButton>
+                        <Modal.Title id="contained-modal-title-vcenter">
+                            Create a new Tag!
+                        </Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        <Form.Group>
+                            <Form.Label>Tag Name:</Form.Label>
+                            <Form.Control id='namefield' type="text" placeholder="Enter Tag name" onChange={(v) => {
+                                this.value = v.target.value
+                            }}/>
+                            <Form.Text className="text-muted">
+                                This Tag will automatically show up on category page.
+                            </Form.Text>
+                        </Form.Group>
+                    </Modal.Body>
+                    <Modal.Footer>
+                        <button className='btn btn-primary' onClick={() => {
+                            this.storeselection();
+                        }}>Add
+                        </button>
+                    </Modal.Footer>
+                </Modal>
+            </>
+        );
+    }
+
+    storeselection() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'createTag');
+        updateRequest.append('tagname', this.value);
+
+        fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json())
+            .then((result) => {
+                if (result.result !== "success") {
+                    console.log("error occured while writing to db -- todo error handling");
+                    console.log(result.result);
+                }
+                this.props.onHide();
+            });
+    }
+}
+
+export default NewTagPopup;

src/elements/NewTagPopup/NewTagPopup.test.js

@@ -0,0 +1,41 @@
+import React from "react";
+
+import {shallow} from 'enzyme'
+import "@testing-library/jest-dom"
+import NewTagPopup from "./NewTagPopup";
+
+describe('<NewTagPopup/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<NewTagPopup/>);
+        wrapper.unmount();
+    });
+
+    it('test storeseletion click event', done => {
+        const mockSuccessResponse = {};
+        const mockJsonPromise = Promise.resolve(mockSuccessResponse);
+        const mockFetchPromise = Promise.resolve({
+            json: () => mockJsonPromise,
+        });
+        global.fetch = jest.fn().mockImplementation(() => mockFetchPromise);
+
+        const func = jest.fn();
+
+        const wrapper = shallow(<NewTagPopup/>);
+        wrapper.setProps({
+            onHide: () => {
+                func()
+            }
+        });
+
+        wrapper.find('ModalFooter').find('button').simulate('click');
+        expect(global.fetch).toHaveBeenCalledTimes(1);
+
+        process.nextTick(() => {
+            //callback to close window should have called
+            expect(func).toHaveBeenCalledTimes(1);
+
+            global.fetch.mockClear();
+            done();
+        });
+    });
+});