nexshop-web-contents/spec/component/preview/playlist/playlist-preview-list-view-spec.js

Nexshop Web Contents Project

import React from 'react';
import {expect} from 'chai';
import {mount} from "enzyme";
import sinon from "sinon";
import * as DomHelper from '../../../../src/helpers/dom-helper';
import {contentItemModel} from "nexshop-web-store";
import PlaylistPreviewListView from "../../../../src/component/preview/playlist/playlist-preview-list-view";

describe('Playlist Preview List View Spec', () => {
    let wrapper;
    let spySelectPreviewItem;
    let previewItemNodes;

    const contentItems = [
        {
            id: 1,
            name: 'first.file',
            lastModifiedTimestamp: '2017-09-07T09:15:51.283Z',
            type: 'image',
            fileSizeBytes: 213674,
            thumbnailUrls: {
                thumbnail: 'first.thumbnail.file',
            },
        },
        {
            id: 2,
            name: 'second.file',
            lastModifiedTimestamp: '2017-09-08T16:15:51.283Z',
            type: 'video',
            fileSizeBytes: 12345670,
            thumbnailUrls: {
                thumbnail: 'second.thumbnail.file'
            }
        },
    ].map(contents => contentItemModel.createContentItem(contents));

    contentItems[1].durationSeconds = 10;
    contentItems[1].transitionEffect = 'slide';

    beforeEach(() => {
        spySelectPreviewItem = sinon.spy();
        sinon.stub(DomHelper, 'isElementInParent').returns(false);

        wrapper  = mount(<PlaylistPreviewListView contentItems={contentItems}
                                                    onSelectPreviewItem={spySelectPreviewItem}
                                                    selectedPreviewItemIndex={1}
        />);

        previewItemNodes = wrapper.find('.preview-list-body').children().nodes;
        previewItemNodes.forEach(node => node.scrollIntoView = () => {});
    });

    afterEach(() => {
        DomHelper.isElementInParent.restore();
    });

    it('has preview items as length of contentItems', () => {
        expect(wrapper.find('.preview-item').length).to.equal(contentItems.length);
        expect(wrapper.find('.preview-item__thumbnail').length).to.equal(contentItems.length);
        expect(wrapper.find('.preview-item-name__prefix').length).to.equal(contentItems.length);
        expect(wrapper.find('.preview-item-name__suffix').length).to.equal(contentItems.length);
        expect(wrapper.find('.preview-item__duration').length).to.equal(contentItems.length);
        expect(wrapper.find('.preview-item__effect').length).to.equal(contentItems.length);
    });

    it('has same value with thumbnail and name ', () => {
        expect(wrapper.find('.preview-item__thumbnail').at(0).node.style.backgroundImage).to.equal('url(first.thumbnail.file)');
        expect(wrapper.find('.preview-item__thumbnail').at(1).node.style.backgroundImage).to.equal('url(second.thumbnail.file)');

        let first = contentItems[0].contents;
        let second = contentItems[1].contents;
        expect(wrapper.find('.preview-item-name__prefix').at(0).text()).to.equal(first.name.substring(0, first.name.length - 8));
        expect(wrapper.find('.preview-item-name__suffix').at(1).text()).to.equal(second.name.substring(second.name.length - 8, second.name.length));
    });

    it('dispatches selectPreviewItem action when click preview item at position 0', () => {
        wrapper.find('.preview-item').at(0).simulate('click');

        expect(spySelectPreviewItem.calledWith(0)).to.be.true;
    });

    it('has preview-item-name--selected class when index of some item is equal to selectedPreviewItemIndex', () => {
        expect(wrapper.find('.preview-item').at(1).childAt(1).prop('className')).to.equal('preview-item-text--selected');
    });

    it('shows formatted durationSeconds', () => {
        expect(wrapper.find('.preview-item__duration').at(0).text()).to.equal('00:30');
        expect(wrapper.find('.preview-item__duration').at(1).text()).to.equal('00:10');
    });

    it('shows transitionEffect', () => {
        expect(wrapper.find('.preview-item__effect').at(0).text()).to.equal('No Effect');
        expect(wrapper.find('.preview-item__effect').at(1).text()).to.equal('Slide');
    });

    describe('previous item button click', () => {

        it('calls onSelectPreviewItem with selectedPreviewItemIndex - 1 when selectedPreviewItemIndex is greater than 0', () => {
            wrapper.setProps({selectedPreviewItemIndex: 1});
            wrapper.find('.preview-list-bottom__button').at(0).simulate('click');

            expect(spySelectPreviewItem.calledWith(0)).to.be.true;
        });

        it('calls onSelectPreviewItem with lastIndex of contentItems when selectedPreviewItemIndex is equal to 0', () => {
            wrapper.setProps({selectedPreviewItemIndex: 0});
            wrapper.find('.preview-list-bottom__button').at(0).simulate('click');

            expect(spySelectPreviewItem.calledWith(contentItems.length - 1)).to.be.true;
        });

        it('calls scrollIntoView of firstNode when isElementInParent is false', () => {
            sinon.stub(previewItemNodes[0], 'scrollIntoView');

            wrapper.find('.preview-list-bottom__button').at(0).simulate('click');
            expect(previewItemNodes[0].scrollIntoView.called).to.be.true;
        });
    });

    describe('next item button click', () => {
        it('calls onSelectPreviewItem with selectedPreviewItemIndex + 1 when selectedPreviewItemIndex is less than lastIndex of contentItems', () => {
            wrapper.setProps({selectedPreviewItemIndex: 0});
            wrapper.find('.preview-list-bottom__button').at(1).simulate('click');

            expect(spySelectPreviewItem.calledWith(1)).to.be.true;
        });

        it('calls onSelectPreviewItem with 0 when selectedPreviewItemIndex is equal to lastIndex of contentItems', () => {
            wrapper.setProps({selectedPreviewItemIndex: contentItems.length -1});
            wrapper.find('.preview-list-bottom__button').at(1).simulate('click');

            expect(spySelectPreviewItem.calledWith(0)).to.be.true;
        });

        it('calls scrollIntoView(false) of firstNode when isElementInParent is false', () => {
            sinon.stub(previewItemNodes[0], 'scrollIntoView');

            wrapper.find('.preview-list-bottom__button').at(1).simulate('click');
            expect(previewItemNodes[0].scrollIntoView.calledWith(false)).to.be.true;
        });
    });
});