opds-web-client/lib/components/__tests__/Collection-test.js

OPDS web client

"use strict";
var chai_1 = require("chai");
var sinon_1 = require("sinon");
var React = require("react");
var enzyme_1 = require("enzyme");
var Collection_1 = require("../Collection");
var Lanes_1 = require("../Lanes");
var Book_1 = require("../Book");
var FacetGroup_1 = require("../FacetGroup");
var SkipNavigationLink_1 = require("../SkipNavigationLink");
var collectionData_1 = require("./collectionData");
var routing_1 = require("./routing");
describe("Collection", function () {
    describe("empty collection", function () {
        it("says the collection is empty", function () {
            var collectionData = Object.assign({}, collectionData_1.groupedCollectionData, { lanes: [] });
            var wrapper = enzyme_1.shallow(React.createElement(Collection_1.default, { collection: collectionData }));
            chai_1.expect(wrapper.text()).to.equal("No books here.");
        });
    });
    describe("collection with lanes", function () {
        var collectionData = collectionData_1.groupedCollectionData;
        var wrapper;
        beforeEach(function () {
            wrapper = enzyme_1.shallow(React.createElement(Collection_1.default, { collection: collectionData }));
        });
        it("contains main div", function () {
            var link = wrapper.find("#collection-main");
            chai_1.expect(link.length).to.equal(1);
        });
        it("shows lanes", function () {
            var lanes = wrapper.find(Lanes_1.Lanes);
            chai_1.expect(lanes.props().url).to.equal(collectionData.url);
            chai_1.expect(lanes.props().lanes).to.equal(collectionData.lanes);
        });
    });
    describe("collection without lanes", function () {
        var collectionData = collectionData_1.ungroupedCollectionData;
        var wrapper;
        beforeEach(function () {
            wrapper = enzyme_1.shallow(React.createElement(Collection_1.default, { collection: collectionData }));
        });
        it("contains main div", function () {
            var link = wrapper.find("#collection-main");
            chai_1.expect(link.length).to.equal(1);
        });
        it("shows books in order", function () {
            var books = wrapper.find(Book_1.default);
            var bookDatas = books.map(function (book) { return book.props().book; });
            var uniqueCollectionUrls = Array.from(new Set(books.map(function (book) { return book.props().collectionUrl; })));
            chai_1.expect(books.length).to.equal(collectionData.books.length);
            chai_1.expect(bookDatas).to.deep.equal(collectionData.books);
            chai_1.expect(uniqueCollectionUrls).to.deep.equal([collectionData.url]);
        });
    });
    describe("collection with facetGroups", function () {
        var collectionData, wrapper;
        beforeEach(function () {
            collectionData = {
                id: "test collection",
                url: "test url",
                title: "title",
                books: [],
                lanes: [],
                navigationLinks: [],
                facetGroups: [{
                        label: "group",
                        facets: []
                    }]
            };
            wrapper = enzyme_1.shallow(React.createElement(Collection_1.default, { collection: collectionData }));
        });
        it("shows facet groups", function () {
            var facetGroups = wrapper.find(FacetGroup_1.default);
            var facetGroupDatas = facetGroups.map(function (group) { return group.props().facetGroup; });
            chai_1.expect(facetGroups.length).to.equal(1);
            chai_1.expect(facetGroupDatas).to.deep.equal(collectionData.facetGroups);
        });
        it("shows skip navigation link for facet groups", function () {
            var links = wrapper.find(SkipNavigationLink_1.default);
            chai_1.expect(links.length).to.equal(1);
        });
    });
    describe("collection with next page", function () {
        it("fetches next page on scroll to bottom", function () {
            var fetchPage = sinon_1.stub();
            var collectionData = {
                id: "test collection",
                url: "test url",
                title: "title",
                books: [],
                lanes: [],
                navigationLinks: [],
                nextPageUrl: "next"
            };
            var context = routing_1.mockRouterContext();
            var wrapper = enzyme_1.mount(React.createElement(Collection_1.default, { collection: collectionData, fetchPage: fetchPage }), { context: context });
            var main = wrapper.instance().refs["collection-main"];
            main.scrollTop = 1000;
            main.scrollHeight = 1;
            main.clientHeight = 1;
            wrapper.instance().handleScrollOrResize();
            chai_1.expect(fetchPage.callCount).to.equal(1);
            chai_1.expect(fetchPage.args[0][0]).to.equal("next");
        });
        it("fetches next page if first page doesn't fill window", function () {
            var fetchPage = sinon_1.stub();
            var collectionData = {
                id: "test collection",
                url: "test url",
                title: "title",
                books: [],
                lanes: [],
                navigationLinks: [],
                nextPageUrl: "next"
            };
            var context = routing_1.mockRouterContext();
            var wrapper = enzyme_1.mount(React.createElement(Collection_1.default, { collection: collectionData, fetchPage: fetchPage }), { context: context });
            var main = wrapper.instance().refs["collection-main"];
            main.scrollTop = 1000;
            main.scrollHeight = 1;
            main.clientHeight = 1;
            wrapper.mount();
            chai_1.expect(fetchPage.callCount).to.equal(1);
            chai_1.expect(fetchPage.args[0][0]).to.equal("next");
        });
        it("fetches next page if newly loaded page doesn't fill window", function () {
            var fetchPage = sinon_1.stub();
            var collectionData = {
                id: "test collection",
                url: "test url",
                title: "title",
                books: [],
                lanes: [],
                navigationLinks: [],
                nextPageUrl: "next"
            };
            var context = routing_1.mockRouterContext();
            var wrapper = enzyme_1.mount(React.createElement(Collection_1.default, { collection: collectionData, fetchPage: fetchPage }), { context: context });
            var main = wrapper.instance().refs["collection-main"];
            main.scrollTop = 1;
            main.scrollHeight = 100;
            main.clientHeight = 1000;
            wrapper.mount();
            chai_1.expect(fetchPage.callCount).to.equal(1);
            chai_1.expect(fetchPage.args[0][0]).to.equal("next");
            wrapper.setProps({ isFetching: false });
            // body's scroll attributes haven't changed
            chai_1.expect(fetchPage.callCount).to.equal(2);
            chai_1.expect(fetchPage.args[1][0]).to.equal("next");
        });
        it("shows loading indicator for next page", function () {
            var collectionData = {
                id: "test collection",
                url: "test url",
                title: "title",
                books: [],
                lanes: [],
                navigationLinks: [],
            };
            var wrapper = enzyme_1.shallow(React.createElement(Collection_1.default, { collection: collectionData, isFetchingPage: true }));
            var loadings = wrapper.find(".loading-next-page");
            chai_1.expect(loadings.length).to.equal(1);
        });
        it("contains next page button", function () {
            var fetchPage = sinon_1.stub();
            var collectionData = Object.assign({}, collectionData_1.ungroupedCollectionData, {
                nextPageUrl: "next page url"
            });
            var wrapper = enzyme_1.shallow(React.createElement(Collection_1.default, { collection: collectionData, isFetchingPage: false, fetchPage: fetchPage }));
            var link = wrapper.find(".next-page-link");
            chai_1.expect(link.text()).to.equal("Load more books");
        });
    });
    describe("collection that scrolls", function () {
        var collectionData = {
            id: "test collection",
            url: "test url",
            title: "title",
            books: [],
            lanes: [],
            navigationLinks: []
        };
        var wrapper;
        var context;
        var main;
        beforeEach(function () {
            context = routing_1.mockRouterContext();
            wrapper = enzyme_1.mount(React.createElement(Collection_1.default, { collection: collectionData, isFetching: true }), { context: context });
            main = wrapper.instance().refs["collection-main"];
            main.scrollTop = 1000;
            main.scrollHeight = 1;
            main.clientHeight = 1;
        });
        it("scrolls to top when new collection fetched successfully", function () {
            wrapper.setProps({ isFetching: false });
            chai_1.expect(main.scrollTop).to.equal(0);
        });
        it("does not scroll when there's an error", function () {
            var error = {
                status: 500,
                response: "error",
                url: "url"
            };
            wrapper = enzyme_1.mount(React.createElement(Collection_1.default, { collection: collectionData, isFetching: false, error: error }), { context: context });
            chai_1.expect(main.scrollTop).to.equal(1000);
        });
    });
});