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

Nexshop Web Contents Project

import React from 'react';
import {expect} from 'chai';
import sinon from "sinon";
import {shallow} from "enzyme";
import FloatingView from "../../../../src/component/contents/floating-view/floating-view";

describe('Floating View Spec', () => {
    let wrapper;
    let spyOnClose;
    const files = [
        {name: 'Image.jpg', type: 'image/jpeg'},
    ];

    beforeEach(() => {
        spyOnClose = sinon.spy();

        wrapper = shallow(<FloatingView files={files} onClose={spyOnClose}/>)
    });

    it('shows header text as "Uploading 1 item" when files length is one', () => {
       expect(wrapper.find('.floating-header__text').text()).to.equal('Uploading 1 item');
    });

    it('shows header text as "Uploading 2 items" when files length is two', () => {
        wrapper.setProps({files: [...files, {name: 'file.ext', type: 'ext/etc'}]});

        expect(wrapper.find('.floating-header__text').text()).to.equal('Uploading 2 items');
    });

    it('calls onClose when close icon is clicked', () => {
        wrapper.find('.floating-close').simulate('click');

        expect(spyOnClose.called).to.be.true;
    });

    it('renders upload file items', () => {
        expect(wrapper.find('.floating-body').children().length).to.equal(1);
    });

    describe('floating file', () => {
        let progressItem;
        let doneItem;
        
        describe('when file upload success', () => {
            beforeEach(() => {
                wrapper.setProps({files: [...files, {name: 'Video.mp4', type: 'video/mp4', status: 'done'}]});
                progressItem = wrapper.find('.floating-file').at(0);
                doneItem = wrapper.find('.floating-file').at(1);
            });

            it('has file name as text', () => {
                expect(progressItem.find('.floating-file__name').text()).to.equal('Image.jpg');
            });

            it('has icon by type', () => {
                expect(progressItem.find('.floating-file__icon-image').length).to.equal(1);
                expect(doneItem.find('.floating-file__icon-video').length).to.equal(1);
            });

            it('has progress icon when file status is progress', () => {
                expect(progressItem.find('.floating-file__progress').length).to.equal(1);
            });

            it('has done icon when file status is done', () => {
                expect(doneItem.find('.floating-file__done').length).to.equal(1);
            });
        });

        describe('when file upload fail because the file is already exist', () => {
            beforeEach(() => {
                wrapper.setProps({files: [...files, {name: 'Video.mp4', type: 'video/mp4', status: 'exist'}]});
                progressItem = wrapper.find('.floating-file').at(0);
                doneItem = wrapper.find('.floating-file').at(1);
            });

            it('has file name as text', () => {
                expect(progressItem.find('.floating-file__name').text()).to.equal('Image.jpg');
            });

            it('has icon by type', () => {
                expect(progressItem.find('.floating-file__icon-image').length).to.equal(1);
                expect(doneItem.find('.floating-file__icon-video').length).to.equal(1);
            });

            it('has progress icon when file status is progress', () => {
                expect(progressItem.find('.floating-file__progress').length).to.equal(1);
            });

            it('has fail icon when file status is exist', () => {
                expect(doneItem.find('.floating-file__fail').length).to.equal(1);
            });

            it('has fail message when file status is exist', () => {
                expect(wrapper.find('.floating-file__message').at(1).text()).to.equal('already exists');
            });
        });
    });
});