/* Tick label Render Tests - Tests that labels render in correct positions in both horizontal and vertical orientation */ describe("Tick Label Render Tests", function() { var testSliderH; var testSliderV; //setup beforeEach(function() { testSliderH = $('#testSlider1').slider({ id: 'slider1', ticks: [0, 1, 2], ticks_labels:['x', 'y', 'z'], orientation:'horizontal' }); testSliderV = $('#testSlider2').slider({ id: 'slider2', ticks: [0, 1, 2], ticks_labels:['x', 'y', 'z'], orientation:'vertical' }); }); //cleanup afterEach(function() { testSliderH.slider('destroy'); testSliderH = null; testSliderV.slider('destroy'); testSliderV = null; }); //e.g. testOrientation('horizontal', 2) will test the horizontal //code path using control with the id testSlider2 function testOrientation(orientation) { var sliderIndex = orientation.toLowerCase() === 'horizontal' ? 1 : 2; var isVertical = orientation.toLowerCase() === 'horizontal' ? false : true; var sliderId = '#slider' + sliderIndex; //check elements exist it("Tick labels are rendered - " + orientation, function() { expect($(sliderId).length).toBe(1); var length = $(sliderId + ' .slider-tick-label').length; expect(length).toBe(3); }); //check elements exist within the bounds of the slider it("Tick labels render inside the slider's bounds" + orientation, function() { expect($(sliderId).length).toBe(1); var sliderRect = $(sliderId)[0].getBoundingClientRect(); var tickLabels = $(sliderId + ' .slider-tick-label'); for (var i = 0; i < tickLabels.length; i++) { var labelRect = tickLabels[i].getBoundingClientRect(); if (isVertical) { expect(labelRect.left).toBeGreaterThan(sliderRect.left); expect(labelRect.top + 10 >= sliderRect.top).toBeTruthy(); } else { expect(labelRect.top + 10 >= sliderRect.top).toBeTruthy(); expect(labelRect.width / 2 + labelRect.left >= sliderRect.left).toBeTruthy(); } } }); } //test both horizontal and vertical orientations testOrientation('horizontal'); testOrientation('vertical'); });