nexshop-web-contents
Version:
Nexshop Web Contents Project
359 lines (300 loc) • 15.8 kB
JavaScript
import React from 'react';
import {expect} from 'chai';
import {shallow, mount} from "enzyme";
import sinon from 'sinon';
import {contentItemModel} from "nexshop-web-store";
import PlaylistPreviewDetailView from "../../../../src/component/preview/playlist/playlist-preview-detail-view";
import ScenePreviewDetailView from "../../../../src/component/preview/scene/scene-preview-detail-view";
describe('Playlist Preview Detail Spec.js', () => {
const contents = Object.freeze({
metaData: {
contentUrl: "http://nexshop-api-gateway-manualtest.ap-northeast-2.elasticbeanstalk.com/api/v1/files/5c7017ebc6614557bfcdb596c7393ac4"
}
});
const previousContents = Object.freeze({
metaData: {
contentUrl: "http://nexshop-api-gateway-manualtest.ap-northeast-2.elasticbeanstalk.com/api/v1/files/beebb59d23994f6482b24bd4004a0b7b"
}
});
let wrapper;
let contentItem;
let previousContentItem;
const DEFAULT_RESOLUTION = {text: '16x9', orientation: 'horizontal'};
const DEFAULT_PREVIEW_WINDOW_SIZE = {width: 2800, height: 1000};
beforeEach(() => {
sinon.stub(global, 'setTimeout');
contentItem = contentItemModel.createContentItem(contents, 30, 'fade');
previousContentItem = contentItemModel.createContentItem(previousContents, 30, 'none');
wrapper = mount(<PlaylistPreviewDetailView contentItem={contentItem}
previousContentItem={previousContentItem}
resolution={DEFAULT_RESOLUTION}
previewWindowSize={DEFAULT_PREVIEW_WINDOW_SIZE}
/>);
sinon.spy(wrapper.instance(), "animate");
});
afterEach(() => {
global.setTimeout.restore();
});
describe('resolution', () => {
describe('resolution ratio is 16/9', () => {
beforeEach(() => {
wrapper.setProps(
{
resolution: {
text: '2560x1440',
orientation: 'horizontal'
}
});
});
it('when preview detail ratio bigger then resolution ratio than modify width', () => {
const previewWindowSize = {
width: 2560,
height: 1200
};
expect(wrapper.instance().getPreviewBodyFrameSize(wrapper.instance().props.resolution, previewWindowSize))
.to.deep.equal({contentItemSize: {width: 2133, height: 1200}, mountDepth: {width: 213, height:0}});
});
it('when preview detail ratio smaller then resolution ratio modify than modify height', () => {
const previewWindowSize ={
width: 1750,
height: 1440
};
expect(wrapper.instance().getPreviewBodyFrameSize(wrapper.instance().props.resolution, previewWindowSize))
.to.deep.equal({contentItemSize: {width: 1750, height: 984}, mountDepth: {width: 0, height:228}});
});
});
describe('resolution ratio is 9/16', () => {
beforeEach(() => {
wrapper.setProps({resolution: {
text: '16x9',
orientation: 'vertical'
}})
});
it('when preview detail ratio smaller then resolution ratio than modify height', () => {
const previewWindowSize = {
width: 750,
height: 2560
};
expect(wrapper.instance().getPreviewBodyFrameSize(wrapper.instance().props.resolution, previewWindowSize))
.to.deep.equal({contentItemSize: {width: 750, height: 1333}, mountDepth: {width: 0, height:613}});
});
it('when preview detail ratio bigger then resolution ratio than modify width', () => {
const previewWindowSize = {
width: 1440,
height: 2000
};
expect(wrapper.instance().getPreviewBodyFrameSize(wrapper.instance().props.resolution, previewWindowSize))
.to.deep.equal({contentItemSize: {width: 1125, height: 2000}, mountDepth: {width: 157, height:0}});
});
});
});
describe('video type', () => {
const CONTENT_URL = "http://nexshop-api-gateway-manualtest.ap-northeast-2.elasticbeanstalk.com/api/v1/files/831d3ea793654233966117af7d95604d";
const videoContents = Object.freeze({
type: "video",
metaData: {
contentUrl: CONTENT_URL,
mimeType: "video/mp4",
}
});
let videoContentItem;
beforeEach(() => {
videoContentItem = contentItemModel.createContentItem(videoContents, 30, 'none');
wrapper = mount(<PlaylistPreviewDetailView contentItem={videoContentItem}
previousContentItem={previousContentItem}
resolution={DEFAULT_RESOLUTION}
previewWindowSize={DEFAULT_PREVIEW_WINDOW_SIZE}/>);
wrapper.setState({active: true});
});
it('has detail dom elements', () => {
expect(wrapper.find('.preview-detail--video').exists()).to.be.true;
expect(wrapper.find('video').exists()).to.be.true;
});
it('has src attribute with thumbnail url', () => {
expect(wrapper.find('video').prop('src')).to.equal(CONTENT_URL);
});
it('has type attribute with mimeType', () => {
expect(wrapper.find('video').prop('type')).to.equal("video/mp4");
});
});
describe('scene type', () => {
const sceneContent = Object.freeze({
name: '',
metaData: {
panels: [],
display: {
resolution: DEFAULT_RESOLUTION,
orientation: 'horizontal',
}
},
relatedContents: undefined,
type: 'scene'
});
let sceneContentItem;
beforeEach(() => {
sceneContentItem = contentItemModel.createContentItem(sceneContent, 30, 'none');
wrapper = mount(<PlaylistPreviewDetailView contentItem={sceneContentItem}
previousContentItem={previousContentItem}
resolution={DEFAULT_RESOLUTION}
previewWindowSize={DEFAULT_PREVIEW_WINDOW_SIZE}/>);
wrapper.setState({active: true});
});
it('has detail dom elements', () => {
expect(wrapper.find(ScenePreviewDetailView).exists()).to.be.true;
});
it('scene, previewWindowSize and sceneLayoutSize props to ScenePreviewDetailView', () => {
const scene = Object.freeze(({
display: {
orientation: "horizontal",
resolution: {
orientation: "horizontal",
text: "16x9"
}
},
panels: []
}));
expect(wrapper.find(ScenePreviewDetailView).prop('scene')).to.deep.equal(scene);
expect(wrapper.find(ScenePreviewDetailView).prop('previewWindowSize')).to.deep.equal({width: 2550, height: 1000});
expect(wrapper.find(ScenePreviewDetailView).prop('sceneLayoutSize')).to.deep.equal({width: 960, height: 540});
});
});
describe('none -> fade', () => {
it('have detail dom elements', () => {
expect(wrapper.find('.preview-detail-fade').length).to.equal(2);
});
it('has css style with opacity, transition', () => {
expect(wrapper.find('.preview-detail-fade').at(0).node.style.opacity).to.equal('0');
wrapper.setState({active: true});
expect(wrapper.find('.preview-detail-fade').at(0).node.style.opacity).to.equal('1');
});
it('has contentUrl', () => {
expect(wrapper.find('.preview-detail-fade').at(0).node.style.backgroundImage)
.to.equal(`url(${contents.metaData.contentUrl})`);
});
it('has previousContentUrl', () => {
expect(wrapper.find('.preview-detail-fade').at(1).node.style.backgroundImage)
.to.equal(`url(${previousContents.metaData.contentUrl})`);
});
it('has not previousContent', () => {
wrapper = mount(<PlaylistPreviewDetailView contentItem={contentItem}
resolution={DEFAULT_RESOLUTION}
previewWindowSize={DEFAULT_PREVIEW_WINDOW_SIZE}/>);
expect(wrapper.find('.preview-detail-fade').at(1).node.style.backgroundImage).to.equal("url()");
});
});
describe('No effect', () => {
it('has detail dom elements', () => {
contentItem = contentItemModel.createContentItem(contents, 30, 'none');
wrapper = shallow(<PlaylistPreviewDetailView contentItem={contentItem}
previousContentItem={previousContentItem}
resolution={DEFAULT_RESOLUTION}
previewWindowSize={DEFAULT_PREVIEW_WINDOW_SIZE}/>);
expect(wrapper.find('.preview-detail').length).to.equal(1);
});
});
describe('Slide', () => {
beforeEach(() => {
contentItem = contentItemModel.createContentItem(contents, 30, 'slide');
wrapper = mount(<PlaylistPreviewDetailView contentItem={contentItem}
previousContentItem={previousContentItem}
resolution={DEFAULT_RESOLUTION}
previewWindowSize={DEFAULT_PREVIEW_WINDOW_SIZE}/>);
});
it('has css style with height, transition', () => {
wrapper.setState({active: false});
expect(wrapper.find('.preview-detail-slide').at(0).node.style.transition).to.equal('');
expect(wrapper.find('.preview-detail-slide').at(1).node.style.transition).to.equal('');
wrapper.setState({active: true});
expect(wrapper.find('.preview-detail-slide').at(0).node.style.transition).to.equal('left 1s');
expect(wrapper.find('.preview-detail-slide').at(1).node.style.transition).to.equal('left 1s');
expect(wrapper.find('.preview-detail-slide').at(0).node.style.left).to.equal('636px');
});
it('has detail dom elements', () => {
contentItem = contentItemModel.createContentItem(contents, 30, 'slide');
wrapper = shallow(<PlaylistPreviewDetailView contentItem={contentItem}
previousContentItem={previousContentItem}
resolution={DEFAULT_RESOLUTION}
previewWindowSize={DEFAULT_PREVIEW_WINDOW_SIZE}/>);
expect(wrapper.find('.preview-detail-slide').length).to.equal(2);
});
it('has not previousContent', () => {
wrapper = mount(<PlaylistPreviewDetailView contentItem={contentItem}
resolution={DEFAULT_RESOLUTION}
previewWindowSize={DEFAULT_PREVIEW_WINDOW_SIZE}/>);
expect(wrapper.find('.preview-detail-slide').at(1).node.style.backgroundImage).to.equal("url()");
});
});
describe('Blind', () => {
beforeEach(() => {
contentItem = contentItemModel.createContentItem(contents, 30, 'blind');
wrapper = mount(<PlaylistPreviewDetailView contentItem={contentItem}
previousContentItem={previousContentItem}
resolution={DEFAULT_RESOLUTION}
previewWindowSize={DEFAULT_PREVIEW_WINDOW_SIZE}/>);
});
it('has css style with height, transition', () => {
wrapper.setState({active: false});
expect(wrapper.find('.preview-detail-blind').at(0).node.style.transition).to.equal('');
wrapper.setState({active: true});
expect(wrapper.find('.preview-detail-blind').at(0).node.style.transition).to.equal('top 1s');
});
it('has detail dom elements', () => {
wrapper = shallow(<PlaylistPreviewDetailView contentItem={contentItem}
previousContentItem={previousContentItem}
resolution={DEFAULT_RESOLUTION}
previewWindowSize={DEFAULT_PREVIEW_WINDOW_SIZE}/>);
expect(wrapper.find('.preview-detail-blind').length).to.equal(2);
});
it('has not previousContent', () => {
wrapper = mount(<PlaylistPreviewDetailView contentItem={contentItem}
resolution={DEFAULT_RESOLUTION}
previewWindowSize={DEFAULT_PREVIEW_WINDOW_SIZE}/>);
expect(wrapper.find('.preview-detail-blind').at(0).node.style.backgroundImage).to.equal("url()");
});
});
describe('animate method', () => {
let timeout;
beforeEach(() => {
wrapper.instance().animate();
expect(wrapper.state('active')).to.be.false;
timeout = global.setTimeout.lastCall.args[0];
timeout();
});
afterEach(() => {
wrapper.instance().animate.restore();
});
it('sets timeout for change active state', () => {
expect(global.setTimeout.calledWith(sinon.match.func)).to.be.true;
});
it('changes active state with true', () => {
expect(wrapper.state('active')).to.be.true;
});
it('not changes active state with true', () => {
wrapper.setState({active: true});
timeout();
expect(wrapper.state('active')).to.be.true;
});
});
describe('lifecycle method', () => {
beforeEach(() => {
sinon.stub(global, 'clearTimeout');
});
afterEach(() => {
global.clearTimeout.restore();
});
it('call "animate()" and set state active to false when componentDidMount', () => {
wrapper.instance().componentDidMount();
expect(wrapper.instance().animate.called).to.be.true;
expect(wrapper.state('active')).to.be.false;
});
it('componentWillReceiveProps sets active state with false', () => {
wrapper.setState({active: true});
wrapper.instance().componentWillReceiveProps();
expect(wrapper.state('active')).to.be.false;
});
it('call timeout', () => {
wrapper.instance().componentWillUnmount();
expect(global.clearTimeout.called).to.be.true;
});
});
});