react-spy-scroll/test/scroller-test.js

Scrollspy components for react

/* eslint-env node, mocha */
/* eslint-disable newline-per-chained-call */
import React from 'react';
import ReactDOM from 'react-dom';
import Adapter from 'enzyme-adapter-react-16';
import Enzyme, { mount } from 'enzyme';
import { spy } from 'sinon';
import { expect } from 'chai';
import AnchorElement from './../src/anchor-element';
import { Scroller } from './../src/scroller';

Enzyme.configure({ adapter: new Adapter() });

// Utils
const size = (instance) => Object.keys(instance._elementPanelRegister).length;
const createAnchorElement = () => {
    const wrapper = mount(<AnchorElement id="test"><h1>Test</h1></AnchorElement>);
    spy(wrapper.instance(), 'getConfig');

    return wrapper.instance();
};

// So we can work on a clean instance for each test
let scroller = null;
beforeEach(() => {
    scroller = new Scroller();
});
afterEach(() => {
    scroller = null;
});


describe('Scroller', () => {
    describe('register/unregister functions', () => {
        it('should export a object', () => {
            expect(typeof scroller).to.equal('object'); // Instance
            expect(typeof Scroller).to.equal('function'); // Class definition
        });

        it('should be initially empty', () => {
            expect(size(scroller)).to.equal(0);
        });

        it('should not keep duplicate ids', () => {
            scroller.registerElementPanel('id1', {});
            scroller.registerElementPanel('id1', {});
            scroller.registerElementPanel('id1', {});

            expect(size(scroller)).to.equal(1);
        });

        it('should delete based on id', () => {
            scroller.registerElementPanel('id1', {});
            scroller.registerElementPanel('id2', {});
            scroller.registerElementPanel('id1', {});
            scroller.registerElementPanel('id2', {});

            expect(size(scroller)).to.equal(2);

            scroller.unregisterElementPanel('id2');

            expect(size(scroller)).to.equal(1);
        });

        it('should retain the last registered element', () => {
            scroller.registerElementPanel('id1', 'first');
            scroller.registerElementPanel('id1', 'second');

            const element = scroller.getElementPanel('id1');

            expect(element).to.equal('second');
        });
    });

    describe('prepareToScroll', () => {
        it('should throw Error if element was not found', () => {
            const error = 'Could not find any component with id: dummy';
            expect(() => scroller.prepareToScroll('dummy')).to.throw(error);
        });

        it('should fetch config from the component', () => {
            const element = createAnchorElement();
            // eslint-disable-next-line react/no-find-dom-node
            const component = ReactDOM.findDOMNode(element);
            spy(component, 'getBoundingClientRect');

            scroller.registerElementPanel('id', element);

            scroller.prepareToScroll('id');

            expect(element.getConfig.calledOnce).to.equal(true);
            expect(component.getBoundingClientRect.calledOnce).to.equal(true);
        });
    });
});