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

Nexshop Web Contents Project

import React from 'react';
import {expect} from 'chai';
import {shallow} from "enzyme";
import PanelGroup from "react-panelgroup";
import * as sinon from "sinon";
import {HORIZONTAL_LAYOUTS as LAYOUTS} from "../../../../src/constants/layouts";
import SceneEditorView from "../../../../src/component/scene/scene-editor/scene-editor-view";

describe('Scene Editor View Spec', () => {
    let wrapper;

    let spyUpdateLayout;
    let spyIsDraggedOverPanel;
    let spySetDraggedOverPanelId;
    let spyIsSelectedPanel;
    let spySetSelectedPanelId;
    let spyGetCSSWrapperName;
    let spyUpdateFitMode;
    let spyAddContentItem;
    let spyRemoveContentItem;

    const ORIENTATION = 'horizontal';
    const SELECTED_TAB_ID = 'layout';
    const LAYOUT_WITH_CONTENTITEM = {
        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: '1-1',
    };

    const LAYOUT_WITHOUT_CONTENTITEM = {
        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',
                    }
                ]
            },
        ],
        type: '1-1',
    };

    beforeEach(() => {
        spyUpdateLayout = sinon.spy();
        spyIsDraggedOverPanel = sinon.spy();
        spySetDraggedOverPanelId = sinon.spy();
        spyIsSelectedPanel = sinon.spy();
        spySetSelectedPanelId = sinon.spy();
        spyGetCSSWrapperName = sinon.stub().returns('--horizontal');
        spyAddContentItem = sinon.spy();
        spyRemoveContentItem = sinon.spy();
        spyUpdateFitMode = sinon.spy();

        wrapper = shallow(<SceneEditorView layout={LAYOUTS[0]}
                                           orientation={ORIENTATION}
                                           getCSSWrapperName={spyGetCSSWrapperName}
                                           addContentItem={spyAddContentItem}
                                           removeContentItem={spyRemoveContentItem}
                                           selectedTabId={SELECTED_TAB_ID}
                                           isDraggedOverPanel={spyIsDraggedOverPanel}
                                           isSelectedPanel={spyIsSelectedPanel}
                                           setDraggedOverPanelId={spySetDraggedOverPanelId}
                                           setSelectedPanelId={spySetSelectedPanelId}
                                           updateFitMode={spyUpdateFitMode}
        />);
    });

    describe('render', () => {
        it('has layout wrapper', () => {
            expect(wrapper.find('.layout-wrapper--horizontal').length).to.be.equal(1);
        });

        it('has two panelGroup when layout id is "1"', () => {
            expect(wrapper.find(PanelGroup).length).to.be.equal(2);
        });

        it('has three panelGroups when layout id is "1hf1v1b3"', () => {
            wrapper.setProps({layout: LAYOUTS[5]});

            expect(wrapper.find(PanelGroup).length).to.be.equal(3);
        });

        it('display panel guide message when tab id is not "layout"', () => {
            wrapper.setProps({selectedTabId: 'contents'});

            expect(wrapper.find('.layout-panel__guide-message')).to.have.lengthOf(1);
        });

        it('not display panel guide message when tab id is "layout"', () => {
            expect(wrapper.find('.layout-panel__guide-message')).to.have.lengthOf(0);
        });

        it('show layout-panel__body__status--dragged-over at first panel when first panel is draggedOverPanel', () => {
            wrapper.setProps({selectedTabId: 'contents', isDraggedOverPanel: sinon.stub().returns(true)});

            expect(wrapper.find('.layout-panel__body__status--dragged-over')).to.have.lengthOf(1);
        });

        it('show layout-panel__body__status--selected at first panel when first panel is selectedPanel', () => {
            wrapper.setProps({selectedTabId: 'contents', isSelectedPanel: sinon.stub().returns(true)});

            expect(wrapper.find('.layout-panel__body__status--selected')).to.have.lengthOf(1);
        });

        it('show layout-panel__controller--active at first panel when first panel is selectedPanel and has contentItem', () => {
            wrapper.setProps({layout: LAYOUT_WITH_CONTENTITEM, isSelectedPanel: sinon.stub().returns(true)});

            expect(wrapper.find('.layout-panel__controller--active')).to.have.lengthOf(1);
        });

        it('panel has black background color when contentItem exist', () => {
            wrapper.setProps({layout: LAYOUT_WITH_CONTENTITEM, isSelectedPanel: sinon.stub().returns(true)});

            expect(wrapper.find('#p1').getNode().props.style.backgroundColor).to.equal('black');
        });

        it('panel has white background color when contentItem not exist', () => {
            wrapper.setProps({layout: LAYOUT_WITHOUT_CONTENTITEM, isSelectedPanel: sinon.stub().returns(true)});

            expect(wrapper.find('#p1').getNode().props.style.backgroundColor).to.equal('white');
        });
    });

    describe('events', () => {
        let spyClearData;
        let spyPreventDefault;
        let stubGetData;

        let mockDragDrop;
        let mockDragOver;
        let mockClick;
        let mockClearClick;

        beforeEach(() => {
            spyClearData = sinon.spy();
            spyPreventDefault = sinon.spy();
            spyUpdateLayout = sinon.spy();

            let layout = JSON.parse(JSON.stringify(LAYOUTS[5]));
            wrapper = shallow(<SceneEditorView layout={layout}
                                               orientation={ORIENTATION}
                                               getCSSWrapperName={spyGetCSSWrapperName}
                                               addContentItem={spyAddContentItem}
                                               removeContentItem={spyRemoveContentItem}
                                               selectedTabId={SELECTED_TAB_ID}
                                               isDraggedOverPanel={spyIsDraggedOverPanel}
                                               isSelectedPanel={spyIsSelectedPanel}
                                               setDraggedOverPanelId={spySetDraggedOverPanelId}
                                               updateFitMode={spyUpdateFitMode}
                                               setSelectedPanelId={spySetSelectedPanelId}/>);

            stubGetData = sinon.stub().returns(JSON.stringify(
                {
                    id: 'some id',
                    type: 'image',
                    metaData: {contentUrl: 'some url'}
                }
            ));

            mockDragDrop = {
                dataTransfer: {
                    getData: stubGetData,
                    clearData: spyClearData
                },
                currentTarget: {id: 'some id'}
            };

            mockDragOver = {
                preventDefault: spyPreventDefault,
                currentTarget: {id: 'some id'}
            };

            mockClick = {
                currentTarget: {id: 'some id'}
            };

            mockClearClick = {
                target: {
                    className: 'scene-editor-wrapper--horizontal'
                },
                stopPropagation: sinon.spy()
            }
        });

        describe('contentsItem drag & drop on panel', () => {
            it('set draggedOverPanelId when drag over at layout-panel__body__status', () => {
                wrapper.find('.layout-panel__body__status').at(0).simulate('dragOver', mockDragOver);
                expect(spySetDraggedOverPanelId.calledWith('some id')).to.true;
            });

            it('call updateLayout, clear draggedOverPanelId and set selectedPanelId when drag drop at layout-panel__body__status', () => {
                wrapper.find('.layout-panel__body__status').at(0).simulate('drop', mockDragDrop);

                expect(spyAddContentItem.called).to.true;
                expect(spySetDraggedOverPanelId.calledWith('')).to.true;
                expect(spySetSelectedPanelId.calledWith('some id')).to.true;
            });
        });

        describe('click panel', () => {
            it('click panel', () => {
                wrapper.instance().onPanelClicked(mockClick);

                expect(spySetSelectedPanelId.calledWith('some id')).to.true;
            });

            it('click panel', () => {
                wrapper.find('.layout-panel__body__status').at(0).simulate('click', mockClick);

                expect(spySetSelectedPanelId.calledWith('some id')).to.true;
            });

            describe('click wrapper', () => {
                it('horizontal', () => {
                    wrapper.find('.scene-editor-wrapper--horizontal').at(0).simulate('click', mockClearClick);

                    expect(spySetDraggedOverPanelId.called).to.true;
                    expect(spySetSelectedPanelId.called).to.true;
                });

                it('vertical', () => {
                    wrapper = shallow(<SceneEditorView layout={JSON.parse(JSON.stringify(LAYOUTS[5]))}
                                                       orientation={'vertical'}
                                                       getCSSWrapperName={() => '--vertical'}
                                                       addContentItem={spyAddContentItem}
                                                       removeContentItem={spyRemoveContentItem}
                                                       selectedTabId={SELECTED_TAB_ID}
                                                       isDraggedOverPanel={spyIsDraggedOverPanel}
                                                       isSelectedPanel={spyIsSelectedPanel}
                                                       setDraggedOverPanelId={spySetDraggedOverPanelId}
                                                       updateFitMode={spyUpdateFitMode}
                                                       setSelectedPanelId={spySetSelectedPanelId}/>);

                    const mockVerticalClearClick = {
                        target: {
                            className: 'scene-editor-wrapper--vertical'
                        },
                        stopPropagation: sinon.spy()
                    };

                    wrapper.find('.scene-editor-wrapper--vertical').at(0).simulate('click', mockVerticalClearClick);

                    expect(spySetDraggedOverPanelId.called).to.true;
                    expect(spySetSelectedPanelId.called).to.true;
                });
            });

        });

        describe('click & trash click', () => {
            it('clear draggedOverPanelId and selectedPanelId and call updateLayout when click at layout-panel__controller--trash-can', () => {
                let stubIsSelectedPanel = sinon.stub();
                stubIsSelectedPanel.returns(false);
                stubIsSelectedPanel.withArgs('p1').returns(true);

                wrapper.setProps({isSelectedPanel: stubIsSelectedPanel});
                wrapper.find('.layout-panel__controller--trash-can').at(0).simulate('click');

                expect(spySetDraggedOverPanelId.calledWith('')).to.be.true;
                expect(spySetSelectedPanelId.calledWith('')).to.be.true;
                expect(spyRemoveContentItem.called).to.be.true;
            });
        });

        it('call updateFitMode when fitMode item selected', () => {
            wrapper.instance().onFitModeDropDownSelected('contain', 'p1', 'c1');

            expect(spyUpdateFitMode.calledWith('contain', 'p1', 'c1'));
        });
    });
});