2025-12-26 03:03:19 +00:00
< ? php
2026-01-09 10:35:33 +00:00
declare ( strict_types = 1 );
2025-12-26 03:03:19 +00:00
namespace yiiunit\extensions\bootstrap5 ;
use yii\bootstrap5\Tabs ;
use yii\helpers\Html ;
/**
* Tests for Tabs widget
*
* @ group bootstrap5
*/
class TabsTest extends TestCase
{
public function testRoleTablist ()
{
Tabs :: $counter = 0 ;
$out = Tabs :: widget ([
'items' => [
[
'label' => 'Page1' ,
'content' => 'Page1' ,
],
[
'label' => 'Page2' ,
'content' => 'Page2' ,
],
2026-01-09 10:35:33 +00:00
],
2025-12-26 03:03:19 +00:00
]);
$this -> assertContainsWithoutLE ( '<ul id="w0" class="nav nav-tabs" role="tablist">' , $out );
}
/**
* Each tab should have a corresponding unique ID
*
* @ see https :// github . com / yiisoft / yii2 / issues / 6150
*/
public function testIds ()
{
Tabs :: $counter = 0 ;
$out = Tabs :: widget ([
'items' => [
[
'label' => 'Page1' ,
'content' => 'Page1' ,
],
[
'label' => 'Dropdown1' ,
'items' => [
2026-01-09 10:35:33 +00:00
[
'label' => 'Page2' ,
'content' => 'Page2' ,
],
[
'label' => 'Page3' ,
'content' => 'Page3' ,
],
],
2025-12-26 03:03:19 +00:00
],
[
'label' => 'Dropdown2' ,
'items' => [
2026-01-09 10:35:33 +00:00
[
'label' => 'Page4' ,
'content' => 'Page4' ,
],
[
'label' => 'Page5' ,
'content' => 'Page5' ,
],
],
2025-12-26 03:03:19 +00:00
],
[
'label' => $extAnchor1 = 'External link' ,
'url' => $extUrl1 = [ '//other/route' ],
],
[
'label' => 'Dropdown3' ,
'items' => [
[
'label' => $extAnchor2 = 'External Dropdown Link' ,
2026-01-09 10:35:33 +00:00
'url' => $extUrl2 = [ '//other/dropdown/route' ],
2025-12-26 03:03:19 +00:00
],
2026-01-09 10:35:33 +00:00
],
2025-12-26 03:03:19 +00:00
],
2026-01-09 10:35:33 +00:00
],
2025-12-26 03:03:19 +00:00
]);
$page1 = 'w0-tab0' ;
$page2 = 'w0-dd1-tab0' ;
$page3 = 'w0-dd1-tab1' ;
$page4 = 'w0-dd2-tab0' ;
$page5 = 'w0-dd2-tab1' ;
$shouldContain = [
'w0' , // nav widget container
" # $page1 " , // Page1
'w1' , // Dropdown1
" $page2 " , // Page2
" $page3 " , // Page3
'w2' , // Dropdown2
" # $page4 " , // Page4
" # $page5 " , // Page5
'w3' , // Dropdown3
// containers
" id= \" $page1\ " " ,
" id= \" $page2\ " " ,
" id= \" $page3\ " " ,
" id= \" $page4\ " " ,
" id= \" $page5\ " " ,
2026-01-09 10:35:33 +00:00
Html :: a ( $extAnchor1 , $extUrl1 , [
'class' => 'nav-link' ,
]),
Html :: a ( $extAnchor2 , $extUrl2 , [
/*'tabindex' => -1, */
'class' => 'dropdown-item' ,
2025-12-26 03:03:19 +00:00
]),
];
foreach ( $shouldContain as $string ) {
$this -> assertContainsWithoutLE ( $string , $out );
}
}
public function testVisible ()
{
Tabs :: $counter = 0 ;
$html = Tabs :: widget ([
'items' => [
[
'label' => 'Page1' ,
'content' => 'Page1' ,
],
[
'label' => 'InvisiblePage' ,
'content' => 'Invisible Page Content' ,
2026-01-09 10:35:33 +00:00
'visible' => false ,
2025-12-26 03:03:19 +00:00
],
[
'label' => 'Dropdown1' ,
'items' => [
2026-01-09 10:35:33 +00:00
[
'label' => 'Page2' ,
'content' => 'Page2' ,
],
[
'label' => 'InvisibleItem' ,
'content' => 'Invisible Item Content' ,
'visible' => false ,
],
[
'label' => 'Page3' ,
'content' => 'Page3' ,
],
[
'label' => 'External Link' ,
'url' => [ '//other/dropdown/route' ],
],
[
'label' => 'Invisible External Link' ,
'url' => [ '//other/dropdown/route' ],
'visible' => false ,
],
],
],
],
2025-12-26 03:03:19 +00:00
]);
2026-01-09 10:35:33 +00:00
$this -> assertStringNotContainsString ( 'InvisiblePage' , $html );
$this -> assertStringNotContainsString ( 'Invisible Page Content' , $html );
$this -> assertStringNotContainsString ( 'InvisibleItem' , $html );
$this -> assertStringNotContainsString ( 'Invisible Item Content' , $html );
$this -> assertStringNotContainsString ( 'Invisible External Link' , $html );
2025-12-26 03:03:19 +00:00
}
public function testDisabled ()
{
Tabs :: $counter = 0 ;
$html = Tabs :: widget ([
'items' => [
[
'label' => 'Page1' ,
'content' => 'Page1' ,
2026-01-09 10:35:33 +00:00
'disabled' => true ,
2025-12-26 03:03:19 +00:00
],
[
'label' => 'Page2' ,
'content' => 'Page2' ,
],
[
'label' => 'DisabledPage' ,
'content' => 'Disabled Page Content' ,
2026-01-09 10:35:33 +00:00
'disabled' => true ,
2025-12-26 03:03:19 +00:00
],
[
'label' => 'Dropdown1' ,
'items' => [
2026-01-09 10:35:33 +00:00
[
'label' => 'Page2' ,
'content' => 'Page2' ,
],
[
'label' => 'DisabledItem' ,
'content' => 'Disabled Item Content' ,
'disabled' => true ,
],
[
'label' => 'Page3' ,
'content' => 'Page3' ,
],
[
'label' => 'External Link' ,
'url' => [ '//other/dropdown/route' ],
],
[
'label' => 'Disabled External Link' ,
'url' => [ '//other/dropdown/route' ],
'disabled' => true ,
],
],
],
],
2025-12-26 03:03:19 +00:00
]);
2026-01-09 10:35:33 +00:00
$this -> assertStringContainsString (
2025-12-26 03:03:19 +00:00
'<li class="nav-item"><a class="nav-link disabled" href="#w0-tab0" data-bs-toggle="tab" role="tab" aria-controls="w0-tab0" aria-disabled="true" tabindex="-1">Page1</a></li>' ,
2026-01-09 10:35:33 +00:00
$html ,
2025-12-26 03:03:19 +00:00
);
2026-01-09 10:35:33 +00:00
$this -> assertStringContainsString (
2025-12-26 03:03:19 +00:00
'<li class="nav-item"><a class="nav-link active" href="#w0-tab1" data-bs-toggle="tab" role="tab" aria-controls="w0-tab1" aria-selected="true">Page2</a></li>' ,
2026-01-09 10:35:33 +00:00
$html ,
2025-12-26 03:03:19 +00:00
);
2026-01-09 10:35:33 +00:00
$this -> assertStringContainsString (
2025-12-26 03:03:19 +00:00
'<li class="nav-item"><a class="nav-link disabled" href="#w0-tab2" data-bs-toggle="tab" role="tab" aria-controls="w0-tab2" aria-disabled="true" tabindex="-1">DisabledPage</a></li>' ,
2026-01-09 10:35:33 +00:00
$html ,
2025-12-26 03:03:19 +00:00
);
2026-01-09 10:35:33 +00:00
$this -> assertStringContainsString (
2025-12-26 03:03:19 +00:00
'<a class="dropdown-item disabled" href="#w0-dd3-tab1" data-bs-toggle="tab" role="tab" aria-controls="w0-dd3-tab1" aria-disabled="true" tabindex="-1">DisabledItem</a>' ,
2026-01-09 10:35:33 +00:00
$html ,
2025-12-26 03:03:19 +00:00
);
2026-01-09 10:35:33 +00:00
$this -> assertStringContainsString (
2025-12-26 03:03:19 +00:00
'<a class="dropdown-item disabled" href="/index.php?r=other%2Fdropdown%2Froute" tabindex="-1" aria-disabled="true">Disabled External Link</a>' ,
2026-01-09 10:35:33 +00:00
$html ,
2025-12-26 03:03:19 +00:00
);
}
public function testItem ()
{
$checkTag = 'article' ;
$out = Tabs :: widget ([
'items' => [
[
'label' => 'Page1' ,
'content' => 'Page1' ,
],
[
'label' => 'Page2' ,
'content' => 'Page2' ,
],
],
2026-01-09 10:35:33 +00:00
'itemOptions' => [
'tag' => $checkTag ,
],
2025-12-26 03:03:19 +00:00
'renderTabContent' => true ,
]);
2026-01-09 10:35:33 +00:00
$this -> assertStringContainsString ( '<' . $checkTag , $out );
}
public function testRenderView ()
{
$out = Tabs :: widget ([
'items' => [
[
'label' => 'Page1' ,
'view' => [
'@yiiunit/extensions/bootstrap5/views/tab-test.php' ,
[
'content' => 'test' ,
],
],
],
],
]);
$this -> assertStringContainsString ( '<span class="test-content">test</span>' , $out );
2025-12-26 03:03:19 +00:00
}
public function testTabContentOptions ()
{
2026-01-09 10:35:33 +00:00
$checkAttribute = 'test_attribute' ;
$checkValue = 'check_attribute' ;
2025-12-26 03:03:19 +00:00
$out = Tabs :: widget ([
'items' => [
[
'label' => 'Page1' ,
2026-01-09 10:35:33 +00:00
'content' => 'Page1' ,
],
2025-12-26 03:03:19 +00:00
],
'tabContentOptions' => [
2026-01-09 10:35:33 +00:00
$checkAttribute => $checkValue ,
],
2025-12-26 03:03:19 +00:00
]);
2026-01-09 10:35:33 +00:00
$this -> assertStringContainsString ( $checkAttribute . '=' , $out );
$this -> assertStringContainsString ( $checkValue , $out );
2025-12-26 03:03:19 +00:00
}
public function testActivateFirstVisibleTab ()
{
$html = Tabs :: widget ([
'id' => 'mytab' ,
'items' => [
[
'label' => 'Tab 1' ,
'content' => 'some content' ,
2026-01-09 10:35:33 +00:00
'visible' => false ,
2025-12-26 03:03:19 +00:00
],
[
'label' => 'Tab 2' ,
'content' => 'some content' ,
2026-01-09 10:35:33 +00:00
'disabled' => true ,
2025-12-26 03:03:19 +00:00
],
[
'label' => 'Tab 3' ,
2026-01-09 10:35:33 +00:00
'content' => 'some content' ,
2025-12-26 03:03:19 +00:00
],
[
'label' => 'Tab 4' ,
2026-01-09 10:35:33 +00:00
'content' => 'some content' ,
],
],
2025-12-26 03:03:19 +00:00
]);
2026-01-09 10:35:33 +00:00
$this -> assertStringNotContainsString (
2025-12-26 03:03:19 +00:00
'<li class="nav-item"><a class="nav-link active" href="#mytab-tab0" data-bs-toggle="tab" role="tab" aria-controls="mytab-tab0" aria-selected="true">Tab 1</a></li>' ,
2026-01-09 10:35:33 +00:00
$html ,
2025-12-26 03:03:19 +00:00
);
2026-01-09 10:35:33 +00:00
$this -> assertStringNotContainsString (
2025-12-26 03:03:19 +00:00
'<li class="nav-item"><a class="nav-link active" href="#mytab-tab1" data-bs-toggle="tab" role="tab" aria-controls="mytab-tab1" aria-selected="true">Tab 2</a></li>' ,
2026-01-09 10:35:33 +00:00
$html ,
2025-12-26 03:03:19 +00:00
);
2026-01-09 10:35:33 +00:00
$this -> assertStringContainsString (
2025-12-26 03:03:19 +00:00
'<li class="nav-item"><a class="nav-link active" href="#mytab-tab2" data-bs-toggle="tab" role="tab" aria-controls="mytab-tab2" aria-selected="true">Tab 3</a></li>' ,
2026-01-09 10:35:33 +00:00
$html ,
2025-12-26 03:03:19 +00:00
);
}
public function testActivateTab ()
{
$html = Tabs :: widget ([
'id' => 'mytab' ,
'items' => [
[
'label' => 'Tab 1' ,
'content' => 'some content' ,
2026-01-09 10:35:33 +00:00
'visible' => false ,
2025-12-26 03:03:19 +00:00
],
[
'label' => 'Tab 2' ,
2026-01-09 10:35:33 +00:00
'content' => 'some content' ,
2025-12-26 03:03:19 +00:00
],
[
'label' => 'Tab 3' ,
'content' => 'some content' ,
2026-01-09 10:35:33 +00:00
'active' => true ,
2025-12-26 03:03:19 +00:00
],
[
'label' => 'Tab 4' ,
2026-01-09 10:35:33 +00:00
'content' => 'some content' ,
],
],
2025-12-26 03:03:19 +00:00
]);
2026-01-09 10:35:33 +00:00
$this -> assertStringContainsString (
2025-12-26 03:03:19 +00:00
'<li class="nav-item"><a class="nav-link active" href="#mytab-tab2" data-bs-toggle="tab" role="tab" aria-controls="mytab-tab2" aria-selected="true">Tab 3</a></li>' ,
2026-01-09 10:35:33 +00:00
$html ,
2025-12-26 03:03:19 +00:00
);
}
public function testTabLabelEncoding ()
{
$html = Tabs :: widget ([
'encodeLabels' => false ,
'id' => 'mytab' ,
'items' => [
[
'label' => 'Tab 1<span>encoded</span>' ,
'content' => 'some content' ,
'encode' => true ,
],
[
'label' => 'Tab 2<span>not encoded</span>' ,
'content' => 'some content' ,
],
[
'label' => 'Tab 3<span>not encoded too</span>' ,
'content' => 'some content' ,
],
2026-01-09 10:35:33 +00:00
],
2025-12-26 03:03:19 +00:00
]);
2026-01-09 10:35:33 +00:00
$this -> assertStringContainsString ( '<span>encoded</span>' , $html );
$this -> assertStringContainsString ( '<span>not encoded</span>' , $html );
$this -> assertStringContainsString ( '<span>not encoded too</span>' , $html );
2025-12-26 03:03:19 +00:00
}
/**
* @ see https :// github . com / yiisoft / yii2 - bootstrap5 / issues / 108 #issuecomment-465219339
*/
public function testIdRendering ()
{
Tabs :: $counter = 0 ;
$html = Tabs :: widget ([
'items' => [
[
2026-01-09 10:35:33 +00:00
'options' => [
'id' => 'pane1' ,
],
2025-12-26 03:03:19 +00:00
'label' => 'Tab 1' ,
'content' => '<div>Content 1</div>' ,
],
[
'label' => 'Tab 2' ,
'content' => '<div>Content 2</div>' ,
],
],
]);
$expected = <<< HTML
< ul id = " w0 " class = " nav nav-tabs " role = " tablist " >< li class = " nav-item " >< a class = " nav-link active " href = " #pane1 " data - bs - toggle = " tab " role = " tab " aria - controls = " pane1 " aria - selected = " true " > Tab 1 </ a ></ li >
< li class = " nav-item " >< a class = " nav-link " href = " #w0-tab1 " data - bs - toggle = " tab " role = " tab " aria - controls = " w0-tab1 " aria - selected = " false " > Tab 2 </ a ></ li ></ ul >
< div class = " tab-content " >< div id = " pane1 " class = " tab-pane active " >< div > Content 1 </ div ></ div >
< div id = " w0-tab1 " class = " tab-pane " >< div > Content 2 </ div ></ div ></ div >
HTML ;
$this -> assertEqualsWithoutLE ( $expected , $html );
}
public function testHeaderOptions ()
{
Tabs :: $counter = 0 ;
$html = Tabs :: widget ([
'items' => [
[
'label' => 'Tab 1' ,
'content' => '<div>Content 1</div>' ,
],
[
'label' => 'Tab 2' ,
'content' => '<div>Content 2</div>' ,
2026-01-09 10:35:33 +00:00
'headerOptions' => [
'class' => 'col-6' ,
],
2025-12-26 03:03:19 +00:00
],
[
'label' => 'Link' ,
'url' => 'http://www.example.com/' ,
2026-01-09 10:35:33 +00:00
'headerOptions' => [
'class' => 'col-3' ,
],
2025-12-26 03:03:19 +00:00
],
],
2026-01-09 10:35:33 +00:00
'options' => [
'class' => 'row' ,
],
'headerOptions' => [
'class' => 'col' ,
],
2025-12-26 03:03:19 +00:00
]);
$expected = <<< HTML
< ul id = " w0 " class = " row nav nav-tabs " role = " tablist " >< li class = " col nav-item " >< a class = " nav-link active " href = " #w0-tab0 " data - bs - toggle = " tab " role = " tab " aria - controls = " w0-tab0 " aria - selected = " true " > Tab 1 </ a ></ li >
< li class = " col-6 nav-item " >< a class = " nav-link " href = " #w0-tab1 " data - bs - toggle = " tab " role = " tab " aria - controls = " w0-tab1 " aria - selected = " false " > Tab 2 </ a ></ li >
< li class = " col-3 nav-item " >< a class = " nav-link " href = " http://www.example.com/ " > Link </ a ></ li ></ ul >
< div class = " tab-content " >< div id = " w0-tab0 " class = " tab-pane active " >< div > Content 1 </ div ></ div >
< div id = " w0-tab1 " class = " tab-pane " >< div > Content 2 </ div ></ div ></ div >
HTML ;
$this -> assertEquals ( $expected , $html );
}
}