import * as angular from 'angular';
import 'angular-mocks';
import { PageSelector } from './page-selector.component';

describe('PageSelector component', () => {
    beforeEach(() => {
        angular
            .module('app', ['app/core/components/page-selector/page-selector.component.html'])
            .component('pageSelector', new PageSelector());
        angular.mock.module('app');
    });

    it('should render UL correctly when max-page is set', angular.mock.inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
        const $scope = <any> $rootScope.$new();
        $scope.maxPage = 5;
        const element = $compile('<page-selector max-page="maxPage"></page-selector>')($scope);
        $scope.$digest();
        const elements = element.find('ul');
        expect(elements.length).toEqual(1);
    }));

    it('should not render UL when max-page is not set', angular.mock.inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
        const $scope = <any>$rootScope.$new();
        $scope.maxPage = 5;
        const element = $compile('<page-selector></page-selector>')($scope);
        $scope.$digest();
        const elements = element.find('ul');
        expect(elements.length).toEqual(0);
    }));

    it('should add disable class to previous button when page eq 1', angular.mock.inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
        const $scope = <any>$rootScope.$new();
        $scope.maxPage = 5;
        $scope.page = 1;
        const element = $compile('<page-selector max-page="maxPage" page="page"></page-selector>')($scope);
        $scope.$digest();
        expect(element.find('li:first').hasClass('disabled')).toBe(true);
    }));

    it('should remove disable class from previous button when page gt 1', angular.mock.inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
        const $scope = <any>$rootScope.$new();
        $scope.maxPage = 5;
        $scope.page = 2;
        const element = $compile('<page-selector max-page="maxPage" page="page"></page-selector>')($scope);
        $scope.$digest();
        expect(element.find('li:first').hasClass('disabled')).toBe(false);
    }));

    it('should add disable class to next button when page eq maxPage', angular.mock.inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
        const $scope = <any>$rootScope.$new();
        $scope.maxPage = 5;
        $scope.page = 5;
        const element = $compile('<page-selector max-page="maxPage" page="page"></page-selector>')($scope);
        $scope.$digest();
        expect(element.find('li:last').hasClass('disabled')).toBe(true);
    }));

    it('should remove disable class from next button when page lt maxPage', angular.mock.inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
        const $scope = <any>$rootScope.$new();
        $scope.maxPage = 5;
        $scope.page = 2;
        const element = $compile('<page-selector max-page="maxPage" page="page"></page-selector>')($scope);
        $scope.$digest();
        expect(element.find('li:last').hasClass('disabled')).toBe(false);
    }));

    it('should not calculate amount of pages by default', angular.mock.inject($componentController => {
        const bindings = {
            maxPage: 5
        };
        const component = $componentController('pageSelector', {}, bindings);
        component.$onChanges({});

        expect(component.pages).toBeUndefined();
    }));

    it('should calculate amount of pages', angular.mock.inject($componentController => {
        const bindings = {
            maxPage: 5
        };
        const component = $componentController('pageSelector', {}, bindings);
        component.$onChanges({
            maxPage: true
        });

        expect(component.pages.length).toEqual(5);
    }));

    it('should call pageChanged when calling onPageChanged', angular.mock.inject($componentController => {
        const pageSize = 10;
        const bindings = {
            pageChanged: (value) => { }
        };
        spyOn(bindings, 'pageChanged');

        const component = $componentController('pageSelector', {}, bindings);
        component.onPageChanged(3);

        expect(bindings.pageChanged).toHaveBeenCalledWith(jasmine.objectContaining({
            page: 3
        }));
    }));

    it('should render amount of pages', angular.mock.inject(($rootScope: ng.IRootScopeService, $compile: ng.ICompileService) => {
        const $scope = <any>$rootScope.$new();
        $scope.maxPage = 5;
        const element = $compile('<page-selector max-page="maxPage"></page-selector>')($scope);
        $scope.$digest();
        const elements = element.find('li');
        expect(elements.length).toEqual($scope.maxPage + 2);
    }));



});