carousel.spec.js 37 KB
Newer Older
Johann-S's avatar
Johann-S committed
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038

      expect(carousel._slide).not.toHaveBeenCalled()
      expect(EventHandler.one).toHaveBeenCalled()

      spyOn(carousel, 'to')

      EventHandler.trigger(carouselEl, 'slid.bs.carousel')

      setTimeout(() => {
        expect(carousel.to).toHaveBeenCalledWith(1)
        done()
      })
    })
  })

  describe('dispose', () => {
    it('should destroy a carousel', () => {
      fixtureEl.innerHTML = [
        '<div id="myCarousel" class="carousel slide">',
        '  <div class="carousel-inner">',
        '    <div class="carousel-item active">item 1</div>',
        '    <div class="carousel-item" data-interval="7">item 2</div>',
        '    <div class="carousel-item">item 3</div>',
        '  </div>',
        '</div>'
      ].join('')

      const carouselEl = fixtureEl.querySelector('#myCarousel')
      const carousel = new Carousel(carouselEl)

      spyOn(EventHandler, 'off').and.callThrough()

      carousel.dispose()

      expect(EventHandler.off).toHaveBeenCalled()
    })
  })

1039
  describe('jQueryInterface', () => {
Johann-S's avatar
Johann-S committed
1040
1041
1042
1043
1044
    it('should create a carousel', () => {
      fixtureEl.innerHTML = '<div></div>'

      const div = fixtureEl.querySelector('div')

1045
      jQueryMock.fn.carousel = Carousel.jQueryInterface
Johann-S's avatar
Johann-S committed
1046
1047
1048
1049
      jQueryMock.elements = [div]

      jQueryMock.fn.carousel.call(jQueryMock)

1050
      expect(Carousel.getInstance(div)).toBeDefined()
Johann-S's avatar
Johann-S committed
1051
1052
1053
1054
1055
1056
1057
1058
    })

    it('should not re create a carousel', () => {
      fixtureEl.innerHTML = '<div></div>'

      const div = fixtureEl.querySelector('div')
      const carousel = new Carousel(div)

1059
      jQueryMock.fn.carousel = Carousel.jQueryInterface
Johann-S's avatar
Johann-S committed
1060
1061
1062
1063
      jQueryMock.elements = [div]

      jQueryMock.fn.carousel.call(jQueryMock)

1064
      expect(Carousel.getInstance(div)).toEqual(carousel)
Johann-S's avatar
Johann-S committed
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
    })

    it('should call to if the config is a number', () => {
      fixtureEl.innerHTML = '<div></div>'

      const div = fixtureEl.querySelector('div')
      const carousel = new Carousel(div)
      const slideTo = 2

      spyOn(carousel, 'to')

1076
      jQueryMock.fn.carousel = Carousel.jQueryInterface
Johann-S's avatar
Johann-S committed
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
      jQueryMock.elements = [div]

      jQueryMock.fn.carousel.call(jQueryMock, slideTo)

      expect(carousel.to).toHaveBeenCalledWith(slideTo)
    })

    it('should throw error on undefined method', () => {
      fixtureEl.innerHTML = '<div></div>'

      const div = fixtureEl.querySelector('div')
      const action = 'undefinedMethod'

1090
      jQueryMock.fn.carousel = Carousel.jQueryInterface
Johann-S's avatar
Johann-S committed
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
      jQueryMock.elements = [div]

      try {
        jQueryMock.fn.carousel.call(jQueryMock, action)
      } catch (error) {
        expect(error.message).toEqual(`No method named "${action}"`)
      }
    })
  })

  describe('data-api', () => {
    it('should init carousels with data-ride="carousel" on load', () => {
      fixtureEl.innerHTML = '<div data-ride="carousel"></div>'

      const carouselEl = fixtureEl.querySelector('div')
      const loadEvent = createEvent('load')

      window.dispatchEvent(loadEvent)

1110
      expect(Carousel.getInstance(carouselEl)).toBeDefined()
Johann-S's avatar
Johann-S committed
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
    })

    it('should create carousel and go to the next slide on click', done => {
      fixtureEl.innerHTML = [
        '<div id="myCarousel" class="carousel slide">',
        '  <div class="carousel-inner">',
        '    <div class="carousel-item active">item 1</div>',
        '    <div id="item2" class="carousel-item">item 2</div>',
        '    <div class="carousel-item">item 3</div>',
        '  </div>',
        '  <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>',
        '  <div id="next" class="carousel-control-next" data-target="#myCarousel" role="button" data-slide="next"></div>',
        '</div>'
      ].join('')

      const next = fixtureEl.querySelector('#next')
      const item2 = fixtureEl.querySelector('#item2')

      next.click()

      setTimeout(() => {
        expect(item2.classList.contains('active')).toEqual(true)
        done()
      }, 10)
    })

    it('should create carousel and go to the next slide on click with data-slide-to', done => {
      fixtureEl.innerHTML = [
        '<div id="myCarousel" class="carousel slide">',
        '  <div class="carousel-inner">',
        '    <div class="carousel-item active">item 1</div>',
        '    <div id="item2" class="carousel-item">item 2</div>',
        '    <div class="carousel-item">item 3</div>',
        '  </div>',
        '  <div id="next" data-target="#myCarousel" data-slide-to="1"></div>',
        '</div>'
      ].join('')

      const next = fixtureEl.querySelector('#next')
      const item2 = fixtureEl.querySelector('#item2')

      next.click()

      setTimeout(() => {
        expect(item2.classList.contains('active')).toEqual(true)
        done()
      }, 10)
    })

    it('should do nothing if no selector on click on arrows', () => {
      fixtureEl.innerHTML = [
        '<div id="myCarousel" class="carousel slide">',
        '  <div class="carousel-inner">',
        '    <div class="carousel-item active">item 1</div>',
        '    <div class="carousel-item">item 2</div>',
        '    <div class="carousel-item">item 3</div>',
        '  </div>',
        '  <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>',
        '  <div id="next" class="carousel-control-next" role="button" data-slide="next"></div>',
        '</div>'
      ].join('')

      const next = fixtureEl.querySelector('#next')

      next.click()

      expect().nothing()
    })

    it('should do nothing if no carousel class on click on arrows', () => {
      fixtureEl.innerHTML = [
        '<div id="myCarousel" class="slide">',
        '  <div class="carousel-inner">',
        '    <div class="carousel-item active">item 1</div>',
        '    <div id="item2" class="carousel-item">item 2</div>',
        '    <div class="carousel-item">item 3</div>',
        '  </div>',
        '  <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>',
        '  <div id="next" class="carousel-control-next" data-target="#myCarousel" role="button" data-slide="next"></div>',
        '</div>'
      ].join('')

      const next = fixtureEl.querySelector('#next')

      next.click()

      expect().nothing()
    })
  })
})
For faster browsing, not all history is shown. View entire blame