From 751e09f54b4c44316dbb02f9d61e48652f897ecc Mon Sep 17 00:00:00 2001 From: lukas Date: Wed, 10 Jun 2020 15:41:41 +0200 Subject: [PATCH] use enzyme library for testing updated some tests new test for newtag component --- package.json | 11 ++-- src/App.test.js | 22 +++----- src/elements/AddTagPopup/AddTagPopup.js | 16 +++--- src/elements/AddTagPopup/AddTagPopup.test.js | 57 +++++++++++++++++--- src/elements/SideBar/SideBar.test.js | 13 ++--- src/elements/Tag/Tag.js | 1 - src/elements/Tag/Tag.test.js | 12 ++--- src/setupTests.js | 5 ++ 8 files changed, 86 insertions(+), 51 deletions(-) diff --git a/package.json b/package.json index 76d5c51..e2c5e69 100644 --- a/package.json +++ b/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" } } diff --git a/src/App.test.js b/src/App.test.js index 2092a39..75302a0 100644 --- a/src/App.test.js +++ b/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('', function () { it('renders without crashing ', function () { - const div = document.createElement("div"); - ReactDom.render(,div); - ReactDom.unmountComponentAtNode(div); + const wrapper = shallow(); + wrapper.unmount(); }); it('renders title', () => { - const { getByText } = render(); - const linkElement = getByText(/Home Page/i); - expect(linkElement).toBeInTheDocument(); + const wrapper = shallow(); + expect(wrapper.find('.navbar-brand').text()).toBe('OpenMediaCenter'); }); it('are navlinks correct', function () { - const { getByText } = render(); - const randomElement = getByText(/Random Video/i); - const categoryElement = getByText(/Categories/i); - const settingsElement = getByText(/Settings/i); - expect(randomElement).toBeInTheDocument(); - expect(categoryElement).toBeInTheDocument(); - expect(settingsElement).toBeInTheDocument(); + const wrapper = shallow(); + expect(wrapper.find('nav').find('li')).toHaveLength(4); }); }); diff --git a/src/elements/AddTagPopup/AddTagPopup.js b/src/elements/AddTagPopup/AddTagPopup.js index 7f0d2fa..d49ecfd 100644 --- a/src/elements/AddTagPopup/AddTagPopup.js +++ b/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((result) => { - if (result.result !== "success") { - console.log("error occured while writing to db -- todo error handling"); - console.log(result.result); - } - this.props.onHide(); - }); + .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(); + })); } } diff --git a/src/elements/AddTagPopup/AddTagPopup.test.js b/src/elements/AddTagPopup/AddTagPopup.test.js index 96df887..2feec36 100644 --- a/src/elements/AddTagPopup/AddTagPopup.test.js +++ b/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('', function () { it('renders without crashing ', function () { - const div = document.createElement("div"); - ReactDom.render(,div); - ReactDom.unmountComponentAtNode(div); + const wrapper = shallow(); + wrapper.unmount(); + }); + + it('test dropdown insertion', function () { + const wrapper = shallow(); + 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(); + 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(); + }); }); }); diff --git a/src/elements/SideBar/SideBar.test.js b/src/elements/SideBar/SideBar.test.js index a9b0b70..1b8a8b8 100644 --- a/src/elements/SideBar/SideBar.test.js +++ b/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('', function () { it('renders without crashing ', function () { - const div = document.createElement("div"); - ReactDom.render(,div); - ReactDom.unmountComponentAtNode(div); + const wrapper = shallow(); + wrapper.unmount(); }); it('renders childs correctly', function () { - const {getByText} = render(test); - const randomElement = getByText(/test/i); - expect(randomElement).toBeInTheDocument(); + const wrapper = shallow(test); + expect(wrapper.children().text()).toBe("test"); }); }); diff --git a/src/elements/Tag/Tag.js b/src/elements/Tag/Tag.js index 1f6f169..1990a72 100644 --- a/src/elements/Tag/Tag.js +++ b/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); diff --git a/src/elements/Tag/Tag.test.js b/src/elements/Tag/Tag.test.js index 0605251..4ee9886 100644 --- a/src/elements/Tag/Tag.test.js +++ b/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('', function () { it('renders without crashing ', function () { - const div = document.createElement("div"); - ReactDom.render(,div); - ReactDom.unmountComponentAtNode(div); + const wrapper = shallow(test); + wrapper.unmount(); }); it('renders childs correctly', function () { - const {getByTestId} = render(test); - expect(getByTestId("Test-Tag")).toHaveTextContent("test"); + const wrapper = shallow(test); + expect(wrapper.children().text()).toBe("test"); }); }); diff --git a/src/setupTests.js b/src/setupTests.js index 74b1a27..0a7217a 100644 --- a/src/setupTests.js +++ b/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() });