scrollNavi.test.js

let ScrollNavi = require('../base_scrollNavi');


let mouseEventMock = {
    preventDefault: () => {},
    stopPropagation: () => {}
};


window.scrollBy = jest.fn();
window.getBoundingClientRect =  jest.fn(() => ({ width: 100 }));


beforeEach( () => {
    jest.spyOn(mouseEventMock, 'preventDefault');
    jest.spyOn(mouseEventMock, 'stopPropagation');
    jest.spyOn(window, 'scrollBy');

    this.expectedSections = [
        {name: "Karte & Angebote", id: 'karte-angebote'},
        {name: "Warum Chile", id: 'warum-chile'}
    ];

    this.expectedPageTopic = 'urlaub';

    document.head.innerHTML = '<meta name="Page-topic" content="' + this.expectedPageTopic + '">';
    document.body.innerHTML =
        '<div class="c24-cnt-ele wdgt-Transaction" id="' + this.expectedSections[0].id +'" data-scroll-navi-headline="' + this.expectedSections[0].name +'"></div>' +
        '<div class="c24-cnt-ele ck24-content" data-type="content-1" id="' + this.expectedSections[1].name +'" data-scrollnav-bold="true" data-scroll-navi-headline="' + this.expectedSections[1].name +'">';

    this.ck24_ScrollNavi = new NativScrollNavi();
} );


describe('ScrollNavi Tests', () => {

    test('Settings has a vertical', () => {
        expect(this.ck24_ScrollNavi.settings.vertical).toBe(this.expectedPageTopic);
    });

    describe('createNavContainer Tests', () => {

        test('has no sections', () => {
            document.body.innerHTML = null;
            const ck24_ScrollNavi = new NativScrollNavi();

            expect(ck24_ScrollNavi.sections).toBe(false);
            expect(ck24_ScrollNavi.createNavContainer()).toBe(false);
        });

        test('has sections', () => {
            const sections = this.ck24_ScrollNavi.sections;

            [].forEach.call(sections, (node, i) => {
                expect(node.dataset.scrollNaviHeadline).toBe(this.expectedSections[i].name);
            });
        });

        test('create head', () => {
            const createNavContainerHead = this.ck24_ScrollNavi.createNavContainerHead();

            expect(createNavContainerHead.localName).toBe('div');
            expect(createNavContainerHead.textContent).toBe(this.ck24_ScrollNavi.settings.navListHeader.title);
            expect(createNavContainerHead.classList.contains(this.ck24_ScrollNavi.settings.className.navListHead)).toBe(true);

            const navListHeadBurgerNodes = createNavContainerHead.querySelectorAll('.' + this.ck24_ScrollNavi.settings.className.navListHeadBurger + ' span');

            expect(navListHeadBurgerNodes.length).toBe(3);
        });

        test('create container', () => {
            this.ck24_ScrollNavi.createNavContainer();

            // the navListHead creation was tested in "test: create head"
            expect(this.ck24_ScrollNavi.navListHead.localName).toBe('div');

            const navListContainer = this.ck24_ScrollNavi.navListContainer;
            const navListItems = navListContainer.querySelectorAll('.' + this.ck24_ScrollNavi.settings.className.navContainer + ' li');
            const navListItemsBold = navListContainer.querySelectorAll('.' + this.ck24_ScrollNavi.settings.className.navContainer + ' li a.bold');

            expect(navListItems.length).toBe(this.expectedSections.length);
            expect(navListItemsBold.length).toBe(1);

            // test has nodes correct ordered
            [].forEach.call(navListContainer.childNodes, (node, i) => {
                if(i === 0) {
                    expect(node.localName).toBe('div');
                    expect(node.classList.contains(this.ck24_ScrollNavi.settings.className.navListHead)).toBe(true);
                }

                if(i === 1) {
                    expect(node.localName).toBe('ul');
                    expect(node.firstChild.id).toBe(this.expectedSections[0].id + '_');
                }
            });
        });

    });

    describe('test events', () => {

        test('click navListItem anchor', () => {
            jest.spyOn(this.ck24_ScrollNavi, 'scrollSmooth');

            this.ck24_ScrollNavi.lazyLoaded = true;
            this.ck24_ScrollNavi.createNavContainer();

            mouseEventMock.type = 'click';
            mouseEventMock.target = {
                hash: '#' + this.expectedSections[0].id,
                parentNode: this.ck24_ScrollNavi.navListContainer.querySelector('.' + this.ck24_ScrollNavi.settings.className.navContainer + ' li')
            };

            this.ck24_ScrollNavi.events().click.navListItems(mouseEventMock);

            expect(mouseEventMock.preventDefault).toBeCalled();
            expect(mouseEventMock.stopPropagation).toBeCalled();
            expect(this.ck24_ScrollNavi.scrollSmooth).toHaveBeenCalledWith(document.getElementById(this.expectedSections[0].id));

        });

    });

});