From e95dd62ffd64d4df2f91ffc92915bb9c06eaa0a7 Mon Sep 17 00:00:00 2001 From: Lukas Heiligenbrunner Date: Fri, 12 Jun 2020 15:57:30 +0000 Subject: [PATCH] Tests for all Components --- src/App.js | 8 +- src/App.test.js | 24 +-- src/css/index.css | 7 +- src/elements/{ => NewTagPopup}/NewTagPopup.js | 6 +- src/elements/NewTagPopup/NewTagPopup.test.js | 41 +++++ src/{css => elements/Preview}/Preview.css | 2 +- src/elements/{ => Preview}/Preview.js | 20 +-- src/elements/Preview/Previw.test.js | 107 +++++++++++++ src/elements/Tag/Tag.js | 3 +- .../{ => VideoContainer}/VideoContainer.js | 2 +- .../VideoContainer/VideoContainer.test.js | 30 ++++ src/index.js | 6 - src/pages/{ => CategoryPage}/CategoryPage.js | 14 +- src/pages/CategoryPage/CategoryPage.test.js | 107 +++++++++++++ src/{css => pages/HomePage}/HomePage.css | 0 src/pages/{ => HomePage}/HomePage.js | 14 +- src/pages/HomePage/HomePage.test.js | 58 +++++++ src/{css => pages/Player}/Player.css | 2 +- src/pages/{ => Player}/Player.js | 26 ++-- src/pages/Player/Player.test.js | 128 ++++++++++++++++ src/{css => pages/RandomPage}/RandomPage.css | 4 +- src/pages/{ => RandomPage}/RandomPage.js | 8 +- src/pages/RandomPage/RandomPage.test.js | 49 ++++++ src/pages/{ => SettingsPage}/SettingsPage.js | 12 +- src/pages/SettingsPage/SettingsPage.test.js | 41 +++++ src/serviceWorker.js | 141 ------------------ src/setupTests.js | 4 +- 27 files changed, 639 insertions(+), 225 deletions(-) rename src/elements/{ => NewTagPopup}/NewTagPopup.js (91%) create mode 100644 src/elements/NewTagPopup/NewTagPopup.test.js rename src/{css => elements/Preview}/Preview.css (97%) rename src/elements/{ => Preview}/Preview.js (85%) create mode 100644 src/elements/Preview/Previw.test.js rename src/elements/{ => VideoContainer}/VideoContainer.js (97%) create mode 100644 src/elements/VideoContainer/VideoContainer.test.js rename src/pages/{ => CategoryPage}/CategoryPage.js (85%) create mode 100644 src/pages/CategoryPage/CategoryPage.test.js rename src/{css => pages/HomePage}/HomePage.css (100%) rename src/pages/{ => HomePage}/HomePage.js (94%) create mode 100644 src/pages/HomePage/HomePage.test.js rename src/{css => pages/Player}/Player.css (97%) rename src/pages/{ => Player}/Player.js (90%) create mode 100644 src/pages/Player/Player.test.js rename src/{css => pages/RandomPage}/RandomPage.css (89%) rename src/pages/{ => RandomPage}/RandomPage.js (92%) create mode 100644 src/pages/RandomPage/RandomPage.test.js rename src/pages/{ => SettingsPage}/SettingsPage.js (87%) create mode 100644 src/pages/SettingsPage/SettingsPage.test.js delete mode 100644 src/serviceWorker.js diff --git a/src/App.js b/src/App.js index 72b5c03..d5009d5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,12 @@ import React from 'react'; import "./css/App.css" -import HomePage from "./pages/HomePage"; -import RandomPage from "./pages/RandomPage"; +import HomePage from "./pages/HomePage/HomePage"; +import RandomPage from "./pages/RandomPage/RandomPage"; // include bootstraps css import 'bootstrap/dist/css/bootstrap.min.css'; -import SettingsPage from "./pages/SettingsPage"; -import CategoryPage from "./pages/CategoryPage"; +import SettingsPage from "./pages/SettingsPage/SettingsPage"; +import CategoryPage from "./pages/CategoryPage/CategoryPage"; class App extends React.Component { constructor(props, context) { diff --git a/src/App.test.js b/src/App.test.js index 75302a0..99d175c 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -3,18 +3,18 @@ import App from './App'; import {shallow} from 'enzyme' describe('', function () { - it('renders without crashing ', function () { - const wrapper = shallow(); - wrapper.unmount(); - }); + it('renders without crashing ', function () { + const wrapper = shallow(); + wrapper.unmount(); + }); - it('renders title', () => { - const wrapper = shallow(); - expect(wrapper.find('.navbar-brand').text()).toBe('OpenMediaCenter'); - }); + it('renders title', () => { + const wrapper = shallow(); + expect(wrapper.find('.navbar-brand').text()).toBe('OpenMediaCenter'); + }); - it('are navlinks correct', function () { - const wrapper = shallow(); - expect(wrapper.find('nav').find('li')).toHaveLength(4); - }); + it('are navlinks correct', function () { + const wrapper = shallow(); + expect(wrapper.find('nav').find('li')).toHaveLength(4); + }); }); diff --git a/src/css/index.css b/src/css/index.css index da92873..d9d3047 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -5,9 +5,4 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} +} \ No newline at end of file diff --git a/src/elements/NewTagPopup.js b/src/elements/NewTagPopup/NewTagPopup.js similarity index 91% rename from src/elements/NewTagPopup.js rename to src/elements/NewTagPopup/NewTagPopup.js index 1c96dbb..13e5710 100644 --- a/src/elements/NewTagPopup.js +++ b/src/elements/NewTagPopup/NewTagPopup.js @@ -26,7 +26,9 @@ class NewTagPopup extends React.Component { Tag Name: - + { + this.value = v.target.value + }}/> This Tag will automatically show up on category page. @@ -46,7 +48,7 @@ class NewTagPopup extends React.Component { storeselection() { const updateRequest = new FormData(); updateRequest.append('action', 'createTag'); - updateRequest.append('tagname', document.getElementById("namefield").value); + updateRequest.append('tagname', this.value); fetch('/api/Tags.php', {method: 'POST', body: updateRequest}) .then((response) => response.json()) diff --git a/src/elements/NewTagPopup/NewTagPopup.test.js b/src/elements/NewTagPopup/NewTagPopup.test.js new file mode 100644 index 0000000..fad4707 --- /dev/null +++ b/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('', function () { + it('renders without crashing ', function () { + const wrapper = shallow(); + 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(); + 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(); + }); + }); +}); diff --git a/src/css/Preview.css b/src/elements/Preview/Preview.css similarity index 97% rename from src/css/Preview.css rename to src/elements/Preview/Preview.css index a3f1403..60c36f2 100644 --- a/src/css/Preview.css +++ b/src/elements/Preview/Preview.css @@ -49,6 +49,6 @@ width: 266px; } -.tagpreviewtitle{ +.tagpreviewtitle { margin-top: 55px; } diff --git a/src/elements/Preview.js b/src/elements/Preview/Preview.js similarity index 85% rename from src/elements/Preview.js rename to src/elements/Preview/Preview.js index ee14db1..dd89694 100644 --- a/src/elements/Preview.js +++ b/src/elements/Preview/Preview.js @@ -1,7 +1,7 @@ import React from "react"; -import "../css/Preview.css"; -import Player from "../pages/Player"; -import VideoContainer from "./VideoContainer"; +import "./Preview.css"; +import Player from "../../pages/Player/Player"; +import VideoContainer from "../VideoContainer/VideoContainer"; class Preview extends React.Component { constructor(props, context) { @@ -29,18 +29,18 @@ class Preview extends React.Component { updateRequest.append('movieid', this.props.movie_id); fetch('/api/videoload.php', {method: 'POST', body: updateRequest}) - .then((response) => response.text()) - .then((result) => { - this.setState(prevState => ({ - ...prevState.previewpicture, previewpicture: result + .then((response) => response.text() + .then((result) => { + this.setState(prevState => ({ + ...prevState.previewpicture, previewpicture: result + })); })); - }); } render() { return (
this.itemClick()}> -
{this.state.name}
+
{this.state.name}
,tag + viewbinding={this.props.viewbinding}/>, tag ); })) .catch(() => { diff --git a/src/elements/Preview/Previw.test.js b/src/elements/Preview/Previw.test.js new file mode 100644 index 0000000..7c727e1 --- /dev/null +++ b/src/elements/Preview/Previw.test.js @@ -0,0 +1,107 @@ +import React from 'react'; +import {shallow} from 'enzyme' + +import Preview, {TagPreview} from "./Preview"; + +describe('', function () { + it('renders without crashing ', function () { + const wrapper = shallow(); + wrapper.unmount(); + }); + + // check if preview title renders correctly + it('renders title', () => { + const wrapper = shallow(); + expect(wrapper.find('.previewtitle').text()).toBe('test'); + }); + + + it('click event triggered', () => { + const func = jest.fn(); + + const wrapper = shallow(); + wrapper.setProps({ + viewbinding: { + showVideo: () => { + func() + } + } + }); + + wrapper.find('.videopreview').simulate('click'); + + //callback to open player should have called + expect(func).toHaveBeenCalledTimes(1); + }); + + it('picture rendered correctly', done => { + const mockSuccessResponse = 'testsrc'; + const mockJsonPromise = Promise.resolve(mockSuccessResponse); + const mockFetchPromise = Promise.resolve({ + text: () => mockJsonPromise, + }); + global.fetch = jest.fn().mockImplementation(() => mockFetchPromise); + + const wrapper = shallow(); + + // now called 1 times + expect(global.fetch).toHaveBeenCalledTimes(1); + + process.nextTick(() => { + // received picture should be rendered into wrapper + expect(wrapper.find(".previewimage").props().src).not.toBeNull(); + + global.fetch.mockClear(); + done(); + }); + + }); +}); + +describe('', function () { + it('renders without crashing ', function () { + const wrapper = shallow(); + wrapper.unmount(); + }); + + // check if preview title renders correctly + it('renders title', () => { + const wrapper = shallow(); + expect(wrapper.find('.tagpreviewtitle').text()).toBe('test'); + }); + + + it('click event triggered', 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({ + categorybinding: () => { + func() + } + }); + + // first call of fetch is getting of available tags + expect(global.fetch).toHaveBeenCalledTimes(0); + wrapper.find('.videopreview').simulate('click'); + + // now called 1 times + expect(global.fetch).toHaveBeenCalledTimes(1); + + process.nextTick(() => { + //callback to close window should have called + expect(func).toHaveBeenCalledTimes(1); + + global.fetch.mockClear(); + done(); + }); + }); +}); + diff --git a/src/elements/Tag/Tag.js b/src/elements/Tag/Tag.js index 1990a72..40e3ffb 100644 --- a/src/elements/Tag/Tag.js +++ b/src/elements/Tag/Tag.js @@ -12,7 +12,8 @@ class Tag extends React.Component { render() { // todo onclick events correctlyy return ( - + ); } } diff --git a/src/elements/VideoContainer.js b/src/elements/VideoContainer/VideoContainer.js similarity index 97% rename from src/elements/VideoContainer.js rename to src/elements/VideoContainer/VideoContainer.js index 78c5d35..66dee33 100644 --- a/src/elements/VideoContainer.js +++ b/src/elements/VideoContainer/VideoContainer.js @@ -1,5 +1,5 @@ import React from "react"; -import Preview from "./Preview"; +import Preview from "../Preview/Preview"; class VideoContainer extends React.Component { constructor(props, context) { diff --git a/src/elements/VideoContainer/VideoContainer.test.js b/src/elements/VideoContainer/VideoContainer.test.js new file mode 100644 index 0000000..885f31d --- /dev/null +++ b/src/elements/VideoContainer/VideoContainer.test.js @@ -0,0 +1,30 @@ +import {shallow} from "enzyme"; +import React from "react"; +import VideoContainer from "./VideoContainer"; + +describe('', function () { + it('renders without crashing ', function () { + const wrapper = shallow(); + wrapper.unmount(); + }); + + it('inserts tiles correctly', () => { + const wrapper = shallow(); + expect(wrapper.find('Preview')).toHaveLength(12); + }); + + it('inserts tiles correctly if not enough available', () => { + const wrapper = shallow(); + expect(wrapper.find('Preview')).toHaveLength(4); + }); + + it('no items available', () => { + const wrapper = shallow(); + expect(wrapper.find('Preview')).toHaveLength(0); + expect(wrapper.find(".maincontent").text()).toBe("no items to show!"); + }); +}); diff --git a/src/index.js b/src/index.js index b8d3abb..b4c8ee1 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './css/index.css'; import App from './App'; -import * as serviceWorker from './serviceWorker'; ReactDOM.render( @@ -10,8 +9,3 @@ ReactDOM.render( , document.getElementById('root') ); - -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -serviceWorker.register(); diff --git a/src/pages/CategoryPage.js b/src/pages/CategoryPage/CategoryPage.js similarity index 85% rename from src/pages/CategoryPage.js rename to src/pages/CategoryPage/CategoryPage.js index 325c398..3cfc451 100644 --- a/src/pages/CategoryPage.js +++ b/src/pages/CategoryPage/CategoryPage.js @@ -1,9 +1,9 @@ import React from "react"; -import SideBar from "../elements/SideBar/SideBar"; -import Tag from "../elements/Tag/Tag"; +import SideBar from "../../elements/SideBar/SideBar"; +import Tag from "../../elements/Tag/Tag"; -import {TagPreview} from "../elements/Preview"; -import NewTagPopup from "../elements/NewTagPopup"; +import {TagPreview} from "../../elements/Preview/Preview"; +import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup"; class CategoryPage extends React.Component { constructor(props, context) { @@ -37,7 +37,7 @@ class CategoryPage extends React.Component { LowQuality HD
- @@ -58,7 +58,9 @@ class CategoryPage extends React.Component {
) : <> {this.selectionelements} - + } diff --git a/src/pages/CategoryPage/CategoryPage.test.js b/src/pages/CategoryPage/CategoryPage.test.js new file mode 100644 index 0000000..21a48f0 --- /dev/null +++ b/src/pages/CategoryPage/CategoryPage.test.js @@ -0,0 +1,107 @@ +import {shallow, mount} from "enzyme"; +import React from "react"; +import CategoryPage from "./CategoryPage"; +import VideoContainer from "../../elements/VideoContainer/VideoContainer"; + +function prepareFetchApi(response) { + const mockJsonPromise = Promise.resolve(response); + const mockFetchPromise = Promise.resolve({ + json: () => mockJsonPromise, + }); + return (jest.fn().mockImplementation(() => mockFetchPromise)); +} + +describe('', function () { + it('renders without crashing ', function () { + const wrapper = shallow(); + wrapper.unmount(); + }); + + it('test tag fetch call', done => { + global.fetch = prepareFetchApi(["first", "second"]); + + const wrapper = shallow(); + + expect(global.fetch).toHaveBeenCalledTimes(1); + + process.nextTick(() => { + //callback to close window should have called + expect(wrapper.state().loadedtags.length).toBe(2); + + global.fetch.mockClear(); + done(); + }); + }); + + it('test errored fetch call', done => { + global.fetch = prepareFetchApi({}); + + let message; + global.console.log = jest.fn((m) => { + message = m; + }) + + const wrapper = shallow(); + + expect(global.fetch).toHaveBeenCalledTimes(1); + + process.nextTick(() => { + //callback to close window should have called + expect(message).toBe("no connection to backend"); + + global.fetch.mockClear(); + done(); + }); + }); + + it('test new tag popup', function () { + const wrapper = mount(); + + expect(wrapper.find("NewTagPopup")).toHaveLength(0); + wrapper.find('[data-testid="btnaddtag"]').simulate('click'); + // newtagpopup should be showing now + expect(wrapper.find("NewTagPopup")).toHaveLength(1); + + // click close button in modal + wrapper.find(".modal-header").find("button").simulate("click"); + expect(wrapper.find("NewTagPopup")).toHaveLength(0); + }); + + it('test setpage callback', done => { + global.fetch = prepareFetchApi([{}, {}]); + + const wrapper = mount(); + + wrapper.setState({ + loadedtags: [ + { + tag_name: "testname", + tag_id: 42 + } + ] + }); + + wrapper.find("TagPreview").find("div").first().simulate("click"); + + process.nextTick(() => { + // expect callback to have loaded correct tag + expect(wrapper.state().selected).toBe("testname"); + // expect to receive a videocontainer with simulated data + expect(wrapper.instance().selectionelements).toMatchObject(); + + global.fetch.mockClear(); + done(); + }); + }); + + it('test back to category view callback', function () { + const wrapper = shallow(); + + wrapper.setState({ + selected: "test" + }); + expect(wrapper.state().selected).not.toBeNull(); + wrapper.find('[data-testid="backbtn"]').simulate("click"); + expect(wrapper.state().selected).toBeNull(); + }); +}); diff --git a/src/css/HomePage.css b/src/pages/HomePage/HomePage.css similarity index 100% rename from src/css/HomePage.css rename to src/pages/HomePage/HomePage.css diff --git a/src/pages/HomePage.js b/src/pages/HomePage/HomePage.js similarity index 94% rename from src/pages/HomePage.js rename to src/pages/HomePage/HomePage.js index e285de8..b0647d4 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage/HomePage.js @@ -1,10 +1,10 @@ import React from "react"; -import SideBar from "../elements/SideBar/SideBar"; -import Tag from "../elements/Tag/Tag"; -import VideoContainer from "../elements/VideoContainer"; +import SideBar from "../../elements/SideBar/SideBar"; +import Tag from "../../elements/Tag/Tag"; +import VideoContainer from "../../elements/VideoContainer/VideoContainer"; -import "../css/HomePage.css" -import "../css/DefaultPage.css" +import "./HomePage.css" +import "../../css/DefaultPage.css" class HomePage extends React.Component { constructor(props, context) { @@ -25,7 +25,6 @@ class HomePage extends React.Component { } componentDidMount() { - // document.addEventListener('scroll', this.trackScrolling); // initial get of all videos this.fetchVideoData("all"); this.fetchStartData(); @@ -129,7 +128,8 @@ class HomePage extends React.Component { {this.state.data.length !== 0 ? : null} + viewbinding={this.props.viewbinding}/> : +
No Data found!
}
diff --git a/src/pages/HomePage/HomePage.test.js b/src/pages/HomePage/HomePage.test.js new file mode 100644 index 0000000..6b4d4c8 --- /dev/null +++ b/src/pages/HomePage/HomePage.test.js @@ -0,0 +1,58 @@ +import {shallow} from "enzyme"; +import React from "react"; +import HomePage from "./HomePage"; + +function prepareFetchApi(response) { + const mockJsonPromise = Promise.resolve(response); + const mockFetchPromise = Promise.resolve({ + json: () => mockJsonPromise, + }); + return (jest.fn().mockImplementation(() => mockFetchPromise)); +} + +describe('', function () { + it('renders without crashing ', function () { + const wrapper = shallow(); + wrapper.unmount(); + }); + + it('ckeck default tag click events', function () { + const wrapper = shallow(); + global.fetch = prepareFetchApi({}); + + expect(global.fetch).toBeCalledTimes(0); + // click every tag button + wrapper.find("Tag").map((i) => { + i.simulate("click"); + }); + expect(global.fetch).toBeCalledTimes(4); + }); + + it('test data insertion', function () { + const wrapper = shallow(); + + expect(wrapper.find("VideoContainer")).toHaveLength(0); + + wrapper.setState({ + data: [ + {}, {} + ] + }); + + // there shoud be loaded the Videocontainer element into dom after fetching videos correctly + expect(wrapper.find("VideoContainer")).toHaveLength(1); + }); + + it('test title and nr insertions', function () { + const wrapper = shallow(); + + expect(wrapper.find(".pageheadersubtitle").text()).toBe("All Videos - 0"); + + wrapper.setState({ + tag: "testtag", + selectionnr: 42 + }); + + expect(wrapper.find(".pageheadersubtitle").text()).toBe("testtag Videos - 42"); + }); +}); diff --git a/src/css/Player.css b/src/pages/Player/Player.css similarity index 97% rename from src/css/Player.css rename to src/pages/Player/Player.css index dbbb649..134cefd 100644 --- a/src/css/Player.css +++ b/src/pages/Player/Player.css @@ -27,6 +27,6 @@ margin-top: 25px; } -.videoactions{ +.videoactions { margin-top: 15px; } diff --git a/src/pages/Player.js b/src/pages/Player/Player.js similarity index 90% rename from src/pages/Player.js rename to src/pages/Player/Player.js index a4c337f..4bfb99f 100644 --- a/src/pages/Player.js +++ b/src/pages/Player/Player.js @@ -1,9 +1,9 @@ import React from "react"; -import "../css/Player.css" +import "./Player.css" import {PlyrComponent} from 'plyr-react'; -import SideBar from "../elements/SideBar/SideBar"; -import Tag from "../elements/Tag/Tag"; -import AddTagPopup from "../elements/AddTagPopup/AddTagPopup"; +import SideBar from "../../elements/SideBar/SideBar"; +import Tag from "../../elements/Tag/Tag"; +import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup"; class Player extends React.Component { @@ -137,15 +137,15 @@ class Player 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") { - this.fetchMovieData(); - } else { - console.log("an error occured while liking"); - console.log(result); - } - }); + .then((response) => response.json() + .then((result) => { + if (result.result === "success") { + this.fetchMovieData(); + } else { + console.log("an error occured while liking"); + console.log(result); + } + })); } closebtn() { diff --git a/src/pages/Player/Player.test.js b/src/pages/Player/Player.test.js new file mode 100644 index 0000000..ec21940 --- /dev/null +++ b/src/pages/Player/Player.test.js @@ -0,0 +1,128 @@ +import {shallow} from "enzyme"; +import React from "react"; +import Player from "./Player"; + +function prepareFetchApi(response) { + const mockJsonPromise = Promise.resolve(response); + const mockFetchPromise = Promise.resolve({ + json: () => mockJsonPromise, + }); + return (jest.fn().mockImplementation(() => mockFetchPromise)); +} + +describe('', function () { + it('renders without crashing ', function () { + const wrapper = shallow(); + wrapper.unmount(); + }); + + it('plyr insertion', function () { + const wrapper = shallow(); + + wrapper.setState({ + sources: [ + { + src: '/tstvid.mp4', + type: 'video/mp4', + size: 1080, + } + ] + }); + expect(wrapper.find("r")).toHaveLength(1); + }); + + it('likebtn click', done => { + global.fetch = prepareFetchApi({result: 'success'}); + + const func = jest.fn(); + + const wrapper = shallow(); + wrapper.setProps({ + onHide: () => { + func() + } + }); + + // initial fetch for getting movie data + expect(global.fetch).toHaveBeenCalledTimes(1); + wrapper.find('.videoactions').find("button").first().simulate('click'); + // fetch for liking + expect(global.fetch).toHaveBeenCalledTimes(2); + + process.nextTick(() => { + // refetch is called so fetch called 3 times + expect(global.fetch).toHaveBeenCalledTimes(3); + + global.fetch.mockClear(); + done(); + }); + }); + + it('errored likebtn click', done => { + global.fetch = prepareFetchApi({result: 'nosuccess'}); + const func = jest.fn(); + + const wrapper = shallow(); + wrapper.setProps({ + onHide: () => { + func() + } + }); + + // initial fetch for getting movie data + expect(global.fetch).toHaveBeenCalledTimes(1); + wrapper.find('.videoactions').find("button").first().simulate('click'); + // fetch for liking + expect(global.fetch).toHaveBeenCalledTimes(2); + + process.nextTick(() => { + // refetch is called so fetch called 3 times + expect(global.fetch).toHaveBeenCalledTimes(2); + + global.fetch.mockClear(); + done(); + }); + }); + + it('show tag popup', function () { + const wrapper = shallow(); + + expect(wrapper.find("AddTagPopup")).toHaveLength(0); + wrapper.find('.videoactions').find("button").last().simulate('click'); + // addtagpopup should be showing now + expect(wrapper.find("AddTagPopup")).toHaveLength(1); + }); + + it('hide click ', function () { + const wrapper = shallow(); + const func = jest.fn(); + + wrapper.setProps({ + viewbinding: { + hideVideo: () => { + func() + } + } + }); + + expect(func).toHaveBeenCalledTimes(0); + wrapper.find('.closebutton').simulate('click'); + // addtagpopup should be showing now + expect(func).toHaveBeenCalledTimes(1); + }); + + it('inserts Tags correctly', function () { + const wrapper = shallow(); + + expect(wrapper.find("Tag")).toHaveLength(0); + + wrapper.setState({ + tags: [ + {tag_name: 'first'}, + {tag_name: 'second'} + ] + }); + + expect(wrapper.find("Tag")).toHaveLength(2); + }); +}); diff --git a/src/css/RandomPage.css b/src/pages/RandomPage/RandomPage.css similarity index 89% rename from src/css/RandomPage.css rename to src/pages/RandomPage/RandomPage.css index d6a2e15..50d6ce4 100644 --- a/src/css/RandomPage.css +++ b/src/pages/RandomPage/RandomPage.css @@ -3,7 +3,7 @@ align-content: center; } -.btnshuffle{ +.btnshuffle { background-color: #39a945; color: white; @@ -16,6 +16,6 @@ font-size: larger; } -.btnshuffle:focus{ +.btnshuffle:focus { outline: none; } diff --git a/src/pages/RandomPage.js b/src/pages/RandomPage/RandomPage.js similarity index 92% rename from src/pages/RandomPage.js rename to src/pages/RandomPage/RandomPage.js index 397597b..612a8a8 100644 --- a/src/pages/RandomPage.js +++ b/src/pages/RandomPage/RandomPage.js @@ -1,8 +1,8 @@ import React from "react"; -import Preview from "../elements/Preview"; -import "../css/RandomPage.css" -import SideBar from "../elements/SideBar/SideBar"; -import Tag from "../elements/Tag/Tag"; +import Preview from "../../elements/Preview/Preview"; +import "./RandomPage.css" +import SideBar from "../../elements/SideBar/SideBar"; +import Tag from "../../elements/Tag/Tag"; class RandomPage extends React.Component { constructor(props, context) { diff --git a/src/pages/RandomPage/RandomPage.test.js b/src/pages/RandomPage/RandomPage.test.js new file mode 100644 index 0000000..a0d2624 --- /dev/null +++ b/src/pages/RandomPage/RandomPage.test.js @@ -0,0 +1,49 @@ +import {shallow} from "enzyme"; +import React from "react"; +import RandomPage from "./RandomPage"; + +function prepareFetchApi(response) { + const mockJsonPromise = Promise.resolve(response); + const mockFetchPromise = Promise.resolve({ + json: () => mockJsonPromise, + }); + return (jest.fn().mockImplementation(() => mockFetchPromise)); +} + +describe('', function () { + it('renders without crashing ', function () { + const wrapper = shallow(); + wrapper.unmount(); + }); + + it('test shuffleload fetch', function () { + global.fetch = prepareFetchApi({}); + + const wrapper = shallow(); + + expect(global.fetch).toBeCalledTimes(1); + }); + + it('btnshuffle click test', function () { + global.fetch = prepareFetchApi({}); + + const wrapper = shallow(); + + wrapper.find(".btnshuffle").simulate("click"); + + expect(global.fetch).toBeCalledTimes(2); + }); + + it('test tags in random selection', function () { + const wrapper = shallow(); + + wrapper.setState({ + tags: [ + {tag_name: "test1"}, + {tag_name: "test2"} + ] + }); + + expect(wrapper.find("Tag")).toHaveLength(2); + }); +}); diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage/SettingsPage.js similarity index 87% rename from src/pages/SettingsPage.js rename to src/pages/SettingsPage/SettingsPage.js index 3629063..40c35d1 100644 --- a/src/pages/SettingsPage.js +++ b/src/pages/SettingsPage/SettingsPage.js @@ -1,5 +1,5 @@ import React from "react"; -import "../css/DefaultPage.css" +import "../../css/DefaultPage.css" class SettingsPage extends React.Component { @@ -31,7 +31,7 @@ class SettingsPage extends React.Component { }; componentDidMount() { - if(this.myinterval){ + if (this.myinterval) { clearInterval(this.myinterval); } this.myinterval = setInterval(this.updateStatus, 1000); @@ -50,12 +50,12 @@ class SettingsPage extends React.Component {
- -
{this.state.text.map(m => ( -
{m}
+
{this.state.text.map(m => ( +
{m}
))}
); @@ -73,7 +73,7 @@ class SettingsPage extends React.Component { .catch(() => { console.log("no connection to backend"); }); - if(this.myinterval){ + if (this.myinterval) { clearInterval(this.myinterval); } this.myinterval = setInterval(this.updateStatus, 1000); diff --git a/src/pages/SettingsPage/SettingsPage.test.js b/src/pages/SettingsPage/SettingsPage.test.js new file mode 100644 index 0000000..a842d0c --- /dev/null +++ b/src/pages/SettingsPage/SettingsPage.test.js @@ -0,0 +1,41 @@ +import {shallow} from "enzyme"; +import React from "react"; +import SettingsPage from "./SettingsPage"; + +function prepareFetchApi(response) { + const mockJsonPromise = Promise.resolve(response); + const mockFetchPromise = Promise.resolve({ + json: () => mockJsonPromise, + }); + return (jest.fn().mockImplementation(() => mockFetchPromise)); +} + +describe('', function () { + it('renders without crashing ', function () { + const wrapper = shallow(); + wrapper.unmount(); + }); + + it('received text renders into dom', function () { + const wrapper = shallow(); + + wrapper.setState({ + text: [ + "firstline", + "secline" + ] + }); + + expect(wrapper.find(".indextextarea").find(".textarea-element")).toHaveLength(2); + }); + + it('test simulate reindex', function () { + global.fetch = prepareFetchApi({}); + const wrapper = shallow(); + + wrapper.find(".reindexbtn").simulate("click"); + + // initial send of reindex request to server + expect(global.fetch).toBeCalledTimes(1); + }); +}); diff --git a/src/serviceWorker.js b/src/serviceWorker.js deleted file mode 100644 index e583a40..0000000 --- a/src/serviceWorker.js +++ /dev/null @@ -1,141 +0,0 @@ -// This optional code is used to register a service worker. -// register() is not called by default. - -// This lets the app load faster on subsequent visits in production, and gives -// it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on subsequent visits to a page, after all the -// existing tabs open on the page have been closed, since previously cached -// resources are updated in the background. - -// To learn more about the benefits of this model and instructions on how to -// opt-in, read https://bit.ly/CRA-PWA - -const isLocalhost = Boolean( - window.location.hostname === 'localhost' || - // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || - // 127.0.0.0/8 are considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) -); - -export function register(config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebook/create-react-app/issues/2374 - return; - } - - window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - - if (isLocalhost) { - // This is running on localhost. Let's check if a service worker still exists or not. - checkValidServiceWorker(swUrl, config); - - // Add some additional logging to localhost, pointing developers to the - // service worker/PWA documentation. - navigator.serviceWorker.ready.then(() => { - console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://bit.ly/CRA-PWA' - ); - }); - } else { - // Is not localhost. Just register service worker - registerValidSW(swUrl, config); - } - }); - } -} - -function registerValidSW(swUrl, config) { - navigator.serviceWorker - .register(swUrl) - .then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - if (installingWorker == null) { - return; - } - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the updated precached content has been fetched, - // but the previous service worker will still serve the older - // content until all client tabs are closed. - console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' - ); - - // Execute callback - if (config && config.onUpdate) { - config.onUpdate(registration); - } - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); - - // Execute callback - if (config && config.onSuccess) { - config.onSuccess(registration); - } - } - } - }; - }; - }) - .catch(error => { - console.error('Error during service worker registration:', error); - }); -} - -function checkValidServiceWorker(swUrl, config) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl, { - headers: {'Service-Worker': 'script'}, - }) - .then(response => { - // Ensure service worker exists, and that we really are getting a JS file. - const contentType = response.headers.get('content-type'); - if ( - response.status === 404 || - (contentType != null && contentType.indexOf('javascript') === -1) - ) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { - registration.unregister().then(() => { - window.location.reload(); - }); - }); - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl, config); - } - }) - .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ); - }); -} - -export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready - .then(registration => { - registration.unregister(); - }) - .catch(error => { - console.error(error.message); - }); - } -} diff --git a/src/setupTests.js b/src/setupTests.js index 0a7217a..cfe9893 100644 --- a/src/setupTests.js +++ b/src/setupTests.js @@ -4,7 +4,7 @@ // learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom/extend-expect'; -import { configure } from 'enzyme'; +import {configure} from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; -configure({ adapter: new Adapter() }); +configure({adapter: new Adapter()});