more test tweaks

packages/__tests__/src/event-drag/repeating.js

@@ -1,6 +1,7 @@
 import TimeGridViewWrapper from '../lib/wrappers/TimeGridViewWrapper'
 import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
 import { waitEventDrag } from '../lib/wrappers/interaction-util'
+import { filterVisibleEls } from '../lib/dom-misc'
 
 describe('event dragging on repeating events', function() {
   pushOptions({
@@ -101,11 +102,4 @@ describe('event dragging on repeating events', function() {
     })
   })
 
-  function filterVisibleEls(els) {
-    return els.filter((el) => {
-      let $el = $(el)
-      return $el.is(':visible') && $el.css('visibility') !== 'hidden'
-    })
-  }
-
 })

packages/__tests__/src/legacy/buttonIcons.js

@@ -1,5 +1,6 @@
 import BootstrapPlugin from '@fullcalendar/bootstrap'
 import DayGridPlugin from '@fullcalendar/daygrid'
+import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
 
 describe('buttonIcons', function() {
   pushOptions({
@@ -14,22 +15,22 @@ describe('buttonIcons', function() {
   describe('when buttonIcons is not set', function() {
 
     it('should have default values', function() {
-      initCalendar()
-      var $cal = $(currentCalendar.el)
-      var prevBtn = $cal.find('.fc-prev-button')
-      var nextBtn = $cal.find('.fc-next-button')
-      var nextYearBtn = $cal.find('.fc-nextYear-button')
-      var prevYearBtn = $cal.find('.fc-prevYear-button')
+      let calendar = initCalendar()
+      let toolbarWrapper = new CalendarWrapper(calendar).toolbar
 
-      expect(prevBtn.find('span:first')).toHaveClass('fc-icon-chevron-left')
-      expect(nextBtn.find('span:first')).toHaveClass('fc-icon-chevron-right')
-      expect(nextYearBtn.find('span:first')).toHaveClass('fc-icon-chevrons-right')
-      expect(prevYearBtn.find('span:first')).toHaveClass('fc-icon-chevrons-left')
+      let prevBtn = toolbarWrapper.getButtonInfo('prev')
+      let nextBtn = toolbarWrapper.getButtonInfo('next')
+      let nextYearBtn = toolbarWrapper.getButtonInfo('nextYear')
+      let prevYearBtn = toolbarWrapper.getButtonInfo('prevYear')
+
+      expect(prevBtn.iconName).toBe('chevron-left')
+      expect(nextBtn.iconName).toBe('chevron-right')
+      expect(nextYearBtn.iconName).toBe('chevrons-right')
+      expect(prevYearBtn.iconName).toBe('chevrons-left')
     })
   })
 
   describe('when buttonIcons is set and theme is falsy', function() {
-
     pushOptions({
       buttonIcons: {
         prev: 'some-icon-left',
@@ -40,35 +41,31 @@ describe('buttonIcons', function() {
     })
 
     it('should have the set values', function() {
-      initCalendar()
-      var $cal = $(currentCalendar.el)
-      var prevBtn = $cal.find('.fc-prev-button')
-      var prevYearBtn = $cal.find('.fc-prevYear-button')
-      var nextYearBtn = $cal.find('.fc-nextYear-button')
+      let calendar = initCalendar()
+      let toolbarWrapper = new CalendarWrapper(calendar).toolbar
 
-      expect(prevBtn.find('span:first')).toHaveClass('fc-icon-some-icon-left')
-      expect(prevBtn.find('span:first')).toHaveClass('fc-icon-some-icon-left')
-      expect(prevYearBtn.find('span:first')).toHaveClass('fc-icon-some-icon-leftYear')
-      expect(nextYearBtn.find('span:first')).toHaveClass('fc-icon-some-icon-rightYear')
+      let prevBtn = toolbarWrapper.getButtonInfo('prev')
+      let nextYearBtn = toolbarWrapper.getButtonInfo('nextYear')
+      let prevYearBtn = toolbarWrapper.getButtonInfo('prevYear')
+
+      expect(prevBtn.iconName).toBe('some-icon-left')
+      expect(prevBtn.iconName).toBe('some-icon-left')
+      expect(prevYearBtn.iconName).toBe('some-icon-leftYear')
+      expect(nextYearBtn.iconName).toBe('some-icon-rightYear')
     })
   })
 
   describe('when theme is set', function() {
-
     pushOptions({
       themeSystem: 'bootstrap'
     })
 
     it('buttonIcons is ignored', function() {
-      initCalendar()
-      var $cal = $(currentCalendar.el)
-      var classesToSearch = [ '.fc-icon-chevron-left', '.fc-icon-chevrons-right',
-        '.fc-icon-chevron-right', '.fc-icon-chevrons-left' ]
+      let calendar = initCalendar()
+      let toolbarWrapper = new CalendarWrapper(calendar).toolbar
+      let prevButtonInfo = toolbarWrapper.getButtonInfo('prev') // NOT called with 'fa'
 
-      for (var i = 0; i < classesToSearch.length; i++) {
-        var cls = classesToSearch[i]
-        expect($cal.find(cls).length).toBe(0)
-      };
+      expect(prevButtonInfo.iconName).toBeFalsy()
     })
   })
 })

packages/__tests__/src/legacy/eventLimit.js

@@ -1,5 +1,8 @@
-describe('eventLimit', function() {
+import DayGridViewWrapper from "../lib/wrappers/DayGridViewWrapper"
+import TimeGridViewWrapper from '../lib/wrappers/TimeGridViewWrapper'
+import { filterVisibleEls } from '../lib/dom-misc'
 
+describe('eventLimit', function() {
   pushOptions({
     defaultDate: '2014-08-01', // important that it is the first week, so works w/ month + week views
     eventLimit: 3
@@ -11,31 +14,34 @@ describe('eventLimit', function() {
       'when in month view': 'dayGridMonth',
       'when in dayGridWeek view': 'dayGridWeek',
       'when in week view': 'timeGridWeek'
-    }, function() {
+    }, function(viewName) {
+      let ViewWrapper = viewName.match(/^dayGrid/) ? DayGridViewWrapper : TimeGridViewWrapper
 
       it('doesn\'t display a more link when limit is more than the # of events', function() {
-        initCalendar({
+        let calendar = initCalendar({
           events: [
             { title: 'event1', start: '2014-07-29' },
             { title: 'event2', start: '2014-07-29' }
           ]
         })
-        expect($('.fc-more').length).toBe(0)
+        let dayGridWrapper = new ViewWrapper(calendar).dayGrid
+        expect(dayGridWrapper.getMoreEls().length).toBe(0)
       })
 
       it('doesn\'t display a more link when limit equal to the # of events', function() {
-        initCalendar({
+        let calendar = initCalendar({
           events: [
             { title: 'event1', start: '2014-07-29' },
             { title: 'event2', start: '2014-07-29' },
             { title: 'event2', start: '2014-07-29' }
           ]
         })
-        expect($('.fc-more').length).toBe(0)
+        let dayGridWrapper = new ViewWrapper(calendar).dayGrid
+        expect(dayGridWrapper.getMoreEls().length).toBe(0)
       })
 
       it('displays a more link when limit is less than the # of events', function() {
-        initCalendar({
+        let calendar = initCalendar({
           events: [
             { title: 'event1', start: '2014-07-29' },
             { title: 'event2', start: '2014-07-29' },
@@ -43,12 +49,14 @@ describe('eventLimit', function() {
             { title: 'event2', start: '2014-07-29' }
           ]
         })
-        expect($('.fc-more').length).toBe(1)
-        expect($('.fc-more')).toHaveText('+2 more')
+        let dayGridWrapper = new ViewWrapper(calendar).dayGrid
+        let moreEls = dayGridWrapper.getMoreEls()
+        expect(moreEls.length).toBe(1)
+        expect(moreEls[0]).toHaveText('+2 more')
       })
 
       it('displays one more per day, when a multi-day event is above', function() {
-        initCalendar({
+        let calendar = initCalendar({
           events: [
             { title: 'event1', start: '2014-07-29', end: '2014-07-31' },
             { title: 'event2', start: '2014-07-29', end: '2014-07-31' },
@@ -56,18 +64,20 @@ describe('eventLimit', function() {
             { title: 'event2', start: '2014-07-29', end: '2014-07-31' }
           ]
         })
-        var cells = $('.fc-day-grid .fc-row:eq(0) .fc-bg td:not(.fc-axis)')
-        expect($('.fc-more').length).toBe(2)
-        expect($('.fc-more').eq(0)).toHaveText('+2 more')
-        expect($('.fc-more').eq(0)).toBeBoundedBy(cells.eq(2))
-        expect($('.fc-more').eq(1)).toHaveText('+2 more')
-        expect($('.fc-more').eq(1)).toBeBoundedBy(cells.eq(3))
+        let dayGridWrapper = new ViewWrapper(calendar).dayGrid
+        let moreEls = dayGridWrapper.getMoreEls()
+        let cells = dayGridWrapper.getDayElsInRow(0)
+        expect(moreEls.length).toBe(2)
+        expect(moreEls[0]).toHaveText('+2 more')
+        expect(moreEls[0]).toBeBoundedBy(cells[2])
+        expect(moreEls[1]).toHaveText('+2 more')
+        expect(moreEls[1]).toBeBoundedBy(cells[3])
       })
 
       it('will render a link in a multi-day event\'s second column ' +
         'if it has already been hidden in the first',
       function() {
-        initCalendar({
+        let calendar = initCalendar({
           events: [
             { title: 'event1', start: '2014-07-29', end: '2014-07-31' },
             { title: 'event2', start: '2014-07-29', end: '2014-07-31' },
@@ -75,18 +85,20 @@ describe('eventLimit', function() {
             { title: 'event2', start: '2014-07-29' }
           ]
         })
-        var cells = $('.fc-day-grid .fc-row:eq(0) .fc-bg td:not(.fc-axis)')
-        expect($('.fc-more').length).toBe(2)
-        expect($('.fc-more').eq(0)).toHaveText('+2 more')
-        expect($('.fc-more').eq(0)).toBeBoundedBy(cells.eq(2))
-        expect($('.fc-more').eq(1)).toHaveText('+1 more')
-        expect($('.fc-more').eq(1)).toBeBoundedBy(cells.eq(3))
+        let dayGridWrapper = new ViewWrapper(calendar).dayGrid
+        let moreEls = dayGridWrapper.getMoreEls()
+        let cells = dayGridWrapper.getAllDayEls()
+        expect(moreEls.length).toBe(2)
+        expect(moreEls[0]).toHaveText('+2 more')
+        expect(moreEls[0]).toBeBoundedBy(cells[2])
+        expect(moreEls[1]).toHaveText('+1 more')
+        expect(moreEls[1]).toBeBoundedBy(cells[3])
       })
 
       it('will render a link in a multi-day event\'s second column ' +
         'if it has already been hidden in the first even if he second column hardly has any events',
       function() {
-        initCalendar({
+        let calendar = initCalendar({
           events: [
             { title: 'event1', start: '2014-07-28', end: '2014-07-30' },
             { title: 'event2', start: '2014-07-28', end: '2014-07-30' },
@@ -94,15 +106,16 @@ describe('eventLimit', function() {
             { title: 'event2', start: '2014-07-29', end: '2014-07-31' }
           ]
         })
-        var cells = $('.fc-day-grid .fc-row:eq(0) .fc-bg td:not(.fc-axis)')
-        var link = $('.fc-more').eq(0) // will appear to be the third link, but will be in first row, so 0dom
-        expect(link.length).toBe(1)
-        expect(link).toHaveText('+1 more')
-        expect(link).toBeBoundedBy(cells.eq(3))
+        let dayGridWrapper = new ViewWrapper(calendar).dayGrid
+        let moreEls = dayGridWrapper.getMoreEls()
+        let cells = dayGridWrapper.getDayElsInRow(0)
+        expect(moreEls.length).toBe(3)
+        expect(moreEls[0]).toHaveText('+1 more')
+        expect(moreEls[0]).toBeBoundedBy(cells[3])
       })
 
       it('will render a link in place of a hidden single day event, if covered by a multi-day', function() {
-        initCalendar({
+        let calendar = initCalendar({
           events: [
             { title: 'event1', start: '2014-07-28', end: '2014-07-30' },
             { title: 'event2', start: '2014-07-28', end: '2014-07-30' },
@@ -110,17 +123,18 @@ describe('eventLimit', function() {
             { title: 'event2', start: '2014-07-28' }
           ]
         })
-        var cells = $('.fc-day-grid .fc-row:eq(0) .fc-bg td:not(.fc-axis)')
-        var link = $('.fc-more').eq(0)
-        expect(link.length).toBe(1)
-        expect(link).toHaveText('+2 more')
-        expect(link).toBeBoundedBy(cells.eq(1))
+        let dayGridWrapper = new ViewWrapper(calendar).dayGrid
+        let cells = dayGridWrapper.getDayElsInRow(0)
+        let moreEls = dayGridWrapper.getMoreEls()
+        expect(moreEls.length).toBe(1)
+        expect(moreEls[0]).toHaveText('+2 more')
+        expect(moreEls[0]).toBeBoundedBy(cells[1])
       })
 
       it('will render a link in place of a hidden single day event, if covered by a multi-day ' +
         'and in its second column',
       function() {
-        initCalendar({
+        let calendar = initCalendar({
           events: [
             { title: 'event1', start: '2014-07-28', end: '2014-07-30' },
             { title: 'event2', start: '2014-07-28', end: '2014-07-30' },
@@ -128,17 +142,17 @@ describe('eventLimit', function() {
             { title: 'event2', start: '2014-07-29' }
           ]
         })
-        var cells = $('.fc-day-grid .fc-row:eq(0) .fc-bg td:not(.fc-axis)')
-        var link = $('.fc-more').eq(0)
-        expect(link.length).toBe(1)
-        expect(link).toHaveText('+2 more')
-        expect(link).toBeBoundedBy(cells.eq(2))
+        let dayGridWrapper = new ViewWrapper(calendar).dayGrid
+        let cells = dayGridWrapper.getDayElsInRow(0)
+        let moreEls = dayGridWrapper.getMoreEls()
+        expect(moreEls.length).toBe(1)
+        expect(moreEls[0]).toHaveText('+2 more')
+        expect(moreEls[0]).toBeBoundedBy(cells[2])
       })
     })
   })
 
   describe('when auto', function() {
-
     pushOptions({
       eventLimit: true
     })
@@ -165,11 +179,12 @@ describe('eventLimit', function() {
       })
 
       it('renders the heights of all the rows the same, regardless of # of events', function() {
-        initCalendar()
-        var rowEls = $('.fc-day-grid .fc-row')
+        let calendar = initCalendar()
+        let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid
+        let rowEls = dayGridWrapper.getRowEls()
         expect(rowEls.length).toBeGreaterThan(0)
 
-        let rowHeights = rowEls.map((i, rowEl) => rowEl.getBoundingClientRect().height).get() // jQuery -> array
+        let rowHeights = rowEls.map((rowEl) => rowEl.getBoundingClientRect().height)
         let totalHeight = rowHeights.reduce((prev, current) => prev + current, 0)
         let aveHeight = totalHeight / rowHeights.length
 
@@ -180,9 +195,11 @@ describe('eventLimit', function() {
       })
 
       it('renders a more link when there are obviously too many events', function() {
-        var $el = $('<div id="calendar">').appendTo('body').width(800)
-        initCalendar({}, $el)
-        expect($('.fc-more', currentCalendar.el).length).toBe(1)
+        let $el = $('<div id="calendar">').appendTo('body').width(800)
+        let calendar = initCalendar({}, $el)
+        let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid
+        let moreEls = dayGridWrapper.getMoreEls()
+        expect(moreEls.length).toBe(1)
       })
     })
 
@@ -192,23 +209,23 @@ describe('eventLimit', function() {
     }, function() {
 
       it('doesn\'t render a more link where there should obviously not be a limit', function() {
-        initCalendar({
+        let calendar = initCalendar({
           events: [
             { title: 'event1', start: '2014-07-28', end: '2014-07-30' }
           ]
         })
-        expect($('.fc-more').length).toBe(0)
+        let dayGridWrapper = new DayGridViewWrapper(calendar).dayGrid
+        expect(dayGridWrapper.getMoreEls().length).toBe(0)
       })
     })
 
     describe('in week view', function() {
-
       pushOptions({
         defaultView: 'timeGridWeek'
       })
 
       it('behaves as if limit is 5', function() {
-        initCalendar({
+        let calendar = initCalendar({
           events: [
             { title: 'event1', start: '2014-07-29' },
             { title: 'event2', start: '2014-07-29' },
@@ -219,9 +236,13 @@ describe('eventLimit', function() {
             { title: 'event2', start: '2014-07-29' }
           ]
         })
-        expect($('.fc-event:visible').length).toBe(4)
-        expect($('.fc-more').length).toBe(1)
-        expect($('.fc-more')).toHaveText('+3 more')
+        let dayGridWrapper = new TimeGridViewWrapper(calendar).dayGrid
+        let eventEls = filterVisibleEls(dayGridWrapper.getEventEls())
+        let moreEls = dayGridWrapper.getMoreEls()
+
+        expect(eventEls.length).toBe(4)
+        expect(moreEls.length).toBe(1)
+        expect(moreEls[0]).toHaveText('+3 more')
       })
     })
   })

packages/__tests__/src/legacy/height-and-contentHeight.js

@@ -1,11 +1,14 @@
 import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
+import DayGridViewWrapper from '../lib/wrappers/DayGridViewWrapper'
+import TimeGridViewWrapper from '../lib/wrappers/TimeGridViewWrapper'
+import '../lib/dom-misc'
 
 (function() {
 
   [ 'height', 'contentHeight' ].forEach(function(heightProp) {
     describe(heightProp, function() {
-      var calendarEl
-      var heightElm
+      var $calendarEl
+      var heightEl // HTMLElement
       var asAMethod
 
       /** @type {any} */
@@ -22,39 +25,42 @@ import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
       })
 
       beforeEach(function() {
-        calendarEl = $('<div />').appendTo('body').width(900)
+        $calendarEl = $('<div />').appendTo('body').width(900)
       })
 
       afterEach(function() {
-        calendarEl.remove()
+        $calendarEl.remove()
       })
 
       // relies on asAMethod (boolean)
       // otherOptions: other calendar options to dynamically set (assumes asAMethod)
       function init(heightVal) {
+        let calendar
 
         if (asAMethod) {
 
-          let calendar = initCalendar({}, calendarEl)
+          calendar = initCalendar({}, $calendarEl[0])
           let calendarWrapper = new CalendarWrapper(calendar)
           var dateEl = calendarWrapper.getFirstDateEl()
 
-          currentCalendar.setOption(heightProp, heightVal)
+          calendar.setOption(heightProp, heightVal)
           expect(calendarWrapper.getFirstDateEl()).toBe(dateEl)
 
         } else {
-          initCalendar({ [heightProp]: heightVal }, calendarEl)
+          calendar = initCalendar({ [heightProp]: heightVal }, $calendarEl[0])
         }
 
         if (heightProp === 'height') {
-          heightElm = $('.fc')
+          heightEl = calendar.el
         } else {
-          heightElm = $('.fc-view')
+          heightEl = new CalendarWrapper(calendar).getViewEl()
         }
+
+        return calendar
       }
 
       function expectHeight(heightVal) {
-        var diff = Math.abs(heightElm.outerHeight() - heightVal)
+        var diff = Math.abs(heightEl.offsetHeight - heightVal)
         expect(diff).toBeLessThan(2) // off-by-one or exactly the same. for zoom, and firefox
       }
 
@@ -79,7 +85,7 @@ import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
 
                   if (testInfo.heightWrapper) {
                     beforeEach(function() {
-                      calendarEl.wrap('<div id="calendar-container" style="height: 600px;" />')
+                      $calendarEl.wrap('<div id="calendar-container" style="height: 600px;" />')
                     })
                     afterEach(function() {
                       $('#calendar-container').remove()
@@ -88,11 +94,12 @@ import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
 
                   describe('when there are no events', function() {
                     it('should be the specified height, with no scrollbars', function() {
-                      var diff
-                      init(testInfo.height)
-                      diff = Math.abs(heightElm.outerHeight() - 600)
+                      let calendar = init(testInfo.height)
+                      let viewWrapper = new DayGridViewWrapper(calendar)
+                      let diff = Math.abs(heightEl.offsetHeight - 600)
+
                       expect(diff).toBeLessThan(2)
-                      expect('.scrollgrid .fc-body:last-child .fc-scroller').not.toHaveScrollbars()
+                      expect(viewWrapper.getScrollerEl()).not.toHaveScrollbars()
                     })
                   })
 
@@ -102,22 +109,23 @@ import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
                     })
 
                     it('should take away height from other rows, but not do scrollbars', function() {
-                      init(testInfo.height)
-                      var rows = $('.fc-day-grid .fc-row')
-                      var tallRow = rows.eq(1)
-                      var shortRows = rows.not(tallRow) // 0, 2, 3, 4, 5
-                      var shortHeight = shortRows.eq(0).outerHeight()
+                      let calendar = init(testInfo.height)
+                      let viewWrapper = new DayGridViewWrapper(calendar)
+                      let $rows = $(viewWrapper.dayGrid.getRowEls())
+                      let $tallRow = $rows.eq(1)
+                      let $shortRows = $rows.not($tallRow) // 0, 2, 3, 4, 5
+                      let shortHeight = $shortRows.eq(0).outerHeight()
 
                       expectHeight(600)
 
-                      shortRows.each(function(i, node) {
-                        var rowHeight = $(node).outerHeight()
-                        var diff = Math.abs(rowHeight - shortHeight)
+                      $shortRows.each(function(i, node) {
+                        let rowHeight = $(node).outerHeight()
+                        let diff = Math.abs(rowHeight - shortHeight)
                         expect(diff).toBeLessThan(10) // all roughly the same
                       })
 
-                      expect(tallRow.outerHeight()).toBeGreaterThan(shortHeight * 2) // much taller
-                      expect('.scrollgrid .fc-body:last-child .fc-scroller').not.toHaveScrollbars()
+                      expect($tallRow.outerHeight()).toBeGreaterThan(shortHeight * 2) // much taller
+                      expect(viewWrapper.getScrollerEl()).not.toHaveScrollbars()
                     })
                   })
 
@@ -134,9 +142,11 @@ import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
                     })
 
                     it('height is correct and scrollbars show up', function() {
-                      init(testInfo.height)
+                      let calendar = init(testInfo.height)
+                      let viewWrapper = new DayGridViewWrapper(calendar)
+
                       expectHeight(600)
-                      expect($('.scrollgrid .fc-body:last-child .fc-scroller')).toHaveScrollbars()
+                      expect(viewWrapper.getScrollerEl()).toHaveScrollbars()
                     })
                   })
                 })
@@ -153,10 +163,13 @@ import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
                     repeatClone({ title: 'event5', start: '2014-09-01' }, 9)
                   )
                 })
+
                 it('height is really tall and there are no scrollbars', function() {
-                  init('auto')
-                  expect(heightElm.outerHeight()).toBeGreaterThan(1000) // pretty tall
-                  expect($('.scrollgrid .fc-body:last-child .fc-scroller')).not.toHaveScrollbars()
+                  let calendar = init('auto')
+                  let viewWrapper = new DayGridViewWrapper(calendar)
+
+                  expect(heightEl.offsetHeight).toBeGreaterThan(1000) // pretty tall
+                  expect(viewWrapper.getScrollerEl()).not.toHaveScrollbars()
                 })
               })
             });
@@ -171,7 +184,7 @@ import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
                   describe(testInfo.description, function() {
                     if (testInfo.heightWrapper) {
                       beforeEach(function() {
-                        calendarEl.wrap('<div id="calendar-container" style="height: 600px;" />')
+                        $calendarEl.wrap('<div id="calendar-container" style="height: 600px;" />')
                       })
                       afterEach(function() {
                         $('#calendar-container').remove()
@@ -180,9 +193,11 @@ import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
 
                     describe('when there are no events', function() {
                       it('should be the specified height, with no scrollbars', function() {
-                        init(testInfo.height)
+                        let calendar = init(testInfo.height)
+                        let viewWrapper = new DayGridViewWrapper(calendar)
+
                         expectHeight(600)
-                        expect('.scrollgrid .fc-body:last-child .fc-scroller').not.toHaveScrollbars()
+                        expect(viewWrapper.getScrollerEl()).not.toHaveScrollbars()
                       })
                     })
 
@@ -190,10 +205,13 @@ import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
                       pushOptions({
                         events: repeatClone({ title: 'event', start: '2014-08-01' }, 100)
                       })
+
                       it('should have the correct height, with scrollbars', function() {
-                        init(testInfo.height)
+                        let calendar = init(testInfo.height)
+                        let viewWrapper = new DayGridViewWrapper(calendar)
+
                         expectHeight(600)
-                        expect('.scrollgrid .fc-body:last-child .fc-scroller').toHaveScrollbars()
+                        expect(viewWrapper.getScrollerEl()).toHaveScrollbars()
                       })
                     })
                   })
@@ -204,9 +222,11 @@ import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
                     events: repeatClone({ title: 'event', start: '2014-08-01' }, 100)
                   })
                   it('should be really tall with no scrollbars', function() {
-                    init('auto')
-                    expect(heightElm.outerHeight()).toBeGreaterThan(1000) // pretty tall
-                    expect('.scrollgrid .fc-body:last-child .fc-scroller').not.toHaveScrollbars()
+                    let calendar = init('auto')
+                    let viewWrapper = new DayGridViewWrapper(calendar)
+
+                    expect(heightEl.offsetHeight).toBeGreaterThan(1000) // pretty tall
+                    expect(viewWrapper.getScrollerEl()).not.toHaveScrollbars()
                   })
                 })
               })
@@ -228,7 +248,7 @@ import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
                     describe(testInfo.description, function() {
                       if (testInfo.heightWrapper) {
                         beforeEach(function() {
-                          calendarEl.wrap('<div id="calendar-container" style="height: 600px;" />')
+                          $calendarEl.wrap('<div id="calendar-container" style="height: 600px;" />')
                         })
                         afterEach(function() {
                           $('#calendar-container').remove()
@@ -241,9 +261,11 @@ import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
                           maxTime: '24:00:00'
                         })
                         it('should be the correct height, with scrollbars', function() {
-                          init(testInfo.height)
+                          let calendar = init(testInfo.height)
+                          let viewWrapper = new TimeGridViewWrapper(calendar)
+
                           expectHeight(600)
-                          expect($('.scrollgrid .fc-body:last-child .fc-scroller')).toHaveScrollbars()
+                          expect(viewWrapper.getScrollerEl()).toHaveScrollbars()
                         })
                       })
                     })
@@ -255,9 +277,11 @@ import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
                       maxTime: '10:00:00'
                     })
                     it('should be really short with no scrollbars nor horizontal rule', function() {
-                      init('auto')
-                      expect(heightElm.outerHeight()).toBeLessThan(500) // pretty short
-                      expect($('.scrollgrid .fc-body:last-child .fc-scroller')).not.toHaveScrollbars()
+                      let calendar = init('auto')
+                      let viewWrapper = new TimeGridViewWrapper(calendar)
+
+                      expect(heightEl.offsetHeight).toBeLessThan(500) // pretty short
+                      expect(viewWrapper.getScrollerEl()).not.toHaveScrollbars()
                     })
                   })
 
@@ -266,10 +290,13 @@ import CalendarWrapper from '../lib/wrappers/CalendarWrapper'
                       minTime: '00:00:00',
                       maxTime: '24:00:00'
                     })
+
                     it('should be really tall with no scrollbars nor horizontal rule', function() {
-                      init('auto')
-                      expect(heightElm.outerHeight()).toBeGreaterThan(900) // pretty tall
-                      expect($('.scrollgrid .fc-body:last-child .fc-scroller')).not.toHaveScrollbars()
+                      let calendar = init('auto')
+                      let viewWrapper = new TimeGridViewWrapper(calendar)
+
+                      expect(heightEl.offsetHeight).toBeGreaterThan(900) // pretty tall
+                      expect(viewWrapper.getScrollerEl()).not.toHaveScrollbars()
                     })
                   })
                 })

packages/__tests__/src/lib/dom-misc.js

@@ -34,6 +34,16 @@ export function getStockScrollbarWidths(dir) {
 }
 
 
+export function filterVisibleEls(els) {
+  return els.filter((el) => {
+    let $el = $(el)
+    return $el.is(':visible') && $el.css('visibility') !== 'hidden'
+  })
+}
+
+
+// TODO: make sure these matchers are loaded globally first
+
 beforeEach(function() {
   jasmine.addMatchers({