use enzyme library for testing updated some tests

new test for newtag component

package.json

@@ -3,11 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
     "bootstrap": "^4.5.0",
-    "jest-junit": "^10.0.0",
     "plyr-react": "^2.2.0",
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.1",
@@ -49,6 +45,11 @@
     ]
   },
   "devDependencies": {
-    "react-test-renderer": "^16.13.1"
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "jest-junit": "^10.0.0"
   }
 }

src/App.test.js

@@ -1,28 +1,20 @@
 import React from 'react';
-import { render } from '@testing-library/react';
 import App from './App';
-import ReactDom from "react-dom";
+import {shallow} from 'enzyme'
 
 describe('<App/>', function () {
   it('renders without crashing ', function () {
-    const div = document.createElement("div");
+    const wrapper = shallow(<App/>);
-    ReactDom.render(<App/>,div);
+    wrapper.unmount();
-    ReactDom.unmountComponentAtNode(div);
   });
 
   it('renders title', () => {
-    const { getByText } = render(<App />);
+    const wrapper = shallow(<App/>);
-    const linkElement = getByText(/Home Page/i);
+    expect(wrapper.find('.navbar-brand').text()).toBe('OpenMediaCenter');
-    expect(linkElement).toBeInTheDocument();
   });
 
   it('are navlinks correct', function () {
-    const { getByText } = render(<App />);
+    const wrapper = shallow(<App/>);
-    const randomElement = getByText(/Random Video/i);
+    expect(wrapper.find('nav').find('li')).toHaveLength(4);
-    const categoryElement = getByText(/Categories/i);
-    const settingsElement = getByText(/Settings/i);
-    expect(randomElement).toBeInTheDocument();
-    expect(categoryElement).toBeInTheDocument();
-    expect(settingsElement).toBeInTheDocument();
   });
 });

src/elements/AddTagPopup/AddTagPopup.js

@@ -75,14 +75,14 @@ class AddTagPopup extends React.Component {
         updateRequest.append('movieid', this.props.movie_id);
 
         fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
-            .then((response) => response.json())
+            .then((response) => response.json()
-            .then((result) => {
+                .then((result) => {
-                if (result.result !== "success") {
+                    if (result.result !== "success") {
-                    console.log("error occured while writing to db -- todo error handling");
+                        console.log("error occured while writing to db -- todo error handling");
-                    console.log(result.result);
+                        console.log(result.result);
-                }
+                    }
-                this.props.onHide();
+                    this.props.onHide();
-            });
+                }));
     }
 }
 

src/elements/AddTagPopup/AddTagPopup.test.js

@@ -1,17 +1,60 @@
 import React from "react";
-import ReactDom from 'react-dom'
 
-import {render, cleanup} from '@testing-library/react'
+import {shallow} from 'enzyme'
 import "@testing-library/jest-dom"
 
 import AddTagPopup from "./AddTagPopup";
 
-afterEach(cleanup);
-
 describe('<AddTagPopup/>', function () {
     it('renders without crashing ', function () {
-        const div = document.createElement("div");
+        const wrapper = shallow(<AddTagPopup/>);
-        ReactDom.render(<AddTagPopup/>,div);
+        wrapper.unmount();
-        ReactDom.unmountComponentAtNode(div);
+    });
+
+    it('test dropdown insertion', function () {
+        const wrapper = shallow(<AddTagPopup/>);
+        wrapper.setState({items: ["test1", "test2", "test3"]});
+        expect(wrapper.find('DropdownItem')).toHaveLength(3);
+    });
+
+    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(<AddTagPopup/>);
+        wrapper.setProps({
+            onHide: () => {
+                func()
+            }
+        });
+
+        wrapper.setState({
+            items: ["test1", "test2", "test3"],
+            selection: {
+                name: "test1",
+                id: 42
+            }
+        });
+
+        // first call of fetch is getting of available tags
+        expect(global.fetch).toHaveBeenCalledTimes(1);
+        wrapper.find('ModalFooter').find('button').simulate('click');
+
+        // now called 2 times
+        expect(global.fetch).toHaveBeenCalledTimes(2);
+
+        process.nextTick(() => {
+            //callback to close window should have called
+            expect(func).toHaveBeenCalledTimes(1);
+
+            global.fetch.mockClear();
+            done();
+        });
     });
 });

src/elements/SideBar/SideBar.test.js

@@ -1,20 +1,17 @@
 import React from "react";
-import ReactDom from 'react-dom'
 import SideBar from "./SideBar";
 
-import {render} from '@testing-library/react'
 import "@testing-library/jest-dom"
+import {shallow} from "enzyme";
 
 describe('<SideBar/>', function () {
     it('renders without crashing ', function () {
-        const div = document.createElement("div");
+        const wrapper = shallow(<SideBar/>);
-        ReactDom.render(<SideBar/>,div);
+        wrapper.unmount();
-        ReactDom.unmountComponentAtNode(div);
     });
 
     it('renders childs correctly', function () {
-        const {getByText} = render(<SideBar>test</SideBar>);
+        const wrapper = shallow(<SideBar>test</SideBar>);
-        const randomElement = getByText(/test/i);
+        expect(wrapper.children().text()).toBe("test");
-        expect(randomElement).toBeInTheDocument();
     });
 });

src/elements/Tag/Tag.js

@@ -3,7 +3,6 @@ import React from "react";
 import "./Tag.css"
 
 class Tag extends React.Component {
-
     constructor(props, context) {
         super(props, context);
 

src/elements/Tag/Tag.test.js

@@ -1,19 +1,17 @@
 import React from "react";
-import ReactDom from 'react-dom'
 import Tag from './Tag'
 
-import {render} from '@testing-library/react'
 import "@testing-library/jest-dom"
+import {shallow} from 'enzyme'
 
 describe('<Tag/>', function () {
     it('renders without crashing ', function () {
-        const div = document.createElement("div");
+        const wrapper = shallow(<Tag>test</Tag>);
-        ReactDom.render(<Tag/>,div);
+        wrapper.unmount();
-        ReactDom.unmountComponentAtNode(div);
     });
 
     it('renders childs correctly', function () {
-        const {getByTestId} = render(<Tag>test</Tag>);
+        const wrapper = shallow(<Tag>test</Tag>);
-        expect(getByTestId("Test-Tag")).toHaveTextContent("test");
+        expect(wrapper.children().text()).toBe("test");
     });
 });

src/setupTests.js

@@ -3,3 +3,8 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect';
+
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });