diff options
Diffstat (limited to 'js/tests/visual')
| -rw-r--r-- | js/tests/visual/carousel.html | 24 | ||||
| -rw-r--r-- | js/tests/visual/collapse.html | 37 | ||||
| -rw-r--r-- | js/tests/visual/dropdown.html | 6 | ||||
| -rw-r--r-- | js/tests/visual/modal.html | 23 | ||||
| -rw-r--r-- | js/tests/visual/scrollspy.html | 23 | ||||
| -rw-r--r-- | js/tests/visual/tab.html | 33 | ||||
| -rw-r--r-- | js/tests/visual/tooltip.html | 19 |
7 files changed, 55 insertions, 110 deletions
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html index b02d28a05..ad249d874 100644 --- a/js/tests/visual/carousel.html +++ b/js/tests/visual/carousel.html @@ -45,31 +45,11 @@ <script src="../../dist/carousel.js"></script> <script> - // Should throw an error because carousel is in transition - function testCarouselTransitionError() { - var err = false - var $carousel = $('#carousel-example-generic') - $carousel.on('slid.bs.carousel', function () { - $carousel.off('slid.bs.carousel') - if (!err) { - alert('No error thrown for : testCarouselTransitionError') - } - }) - try { - $carousel.carousel('next').carousel('prev') - } - catch (e) { - err = true - console.error(e.message) - } - } - - $(function () { + $(function() { // Test to show that the carousel doesn't slide when the current tab isn't visible - $('#carousel-example-generic').on('slid.bs.carousel', function (event) { + $('#carousel-example-generic').on('slid.bs.carousel', function(event) { console.log('slid at ', event.timeStamp) }) - testCarouselTransitionError() }) </script> </body> diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html index 21b11a257..fe45c1804 100644 --- a/js/tests/visual/collapse.html +++ b/js/tests/visual/collapse.html @@ -14,13 +14,13 @@ <div class="card"> <div class="card-header" role="tab" id="headingOne"> <h5 class="mb-0"> - <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h5> </div> - <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne"> + <div id="collapseOne" class="collapse show" data-parent="#accordion" role="tabpanel" aria-labelledby="headingOne"> <div class="card-block"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> @@ -29,12 +29,12 @@ <div class="card"> <div class="card-header" role="tab" id="headingTwo"> <h5 class="mb-0"> - <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> + <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h5> </div> - <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> + <div id="collapseTwo" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingTwo"> <div class="card-block"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> @@ -43,12 +43,12 @@ <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> - <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> + <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h5> </div> - <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"> + <div id="collapseThree" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingThree"> <div class="card-block"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div> @@ -60,30 +60,5 @@ <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script> <script src="../../dist/util.js"></script> <script src="../../dist/collapse.js"></script> - <script> - // JavaScript Test - $(function () { - testCollapseTransitionError() - }); - - // Should throw an error because carousel is in transition - function testCollapseTransitionError() { - var err = false - $('#collapseOne').on('hidden.bs.collapse', function (e) { - $(this).off('hidden.bs.collapse') - if (!err) { - alert('No error thrown for : testCollapseTransitionError') - } - }) - - try { - $('#collapseOne').collapse('hide').collapse('show') - } - catch (e) { - err = true - console.error(e.message) - } - } - </script> </body> </html> diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html index 6888cdb15..cc8a6e709 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -10,13 +10,13 @@ <div class="container"> <h1>Dropdown <small>Bootstrap Visual Test</small></h1> - <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> - <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> + <nav class="navbar navbar-expand-md navbar-light bg-faded"> + <a class="navbar-brand" href="#">Navbar</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> - <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index 3aca0c96f..e999514f7 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -15,7 +15,7 @@ <body> <nav class="navbar navbar-full navbar-dark bg-inverse"> <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> - <div class="collapse navbar-toggleable-md" id="navbarResponsive"> + <div class="collapse navbar-expand-md" id="navbarResponsive"> <a class="navbar-brand" href="#">This shouldn't jump!</a> <ul class="nav navbar-nav"> <li class="nav-item active"> @@ -187,26 +187,6 @@ } } - // Should throw an error because modal is in transition - function testModalTransitionError() { - var err = false - // Close #myModal - $('#myModal').on('shown.bs.modal', function () { - $('#myModal').modal('hide').off('shown.bs.modal') - if (!err) { - alert('No error thrown for : testModalTransitionError') - } - }) - - try { - $('#myModal').modal('show').modal('hide') - } - catch (e) { - err = true - console.error(e.message) - } - } - $(function () { $('[data-toggle="popover"]').popover() $('[data-toggle="tooltip"]').tooltip() @@ -219,7 +199,6 @@ $('#firefoxModal').on('focus', reportFirefoxTestResult.bind(false)) $('#ff-bug-input').on('focus', reportFirefoxTestResult.bind(true)) }) - testModalTransitionError() }) </script> </body> diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html index 15b7f75f8..c0c3dc749 100644 --- a/js/tests/visual/scrollspy.html +++ b/js/tests/visual/scrollspy.html @@ -10,10 +10,13 @@ </style> </head> <body data-spy="scroll" data-target=".navbar" data-offset="70"> - <div class="container"> - <nav class="navbar fixed-top navbar-dark bg-inverse"> - <a class="navbar-brand" href="#">Scrollspy test</a> - <ul class="nav navbar-nav"> + <nav class="navbar navbar-expand-md navbar-inverse bg-inverse fixed-top"> + <a class="navbar-brand" href="#">Scrollspy test</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="navbar-collapse collapse" id="navbarSupportedContent"> + <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#fat">@fat</a> </li> @@ -23,18 +26,18 @@ <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu" aria-labelledby="dropdown"> - <a class="dropdown-item" href="#one">one</a> - <a class="dropdown-item" href="#two">two</a> - <div class="dropdown-divider"></div> - <a class="dropdown-item" href="#three">three</a> + <a class="dropdown-item" href="#one">One</a> + <a class="dropdown-item" href="#two">Two</a> + <a class="dropdown-item" href="#three">Three</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#final">Final</a> </li> </ul> - </nav> - + </div> + </nav> + <div class="container"> <h2 id="fat">@fat</h2> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p> diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index c676cc7be..e747302db 100644 --- a/js/tests/visual/tab.html +++ b/js/tests/visual/tab.html @@ -71,7 +71,7 @@ </ul> <div class="tab-content" role="tablist"> - <div class="tab-pane fade in active" id="home2" role="tabpanel"> + <div class="tab-pane fade show active" id="home2" role="tabpanel"> <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> </div> @@ -178,7 +178,7 @@ </nav> <div class="tab-content" role="tabpanel"> - <div role="tabpanel" class="tab-pane fade active" id="home5"> + <div role="tabpanel" class="tab-pane fade show active" id="home5"> <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p> </div> @@ -195,8 +195,35 @@ <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p> </div> </div> - </div> + <h4>Tabs with list-group (with fade)</h4> + <div class="row"> + <div class="col-4"> + <div class="list-group" id="list-tab" role="tablist"> + <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="home">Home</a> + <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="profile">Profile</a> + <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="messages">Messages</a> + <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" href="#list-settings" role="tab" aria-controls="settings">Settings</a> + </div> + </div> + <div class="col-8"> + <div class="tab-content" id="nav-tabContent"> + <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list"> + <p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p> + </div> + <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list"> + <p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p> + </div> + <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list"> + <p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.</p> + </div> + <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list"> + <p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.</p> + </div> + </div> + </div> + </div> + </div> <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script> <script src="../../dist/util.js"></script> <script src="../../dist/tab.js"></script> diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index ada6d8b79..f447a533b 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -41,26 +41,7 @@ <script> $(function () { $('[data-toggle="tooltip"]').tooltip() - testTooltipTransitionError() }) - - // Should throw an error because tooltip is in transition - function testTooltipTransitionError() { - var err = false - $('#btnOne').on('shown.bs.tooltip', function () { - $('#btnOne').tooltip('hide').off('shown.bs.tooltip') - if (!err) { - alert('No error thrown for : testTooltipTransitionError') - } - }) - try { - $('#btnOne').tooltip('show').tooltip('hide') - } - catch (e) { - err = true - console.error(e.message) - } - } </script> </body> </html> |