Tests for all Components

src/pages/CategoryPage/CategoryPage.js

@@ -0,0 +1,109 @@
+import React from "react";
+import SideBar from "../../elements/SideBar/SideBar";
+import Tag from "../../elements/Tag/Tag";
+
+import {TagPreview} from "../../elements/Preview/Preview";
+import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
+
+class CategoryPage extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+        this.props = props;
+
+        this.state = {
+            loadedtags: [],
+            selected: null
+        };
+    }
+
+    componentDidMount() {
+        this.loadTags();
+    }
+
+    render() {
+        return (
+            <>
+                <div className='pageheader'>
+                    <span className='pageheadertitle'>Categories</span>
+                    <span
+                        className='pageheadersubtitle'>{!this.state.selected ? this.state.loadedtags.length + " different Tags" : this.state.selected}</span>
+                    <hr/>
+                </div>
+                <SideBar>
+                    <div className='sidebartitle'>Default Tags:</div>
+                    <Tag>All</Tag>
+                    <Tag>FullHd</Tag>
+                    <Tag>LowQuality</Tag>
+                    <Tag>HD</Tag>
+                    <hr/>
+                    <button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
+                        this.setState({popupvisible: true})
+                    }}>Add a new Tag!
+                    </button>
+                </SideBar>
+
+                {!this.state.selected ?
+                    (<div className='maincontent'>
+                        {this.state.loadedtags ?
+                            this.state.loadedtags.map((m) => (
+                                <TagPreview
+                                    key={m.tag_name}
+                                    name={m.tag_name}
+                                    tag_id={m.tag_id}
+                                    viewbinding={this.props.viewbinding}
+                                    categorybinding={this.setPage}/>
+                            )) :
+                            "loading"}
+                    </div>) :
+                    <>
+                        {this.selectionelements}
+                        <button data-testid='backbtn' className="btn btn-success"
+                                onClick={this.loadCategoryPageDefault}>Back
+                        </button>
+                    </>
+                }
+
+                {this.state.popupvisible ?
+                    <NewTagPopup show={this.state.popupvisible}
+                                 onHide={() => {
+                                     this.setState({popupvisible: false});
+                                     this.loadTags();
+                                 }}/> :
+                    null
+                }
+
+            </>
+        );
+    }
+
+    setPage = (element, tagname) => {
+        this.selectionelements = element;
+
+        this.setState({selected: tagname});
+    };
+
+    loadCategoryPageDefault = () => {
+        this.setState({selected: null});
+    };
+
+    /**
+     * load all available tags from db.
+     */
+    loadTags() {
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getAllTags');
+
+        // fetch all videos available
+        fetch('/api/Tags.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json()
+                .then((result) => {
+                    this.setState({loadedtags: result});
+                }))
+            .catch(() => {
+                console.log("no connection to backend");
+            });
+    }
+}
+
+export default CategoryPage;

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('<CategoryPage/>', function () {
+    it('renders without crashing ', function () {
+        const wrapper = shallow(<CategoryPage/>);
+        wrapper.unmount();
+    });
+
+    it('test tag fetch call', done => {
+        global.fetch = prepareFetchApi(["first", "second"]);
+
+        const wrapper = shallow(<CategoryPage/>);
+
+        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(<CategoryPage/>);
+
+        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(<CategoryPage/>);
+
+        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(<CategoryPage/>);
+
+        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(<VideoContainer data={[{}, {}]}/>);
+
+            global.fetch.mockClear();
+            done();
+        });
+    });
+
+    it('test back to category view callback', function () {
+        const wrapper = shallow(<CategoryPage/>);
+
+        wrapper.setState({
+            selected: "test"
+        });
+        expect(wrapper.state().selected).not.toBeNull();
+        wrapper.find('[data-testid="backbtn"]').simulate("click");
+        expect(wrapper.state().selected).toBeNull();
+    });
+});