nexshop-web-contents/spec/component/scene/scene-spec.js

Nexshop Web Contents Project

import React from 'react';
import {expect} from 'chai';
import sinon from "sinon";
import {shallow} from "enzyme";
import * as Redux from "redux";
import domtoimage from "dom-to-image";
import configureStore from 'redux-mock-store';
import {AlertDialog} from "nexshop-web-elements";
import Scene from "../../../src/component/scene/scene";
import SceneTitleView from "../../../src/component/scene/scene-title-view";
import SceneResource from "../../../src/component/scene/scene-resource/scene-resource-view";
import SceneEditorView from "../../../src/component/scene/scene-editor/scene-editor-view";

describe('Scene Spec', () => {
    let wrapper;
    let defaultData;
    let mockStore;
    let spyCreateScene;
    let spyChangeLayout;
    let spySaveSceneAsync;
    let spyCreateScenePreview;
    let spyBlockNavigation;
    let spyUnblockNavigation;
    let spyFetchStatus;
    let spyOpenDialog;
    let stubUpdateSceneAsync;

    const NAME = 'some title';
    const CURRENT_FOLDER = {id: 'folderId'};
    const RESOLUTION = {width: 1920, height: 1080};
    let panels = [
        {type: 'panel', contentItems: [{id: '1'}, {id: '2'}], id: 'p1'},
        {type: 'panel', contentItems: [{id: '4'}, {id: '3'}], id: 'p2'},
        {type: 'panel', id: 'p3'}
    ];

    beforeEach(() => {
        spySaveSceneAsync = sinon.spy();
        spyCreateScene = sinon.spy();
        spyChangeLayout = sinon.spy();
        spyCreateScenePreview = sinon.spy();
        spyBlockNavigation = sinon.spy();
        spyUnblockNavigation = sinon.spy();
        spyFetchStatus = sinon.spy();

        stubUpdateSceneAsync = sinon.stub().returns(Promise.resolve({occupied: false}));

        sinon.stub(Redux, "bindActionCreators").returns({
            createScene: spyCreateScene,
            changeLayout: spyChangeLayout,
            saveSceneAsync: spySaveSceneAsync,
            createScenePreview: spyCreateScenePreview,
            blockNavigation: spyBlockNavigation,
            unblockNavigation: spyUnblockNavigation,
            fetchStatus: spyFetchStatus,
            openDialog: spyOpenDialog,
            updateSceneAsync: stubUpdateSceneAsync,
        });
        sinon.stub(global, 'setTimeout');

        defaultData = {
            scene: {
                name: NAME,
                resolution: RESOLUTION,
                orientation: 'horizontal'
            },
            contents: {
                breadcrumb: [
                    CURRENT_FOLDER
                ]
            }
        };

        mockStore = configureStore()(defaultData);
        wrapper = shallow(<Scene store={mockStore}/>).dive();
    });

    afterEach(() => {
        Redux.bindActionCreators.restore();
        global.setTimeout.restore();
        spySaveSceneAsync.reset();
    });

    describe('scene detail initial state', () => {
        beforeEach(() => {
            const sceneData = {
                scene: {
                    name: NAME,
                    resolution: RESOLUTION,
                    orientation: 'horizontal',
                    scene: {
                        panels: [{id: 1}]
                    }
                },
                contents: {
                    breadcrumb: [
                        CURRENT_FOLDER
                        ]
                }
            };

            wrapper = shallow(<Scene store={configureStore()(sceneData)}/>).dive();
        });

        it('set selectedTabId to "contents" state when scene is exist', () => {
            expect(wrapper.state('selectedTabId')).to.be.equal('contents')
        });

        it('set selectedLayoutId to "" and scene state when scene is exist', () => {
            expect(wrapper.state('selectedLayoutId')).to.be.equal('')
        });

        it('set layout to props.scene state when scene is exist', () => {
            expect(wrapper.state('layout')).to.deep.equal({panels: [{id: 1}]})
        });

        it('set hasFullContent to true state when scene is exist', () => {
            expect(wrapper.state('hasFullContent')).to.true;
        });
    });

    it('has title, scene-resource', () => {
        expect(wrapper.find(SceneTitleView).length).to.equal(1);
        expect(wrapper.find(SceneEditorView).length).to.equal(1);
        expect(wrapper.find(SceneResource).length).to.equal(1);
    });

    it('has props', () => {
        expect(wrapper.instance().props.name).to.equal(NAME);
        expect(wrapper.instance().props.resolution).to.equal(RESOLUTION);
        expect(wrapper.instance().props.breadcrumb[0]).to.deep.equal(CURRENT_FOLDER);
    });

    it('set layout and selectedLayoutId when call selectLayout', () => {
        wrapper.setState({hasFullContent: true});
        wrapper.instance().selectLayout('1');

        expect(wrapper.state('layout').id).to.equal('1');
        expect(wrapper.state('selectedLayoutId')).to.equal('1');
        expect(wrapper.state('hasFullContent')).to.be.false;
    });

    it('calls blockNavigation action when componentDidMount is called', () => {
        wrapper.instance().componentDidMount();

        expect(spyBlockNavigation.called).to.be.true;
    });

    it('calls unblockNavigation action when componentWillUnmount is called', () => {
        wrapper.instance().componentWillUnmount();

        expect(spyUnblockNavigation.called).to.be.true;
    });

    describe('addContentItem Spec', () => {
        it('add contentItem when call addContentItem', () => {
            wrapper.instance().addContentItem('p1', {type: 'image'});
            const expected = {
                id: '1',
                index: 0,
                panels: [
                    {
                        id: 'g1',
                        domAttribute: {size: 960, minSize: 5, resize: 'dynamic'},
                        type: 'group',
                        direction: 'row',
                        panels: [
                            {
                                id: 'p1',
                                domAttribute: {size: 960, minSize: 5, resize: 'dynamic'},
                                type: 'panel',
                                contentItems: [{type: 'image'}],
                                parentDirection: "row"
                            }
                        ],
                        parentDirection: undefined
                    },
                ],
                type: '1-1',
            };

            expect(wrapper.state('layout')).to.deep.equal(expected);
            expect(wrapper.state('hasFullContent')).to.be.true;
        });

        it('set alertVisibility in state to false when isAddableContentsItem is true', () => {
            wrapper.instance().isAddableContentsItem = sinon.stub().returns(true);
            wrapper.instance().addContentItem('p1', {type: 'video'});

            expect(wrapper.state('alertVisibility')).to.be.false;
        });

        it('set alertVisibility in state to true when isAddableContentsItem is false', () => {
            wrapper.instance().isAddableContentsItem = sinon.stub().returns(false);
            wrapper.instance().addContentItem('p1', {type: 'video'});

            expect(wrapper.state('alertVisibility')).to.be.true;
        });

        it('if type of contentsItem is not video, isAddableContentsItem() is not excuted.', () => {
            wrapper.instance().isAddableContentsItem = sinon.spy();
            wrapper.instance().addContentItem('p1', {type: 'not video'});

            expect(wrapper.instance().isAddableContentsItem.called).to.be.false;
        });
    });

    it('remove contentItems when call removeContentItem', () => {
        wrapper.instance().addContentItem('p1', {type: 'image'});
        wrapper.instance().removeContentItem('p1');
        const layoutWithoutContent = {
            id: '1',
            index: 0,
            panels: [
                {
                    id: 'g1',
                    domAttribute: {size: 960, minSize: 5, resize: 'dynamic'},
                    type: 'group',
                    direction: 'row',
                    panels: [
                        {
                            id: 'p1',
                            domAttribute: {size: 960, minSize: 5, resize: 'dynamic'},
                            type: 'panel',
                            parentDirection: "row"

                        }
                    ],
                    parentDirection: undefined
                },
            ],
            type: '1-1',
        };
        expect(wrapper.state('layout')).to.deep.equal(layoutWithoutContent);
        expect(wrapper.state('hasFullContent')).to.be.false;
    });

    it('set selectedTabId when call selectTab', () => {
        wrapper.instance().selectTab('contents');

        expect(wrapper.state('selectedTabId')).to.equal('contents');
    });

    it('checkContentsForPanel', () => {
        expect(wrapper.instance().checkContentsForPanel({})).to.be.false;
        expect(wrapper.instance().checkContentsForPanel({contentItems: []})).to.be.true;
    });

    it('checkContentsForPanel', () => {
        expect(wrapper.instance().checkContentsForGroup(panels)).to.be.false;

        panels = [
            {type: 'panel', contentItems: []},
            {type: 'panel', contentItems: []},
            {type: 'panel', contentItems: []},
        ];

        expect(wrapper.instance().checkContentsForGroup(panels)).to.be.true;
    });

    it('isDraggedOverPanel', () => {
        wrapper.setState({
            draggedOverPanelId: '1'
        });

        expect(wrapper.instance().isDraggedOverPanel('1')).to.be.true;
        expect(wrapper.instance().isDraggedOverPanel('2')).to.be.false;
    });

    it('isSelectedPanel', () => {
        wrapper.setState({
            selectedPanelId: '1'
        });

        expect(wrapper.instance().isSelectedPanel('1')).to.be.true;
        expect(wrapper.instance().isSelectedPanel('2')).to.be.false;
    });

    it('setSelectedPanelId', () => {
        wrapper.setState({
            selectedPanelId: '1'
        });

        wrapper.instance().setSelectedPanelId('2');
        expect(wrapper.state('selectedPanelId')).to.be.equal('2');
    });

    it('setDraggedOverPanelId', () => {
        wrapper.setState({
            draggedOverPanelId: '1'
        });

        wrapper.instance().setDraggedOverPanelId('2');
        expect(wrapper.state('draggedOverPanelId')).to.be.equal('2');
    });

    describe('saveScene', () => {
        beforeEach(() => {
            let newDiv = document.createElement("div");
            sinon.stub(domtoimage, 'toBlob').returns({
                then: function (callback) {
                    callback([]);
                }
            });
            sinon.stub(document, 'getElementById').returns(newDiv);
        });

        afterEach(() => {
            domtoimage.toBlob.restore();
            document.getElementById.restore();
        });

        it('call updateSceneAsync when scene id is exist with horizontal orientation', () => {
            wrapper.setProps({sceneId: 'some id'});
            wrapper.instance().saveScene();

            expect(stubUpdateSceneAsync.called).to.be.true;
            expect(spyUnblockNavigation.called).to.be.true;

            it('show update contents item dialog but the scene is used in others', () => {
                stubUpdateSceneAsync = sinon.stub().returns(Promise.resolve({occupied: true}));

                wrapper.setProps({sceneId: 'some id'});
                wrapper.instance().saveScene();

                expect(spyOpenDialog.calledWith('update-contents-item')).to.true;
            });
        });

        it('call saveSceneAsync when scene id is empty with vertical orientation', () => {
            wrapper.setProps({orientation: 'vertical'});
            wrapper.instance().saveScene();

            expect(spySaveSceneAsync.called).to.be.true;
            expect(spyUnblockNavigation.called).to.be.true;
        });
    });

    describe('getPanelSize', () => {
        const domRect = {width: 100, height: 50};

        it('return width for size when parentDirection is row', () => {
            const size = wrapper.instance().getPanelSize('row', domRect);
            expect(size).to.be.equal(domRect.width);
        });

        it('return height for size when parentDirection is not row ', () => {
            const size = wrapper.instance().getPanelSize('not row', domRect);
            expect(size).to.be.equal(domRect.height);
        });
    });

    describe('getPanelRects', () => {
        const domRect = {width: 960, height: 270};

        it('return (domRect.width/960)*100 for domAttribute.width', () => {
            const {width} = wrapper.instance().getPanelRects({parentDirection: 'row'}, domRect);
            expect(width).to.equal(100);
        });

        it('return (domRect.height/540)*100 for domAttribute.height', () => {
            const {height} = wrapper.instance().getPanelRects({parentDirection: 'row'}, domRect);
            expect(height).to.equal(50);
        });

        it('return domRect.width for domAttribute.pixelWidth', () => {
            const {pixelWidth} = wrapper.instance().getPanelRects({parentDirection: 'row'}, domRect);
            expect(pixelWidth).to.equal(960);
        });

        it('return domRect.height for domAttribute.pixelHeight', () => {
            const {pixelHeight} = wrapper.instance().getPanelRects({parentDirection: 'row'}, domRect);
            expect(pixelHeight).to.equal(270);
        });

        it('return domAttribute.pixelWidth for size when parentDirection is row', () => {
            const {size} = wrapper.instance().getPanelRects({parentDirection: 'row'}, domRect);
            expect(size).to.equal(960);
        });

        it('return domAttribute.pixelHeight for size when parentDirection is not row', () => {
            const {size} = wrapper.instance().getPanelRects({parentDirection: 'not row'}, domRect);
            expect(size).to.equal(270);
        });
    });

    describe('getPanelGroupRects', () => {
        const rowPanel = {
            direction: 'row',
            parentDirection: 'row',
            panels: [
                {domAttribute: {pixelWidth: 240, pixelHeight: 540}},
                {domAttribute: {pixelWidth: 240, pixelHeight: 540}},
                {domAttribute: {pixelWidth: 240, pixelHeight: 540}},
                {domAttribute: {pixelWidth: 240, pixelHeight: 540}},
            ]
        };

        const columnPanel = {
            direction: 'column',
            parentDirection: 'column',
            panels: [
                {domAttribute: {pixelWidth: 960, pixelHeight: 135}},
                {domAttribute: {pixelWidth: 960, pixelHeight: 135}},
                {domAttribute: {pixelWidth: 960, pixelHeight: 135}},
                {domAttribute: {pixelWidth: 960, pixelHeight: 135}},
            ]
        };

        it('return (domRect.width/960)*100 for domAttribute.width', () => {
            const row = wrapper.instance().getPanelGroupRects(rowPanel);
            expect(row.width).to.equal(100);

            const column = wrapper.instance().getPanelGroupRects(columnPanel);
            expect(column.width).to.equal(100);
        });

        it('return (domRect.height/540)*100 for domAttribute.height', () => {
            const row = wrapper.instance().getPanelGroupRects(rowPanel);
            expect(row.height).to.equal(100);

            const column = wrapper.instance().getPanelGroupRects(columnPanel);
            expect(column.height).to.equal(100);
        });

        it('return domRect.width for domAttribute.pixelWidth', () => {
            const row = wrapper.instance().getPanelGroupRects(rowPanel);
            expect(row.pixelWidth).to.equal(960);

            const column = wrapper.instance().getPanelGroupRects(columnPanel);
            expect(column.pixelWidth).to.equal(960);
        });

        it('return domRect.height for domAttribute.pixelHeight', () => {
            const row = wrapper.instance().getPanelGroupRects(rowPanel);
            expect(row.pixelHeight).to.equal(540);

            const column = wrapper.instance().getPanelGroupRects(columnPanel);
            expect(column.pixelHeight).to.equal(540);
        });

        it('return domAttribute.pixelWidth for size when parentDirection is row', () => {
            const row = wrapper.instance().getPanelGroupRects(rowPanel);
            expect(row.size).to.equal(960);

            const column = wrapper.instance().getPanelGroupRects(columnPanel);
            expect(column.size).to.equal(540);
        });
    });

    it('getWrapperSizeForResolution', () => {
        expect(wrapper.instance().getWrapperSizeForResolution('horizontal').width).to.be.equal(960);
        expect(wrapper.instance().getWrapperSizeForResolution('horizontal').height).to.be.equal(540);
        expect(wrapper.instance().getWrapperSizeForResolution('vertical').width).to.be.equal(432);
        expect(wrapper.instance().getWrapperSizeForResolution('vertical').height).to.be.equal(768);
    });

    describe('moveToPreview Spec', () => {
        const spyHistoryPush = sinon.spy();
        let setTimeoutArgument;

        beforeEach(() => {
            sinon.stub(document, 'getElementsByClassName').returns([{getClientRects: () => [{width: 16, height: 9}]}]);
            wrapper.setProps({
                history: {push: spyHistoryPush}
            });
            wrapper.instance().moveToPreview();
            setTimeoutArgument = global.setTimeout.lastCall.args[0];
        });

        afterEach(() => {
            document.getElementsByClassName.restore();
            spyHistoryPush.reset();
        });

        it('call createScenePreview', () => {
            expect(spyCreateScenePreview.called).to.be.true;
        });

        it('call history.push', () => {
            setTimeoutArgument();
            expect(spyHistoryPush.calledWith('/contents/scene-preview')).to.be.true;
        });
    });

    it('getRelatedContents Spec', () => {
        let panels = [
            {type: 'panel', contentItems: [{id: '1'}, {id: '2'}], id: 'p1'},
            {type: 'panel', contentItems: [{id: '4'}, {id: '3'}], id: 'p2'},
            {
                type: 'panel',
                contentItems: [{id: '4'}],
                id: 'p3',
                panels: [
                    {type: 'panel', contentItems: [{id: '1'}, {id: '2'}], id: 'p1'},
                    {type: 'panel', contentItems: [{id: '4'}, {id: '3'}], id: 'p2'},
                ]
            }
        ];

        let expected = [{id: '1'}, {id: '2'}, {id: '4'}, {id: '3'}];
        expect(wrapper.instance().getRelatedContents(panels)).to.deep.equal(expected);
    });

    it('updateFitMode Spec', () => {
        const layout = {
            id: '1',
            index: 0,
            panels: [
                {
                    id: 'g1',
                    domAttribute: {size: 960, minSize: 5, resize: 'dynamic'},
                    type: 'group',
                    direction: 'row',
                    panels: [
                        {
                            id: 'p1',
                            domAttribute: {size: 960, minSize: 5, resize: 'dynamic'},
                            type: 'panel',
                            contentItems: [{id: 'c1', fitMode: 'cover', type: 'image'}],
                            parentDirection: "row"

                        }
                    ],
                    parentDirection: undefined
                },
            ],
            type: '1-1',
        };

        wrapper.setState({layout});
        wrapper.instance().updateFitMode('contain', 'p1', 'c1');

        expect(wrapper.state('layout').panels[0].panels[0].contentItems[0].fitMode).to.equal('contain');
    });

    describe('isAddableContentsItem Spec', () => {
        let FLATTEN_PANELS;

        beforeEach(() => {
            FLATTEN_PANELS = [
                {type: 'panel', contentItems: [{type: 'video'}], id: 'p1'},
                {type: 'panel', contentItems: [{type: 'image'}], id: 'p2'},
                {type: 'panel', contentItems: [{id: '4'}], id: 'p3'}
            ];
        });

        it('return true when video content less than 2', () => {
            const isAddable = wrapper.instance().isAddableContentsItem(FLATTEN_PANELS);

            expect(isAddable).to.be.true;
        });

        it('return false when video content more than 2', () => {
            FLATTEN_PANELS.push({type: 'panel', contentItems: [{type: 'video'}], id: 'p4'});

            const isAddable = wrapper.instance().isAddableContentsItem(FLATTEN_PANELS);

            expect(isAddable).to.be.false;
        });

        it('return true ', () => {

        });
    });

    describe('onCloseAlertMessage Spec', () => {
        it('set alertVisibility to false', () => {
            wrapper.setState({
                selectedPanelId: 'selectedPanelId',
                draggedOverPanelId: 'draggedOverPanelId', alertVisibility: true,
            });
            wrapper.instance().onCloseAlertMessage();

            expect(wrapper.state('selectedPanelId')).to.be.empty;
            expect(wrapper.state('draggedOverPanelId')).to.be.empty;
            expect(wrapper.state('alertVisibility')).to.be.false;
        });
    });

    describe('render', () => {
        it('show alert message when alertVisibility is true', () => {
            wrapper.setState({alertVisibility: true});

            expect(wrapper.find(AlertDialog)).to.be.lengthOf(1);
        });

        describe('redirect to contents main', () => {
            let mockHistory = {
                push: () => {
                }
            };

            beforeEach(() => {
                sinon.stub(mockHistory, 'push').returns(sinon.spy());
            });

            afterEach(() => {
                mockHistory.push.restore();
            });

            it('name is not exist', () => {
                wrapper.setProps({name: undefined, resolution: RESOLUTION, history: mockHistory});
                wrapper.instance().componentWillMount();

                expect(mockHistory.push.calledWith('/contents/main'));
            });

            it('resolution is not exist', () => {
                wrapper.setProps({name: 'some name', resolution: undefined, history: mockHistory});
                wrapper.instance().componentWillMount();

                expect(mockHistory.push.calledWith('/contents/main'));
            });
        });

    });

    describe('pass props', () => {
        beforeEach(() => {
            wrapper.setState({alertVisibility: true});
        });

        describe('AlertDialog', () => {
            it('message is "You can add up to 2 video files."', () => {
                expect(wrapper.find(AlertDialog).prop('message')).to.equal('You can add up to 2 video files.');
            });

            it('icon is "warning"', () => {
                expect(wrapper.find(AlertDialog).prop('icon')).to.equal('warning');
            });

            it('positiveButtonText is "OK"', () => {
                expect(wrapper.find(AlertDialog).prop('positiveButtonText')).to.equal('OK');
            });

            it('onPositiveClick is onCloseAlertMessage', () => {
                expect(wrapper.find(AlertDialog).prop('onPositiveClick')).to.equal(wrapper.instance().onCloseAlertMessage);
            });
        });
    });
});