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

Nexshop Web Contents Project

import React from 'react';
import {expect} from 'chai';
import {shallow} from "enzyme";
import sinon from "sinon";
import SceneResource from "../../../../src/component/scene/scene-resource/scene-resource-view";

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

    let tabs = ['Layout', 'Templates', 'Contents', 'Widget'];

    let instance;

    const SELECTED_TAB_ID = 'layout';
    const CONTENTS = [{id: 'contentsItem1'}, {id: 'contentsItem2'}];
    const FOLDERS = [{id: 'f1', name: 'folder'}];
    const SELECTED_LAYOUT_ID = '1';
    const orientation = 'horizontal';

    const spyChangeLayout = sinon.spy();
    const spySelectTab = sinon.spy();

    beforeEach(() => {
        wrapper = shallow(<SceneResource changeLayout={spyChangeLayout}
                                         orientation={orientation}
                                         selectTab={spySelectTab}
                                         selectedTabId={SELECTED_TAB_ID}
                                         contents={CONTENTS}
                                         folders={FOLDERS}
                                         selectedLayoutId={SELECTED_LAYOUT_ID}/>);
        instance = wrapper.instance();
    });

    describe('render', () => {

        it('show layout button when selecetedTabId is layout', () => {
            wrapper.setProps({selectedTabId: 'layout'});
            expect(wrapper.find('.scene-tab__button--selected').exists()).to.true;
            expect(wrapper.find('.scene-tab__button--selected').text()).to.equal('Layout');
        });

        it('show template button when selecetedTabId is template', () => {
            wrapper.setProps({selectedTabId: 'template'});
            expect(wrapper.find('.scene-tab__button--selected').exists()).to.true;
            expect(wrapper.find('.scene-tab__button--selected').text()).to.equal('Templates');
        });

        it('show contents button when selecetedTabId is contents', () => {
            wrapper.setProps({selectedTabId: 'contents'});
            expect(wrapper.find('.scene-tab__button--selected').exists()).to.true;
            expect(wrapper.find('.scene-tab__button--selected').text()).to.equal('Contents');
        });

        it('show widget button when selecetedTabId is widget', () => {
            wrapper.setProps({selectedTabId: 'widget'});
            expect(wrapper.find('.scene-tab__button--selected').exists()).to.true;
            expect(wrapper.find('.scene-tab__button--selected').text()).to.equal('');
        });

    });

    describe('Mapping props and actions', () => {
        it('has props.changeLayout', () => {
            expect(instance.props.changeLayout).to.equal(spyChangeLayout);
        });

        it('has props.selectTab', () => {
            expect(instance.props.selectTab).to.equal(spySelectTab);
        });

        it('has props.selectedTabId', () => {
            expect(instance.props.selectedTabId).to.equal(SELECTED_TAB_ID);
        });

        it('has props.contents', () => {
            expect(instance.props.contents).to.deep.equal(CONTENTS);
        });

        it('has props.selectedLayoutId', () => {
            expect(instance.props.selectedLayoutId).to.equal(SELECTED_LAYOUT_ID);
        });
    });

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

    it('has 4 layout tab button', () => {
        expect(wrapper.find('.scene-tab__button--selected').length).to.be.equal(1);
        expect(wrapper.find('.scene-tab__button').length).to.be.equal(tabs.length - 1);
    });

    it('tab button should selected when within selectedTabId', () => {
        expect(wrapper.find('.scene-tab__button--selected').text()).to.equal('Layout');
    });

    it('call selectTab when click tab button(layout)', () => {
        wrapper.find('.scene-tab__button--selected').simulate('click');

        expect(spySelectTab.calledWith('layout')).to.be.true;
    });

    it('call selectTab when click tab button(contents)', () => {
        wrapper.find('.scene-tab__button').at(1).simulate('click');

        expect(spySelectTab.calledWith('contents')).to.be.true;
    });
});