bootstrap-carousel.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. $(function () {
  2. module("bootstrap-carousel")
  3. test("should provide no conflict", function () {
  4. var carousel = $.fn.carousel.noConflict()
  5. ok(!$.fn.carousel, 'carousel was set back to undefined (org value)')
  6. $.fn.carousel = carousel
  7. })
  8. test("should be defined on jquery object", function () {
  9. ok($(document.body).carousel, 'carousel method is defined')
  10. })
  11. test("should return element", function () {
  12. ok($(document.body).carousel()[0] == document.body, 'document.body returned')
  13. })
  14. test("should not fire sliden when slide is prevented", function () {
  15. $.support.transition = false
  16. stop()
  17. $('<div class="carousel"/>')
  18. .bind('slide', function (e) {
  19. e.preventDefault();
  20. ok(true);
  21. start();
  22. })
  23. .bind('slid', function () {
  24. ok(false);
  25. })
  26. .carousel('next')
  27. })
  28. test("should fire slide event with direction", function () {
  29. var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a><a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a></div>'
  30. $.support.transition = false
  31. stop()
  32. $(template).on('slide', function (e) {
  33. e.preventDefault()
  34. ok(e.direction)
  35. ok(e.direction === 'right' || e.direction === 'left')
  36. start()
  37. }).carousel('next')
  38. })
  39. test("should fire slide event with relatedTarget", function () {
  40. var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a><a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a></div>'
  41. $.support.transition = false
  42. stop()
  43. $(template)
  44. .on('slide', function (e) {
  45. e.preventDefault();
  46. ok(e.relatedTarget);
  47. ok($(e.relatedTarget).hasClass('item'));
  48. start();
  49. })
  50. .carousel('next')
  51. })
  52. test("should set interval from data attribute", 3,function () {
  53. var template = $('<div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}First Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}Second Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}Third Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> </div>');
  54. template.attr("data-interval", 1814);
  55. template.appendTo("body");
  56. $('[data-slide]').first().click();
  57. ok($('#myCarousel').data('carousel').options.interval == 1814);
  58. $('#myCarousel').remove();
  59. template.appendTo("body").attr("data-modal", "foobar");
  60. $('[data-slide]').first().click();
  61. ok($('#myCarousel').data('carousel').options.interval == 1814, "even if there is an data-modal attribute set");
  62. $('#myCarousel').remove();
  63. template.appendTo("body");
  64. $('[data-slide]').first().click();
  65. $('#myCarousel').attr('data-interval', 1860);
  66. $('[data-slide]').first().click();
  67. ok($('#myCarousel').data('carousel').options.interval == 1814, "attributes should be read only on intitialization");
  68. $('#myCarousel').remove();
  69. })
  70. })