nexshop-web-contents/spec/component/contents/folder-view-spec.js

Nexshop Web Contents Project

import React from 'react';
import {expect} from 'chai';
import {mount, shallow} from "enzyme";
import sinon from "sinon";
import FolderView from "../../../src/component/contents/folder-view";

describe('Folder View Spec', () => {
    const spySetSelectionRange = sinon.spy();
    const spyUpdateFolderAsync = sinon.spy();
    const spyOnContextMenu = sinon.spy();
    const spyUpdateFolderData = sinon.spy();
    const spyOnDoubleClick = sinon.spy();
    const spyOnClick = sinon.spy();

    let wrapper;
    const FOLDER = Object.freeze({
        "createdTimestamp": "2017-10-24T07:01:36.026Z",
        "lastModifiedTimestamp": "2017-10-24T07:01:36.027Z",
        "id": "3423424",
        "parentId": "334535",
        "name": "Summer Festival",
        "ancestors": [
            "334535"
        ]
    });

    beforeEach(() => {
        wrapper = shallow(<FolderView folder={FOLDER} updateFolderAsync={sinon.spy()}
                                      onContextMenu={spyOnContextMenu} updateFolderData={spyUpdateFolderData}
                                      onDoubleClick={spyOnDoubleClick} onClick={spyOnClick}
        />);
    });

    afterEach(() => {
        spySetSelectionRange.reset();
        spyUpdateFolderAsync.reset();
        spyOnContextMenu.reset();
        spyUpdateFolderData.reset();
        spyOnDoubleClick.reset();
        spyOnClick.reset();
    });

    it('shows folder name with given props', () => {
        expect(wrapper.find('.folder-item-name').text()).to.equal('Summer Festival');
    });

    it('shows update column lastModifiedTimestamp', () => {
        expect(wrapper.find('td').at(5).text()).to.equal('10-24-2017');
    });

    describe('input key & blur event', () => {
        const newFolder = Object.freeze({
            "id": "someFolderId",
            "name": "some folder name",
            "status": "new"
        });

        beforeEach(() => {
            //TODO: Please remove warning.
            wrapper = mount(
                <FolderView folder={newFolder} updateFolderAsync={spyUpdateFolderAsync}
                            onContextMenu={spyOnContextMenu} updateFolderData={spyUpdateFolderData}
                            onDoubleClick={spyOnDoubleClick} onClick={spyOnClick}
                />
            );

            wrapper.instance().titleInput.setSelectionRange = spySetSelectionRange;
            wrapper.instance().titleInput.value = 'new folder name';
        });

        it('focus out when esc key down', () => {
            expect(document.activeElement.classList.contains('folder-item-name--new')).to.be.true;

            wrapper.find('.folder-item-name--new').simulate('keyup', {key: 'Escape'});

            expect(document.activeElement.classList.contains('folder-item-name--new')).to.be.false;
        });

        it('focus out when esc key down', () => {
            expect(document.activeElement.classList.contains('folder-item-name--new')).to.be.true;

            wrapper.find('.folder-item-name--new').simulate('keyup', {key: 'Enter'});

            expect(document.activeElement.classList.contains('folder-item-name--new')).to.be.false;
        });

        it('titleInput is focused and setSelectionRange is called when componentDidMount call', () => {
            const focusTitleInputAndSelect = sinon.spy(wrapper.instance(), 'focusTitleInputAndSelect');
            wrapper.instance().componentDidMount();

            expect(document.activeElement.classList.contains('folder-item-name--new')).to.be.true;
            expect(focusTitleInputAndSelect.called).to.true;
        });

        it('titleInput is focused and setSelectionRange is called when componentDidUpdate call', () => {
            const focusTitleInputAndSelect = sinon.spy(wrapper.instance(), 'focusTitleInputAndSelect');
            wrapper.instance().componentDidUpdate();

            expect(document.activeElement.classList.contains('folder-item-name--new')).to.be.true;
            expect(focusTitleInputAndSelect.called).to.true;
        });

        it('when focusTitleInputAndSelect then call setSelectionRange and set input value is "new folder name"', () => {
            wrapper.instance().focusTitleInputAndSelect();

            expect(wrapper.instance().titleInput.value).to.equal('some folder name');

            expect(spySetSelectionRange.calledWith(0, 'some folder name'.length)).to.true;
        });
        
        it('titleInput is not blured when keyup except in Escape or Enter key', () => {
            expect(document.activeElement.classList.contains('folder-item-name--new')).to.be.true;
            wrapper.find('.folder-item-name--new').simulate('keyup', {key: 'Space'});

            expect(document.activeElement.classList.contains('folder-item-name--new')).to.be.true;
        });

        describe('folderNameInputBlurred method test', () => {
            it('call updateFolderAsync with folder name when focus is out', () => {
                wrapper.find('.folder-item-name--new').simulate('blur');

                expect(spyUpdateFolderAsync.calledWith(newFolder, 'new folder name')).to.be.true;
            });

            it('when input value and folder name is same', () => {
                wrapper.instance().titleInput.value = 'some folder name';
                wrapper.find('.folder-item-name--new').simulate('blur');

                expect(spyUpdateFolderData.called).to.true;
            });

            it('call getFolder with error state', () => {
                expect(wrapper.instance().getFolder({status: 'error'}).status).to.equal('new');
                expect(wrapper.instance().getFolder({status: 'new'})).to.not.have.property('status');
            });
        });
    });

    describe('context menu event', () => {
        it('mouse right click', () => {
            wrapper.find('.folder-item').simulate('contextmenu');
            expect(spyOnContextMenu.called).to.true;
        });
    });

    describe('double click event', () => {
        it('folder double click', () => {
            wrapper.find('.folder-item').simulate('doubleclick');
            expect(spyOnDoubleClick.called).to.true;
        });
    });

    describe('click event', () => {
       it('folder click', () => {
           wrapper.find('.folder-item').simulate('click');
           expect(spyOnClick.called).to.true;
       });
    });

    describe('render', () => {
        it('selected background not exists when folder is not selected', () => {
             expect(wrapper.find('.folder-item--selected')).to.be.lengthOf(0);
        });

        it('show selected background when folder is selected', () => {
            wrapper.setProps({
                selectedContentsItemIds: ['3423424']
            });
            expect(wrapper.find('.folder-item--selected')).to.be.lengthOf(1);
        });
    });
});