nexshop-web-contents

Version:
Nexshop Web Contents Project
172 lines (132 loc) • 6.5 kB
JavaScript
import React from 'react';
import {expect} from 'chai';
import {shallow} from 'enzyme';
import PanelGroup from "react-panelgroup";
import ScenePreviewDetailView from "../../../../src/component/preview/scene/scene-preview-detail-view";

describe('Scene Preview Detail View Spec', () => {
    let wrapper;
    let mockScene;

    const PREVIEW_WINDOW_SIZE = {width: 1920, height: 1080};
    const SCENE_LAYOUT_SIZE = {width: 960, height: 540};

    beforeEach(() => {
        mockScene = {
            panels: [
                {
                    id: 'g1',
                    domAttribute: {size: 960, minSize: 5, resize: 'dynamic'},
                    type: 'group',
                    direction: 'row',
                    panels: [
                        {
                            id: 'p1',
                            domAttribute: {size: 480, minSize: 5, resize: 'dynamic', pixelWidth: 480, pixelHeight: 540},
                            type: 'panel',
                            contentItems: [{
                                type: 'image',
                                contentUrl: 'some url'
                            }]
                        },
                        {
                            id: 'p2',
                            domAttribute: {size: 480, minSize: 5, resize: 'dynamic', pixelWidth: 480, pixelHeight: 540},
                            type: 'panel',
                            contentItems: [{
                                type: 'video',
                                contentUrl: 'some url'
                            }]
                        }
                    ]
                },
            ]
        };

        wrapper = shallow(<ScenePreviewDetailView scene={mockScene} previewWindowSize={PREVIEW_WINDOW_SIZE}
                                                  sceneLayoutSize={SCENE_LAYOUT_SIZE}/>);
    });

    describe('render', () => {
        it('has 2 panel groups', () => {
            expect(wrapper.find(PanelGroup)).to.lengthOf(2);
        });

        it('has 2 panel', () => {
            expect(wrapper.find('.layout-panel__body')).to.lengthOf(2);
        });

        it('has 1 image', () => {
            expect(wrapper.find('.layout-panel__body__status--image')).to.lengthOf(1);
        });

        it('has 1 video', () => {
            expect(wrapper.find('.layout-panel__body__status--video')).to.lengthOf(1);
        });

        it('preview scene be double up', () => {
            expect(wrapper.find(PanelGroup).at(0).html()).to.contains('style="width:1920px;');
        });

        it('video element has double up panel width and height', () => {
            expect(wrapper.find('video').html()).to.contains('width:960px');
            expect(wrapper.find('video').html()).to.contains('height:1080px');
        });
    });

    describe('find size ratio', () => {
        describe('find base side', () => {
            it('base height side when wide monitor(16:8) & horizontal scene(16:9)', () => {
                const sceneRatio = 16 / 9;
                const windowRatio = 16 / 8;

                const baseSide = wrapper.instance().getPreviewBaseSide(sceneRatio, windowRatio);

                expect(baseSide).to.be.equal('height');
            });

            it('base width side when wide monitor(16:10) & horizontal scene(16:9)', () => {
                const sceneRatio = 16 / 9;
                const windowRatio = 16 / 10;

                const baseSide = wrapper.instance().getPreviewBaseSide(sceneRatio, windowRatio);

                expect(baseSide).to.be.equal('width');
            });

            it('base height side when wide monitor(16:8) & vertical scene(9:16)', () => {
                const sceneRatio = 9 / 16;
                const windowRatio = 16 / 8;

                const baseSide = wrapper.instance().getPreviewBaseSide(sceneRatio, windowRatio);

                expect(baseSide).to.be.equal('height');
            });

            it('base width side when narrow monitor(8:16) & horizontal scene(16:9)', () => {
                const sceneRatio = 16 / 9;
                const windowRatio = 8 / 16;

                const baseSide = wrapper.instance().getPreviewBaseSide(sceneRatio, windowRatio);

                expect(baseSide).to.be.equal('width');
            });

            it('base width side when narrow monitor(8:16) & vertical scene(9:16)', () => {
                const sceneRatio = 9 / 16;
                const windowRatio = 8 / 16;

                const baseSide = wrapper.instance().getPreviewBaseSide(sceneRatio, windowRatio);

                expect(baseSide).to.be.equal('width');
            });

            it('base height side when narrow monitor(10:16) & vertical scene(9:16)', () => {
                const sceneRatio = 9 / 16;
                const windowRatio = 10 / 16;

                const baseSide = wrapper.instance().getPreviewBaseSide(sceneRatio, windowRatio);

                expect(baseSide).to.be.equal('height');
            });
        });

        describe('find ratio', () => {
            it('ratio is 2 when monitor(1920:1080) & scene(960:540)', () => {
                const sceneSize = {width: 960, height: 540};
                const windowSize = {width: 1920, height: 1080};

                const ratio = wrapper.instance().getPreviewRatio(sceneSize, windowSize);

                expect(ratio).to.be.equal(2);
            });

            it('ratio is 0.5 when monitor(480:270) & scene(16:9)', () => {
                const sceneSize = {width: 960, height: 540};
                const windowSize = {width: 480, height: 270};

                const ratio = wrapper.instance().getPreviewRatio(sceneSize, windowSize);

                expect(ratio).to.be.equal(0.5);
            });

            it('ratio is 1 when monitor(1980:540) & scene(960:540)', () => {
                const sceneSize = {width: 960, height: 540};
                const windowSize = {width: 1980, height: 540};

                const ratio = wrapper.instance().getPreviewRatio(sceneSize, windowSize);

                expect(ratio).to.be.equal(1);
            });

            it('ratio is 0.5 when monitor(1280:480) & scene(540:960)', () => {
                const sceneSize = {width: 540, height: 960};
                const windowSize = {width: 1280, height: 480};

                const ratio = wrapper.instance().getPreviewRatio(sceneSize, windowSize);

                expect(ratio).to.be.equal(0.5);
            });
        });
    });
});