| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388 |
- describe('manualRowResize', () => {
- var id = 'test';
- var defaultRowHeight = 22;
- beforeEach(function() {
- this.$container = $(`<div id="${id}"></div>`).appendTo('body');
- });
- afterEach(function() {
- if (this.$container) {
- destroy();
- this.$container.remove();
- }
- });
- it('should change row heights at init', function() {
- handsontable({
- rowHeaders: true,
- manualRowResize: [50, 40, 100]
- });
- expect(rowHeight(this.$container, 0)).toEqual(51);
- expect(rowHeight(this.$container, 1)).toEqual(40);
- expect(rowHeight(this.$container, 2)).toEqual(100);
- });
- it('should be enabled after specifying it in updateSettings config', function() {
- var hot = handsontable({
- data: [
- {id: 1, name: 'Ted', lastName: 'Right'},
- {id: 2, name: 'Frank', lastName: 'Honest'},
- {id: 3, name: 'Joan', lastName: 'Well'},
- {id: 4, name: 'Sid', lastName: 'Strong'},
- {id: 5, name: 'Jane', lastName: 'Neat'}
- ],
- rowHeaders: true
- });
- updateSettings({manualRowResize: true});
- this.$container.find('tbody tr:eq(0) th:eq(0)').simulate('mouseover');
- expect($('.manualRowResizer').size()).toBeGreaterThan(0);
- });
- it('should change the default row height with updateSettings', function() {
- handsontable({
- manualRowResize: true
- });
- expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2); // + Double border
- expect(rowHeight(this.$container, 1)).toEqual(defaultRowHeight + 1); // + Single border
- expect(rowHeight(this.$container, 2)).toEqual(defaultRowHeight + 1); // + Single border
- updateSettings({
- manualRowResize: [60, 50, 80]
- });
- expect(rowHeight(this.$container, 0)).toEqual(61);
- expect(rowHeight(this.$container, 1)).toEqual(50);
- expect(rowHeight(this.$container, 2)).toEqual(80);
- });
- it('should change the row height with updateSettings', function() {
- handsontable({
- manualRowResize: [60, 50, 80]
- });
- expect(rowHeight(this.$container, 0)).toEqual(61);
- expect(rowHeight(this.$container, 1)).toEqual(50);
- expect(rowHeight(this.$container, 2)).toEqual(80);
- updateSettings({
- manualRowResize: [30, 80, 100]
- });
- expect(rowHeight(this.$container, 0)).toEqual(31);
- expect(rowHeight(this.$container, 1)).toEqual(80);
- expect(rowHeight(this.$container, 2)).toEqual(100);
- });
- it('should not change the row height when `true` is passing', function() {
- handsontable({
- manualRowResize: [60, 50, 80]
- });
- expect(rowHeight(this.$container, 0)).toEqual(61);
- expect(rowHeight(this.$container, 1)).toEqual(50);
- expect(rowHeight(this.$container, 2)).toEqual(80);
- updateSettings({
- manualRowResize: true
- });
- expect(rowHeight(this.$container, 0)).toEqual(61);
- expect(rowHeight(this.$container, 1)).toEqual(50);
- expect(rowHeight(this.$container, 2)).toEqual(80);
- });
- it('should change the row height to defaults when undefined is passed', function() {
- handsontable({
- manualRowResize: [60, 50, 80]
- });
- expect(rowHeight(this.$container, 0)).toEqual(61);
- expect(rowHeight(this.$container, 1)).toEqual(50);
- expect(rowHeight(this.$container, 2)).toEqual(80);
- updateSettings({
- manualRowResize: void 0
- });
- expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2); // + Double border
- expect(rowHeight(this.$container, 1)).toEqual(defaultRowHeight + 1); // + Single border
- expect(rowHeight(this.$container, 2)).toEqual(defaultRowHeight + 1); // + Single border
- });
- it('should reset row height', function() {
- handsontable({
- manualRowResize: true
- });
- expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
- expect(rowHeight(this.$container, 1)).toEqual(defaultRowHeight + 1);
- expect(rowHeight(this.$container, 2)).toEqual(defaultRowHeight + 1);
- updateSettings({
- manualRowResize: true
- });
- expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
- expect(rowHeight(this.$container, 1)).toEqual(defaultRowHeight + 1);
- expect(rowHeight(this.$container, 2)).toEqual(defaultRowHeight + 1);
- });
- it('should trigger afterRowResize event after row height changes', function() {
- var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
- handsontable({
- data: Handsontable.helper.createSpreadsheetData(5, 5),
- rowHeaders: true,
- manualRowResize: true,
- afterRowResize: afterRowResizeCallback
- });
- expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
- resizeRow(0, 100);
- expect(afterRowResizeCallback).toHaveBeenCalledWith(0, 100, void 0, void 0, void 0, void 0);
- expect(rowHeight(this.$container, 0)).toEqual(101);
- });
- it('should not trigger afterRowResize event if row height does not change (delta = 0)', function() {
- var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
- handsontable({
- data: Handsontable.helper.createSpreadsheetData(5, 5),
- rowHeaders: true,
- manualRowResize: true,
- afterRowResize: afterRowResizeCallback
- });
- expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
- resizeRow(0, defaultRowHeight);
- expect(afterRowResizeCallback).not.toHaveBeenCalled();
- expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
- });
- it('should not trigger afterRowResize event after if row height does not change (no mousemove event)', function() {
- var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
- handsontable({
- data: Handsontable.helper.createSpreadsheetData(5, 5),
- rowHeaders: true,
- manualRowResize: true,
- afterRowResize: afterRowResizeCallback
- });
- expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
- var $th = this.$container.find('tbody tr:eq(0) th:eq(0)');
- $th.simulate('mouseover');
- var $resizer = this.$container.find('.manualRowResizer');
- var resizerPosition = $resizer.position();
- $resizer.simulate('mousedown', {
- clientY: resizerPosition.top
- });
- $resizer.simulate('mouseup');
- expect(afterRowResizeCallback).not.toHaveBeenCalled();
- expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
- });
- it('should trigger an afterRowResize after row size changes, after double click', function(done) {
- var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
- handsontable({
- data: Handsontable.helper.createSpreadsheetData(5, 5),
- rowHeaders: true,
- manualRowResize: true,
- autoRowSize: true,
- afterRowResize: afterRowResizeCallback
- });
- expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
- var $th = this.$container.find('tbody tr:eq(2) th:eq(0)');
- $th.simulate('mouseover');
- var $resizer = this.$container.find('.manualRowResizer');
- var resizerPosition = $resizer.position();
- $resizer.simulate('mousedown', {
- clientY: resizerPosition.top
- });
- $resizer.simulate('mouseup');
- $resizer.simulate('mousedown', {
- clientY: resizerPosition.top
- });
- $resizer.simulate('mouseup');
- setTimeout(() => {
- expect(afterRowResizeCallback.calls.count()).toEqual(1);
- expect(afterRowResizeCallback.calls.argsFor(0)[0]).toEqual(2);
- expect(afterRowResizeCallback.calls.argsFor(0)[1]).toEqual(defaultRowHeight + 1);
- expect(rowHeight(spec().$container, 2)).toEqual(defaultRowHeight + 1);
- done();
- }, 1000);
- });
- it('should not trigger afterRowResize event after if row height does not change (no dblclick event)', function() {
- var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
- handsontable({
- data: Handsontable.helper.createSpreadsheetData(5, 5),
- rowHeaders: true,
- manualRowResize: true,
- afterRowResize: afterRowResizeCallback
- });
- expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
- var $th = this.$container.find('tbody tr:eq(2) th:eq(0)');
- $th.simulate('mouseover');
- var $resizer = this.$container.find('.manualRowResizer');
- var resizerPosition = $resizer.position();
- $resizer.simulate('mousedown', {
- clientY: resizerPosition.top
- });
- $resizer.simulate('mouseup');
- expect(afterRowResizeCallback).not.toHaveBeenCalled();
- expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
- });
- it('should display the resize handle in the correct place after the table has been scrolled', function() {
- var hot = handsontable({
- data: Handsontable.helper.createSpreadsheetData(20, 20),
- rowHeaders: true,
- manualRowResize: true,
- height: 100,
- width: 200
- });
- var mainHolder = hot.view.wt.wtTable.holder;
- var $rowHeader = this.$container.find('.ht_clone_left tbody tr:eq(2) th:eq(0)');
- $rowHeader.simulate('mouseover');
- var $handle = this.$container.find('.manualRowResizer');
- $handle[0].style.background = 'red';
- expect($rowHeader.offset().left).toBeCloseTo($handle.offset().left, 0);
- expect($rowHeader.offset().top + $rowHeader.height() - 5).toBeCloseTo($handle.offset().top, 0);
- $(mainHolder).scrollTop(200);
- $(mainHolder).scroll();
- $rowHeader = this.$container.find('.ht_clone_left tbody tr:eq(2) th:eq(0)');
- $rowHeader.simulate('mouseover');
- expect($rowHeader.offset().left).toBeCloseTo($handle.offset().left, 0);
- expect($rowHeader.offset().top + $rowHeader.height() - 5).toBeCloseTo($handle.offset().top, 0);
- });
- it('should autosize selected rows after double click on handler', function(done) {
- handsontable({
- data: Handsontable.helper.createSpreadsheetData(9, 9),
- rowHeaders: true,
- manualRowResize: true,
- });
- resizeRow(2, 300);
- var $resizer = this.$container.find('.manualRowResizer');
- var resizerPosition = $resizer.position();
- this.$container.find('.ht_clone_left tbody tr:eq(1) th:eq(0)').simulate('mousedown');
- this.$container.find('.ht_clone_left tbody tr:eq(2) th:eq(0)').simulate('mouseover');
- this.$container.find('.ht_clone_left tbody tr:eq(3) th:eq(0)').simulate('mouseover');
- this.$container.find('.ht_clone_left tbody tr:eq(3) th:eq(0)').simulate('mousemove');
- this.$container.find('.ht_clone_left tbody tr:eq(3) th:eq(0)').simulate('mouseup');
- setTimeout(() => {
- $resizer.simulate('mousedown', {clientY: resizerPosition.top});
- $resizer.simulate('mouseup');
- $resizer.simulate('mousedown', {clientY: resizerPosition.top});
- $resizer.simulate('mouseup');
- }, 600);
- setTimeout(() => {
- expect(rowHeight(spec().$container, 1)).toBeAroundValue(24);
- expect(rowHeight(spec().$container, 2)).toBeAroundValue(24);
- expect(rowHeight(spec().$container, 3)).toBeAroundValue(24);
- done();
- }, 1600);
- });
- it('should resize (expanding and narrowing) selected rows', function(done) {
- var hot = handsontable({
- data: Handsontable.helper.createSpreadsheetData(10, 20),
- rowHeaders: true,
- manualRowResize: true
- });
- resizeRow(2, 60);
- var $rowsHeaders = this.$container.find('.ht_clone_left tr th');
- this.$container.find('.ht_clone_left tbody tr:eq(1) th:eq(0)').simulate('mouseover');
- $rowsHeaders.eq(1).simulate('mousedown');
- $rowsHeaders.eq(2).simulate('mouseover');
- $rowsHeaders.eq(3).simulate('mouseover');
- $rowsHeaders.eq(3).simulate('mousemove');
- $rowsHeaders.eq(3).simulate('mouseup');
- var $resizer = this.$container.find('.manualRowResizer');
- var resizerPosition = $resizer.position();
- setTimeout(() => {
- $resizer.simulate('mousedown', {clientY: resizerPosition.top});
- $resizer.simulate('mousemove', {clientY: resizerPosition.top - $rowsHeaders.eq(3).height() + 80});
- $resizer.simulate('mouseup');
- expect($rowsHeaders.eq(1).height()).toEqual(80);
- expect($rowsHeaders.eq(2).height()).toEqual(80);
- expect($rowsHeaders.eq(3).height()).toEqual(80);
- }, 600);
- setTimeout(() => {
- $resizer.simulate('mousedown', {clientY: resizerPosition.top});
- $resizer.simulate('mousemove', {clientY: resizerPosition.top - $rowsHeaders.eq(3).height() + 35});
- $resizer.simulate('mouseup');
- expect($rowsHeaders.eq(1).height()).toEqual(35);
- expect($rowsHeaders.eq(2).height()).toEqual(35);
- expect($rowsHeaders.eq(3).height()).toEqual(35);
- done();
- }, 1800);
- });
- describe('handle and guide', () => {
- it('should display the resize handle in the proper position and with a proper size', function() {
- var hot = handsontable({
- data: [
- {id: 1, name: 'Ted', lastName: 'Right'},
- {id: 2, name: 'Frank', lastName: 'Honest'},
- {id: 3, name: 'Joan', lastName: 'Well'},
- {id: 4, name: 'Sid', lastName: 'Strong'},
- {id: 5, name: 'Jane', lastName: 'Neat'}
- ],
- rowHeaders: true,
- manualRowResize: true
- });
- var $headerTH = this.$container.find('tbody tr:eq(1) th:eq(0)');
- $headerTH.simulate('mouseover');
- var $handle = $('.manualRowResizer');
- expect($handle.offset().top).toBeCloseTo($headerTH.offset().top + $headerTH.outerHeight() - $handle.outerHeight() - 1, 0);
- expect($handle.width()).toBeCloseTo($headerTH.outerWidth(), 0);
- });
- });
- });
|