PHP Classes
elePHPant
Icontem

File: tests/src/NavbarTest.php

Recommend this page to a friend!
  Classes of Jorge Cobis  >  PHP Bootstrap Helpers  >  tests/src/NavbarTest.php  >  Download  
File: tests/src/NavbarTest.php
Role: Unit test script
Content type: text/plain
Description: Unit test script
Class: PHP Bootstrap Helpers
Generate HTML pages programatically with Bootstrap
Author: By
Last change: General namespace refactoring
Date: 4 years ago
Size: 19,327 bytes
 

 

Contents

Class file image Download
<?php

/*
 * BootHelp - Bootstrap Helpers written in PHP
 *
 * (The MIT License)
 *
 * Copyright (c) 2015 Jorge Cobis <jcobis@gmail.com / http://twitter.com/cobisja>.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

namespace BootHelp\Tests;

use cobisja\BootHelp\Navbar;
use cobisja\BootHelp\Nav;
use cobisja\BootHelp\Button;
use cobisja\BootHelp\Dropdown;
use cobisja\BootHelp\Helpers\LinkTo;
use cobisja\BootHelp\Helpers\Vertical;
use cobisja\BootHelp\Helpers\Horizontal;
use cobisja\BootHelp\Helpers\Divider;


class NavbarTest extends \PHPUnit_Framework_TestCase {
    public function testWithNoOptions() {
        /**
         * It should generates:
         *
         * <nav class="navbar navbar-default" role="navigation">
         *     <div class="container">
         *          <div class="navbar-header">
         *              <button data-target="#navbar-collapse-4880904" data-toggle="collapse" class="navbar-toggle" type="button">
         *                  <span class="sr-only">Toggle navigation</span>
         *                  <span class="icon-bar"></span>
         *                  <span class="icon-bar"></span>
         *                  <span class="icon-bar"></span>
         *              </button>
         *              <a href="#" class="navbar-brand">Home</a>
         *          </div>
         *          <div id="navbar-collapse-4880904" class="collapse navbar-collapse">
         *              <ul class="navbar-right nav navbar-nav">
         *                  <li><a href="#">Profile</a></li>
         *                  <li><a href="#">Settings</a></li>
         *              </ul>
         *          </div>
         *      </div>
         * </nav>
         */
        $navbar = new Navbar(function(){
            return [
                new Vertical(function(){ return new LinkTo('Home'); }),
                new Horizontal(function(){
                    return new Nav(['class'=>'navbar-right'], function(){
                        return [new LinkTo('Profile'), new LinkTo('Settings')];
                    });
                })
            ];
        });
        $html = $navbar->get_html();
        $this->validate_navbar($html);
    }

    public function testInvertedColorWhenSetInvertedOption() {
        /**
         * It should generates:
         *
         * <nav class="navbar navbar-inverse" role="navigation">
         *     <div class="container">
         *          <div class="navbar-header">
         *              <button data-target="#navbar-collapse-4880904" data-toggle="collapse" class="navbar-toggle" type="button">
         *                  <span class="sr-only">Toggle navigation</span>
         *                  <span class="icon-bar"></span>
         *                  <span class="icon-bar"></span>
         *                  <span class="icon-bar"></span>
         *              </button>
         *              <a href="#" class="navbar-brand">Home</a>
         *          </div>
         *          <div id="navbar-collapse-4880904" class="collapse navbar-collapse">
         *              <ul class="navbar-right nav navbar-nav">
         *                  <li><a href="#">Profile</a></li>
         *                  <li><a href="#">Settings</a></li>
         *              </ul>
         *          </div>
         *      </div>
         * </nav>
         */
        $navbar = new Navbar(['inverted'=>true], function(){
            return [
                new Vertical(function(){ return new LinkTo('Home'); }),
                new Horizontal(function(){
                    return new Nav(['class'=>'navbar-right'], function(){
                        return [new LinkTo('Profile'), new LinkTo('Settings')];
                    });
                })
            ];
        });
        $html = $navbar->get_html();
        $this->validate_navbar($html);
        $this->assertTrue($html->has_attribute('class', 'navbar-inverse'));
    }

    public function testGeneratesFuildContainerWhenSetFluidOption() {
        /**
         * It should generates:
         *
         * <nav class="navbar navbar-default" role="navigation">
         *     <div class="container-fluid">
         *          <div class="navbar-header">
         *              <button data-target="#navbar-collapse-4880904" data-toggle="collapse" class="navbar-toggle" type="button">
         *                  <span class="sr-only">Toggle navigation</span>
         *                  <span class="icon-bar"></span>
         *                  <span class="icon-bar"></span>
         *                  <span class="icon-bar"></span>
         *              </button>
         *              <a href="#" class="navbar-brand">Home</a>
         *          </div>
         *          <div id="navbar-collapse-4880904" class="collapse navbar-collapse">
         *              <ul class="navbar-right nav navbar-nav">
         *                  <li><a href="#">Profile</a></li>
         *                  <li><a href="#">Settings</a></li>
         *              </ul>
         *          </div>
         *      </div>
         * </nav>
         */
        $navbar = new Navbar(['fluid'=>true], function(){
            return [
                new Vertical(function(){ return new LinkTo('Home'); }),
                new Horizontal(function(){
                    return new Nav(['class'=>'navbar-right'], function(){
                        return [new LinkTo('Profile'), new LinkTo('Settings')];
                    });
                })
            ];
        });
        $html = $navbar->get_html();
        $this->validate_navbar($html);
        $this->assertTrue($html->get_child(0)->is_a('div', ['class'=>'container-fluid']));
    }

    /**
     * @dataProvider get_positions
     */
    public function testStaticNavBarWhenSetPositioOptionToUpOrDown($position) {
        /**
         * It should generates:
         *
         * <style>body {padding-{$position}: 70px}</style>
         * <nav class="navbar navbar-default navbar-fixed-{$position}" role="navigation">
         *     <div class="container">
         *          <div class="navbar-header">
         *              <button data-target="#navbar-collapse-4880904" data-toggle="collapse" class="navbar-toggle" type="button">
         *                  <span class="sr-only">Toggle navigation</span>
         *                  <span class="icon-bar"></span>
         *                  <span class="icon-bar"></span>
         *                  <span class="icon-bar"></span>
         *              </button>
         *              <a href="#" class="navbar-brand">Home</a>
         *          </div>
         *          <div id="navbar-collapse-4880904" class="collapse navbar-collapse">
         *              <ul class="navbar-right nav navbar-nav">
         *                  <li><a href="#">Profile</a></li>
         *                  <li><a href="#">Settings</a></li>
         *              </ul>
         *          </div>
         *      </div>
         * </nav>
         */
        $navbar = new Navbar(['position'=>$position], function(){
            return [
                new Vertical(function(){ return new LinkTo('Home'); }),
                new Horizontal(function(){
                    return new Nav(['class'=>'navbar-right'], function(){
                        return [new LinkTo('Profile'), new LinkTo('Settings')];
                    });
                })
            ];
        });
        $html = $navbar->get_html();
        $this->validate_navbar($html, true);
        $this->assertTrue($html->has_attribute('class', 'navbar-fixed-' . $position));

        $this->assertEquals("<style>body {padding-$position: 70px}</style>", $html->get_child(1)->to_string());
    }

    public function testStaticNavBarWhenSetPositioOptionToStatic() {
        /**
         * It should generates:
         *
         * <style>body {padding-{$position}: 70px}</style>
         * <nav class="navbar navbar-default navbar-static-top" role="navigation">
         *     <div class="container">
         *          <div class="navbar-header">
         *              <button data-target="#navbar-collapse-4880904" data-toggle="collapse" class="navbar-toggle" type="button">
         *                  <span class="sr-only">Toggle navigation</span>
         *                  <span class="icon-bar"></span>
         *                  <span class="icon-bar"></span>
         *                  <span class="icon-bar"></span>
         *              </button>
         *              <a href="#" class="navbar-brand">Home</a>
         *          </div>
         *          <div id="navbar-collapse-4880904" class="collapse navbar-collapse">
         *              <ul class="navbar-right nav navbar-nav">
         *                  <li><a href="#">Profile</a></li>
         *                  <li><a href="#">Settings</a></li>
         *              </ul>
         *          </div>
         *      </div>
         * </nav>
         */
        $navbar = new Navbar(['position'=>'static'], function(){
            return [
                new Vertical(function(){ return new LinkTo('Home'); }),
                new Horizontal(function(){
                    return new Nav(['class'=>'navbar-right'], function(){
                        return [new LinkTo('Profile'), new LinkTo('Settings')];
                    });
                })
            ];
        });
        $html = $navbar->get_html();
        $this->validate_navbar($html);
        $this->assertTrue($html->has_attribute('class', ['navbar-default', 'navbar-static-top']));
    }

    public function testWithExtraOptions() {
        /**
         * It should generates:
         *
         * <nav class="navbar navbar-default navbar-fixed-{$position}" role="navigation">
         *     <div class="container">
         *          <div data-js="1" class="en navbar-header">
         *              <button data-target="#my-navbar" data-toggle="collapse" class="navbar-toggle" type="button">
         *                  <span class="sr-only">Toggle navigation</span>
         *                  <span class="icon-bar"></span>
         *                  <span class="icon-bar"></span>
         *                  <span class="icon-bar"></span>
         *              </button>
         *              <a href="#" class="navbar-brand">Home</a>
         *          </div>
         *          <div id="my-navbar" class="en2 collapse navbar-collapse">
         *              <ul class="navbar-right nav navbar-nav">
         *                  <li><a href="#">Profile</a></li>
         *                  <li><a href="#">Settings</a></li>
         *              </ul>
         *          </div>
         *      </div>
         * </nav>
         */
        $id = 'my-navbar';
        $navbar = new Navbar(['id'=>$id], function(){
            return [
                new Vertical(['class'=>'en', 'data-js'=>1], function(){ return new LinkTo('Home'); }),
                new Horizontal(['class'=>'en2'], function(){
                    return new Nav(['class'=>'navbar-right'], function(){
                        return [new LinkTo('Profile'), new LinkTo('Settings')];
                    });
                })
            ];
        });
        $html = $navbar->get_html();
        $this->validate_navbar($html);
        $container = $html->get_child(0);

        $this->assertTrue($container->get_child(0)->has_attribute('data-js', 1));
        $this->assertTrue($container->get_child(0)->has_attribute('class', 'en'));
        $this->assertTrue($container->get_child(0)->get_child(0)->has_attribute('data-target', '#' . $id));
        $this->assertTrue($container->get_child(1)->has_attribute('id', 'my-navbar'));
        $this->assertTrue($container->get_child(1)->has_attribute('class', 'en2'));
    }

    public function testNavbarWithButtonEmbedded() {
        /**
         * It should generates:
         *
         * <nav role="navigation" class="navbar navbar-default">
         *     <div class="container">
         *         <div class="navbar-header">
         *             <button data-target="#navbar-collapse-1134424" data-toggle="collapse" class="navbar-toggle" type="button">
         *                 <span class="sr-only">Toggle navigation</span>
         *                 <span class="icon-bar"></span>
         *                 <span class="icon-bar"></span>
         *                 <span class="icon-bar"></span>
         *             </button>
         *             <a href="#" class="navbar-brand">Home</a>
         *         </div>
         *         <div id="navbar-collapse-1134424" class="collapse navbar-collapse">รง
         *             <ul class="nav navbar-nav">
         *                 <li><a href="#">Profile</a></li>
         *                 <li><a href="#">Settings</a></li>
         *             </ul>
         *             <button class="btn btn-default navbar-btn">Click me!</button>
         *         </div>
         *     </div>
         * </nav>
         */
        $navbar = new Navbar(function(){
            return [
                new Vertical(function(){ return new LinkTo('Home'); }),
                new Horizontal(function(){
                    return [
                        new Nav(function(){
                            return [
                                new LinkTo('Profile'),
                                new LinkTo('Settings')
                            ];
                        }),
                        new Button('Click me!')
                    ];
                })
            ];
        });
        $html = $navbar->get_html();
        $this->validate_navbar($html);
        $horizontal = $html->get_child(0)->get_child(1);
        $this->assertTrue($horizontal->has_a_child_of_type('button', ['class'=>'btn btn-default navbar-btn']));
    }

    public function testDropdownIntoNavbar() {
        /**
         * It sould generates:
         *
         * <nav role="navigation" class="navbar navbar-default">
         *     <div class="container">
         *         <div class="navbar-header">
         *             <button data-target="#navbar-collapse-7159829" data-toggle="collapse" class="navbar-toggle" type="button">
         *                 <span class="sr-only">Toggle navigation</span>
         *                 <span class="icon-bar"></span>
         *                 <span class="icon-bar"></span>
         *                 <span class="icon-bar"></span>
         *             </button>
         *             <a href="#" class="navbar-brand">Home</a>
         *         </div>
         *         <div id="navbar-collapse-7159829" class="collapse navbar-collapse">
         *             <div class="dropdown">
         *                 <ul class="nav navbar-nav">
         *                     <li class="dropdown">
         *                         <a data-toggle="dropdown" class="dropdown-toggle" href="#">
         *                             TV series
         *                             <span class="caret"></span>
         *                         </a>
         *                         <ul aria-labelledby="label-dropdown-343446555" role="menu" class="dropdown-menu">
         *                             <li><a href="#" role="menuitem">The walking dead</a></li>
         *                             <li><a href="#" role="menuitem">Scorpio</a></li>
         *                             <li class="divider"></li><li><a href="#" role="menuitem">Old series</a></li>
         *                         </ul>
         *                     </li>
         *                 </ul>
         *             </div>
         *             <ul class="nav navbar-nav">
         *                 <li><a href="#">About us</a></li>
         *             </ul>
         *         </div>
         *     </div>
         * </nav>
         */
        $navbar = new Navbar(function() {
            return [
                new Vertical(function(){
                    return new LinkTo('Home');
                }),
                new Horizontal(function(){
                    return [
                        new Dropdown('TV series', function(){
                            return [
                                new LinkTo('The walking dead'),
                                new LinkTo('Scorpio'),
                                new Divider(),
                                new LinkTo('Old series')
                            ];
                        }),
                        new Nav(function(){return new LinkTo('About us');})
                    ];
                })
            ];
        });
        $html = $navbar->get_html();

        $horizontal = $html->get_child(0)->get_child(1);
        $dropdown = $horizontal->get_child(0);
        $nav_items = $horizontal->get_child(1);

        $this->assertTrue($dropdown->is_a('div', ['class'=>'dropdown']));
        $this->assertTrue($dropdown->get_child(0)->is_a('ul', ['class'=>'nav navbar-nav']));
        $this->assertTrue($nav_items->is_a('ul', ['class'=>'nav navbar-nav']));
    }

    public function get_positions() {
        return [ ['top'], ['bottom'] ];
    }


    private function validate_navbar($html, $position_top_or_bottom=false) {
        $this->assertTrue($html->is_a('nav', ['role'=>'navigation']));
        $this->assertTrue($html->has_attribute('class', 'navbar'));

        if (!$position_top_or_bottom) {
            $this->assertTrue(1 === $html->number_of_children());
        } else {
            $this->assertTrue(2 === $html->number_of_children());
        }

        $navbar_header = $html->get_child(0)->get_child(0);
        $navbar_collapse = $html->get_child(0)->get_child(1);

        $this->assertTrue($navbar_header->is_a('div'));
        $this->assertTrue($navbar_header->has_attribute('class','navbar-header'));
        $this->assertTrue($navbar_header->get_child(0)->is_a('button', ['class'=>'navbar-toggle']));
        $this->assertTrue($navbar_collapse->is_a('div'));
        $this->assertTrue($navbar_collapse->has_attribute('class', 'collapse navbar-collapse'));
        $this->assertTrue($navbar_collapse->get_child(0)->is_a('ul'));
        $this->assertTrue($navbar_collapse->get_child(0)->has_attribute('class', 'nav'));
    }
}