IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Bring React into the tree, and add linting and bundling framework for the JS etc.

Browse Source
This commit is contained in:
Shruti B Iyer
2017-06-12 16:51:54 +01:00
committed by Dave Page
parent af43ccfc07
commit 659eb1c1e8
32 changed files with 6680 additions and 1840 deletions
Download Patch File Download Diff File Expand all files Collapse all files

788
web/regression/javascript/selection/column_selector_spec.js
View File

@@ -1,419 +1,423 @@
define(
["jquery",
"underscore",
"sources/selection/column_selector",
"sources/selection/active_cell_capture",
"sources/selection/grid_selector",
'sources/selection/xcell_selection_model',
//////////////////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2017, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////////////////
"slickgrid",
'sources/slickgrid/pgslick.cellrangedecorator',
'sources/slickgrid/pgslick.cellrangeselector',
"slickgrid/slick.grid",
],
function ($, _, ColumnSelector, ActiveCellCapture, GridSelector, XCellSelectionModel) {
var KEY_RIGHT = 39;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_DOWN = 40;
import $ from 'jquery';
var Slick = window.Slick;
var SlickGrid = Slick.Grid;
import Slick from 'slickgrid';
import 'slickgrid.grid';
describe("ColumnSelector", function () {
var container, data, columns, options;
import ColumnSelector from 'sources/selection/column_selector';
import ActiveCellCapture from 'sources/selection/active_cell_capture';
import 'sources/selection/grid_selector';
import XCellSelectionModel from 'sources/selection/xcell_selection_model';
import 'sources/slickgrid/pgslick.cellrangedecorator';
import 'sources/slickgrid/pgslick.cellrangeselector';
describe('ColumnSelector', function () {
var container, data, columns, options;
var SlickGrid = Slick.Grid;
var KEY_RIGHT = 39;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_DOWN = 40;
beforeEach(function () {
container = $('<div></div>');
container.height(9999);
container.width(9999);
data = [{
'some-column-name': 'first value',
'second column': 'second value',
'third column': 'nonselectable value'
}, {
'some-column-name': 'row 1 - first value',
'second column': 'row 1 - second value',
'third column': 'row 1 - nonselectable value'
}];
columns = [
{
id: 'row-header-column',
name: 'row header column name',
selectable: false,
display_name: 'row header column name',
column_type: 'text'
},
{
id: '1',
name: 'some-column-name',
pos: 0,
display_name: 'some-column-name',
column_type: 'text'
},
{
id: '2',
name: 'second column',
pos: 1,
display_name: 'second column',
column_type: 'json'
},
{
id: 'third-column-id',
name: 'third column',
pos: 2,
display_name: 'third column',
column_type: 'text'
},
{
name: 'some-non-selectable-column',
selectable: false,
pos: 3,
display_name: 'some-non-selectable-column',
column_type: 'numeric'
}
];
});
it('displays the name of the column', function () {
setupGrid(columns);
expect($(container.find('.slick-header-columns .slick-column-name')[1]).text())
.toContain('some-column-name');
expect($(container.find('.slick-header-columns .slick-column-name')[1]).text())
.toContain('text');
expect($(container.find('.slick-header-columns .slick-column-name')[2]).text())
.toContain('second column');
expect($(container.find('.slick-header-columns .slick-column-name')[2]).text())
.toContain('json');
});
it('preserves the other attributes of column definitions', function () {
var columnSelector = new ColumnSelector();
var selectableColumns = columnSelector.getColumnDefinitions(columns);
expect(selectableColumns[1].id).toBe('1');
});
describe('with ActiveCellCapture, CellSelectionModel, and GridSelector: selecting columns', function () {
var grid, cellSelectionModel;
beforeEach(function () {
var columnSelector = new ColumnSelector();
columns = columnSelector.getColumnDefinitions(columns);
data = [];
for (var i = 0; i < 10; i++) {
data.push({
'some-column-name': 'some-value-' + i,
'second column': 'second value ' + i,
'third column': 'third value ' + i,
'fourth column': 'fourth value ' + i,
});
}
grid = new SlickGrid(container, data, columns);
grid.registerPlugin(new ActiveCellCapture());
cellSelectionModel = new XCellSelectionModel();
grid.setSelectionModel(cellSelectionModel);
grid.registerPlugin(columnSelector);
grid.invalidate();
$('body').append(container);
});
afterEach(function () {
$('body').find(container).remove();
});
describe('when the user clicks a column header', function () {
it('selects the column', function () {
container.find('.slick-header-column:contains(some-column-name)').click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expectOnlyTheFirstColumnToBeSelected(selectedRanges);
});
it('toggles a selected class to the header cell', function () {
container.find('.slick-header-column:contains(second column)').click();
expect($(container.find('.slick-header-column:contains(second column)')).hasClass('selected'))
.toBe(true);
container.find('.slick-header-column:contains(second column)').click();
expect($(container.find('.slick-header-column:contains(second column)')).hasClass('selected'))
.toBe(false);
});
});
describe('when the user clicks an additional column header', function () {
beforeEach(function () {
container = $("<div></div>");
container.height(9999);
container.width(9999);
data = [{
'some-column-name': 'first value',
'second column': 'second value',
'third column': 'nonselectable value'
}, {
'some-column-name': 'row 1 - first value',
'second column': 'row 1 - second value',
'third column': 'row 1 - nonselectable value'
}];
columns = [
{
id: 'row-header-column',
name: 'row header column name',
selectable: false,
display_name: 'row header column name',
column_type: 'text'
},
{
id: '1',
name: 'some-column-name',
pos: 0,
display_name: 'some-column-name',
column_type: 'text'
},
{
id: '2',
name: 'second column',
pos: 1,
display_name: 'second column',
column_type: 'json'
},
{
id: 'third-column-id',
name: 'third column',
pos: 2,
display_name: 'third column',
column_type: 'text'
},
{
name: 'some-non-selectable-column',
selectable: false,
pos: 3,
display_name: 'some-non-selectable-column',
column_type: 'numeric'
}
];
container.find('.slick-header-column:contains(some-column-name)').click();
container.find('.slick-header-column:contains(second column)').click();
});
it("displays the name of the column", function () {
setupGrid(columns);
it('selects additional columns', function () {
expect($(container.find('.slick-header-columns .slick-column-name')[1]).text())
.toContain('some-column-name');
expect($(container.find('.slick-header-columns .slick-column-name')[1]).text())
.toContain('text');
expect($(container.find('.slick-header-columns .slick-column-name')[2]).text())
.toContain('second column');
expect($(container.find('.slick-header-columns .slick-column-name')[2]).text())
.toContain('json');
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(2);
var column1 = selectedRanges[0];
expect(column1.fromCell).toBe(1);
expect(column1.toCell).toBe(1);
var column2 = selectedRanges[1];
expect(column2.fromCell).toBe(2);
expect(column2.toCell).toBe(2);
});
it("preserves the other attributes of column definitions", function () {
var columnSelector = new ColumnSelector();
var selectableColumns = columnSelector.getColumnDefinitions(columns);
expect(selectableColumns[1].id).toBe('1');
});
describe("with ActiveCellCapture, CellSelectionModel, and GridSelector: selecting columns", function () {
var grid, cellSelectionModel;
describe('and presses shift + right-arrow', function () {
beforeEach(function () {
var columnSelector = new ColumnSelector();
columns = columnSelector.getColumnDefinitions(columns);
data = [];
for (var i = 0; i < 10; i++) {
data.push({
'some-column-name': 'some-value-' + i,
'second column': 'second value ' + i,
'third column': 'third value ' + i,
'fourth column': 'fourth value ' + i,
});
}
grid = new SlickGrid(container, data, columns);
grid.registerPlugin(new ActiveCellCapture());
cellSelectionModel = new XCellSelectionModel();
grid.setSelectionModel(cellSelectionModel);
grid.registerPlugin(columnSelector);
grid.invalidate();
$("body").append(container);
pressShiftArrow(KEY_RIGHT);
});
afterEach(function () {
$("body").find(container).remove();
it('keeps the last column selected', function () {
expect(cellSelectionModel.getSelectedRanges().length).toBe(1);
});
describe("when the user clicks a column header", function () {
it("selects the column", function () {
container.find('.slick-header-column:contains(some-column-name)').click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expectOnlyTheFirstColumnToBeSelected(selectedRanges);
});
it("toggles a selected class to the header cell", function () {
container.find('.slick-header-column:contains(second column)').click();
expect($(container.find('.slick-header-column:contains(second column)')).hasClass('selected'))
.toBe(true);
container.find('.slick-header-column:contains(second column)').click();
expect($(container.find('.slick-header-column:contains(second column)')).hasClass('selected'))
.toBe(false);
});
it('grows the selection to the right', function () {
var selectedRange = cellSelectionModel.getSelectedRanges()[0];
expect(selectedRange.fromCell).toBe(2);
expect(selectedRange.toCell).toBe(3);
expect(selectedRange.fromRow).toBe(0);
expect(selectedRange.toRow).toBe(9);
});
describe("when the user clicks an additional column header", function () {
beforeEach(function () {
container.find('.slick-header-column:contains(some-column-name)').click();
container.find('.slick-header-column:contains(second column)').click();
});
it('keeps selected class on columns 2 and 3', function () {
expect($(container.find('.slick-header-column:contains(second column)')).hasClass('selected'))
.toBe(true);
expect($(container.find('.slick-header-column:contains(third column)')).hasClass('selected'))
.toBe(true);
expect($(container.find('.slick-header-column:contains(some-column-name)')).hasClass('selected'))
.toBe(false);
});
});
it("selects additional columns", function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(2);
var column1 = selectedRanges[0];
expect(column1.fromCell).toBe(1);
expect(column1.toCell).toBe(1);
var column2 = selectedRanges[1];
expect(column2.fromCell).toBe(2);
expect(column2.toCell).toBe(2);
});
describe("and presses shift + right-arrow", function () {
beforeEach(function () {
pressShiftArrow(KEY_RIGHT);
});
it("keeps the last column selected", function () {
expect(cellSelectionModel.getSelectedRanges().length).toBe(1);
});
it("grows the selection to the right", function () {
var selectedRange = cellSelectionModel.getSelectedRanges()[0];
expect(selectedRange.fromCell).toBe(2);
expect(selectedRange.toCell).toBe(3);
expect(selectedRange.fromRow).toBe(0);
expect(selectedRange.toRow).toBe(9);
});
it("keeps selected class on columns 2 and 3", function () {
expect($(container.find('.slick-header-column:contains(second column)')).hasClass('selected'))
.toBe(true);
expect($(container.find('.slick-header-column:contains(third column)')).hasClass('selected'))
.toBe(true);
expect($(container.find('.slick-header-column:contains(some-column-name)')).hasClass('selected'))
.toBe(false);
});
});
describe("when the user deselects the last selected column header", function () {
beforeEach(function () {
container.find('.slick-header-column:contains(second column)').click();
});
describe("and presses shift + right-arrow", function () {
it("first and second columns are selected", function () {
pressShiftArrow(KEY_RIGHT);
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
expect(selectedRanges[0].fromCell).toBe(1);
expect(selectedRanges[0].toCell).toBe(2);
expect(selectedRanges[0].fromRow).toBe(0);
expect(selectedRanges[0].toRow).toBe(9);
});
});
});
describe('when the user deselects the last selected column header', function () {
beforeEach(function () {
container.find('.slick-header-column:contains(second column)').click();
});
describe("when the user clicks a column header description", function () {
it("selects the column", function () {
container.find('.slick-header-columns span.column-description:contains(some-column-name)').click();
describe('and presses shift + right-arrow', function () {
it('first and second columns are selected', function () {
pressShiftArrow(KEY_RIGHT);
var selectedRanges = cellSelectionModel.getSelectedRanges();
expectOnlyTheFirstColumnToBeSelected(selectedRanges);
});
it("toggles a selected class to the header cell", function () {
container.find('.slick-header-column span.column-description:contains(second column)').click();
expect($(container.find('.slick-header-column:contains(second column)')).hasClass('selected'))
.toBe(true);
container.find('.slick-header-column span.column-description:contains(second column)').click();
expect($(container.find('.slick-header-column:contains(second column)')).hasClass('selected'))
.toBe(false);
});
});
describe("when a row is selected", function () {
beforeEach(function () {
var selectedRanges = [new Slick.Range(0, 0, 0, 1)];
cellSelectionModel.setSelectedRanges(selectedRanges);
});
it("deselects the row", function () {
container.find('.slick-header-column')[1].click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var column = selectedRanges[0];
expect(column.fromCell).toBe(1);
expect(column.toCell).toBe(1);
expect(column.fromRow).toBe(0);
expect(column.toRow).toBe(9);
});
});
describe("clicking a second time", function () {
beforeEach(function () {
container.find('.slick-header-column')[1].click();
});
it("deselects the column", function () {
container.find('.slick-header-column')[1].click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toEqual(0);
})
});
describe("when the column is not selectable", function () {
it("does not select the column", function () {
$(container.find('.slick-header-column:contains(some-non-selectable-column)')).click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toEqual(0);
});
});
describe("when the column is deselected through setSelectedRanges", function () {
beforeEach(function () {
container.find('.slick-header-column')[1].click();
});
it("removes selected class from header", function () {
cellSelectionModel.setSelectedRanges([]);
expect($(container.find('.slick-header-column')[1]).hasClass('selected'))
.toBe(false);
});
});
describe("when a non-column range was already selected", function () {
beforeEach(function () {
var selectedRanges = [new Slick.Range(0, 0, 2, 0)];
cellSelectionModel.setSelectedRanges(selectedRanges);
});
it("deselects the non-column range", function () {
container.find('.slick-header-column:contains(some-column-name)').click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expectOnlyTheFirstColumnToBeSelected(selectedRanges);
});
});
describe('when a column is selected', function () {
beforeEach(function () {
container.find('.slick-header-column:contains(some-column-name)').click();
});
describe('when the user click a cell on the current range', function () {
beforeEach(function () {
container.find('.slick-cell.l1.r1')[1].click();
});
it('column is deselected', function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var column = selectedRanges[0];
expect(column.fromCell).toBe(1);
expect(column.toCell).toBe(1);
expect(column.fromRow).toBe(1);
expect(column.toRow).toBe(1);
});
it('keep select class on column header', function () {
expect($(container.find('.slick-header-column:contains(some-column-name)')).hasClass('selected'))
.toBeTruthy();
});
});
describe('when the user click a cell outside the current range', function () {
beforeEach(function () {
container.find('.slick-cell.l2.r2')[2].click();
});
it('column is deselected', function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var column = selectedRanges[0];
expect(column.fromCell).toBe(2);
expect(column.toCell).toBe(2);
expect(column.fromRow).toBe(2);
expect(column.toRow).toBe(2);
});
it('remove select class on "some-column-name" column header', function () {
expect($(container.find('.slick-header-column:contains(some-column-name)')).hasClass('selected'))
.toBeFalsy();
expect($(container.find('.slick-header-column:contains(second column)')).hasClass('selected'))
.toBeTruthy();
});
});
describe('when the user click in a row header', function () {
beforeEach(function () {
var selectedRanges = [new Slick.Range(1, 1, 1, 3)];
cellSelectionModel.setSelectedRanges(selectedRanges);
});
it('column is deselected', function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var column = selectedRanges[0];
expect(column.fromCell).toBe(1);
expect(column.toCell).toBe(3);
expect(column.fromRow).toBe(1);
expect(column.toRow).toBe(1);
});
it('no column should have the class "selected"', function () {
expect($(container.find('.slick-header-column:contains(some-column-name)')).hasClass('selected'))
.toBeFalsy();
});
expect(selectedRanges[0].fromCell).toBe(1);
expect(selectedRanges[0].toCell).toBe(2);
expect(selectedRanges[0].fromRow).toBe(0);
expect(selectedRanges[0].toRow).toBe(9);
});
});
});
function setupGrid(columns) {
var columnSelector = new ColumnSelector();
columns = columnSelector.getColumnDefinitions(columns);
var grid = new SlickGrid(container, data, columns, options);
var cellSelectionModel = new XCellSelectionModel();
grid.setSelectionModel(cellSelectionModel);
grid.registerPlugin(columnSelector);
grid.invalidate();
}
function expectOnlyTheFirstColumnToBeSelected(selectedRanges) {
var row = selectedRanges[0];
expect(selectedRanges.length).toEqual(1);
expect(row.fromCell).toBe(1);
expect(row.toCell).toBe(1);
expect(row.fromRow).toBe(0);
expect(row.toRow).toBe(9);
}
function pressShiftArrow(keyCode) {
var pressEvent = new $.Event("keydown");
pressEvent.shiftKey = true;
pressEvent.ctrlKey = false;
pressEvent.altKey = false;
pressEvent.which = keyCode;
$(container.find('.grid-canvas')).trigger(pressEvent);
}
});
});
describe('when the user clicks a column header description', function () {
it('selects the column', function () {
container.find('.slick-header-columns span.column-description:contains(some-column-name)').click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expectOnlyTheFirstColumnToBeSelected(selectedRanges);
});
it('toggles a selected class to the header cell', function () {
container.find('.slick-header-column span.column-description:contains(second column)').click();
expect($(container.find('.slick-header-column:contains(second column)')).hasClass('selected'))
.toBe(true);
container.find('.slick-header-column span.column-description:contains(second column)').click();
expect($(container.find('.slick-header-column:contains(second column)')).hasClass('selected'))
.toBe(false);
});
});
describe('when a row is selected', function () {
beforeEach(function () {
var selectedRanges = [new Slick.Range(0, 0, 0, 1)];
cellSelectionModel.setSelectedRanges(selectedRanges);
});
it('deselects the row', function () {
container.find('.slick-header-column')[1].click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var column = selectedRanges[0];
expect(column.fromCell).toBe(1);
expect(column.toCell).toBe(1);
expect(column.fromRow).toBe(0);
expect(column.toRow).toBe(9);
});
});
describe('clicking a second time', function () {
beforeEach(function () {
container.find('.slick-header-column')[1].click();
});
it('deselects the column', function () {
container.find('.slick-header-column')[1].click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toEqual(0);
})
});
describe('when the column is not selectable', function () {
it('does not select the column', function () {
$(container.find('.slick-header-column:contains(some-non-selectable-column)')).click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toEqual(0);
});
});
describe('when the column is deselected through setSelectedRanges', function () {
beforeEach(function () {
container.find('.slick-header-column')[1].click();
});
it('removes selected class from header', function () {
cellSelectionModel.setSelectedRanges([]);
expect($(container.find('.slick-header-column')[1]).hasClass('selected'))
.toBe(false);
});
});
describe('when a non-column range was already selected', function () {
beforeEach(function () {
var selectedRanges = [new Slick.Range(0, 0, 2, 0)];
cellSelectionModel.setSelectedRanges(selectedRanges);
});
it('deselects the non-column range', function () {
container.find('.slick-header-column:contains(some-column-name)').click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expectOnlyTheFirstColumnToBeSelected(selectedRanges);
});
});
describe('when a column is selected', function () {
beforeEach(function () {
container.find('.slick-header-column:contains(some-column-name)').click();
});
describe('when the user click a cell on the current range', function () {
beforeEach(function () {
container.find('.slick-cell.l1.r1')[1].click();
});
it('column is deselected', function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var column = selectedRanges[0];
expect(column.fromCell).toBe(1);
expect(column.toCell).toBe(1);
expect(column.fromRow).toBe(1);
expect(column.toRow).toBe(1);
});
it('keep select class on column header', function () {
expect($(container.find('.slick-header-column:contains(some-column-name)')).hasClass('selected'))
.toBeTruthy();
});
});
describe('when the user click a cell outside the current range', function () {
beforeEach(function () {
container.find('.slick-cell.l2.r2')[2].click();
});
it('column is deselected', function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var column = selectedRanges[0];
expect(column.fromCell).toBe(2);
expect(column.toCell).toBe(2);
expect(column.fromRow).toBe(2);
expect(column.toRow).toBe(2);
});
it('remove select class on \'some-column-name\' column header', function () {
expect($(container.find('.slick-header-column:contains(some-column-name)')).hasClass('selected'))
.toBeFalsy();
expect($(container.find('.slick-header-column:contains(second column)')).hasClass('selected'))
.toBeTruthy();
});
});
describe('when the user click in a row header', function () {
beforeEach(function () {
var selectedRanges = [new Slick.Range(1, 1, 1, 3)];
cellSelectionModel.setSelectedRanges(selectedRanges);
});
it('column is deselected', function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var column = selectedRanges[0];
expect(column.fromCell).toBe(1);
expect(column.toCell).toBe(3);
expect(column.fromRow).toBe(1);
expect(column.toRow).toBe(1);
});
it('no column should have the class \'selected\'', function () {
expect($(container.find('.slick-header-column:contains(some-column-name)')).hasClass('selected'))
.toBeFalsy();
});
});
});
});
function setupGrid(columns) {
var columnSelector = new ColumnSelector();
columns = columnSelector.getColumnDefinitions(columns);
var grid = new SlickGrid(container, data, columns, options);
var cellSelectionModel = new XCellSelectionModel();
grid.setSelectionModel(cellSelectionModel);
grid.registerPlugin(columnSelector);
grid.invalidate();
}
function expectOnlyTheFirstColumnToBeSelected(selectedRanges) {
var row = selectedRanges[0];
expect(selectedRanges.length).toEqual(1);
expect(row.fromCell).toBe(1);
expect(row.toCell).toBe(1);
expect(row.fromRow).toBe(0);
expect(row.toRow).toBe(9);
}
function pressShiftArrow(keyCode) {
var pressEvent = new $.Event('keydown');
pressEvent.shiftKey = true;
pressEvent.ctrlKey = false;
pressEvent.altKey = false;
pressEvent.which = keyCode;
$(container.find('.grid-canvas')).trigger(pressEvent);
}
});

235
web/regression/javascript/selection/copy_data_spec.js
View File

@@ -1,139 +1,142 @@
/////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2017, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////
define(
["jquery",
"slickgrid/slick.grid",
"sources/selection/xcell_selection_model",
"sources/selection/copy_data",
"sources/selection/clipboard",
"sources/selection/range_selection_helper"
],
function ($, SlickGrid, XCellSelectionModel, copyData, clipboard, RangeSelectionHelper) {
describe('copyData', function () {
var grid, sqlEditor, gridContainer, buttonPasteRow;
import $ from 'jquery';
beforeEach(function () {
var data = [[1, "leopord", "12"],
[2, "lion", "13"],
[3, "puma", "9"]];
import Slick from 'slickgrid';
import 'slickgrid.grid';
var columns = [
{
id: 'row-header-column',
name: 'row header column name',
selectable: false,
display_name: 'row header column name',
column_type: 'text'
},
{
name: "id",
pos: 0,
label: "id<br> numeric",
cell: "number",
can_edit: false,
type: "numeric"
}, {
name: "brand",
pos: 1,
label: "flavor<br> character varying",
cell: "string",
can_edit: false,
type: "character varying"
}, {
name: "size",
pos: 2,
label: "size<br> numeric",
cell: "number",
can_edit: false,
type: "numeric"
}
]
;
gridContainer = $("<div id='grid'></div>");
$("body").append(gridContainer);
buttonPasteRow = $("<button id='btn-paste-row' disabled></button>");
$("body").append(buttonPasteRow);
grid = new Slick.Grid("#grid", data, columns, {});
grid.setSelectionModel(new XCellSelectionModel());
sqlEditor = {slickgrid: grid};
});
import clipboard from '../../../pgadmin/static/js/selection/clipboard';
import copyData from '../../../pgadmin/static/js/selection/copy_data';
import RangeSelectionHelper from 'sources/selection/range_selection_helper';
import XCellSelectionModel from 'sources/selection/xcell_selection_model';
afterEach(function() {
gridContainer.remove();
buttonPasteRow.remove();
});
describe('copyData', function () {
var grid, sqlEditor, gridContainer, buttonPasteRow;
var Slick, SlickGrid;
describe("when rows are selected", function () {
beforeEach(function () {
grid.getSelectionModel().setSelectedRanges([
RangeSelectionHelper.rangeForRow(grid, 0),
RangeSelectionHelper.rangeForRow(grid, 2)]
);
});
beforeEach(function () {
Slick = window.Slick;
SlickGrid = Slick.Grid;
var data = [[1, 'leopord', '12'],
[2, 'lion', '13'],
[3, 'puma', '9']];
it("copies them", function () {
spyOn(clipboard, 'copyTextToClipboard');
var columns = [
{
id: 'row-header-column',
name: 'row header column name',
selectable: false,
display_name: 'row header column name',
column_type: 'text'
},
{
name: 'id',
pos: 0,
label: 'id<br> numeric',
cell: 'number',
can_edit: false,
type: 'numeric'
}, {
name: 'brand',
pos: 1,
label: 'flavor<br> character varying',
cell: 'string',
can_edit: false,
type: 'character varying'
}, {
name: 'size',
pos: 2,
label: 'size<br> numeric',
cell: 'number',
can_edit: false,
type: 'numeric'
}
]
;
gridContainer = $('<div id=\'grid\'></div>');
$('body').append(gridContainer);
buttonPasteRow = $('<button id=\'btn-paste-row\' disabled></button>');
$('body').append(buttonPasteRow);
grid = new Slick.Grid('#grid', data, columns, {});
grid.setSelectionModel(new XCellSelectionModel());
sqlEditor = {slickgrid: grid};
});
copyData.apply(sqlEditor);
afterEach(function () {
gridContainer.remove();
buttonPasteRow.remove();
});
expect(sqlEditor.copied_rows.length).toBe(2);
describe('when rows are selected', function () {
beforeEach(function () {
grid.getSelectionModel().setSelectedRanges([
RangeSelectionHelper.rangeForRow(grid, 0),
RangeSelectionHelper.rangeForRow(grid, 2)]
);
});
expect(clipboard.copyTextToClipboard).toHaveBeenCalled();
expect(clipboard.copyTextToClipboard.calls.mostRecent().args[0]).toContain("1,'leopord','12'");
expect(clipboard.copyTextToClipboard.calls.mostRecent().args[0]).toContain("3,'puma','9'");
});
it('copies them', function () {
spyOn(clipboard, 'copyTextToClipboard');
describe("when the user can edit the grid", function () {
it("enables the paste row button", function () {
copyData.apply(_.extend({can_edit: true}, sqlEditor));
copyData.apply(sqlEditor);
expect($("#btn-paste-row").prop('disabled')).toBe(false);
});
});
});
expect(sqlEditor.copied_rows.length).toBe(2);
describe("when a column is selected", function () {
beforeEach(function () {
var firstDataColumn = RangeSelectionHelper.rangeForColumn(grid, 1);
grid.getSelectionModel().setSelectedRanges([firstDataColumn])
});
expect(clipboard.copyTextToClipboard).toHaveBeenCalled();
expect(clipboard.copyTextToClipboard.calls.mostRecent().args[0]).toContain('1,\'leopord\',\'12\'');
expect(clipboard.copyTextToClipboard.calls.mostRecent().args[0]).toContain('3,\'puma\',\'9\'');
});
it("copies text to the clipboard", function () {
spyOn(clipboard, 'copyTextToClipboard');
describe('when the user can edit the grid', function () {
it('enables the paste row button', function () {
copyData.apply(_.extend({can_edit: true}, sqlEditor));
copyData.apply(sqlEditor);
expect(clipboard.copyTextToClipboard).toHaveBeenCalled();
var copyArg = clipboard.copyTextToClipboard.calls.mostRecent().args[0];
var rowStrings = copyArg.split('\n');
expect(rowStrings[0]).toBe("1");
expect(rowStrings[1]).toBe("2");
expect(rowStrings[2]).toBe("3");
});
it("sets copied_rows to empty", function () {
copyData.apply(sqlEditor);
expect(sqlEditor.copied_rows.length).toBe(0);
});
describe("when the user can edit the grid", function () {
beforeEach(function () {
copyData.apply(_.extend({can_edit: true}, sqlEditor));
});
it("disables the paste row button", function () {
expect($("#btn-paste-row").prop('disabled')).toBe(true);
});
});
expect($('#btn-paste-row').prop('disabled')).toBe(false);
});
});
});
describe('when a column is selected', function () {
beforeEach(function () {
var firstDataColumn = RangeSelectionHelper.rangeForColumn(grid, 1);
grid.getSelectionModel().setSelectedRanges([firstDataColumn]);
});
it('copies text to the clipboard', function () {
spyOn(clipboard, 'copyTextToClipboard');
copyData.apply(sqlEditor);
expect(clipboard.copyTextToClipboard).toHaveBeenCalled();
var copyArg = clipboard.copyTextToClipboard.calls.mostRecent().args[0];
var rowStrings = copyArg.split('\n');
expect(rowStrings[0]).toBe('1');
expect(rowStrings[1]).toBe('2');
expect(rowStrings[2]).toBe('3');
});
it('sets copied_rows to empty', function () {
copyData.apply(sqlEditor);
expect(sqlEditor.copied_rows.length).toBe(0);
});
describe('when the user can edit the grid', function () {
beforeEach(function () {
copyData.apply(_.extend({can_edit: true}, sqlEditor));
});
it('disables the paste row button', function () {
expect($('#btn-paste-row').prop('disabled')).toBe(true);
});
});
});
});

227
web/regression/javascript/selection/grid_selector_spec.js
View File

@@ -1,117 +1,130 @@
define(["jquery",
"underscore",
"slickgrid/slick.grid",
"sources/selection/xcell_selection_model",
"sources/selection/grid_selector"
],
function ($, _, SlickGrid, XCellSelectionModel, GridSelector) {
describe("GridSelector", function () {
var container, data, columns, gridSelector, xCellSelectionModel;
//////////////////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2017, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////////////////
import $ from 'jquery';
import _ from 'underscore';
import Slick from 'slickgrid';
import 'slickgrid.grid';
import GridSelector from 'sources/selection/grid_selector';
import XCellSelectionModel from 'sources/selection/xcell_selection_model';
describe('GridSelector', function () {
var container, data, columns, gridSelector, xCellSelectionModel;
var Slick, SlickGrid;
beforeEach(function () {
Slick = window.Slick;
SlickGrid = Slick.Grid;
container = $('<div></div>');
container.height(9999);
columns = [{
id: '1',
name: 'some-column-name',
pos: 0
}, {
id: '2',
name: 'second column',
pos: 1
}];
gridSelector = new GridSelector();
columns = gridSelector.getColumnDefinitions(columns);
data = [];
for (var i = 0; i < 10; i++) {
data.push({'some-column-name': 'some-value-' + i, 'second column': 'second value ' + i});
}
var grid = new Slick.Grid(container, data, columns);
xCellSelectionModel = new XCellSelectionModel();
grid.setSelectionModel(xCellSelectionModel);
grid.registerPlugin(gridSelector);
grid.invalidate();
$('body').append(container);
});
afterEach(function () {
$('body').find(container).remove();
});
it('renders an additional column on the left for selecting rows', function () {
expect(columns.length).toBe(3);
var leftmostColumn = columns[0];
expect(leftmostColumn.id).toBe('row-header-column');
});
it('renders a button for selecting all the cells', function () {
expect(container.find('[title=\'Select/Deselect All\']').length).toBe(1);
});
describe('when the cell for the select/deselect all is clicked', function () {
it('selects the whole grid', function () {
container.find('[title=\'Select/Deselect All\']').parent().click();
var selectedRanges = xCellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var selectedRange = selectedRanges[0];
expect(selectedRange.fromCell).toBe(1);
expect(selectedRange.toCell).toBe(2);
expect(selectedRange.fromRow).toBe(0);
expect(selectedRange.toRow).toBe(9);
});
it('adds selected class', function () {
container.find('[title=\'Select/Deselect All\']').parent().click();
expect($(container.find('[data-id=\'select-all\']')).hasClass('selected')).toBeTruthy();
});
});
describe('when the select all button in the corner gets selected', function () {
it('selects all the cells', function () {
container.find('[title=\'Select/Deselect All\']').click();
var selectedRanges = xCellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var selectedRange = selectedRanges[0];
expect(selectedRange.fromCell).toBe(1);
expect(selectedRange.toCell).toBe(2);
expect(selectedRange.fromRow).toBe(0);
expect(selectedRange.toRow).toBe(9);
});
describe('when the select all button in the corner gets deselected', function () {
beforeEach(function () {
container = $("<div></div>");
container.height(9999);
columns = [{
id: '1',
name: 'some-column-name',
pos: 0
}, {
id: '2',
name: 'second column',
pos: 1
}];
gridSelector = new GridSelector();
columns = gridSelector.getColumnDefinitions(columns);
data = [];
for (var i = 0; i < 10; i++) {
data.push({'some-column-name': 'some-value-' + i, 'second column': 'second value ' + i});
}
var grid = new SlickGrid(container, data, columns);
xCellSelectionModel = new XCellSelectionModel();
grid.setSelectionModel(xCellSelectionModel);
grid.registerPlugin(gridSelector);
grid.invalidate();
$("body").append(container);
container.find('[title=\'Select/Deselect All\']').click();
});
afterEach(function () {
$("body").find(container).remove();
it('deselects all the cells', function () {
container.find('[title=\'Select/Deselect All\']').click();
var selectedRanges = xCellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(0);
});
});
describe('and then the underlying selection changes', function () {
beforeEach(function () {
container.find('[title=\'Select/Deselect All\']').click();
});
it("renders an additional column on the left for selecting rows", function () {
expect(columns.length).toBe(3);
it('removes the selected class', function () {
container.find('[title=\'Select/Deselect All\']').parent().click();
var leftmostColumn = columns[0];
expect(leftmostColumn.id).toBe('row-header-column');
});
it("renders a button for selecting all the cells", function () {
expect(container.find("[title='Select/Deselect All']").length).toBe(1);
});
describe("when the cell for the select/deselect all is clicked", function () {
it("selects the whole grid", function () {
container.find("[title='Select/Deselect All']").parent().click();
var selectedRanges = xCellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var selectedRange = selectedRanges[0];
expect(selectedRange.fromCell).toBe(1);
expect(selectedRange.toCell).toBe(2);
expect(selectedRange.fromRow).toBe(0);
expect(selectedRange.toRow).toBe(9);
});
it("adds selected class", function () {
container.find("[title='Select/Deselect All']").parent().click();
expect($(container.find("[data-id='select-all']")).hasClass('selected')).toBeTruthy();
});
});
describe("when the select all button in the corner gets selected", function () {
it("selects all the cells", function () {
container.find("[title='Select/Deselect All']").click();
var selectedRanges = xCellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var selectedRange = selectedRanges[0];
expect(selectedRange.fromCell).toBe(1);
expect(selectedRange.toCell).toBe(2);
expect(selectedRange.fromRow).toBe(0);
expect(selectedRange.toRow).toBe(9);
});
describe("when the select all button in the corner gets deselected", function () {
beforeEach(function () {
container.find("[title='Select/Deselect All']").click();
});
it("deselects all the cells", function () {
container.find("[title='Select/Deselect All']").click();
var selectedRanges = xCellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(0);
});
});
describe("and then the underlying selection changes", function () {
beforeEach(function () {
container.find("[title='Select/Deselect All']").click();
});
it("removes the selected class", function () {
container.find("[title='Select/Deselect All']").parent().click();
expect($(container.find("[data-id='select-all']")).hasClass('selected')).toBeFalsy();
});
});
expect($(container.find('[data-id=\'select-all\']')).hasClass('selected')).toBeFalsy();
});
});
});
});

20
web/regression/javascript/selection/range_boundary_navigator_spec.js
View File

@@ -1,8 +1,20 @@
define(['sources/selection/range_boundary_navigator'], function (rangeBoundaryNavigator) {
//////////////////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2017, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////////////////
describe("#getUnion", function () {
describe("when the ranges completely overlap", function () {
it("returns a list with that range", function () {
import rangeBoundaryNavigator from 'sources/selection/range_boundary_navigator';
import Slick from 'slickgrid';
describe('RangeBoundaryNavigator', function () {
describe('#getUnion', function () {
describe('when the ranges completely overlap', function () {
it('returns a list with that range', function () {
var ranges = [[1, 4], [1, 4], [1, 4]];
var union = rangeBoundaryNavigator.getUnion(ranges);

138
web/regression/javascript/selection/range_selection_helper_spec.js
View File

@@ -1,70 +1,82 @@
define([
'jquery',
'slickgrid/slick.grid',
'sources/selection/range_selection_helper'
], function ($, SlickGrid, RangeSelectionHelper) {
describe("RangeSelectionHelper utility functions", function () {
var grid;
beforeEach(function () {
var container, data, columns, options;
container = $("<div></div>");
container.height(9999);
import $ from 'jquery';
import Slick from 'slickgrid';
import 'slickgrid.grid';
import RangeSelectionHelper from 'sources/selection/range_selection_helper';
columns = [{
id: '1',
name: 'some-column-name',
pos: 0
}, {
id: 'second-column-id',
name: 'second column',
pos: 1
}];
describe("RangeSelectionHelper utility functions", function () {
var grid;
beforeEach(function () {
var container, data, columns, options;
container = $("<div></div>");
container.height(9999);
data = [];
for (var i = 0; i < 10; i++) {
data.push({'some-column-name': 'some-value-' + i, 'second column': 'second value ' + i});
}
columns = [{
id: '1',
name: 'some-column-name',
pos: 0
}, {
id: 'second-column-id',
name: 'second column',
pos: 1
}];
grid = new SlickGrid(container, data, columns, options);
grid.invalidate();
data = [];
for (var i = 0; i < 10; i++) {
data.push({'some-column-name': 'some-value-' + i, 'second column': 'second value ' + i});
}
grid = new Slick.Grid(container, data, columns, options);
grid.invalidate();
});
describe("#getIndexesOfCompleteRows", function () {
describe("when selected ranges are not rows", function () {
it("returns an empty array", function () {
var rowlessRanges = [RangeSelectionHelper.rangeForColumn(grid, 1)];
expect(RangeSelectionHelper.getIndexesOfCompleteRows(grid, rowlessRanges))
.toEqual([]);
});
});
describe("when selected range", function () {
describe("is a single row", function () {
it("returns an array with one index", function () {
var singleRowRange = [RangeSelectionHelper.rangeForRow(grid, 1)];
describe("#getIndexesOfCompleteRows", function () {
describe("when selected ranges are not rows", function () {
it("returns an empty array", function () {
var rowlessRanges = [RangeSelectionHelper.rangeForColumn(grid, 1)];
expect(RangeSelectionHelper.getIndexesOfCompleteRows(grid, rowlessRanges))
.toEqual([]);
expect(RangeSelectionHelper.getIndexesOfCompleteRows(grid, singleRowRange))
.toEqual([1]);
});
});
describe("when selected range", function () {
describe("is a single row", function () {
it("returns an array with one index", function () {
var singleRowRange = [RangeSelectionHelper.rangeForRow(grid, 1)];
expect(RangeSelectionHelper.getIndexesOfCompleteRows(grid, singleRowRange))
.toEqual([1]);
});
describe("is multiple rows", function () {
it("returns an array of each row's index", function () {
var multipleRowRange = [
RangeSelectionHelper.rangeForRow(grid, 0),
RangeSelectionHelper.rangeForRow(grid, 3),
RangeSelectionHelper.rangeForRow(grid, 2),
];
var indexesOfCompleteRows = RangeSelectionHelper.getIndexesOfCompleteRows(grid, multipleRowRange);
indexesOfCompleteRows.sort();
expect(indexesOfCompleteRows).toEqual([0, 2, 3]);
});
});
describe("contains a multi row selection", function () {
it("returns an array of each individual row's index", function () {
var multipleRowRange = [
new Slick.Range(3, 0, 5, 1)
];
var indexesOfCompleteRows = RangeSelectionHelper.getIndexesOfCompleteRows(grid, multipleRowRange);
indexesOfCompleteRows.sort();
expect(indexesOfCompleteRows).toEqual([3, 4, 5]);
});
describe("is multiple rows", function () {
it("returns an array of each row's index", function () {
var multipleRowRange = [
RangeSelectionHelper.rangeForRow(grid, 0),
RangeSelectionHelper.rangeForRow(grid, 3),
RangeSelectionHelper.rangeForRow(grid, 2),
];
var indexesOfCompleteRows = RangeSelectionHelper.getIndexesOfCompleteRows(grid, multipleRowRange);
indexesOfCompleteRows.sort();
expect(indexesOfCompleteRows).toEqual([0, 2, 3]);
});
});
describe("contains a multi row selection", function () {
it("returns an array of each individual row's index", function () {
describe("and also contains a selection that is not a row", function () {
it("returns an array of only the complete rows' indexes", function () {
var multipleRowRange = [
new Slick.Range(8, 1, 9, 1),
new Slick.Range(3, 0, 5, 1)
];
@@ -72,22 +84,8 @@ define([
indexesOfCompleteRows.sort();
expect(indexesOfCompleteRows).toEqual([3, 4, 5]);
});
describe("and also contains a selection that is not a row", function () {
it("returns an array of only the complete rows' indexes", function () {
var multipleRowRange = [
new Slick.Range(8, 1, 9, 1),
new Slick.Range(3, 0, 5, 1)
];
var indexesOfCompleteRows = RangeSelectionHelper.getIndexesOfCompleteRows(grid, multipleRowRange);
indexesOfCompleteRows.sort();
expect(indexesOfCompleteRows).toEqual([3, 4, 5]);
});
});
});
});
});
});
});

622
web/regression/javascript/selection/row_selector_spec.js
View File

@@ -1,321 +1,327 @@
define(
["jquery",
"underscore",
"slickgrid/slick.grid",
"sources/selection/active_cell_capture",
"sources/selection/row_selector",
'sources/selection/xcell_selection_model',
//////////////////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2017, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////////////////
"slickgrid",
'sources/slickgrid/pgslick.cellrangedecorator',
'sources/slickgrid/pgslick.cellrangeselector',
],
function ($, _, SlickGrid, ActiveCellCapture, RowSelector, XCellSelectionModel, Slick) {
var KEY_RIGHT = 39;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_DOWN = 40;
describe("RowSelector", function () {
var container, data, columnDefinitions, grid, cellSelectionModel;
import $ from 'jquery';
import _ from 'underscore';
beforeEach(function () {
container = $("<div></div>");
container.height(9999);
container.width(9999);
import Slick from 'slickgrid';
import 'slickgrid.grid';
columnDefinitions = [{
id: '1',
name: 'some-column-name',
selectable: true,
pos: 0
}, {
id: '2',
name: 'second column',
selectable: true,
pos: 1
}];
import RowSelector from 'sources/selection/row_selector';
import ActiveCellCapture from 'sources/selection/active_cell_capture';
import XCellSelectionModel from 'sources/selection/xcell_selection_model';
var rowSelector = new RowSelector();
data = [];
for (var i = 0; i < 10; i++) {
data.push(['some-value-' + i, 'second value ' + i]);
}
columnDefinitions = rowSelector.getColumnDefinitions(columnDefinitions);
grid = new SlickGrid(container, data, columnDefinitions);
describe('RowSelector', function () {
var KEY_RIGHT = 39;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_DOWN = 40;
var container, data, columnDefinitions, grid, cellSelectionModel;
var SlickGrid = Slick.Grid;
grid.registerPlugin(new ActiveCellCapture());
cellSelectionModel = new XCellSelectionModel();
grid.setSelectionModel(cellSelectionModel);
beforeEach(function () {
container = $('<div></div>');
container.height(9999);
container.width(9999);
grid.registerPlugin(rowSelector);
grid.invalidate();
columnDefinitions = [{
id: '1',
name: 'some-column-name',
selectable: true,
pos: 0
}, {
id: '2',
name: 'second column',
selectable: true,
pos: 1
}];
$("body").append(container);
var rowSelector = new RowSelector();
data = [];
for (var i = 0; i < 10; i++) {
data.push(['some-value-' + i, 'second value ' + i]);
}
columnDefinitions = rowSelector.getColumnDefinitions(columnDefinitions);
grid = new SlickGrid(container, data, columnDefinitions);
grid.registerPlugin(new ActiveCellCapture());
cellSelectionModel = new XCellSelectionModel();
grid.setSelectionModel(cellSelectionModel);
grid.registerPlugin(rowSelector);
grid.invalidate();
$('body').append(container);
});
afterEach(function () {
$('body').find(container).remove();
});
it('renders an additional column on the left', function () {
expect(columnDefinitions.length).toBe(3);
var leftmostColumn = columnDefinitions[0];
expect(leftmostColumn.id).toBe('row-header-column');
expect(leftmostColumn.name).toBe('');
expect(leftmostColumn.selectable).toBe(false);
});
it('renders a span on the leftmost column', function () {
expect(container.find('.slick-row').length).toBe(10);
expect(container.find('.slick-row .slick-cell:first-child span[data-cell-type="row-header-selector"]').length).toBe(10);
});
it('preserves the other attributes of column definitions', function () {
expect(columnDefinitions[1].id).toBe('1');
expect(columnDefinitions[1].selectable).toBe(true);
});
describe('selecting rows', function () {
describe('when the user clicks a row header span', function () {
it('selects the row', function () {
container.find('.slick-row .slick-cell:first-child span[data-cell-type="row-header-selector"]')[0].click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expectOnlyTheFirstRowToBeSelected(selectedRanges);
});
afterEach(function () {
$("body").find(container).remove();
it('add selected class to parent of the span', function () {
container.find('.slick-row .slick-cell:first-child span[data-cell-type="row-header-selector"]')[5].click();
expect($(container.find('.slick-row .slick-cell:first-child ')[5])
.hasClass('selected')).toBeTruthy();
});
it("renders an additional column on the left", function () {
expect(columnDefinitions.length).toBe(3);
var leftmostColumn = columnDefinitions[0];
expect(leftmostColumn.id).toBe('row-header-column');
expect(leftmostColumn.name).toBe('');
expect(leftmostColumn.selectable).toBe(false);
});
it("renders a span on the leftmost column", function () {
expect(container.find('.slick-row').length).toBe(10);
expect(container.find('.slick-row .slick-cell:first-child span[data-cell-type="row-header-selector"]').length).toBe(10);
});
it("preserves the other attributes of column definitions", function () {
expect(columnDefinitions[1].id).toBe('1');
expect(columnDefinitions[1].selectable).toBe(true);
});
describe("selecting rows", function () {
describe("when the user clicks a row header span", function () {
it("selects the row", function () {
container.find('.slick-row .slick-cell:first-child span[data-cell-type="row-header-selector"]')[0].click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expectOnlyTheFirstRowToBeSelected(selectedRanges);
});
it("add selected class to parent of the span", function () {
container.find('.slick-row .slick-cell:first-child span[data-cell-type="row-header-selector"]')[5].click();
expect($(container.find('.slick-row .slick-cell:first-child ')[5])
.hasClass('selected')).toBeTruthy();
});
});
describe("when the user clicks a row header", function () {
beforeEach(function () {
container.find('.slick-row .slick-cell:first-child')[1].click();
});
it("selects the row", function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
var row = selectedRanges[0];
expect(selectedRanges.length).toEqual(1);
expect(row.fromCell).toBe(1);
expect(row.toCell).toBe(2);
expect(row.fromRow).toBe(1);
expect(row.toRow).toBe(1);
});
it("add selected class to parent of the span", function () {
expect($(container.find('.slick-row .slick-cell:first-child ')[1])
.hasClass('selected')).toBeTruthy();
});
describe("when the user clicks again the same row header", function () {
it("add selected class to parent of the span", function () {
container.find('.slick-row .slick-cell:first-child span[data-cell-type="row-header-selector"]')[1].click();
expect($(container.find('.slick-row .slick-cell:first-child ')[1])
.hasClass('selected')).toBeFalsy();
});
});
describe("and presses shift + down-arrow", function () {
beforeEach(function () {
pressShiftArrow(KEY_DOWN);
});
it("keeps the last row selected", function () {
expect(cellSelectionModel.getSelectedRanges().length).toBe(1);
});
it("grows the selection down", function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
var row = selectedRanges[0];
expect(selectedRanges.length).toEqual(1);
expect(row.fromCell).toBe(1);
expect(row.toCell).toBe(2);
expect(row.fromRow).toBe(1);
expect(row.toRow).toBe(2);
});
it("keeps selected class on rows 1 and 2", function () {
expect($(container.find('.slick-row .slick-cell:first-child ')[0])
.hasClass('selected')).toBeFalsy();
expect($(container.find('.slick-row .slick-cell:first-child ')[1])
.hasClass('selected')).toBeTruthy();
expect($(container.find('.slick-row .slick-cell:first-child ')[2])
.hasClass('selected')).toBeTruthy();
expect($(container.find('.slick-row .slick-cell:first-child ')[3])
.hasClass('selected')).toBeFalsy();
});
});
describe('when the user clicks a cell on the current range', function () {
beforeEach(function () {
container.find('.slick-cell.l1.r1')[5].click();
});
it('row gets deselected', function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var newSelection = selectedRanges[0];
expect(newSelection.fromCell).toBe(1);
expect(newSelection.fromRow).toBe(5);
expect(newSelection.toCell).toBe(1);
expect(newSelection.toRow).toBe(5);
});
it('keep select class on row header', function () {
expect($(container.find('.slick-cell.l0.r0')[5]).hasClass('selected'))
.toBeTruthy();
});
});
describe('when the user clicks a cell outside the current range', function () {
beforeEach(function () {
container.find('.slick-cell.l2.r2')[2].click();
});
it('row gets deselected', function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var newSelection = selectedRanges[0];
expect(newSelection.fromCell).toBe(2);
expect(newSelection.fromRow).toBe(2);
expect(newSelection.toCell).toBe(2);
expect(newSelection.toRow).toBe(2);
});
it('remove select class on "some-column-name" column header', function () {
expect($(container.find('.slick-cell.l0.r0')[5]).hasClass('selected'))
.toBeFalsy();
expect($(container.find('.slick-cell.l0.r0')[2]).hasClass('selected'))
.toBeTruthy();
});
});
describe('when the user has a column selected', function () {
beforeEach(function () {
var selectedRanges = [new Slick.Range(0, 1, 9, 1)];
cellSelectionModel.setSelectedRanges(selectedRanges);
});
it('no row should have the class "selected"', function () {
expect($(container.find('.slick-cell.l0.r0')[0]).hasClass('selected'))
.toBeFalsy();
expect($(container.find('.slick-cell.l0.r0')[1]).hasClass('selected'))
.toBeFalsy();
expect($(container.find('.slick-cell.l0.r0')[2]).hasClass('selected'))
.toBeFalsy();
expect($(container.find('.slick-cell.l0.r0')[3]).hasClass('selected'))
.toBeFalsy();
expect($(container.find('.slick-cell.l0.r0')[4]).hasClass('selected'))
.toBeFalsy();
expect($(container.find('.slick-cell.l0.r0')[5]).hasClass('selected'))
.toBeFalsy();
});
});
});
describe("when the user clicks multiple row headers", function () {
it("selects another row", function () {
container.find('.slick-row .slick-cell:first-child')[4].click();
container.find('.slick-row .slick-cell:first-child')[0].click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toEqual(2);
var row1 = selectedRanges[0];
expect(row1.fromRow).toBe(4);
expect(row1.toRow).toBe(4);
var row2 = selectedRanges[1];
expect(row2.fromRow).toBe(0);
expect(row2.toRow).toBe(0);
});
});
describe("when a column was already selected", function () {
beforeEach(function () {
var selectedRanges = [new Slick.Range(0, 0, 0, 1)];
cellSelectionModel.setSelectedRanges(selectedRanges);
});
it("deselects the column", function () {
container.find('.slick-row .slick-cell:first-child')[0].click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expectOnlyTheFirstRowToBeSelected(selectedRanges);
});
});
describe("when the row is deselected through setSelectedRanges", function () {
beforeEach(function () {
container.find('.slick-row .slick-cell:first-child')[4].click();
});
it("should remove the selected class", function () {
cellSelectionModel.setSelectedRanges([]);
expect($(container.find('.slick-row .slick-cell:first-child span[data-cell-type="row-header-selector"]')[4])
.hasClass('selected')).toBeFalsy();
});
});
describe("click a second time", function () {
beforeEach(function () {
container.find('.slick-row .slick-cell:first-child')[1].click();
});
it("removes the selected class", function () {
container.find('.slick-row .slick-cell:first-child')[1].click();
expect($(container.find('.slick-row .slick-cell:first-child span[data-cell-type="row-header-selector"]')[1])
.hasClass('selected')).toBeFalsy();
});
it("unselects the row", function () {
container.find('.slick-row .slick-cell:first-child')[1].click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toEqual(0);
})
});
});
function pressShiftArrow(keyCode) {
var pressEvent = new $.Event("keydown");
pressEvent.shiftKey = true;
pressEvent.ctrlKey = false;
pressEvent.altKey = false;
pressEvent.which = keyCode;
$(container.find('.grid-canvas')).trigger(pressEvent);
}
});
function expectOnlyTheFirstRowToBeSelected(selectedRanges) {
var row = selectedRanges[0];
describe('when the user clicks a row header', function () {
beforeEach(function () {
container.find('.slick-row .slick-cell:first-child')[1].click();
expect(selectedRanges.length).toEqual(1);
expect(row.fromCell).toBe(1);
expect(row.toCell).toBe(2);
expect(row.fromRow).toBe(0);
expect(row.toRow).toBe(0);
}
});
});
it('selects the row', function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
var row = selectedRanges[0];
expect(selectedRanges.length).toEqual(1);
expect(row.fromCell).toBe(1);
expect(row.toCell).toBe(2);
expect(row.fromRow).toBe(1);
expect(row.toRow).toBe(1);
});
it('add selected class to parent of the span', function () {
expect($(container.find('.slick-row .slick-cell:first-child ')[1])
.hasClass('selected')).toBeTruthy();
});
describe('when the user clicks again the same row header', function () {
it('add selected class to parent of the span', function () {
container.find('.slick-row .slick-cell:first-child span[data-cell-type="row-header-selector"]')[1].click();
expect($(container.find('.slick-row .slick-cell:first-child ')[1])
.hasClass('selected')).toBeFalsy();
});
});
describe('and presses shift + down-arrow', function () {
beforeEach(function () {
pressShiftArrow(KEY_DOWN);
});
it('keeps the last row selected', function () {
expect(cellSelectionModel.getSelectedRanges().length).toBe(1);
});
it('grows the selection down', function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
var row = selectedRanges[0];
expect(selectedRanges.length).toEqual(1);
expect(row.fromCell).toBe(1);
expect(row.toCell).toBe(2);
expect(row.fromRow).toBe(1);
expect(row.toRow).toBe(2);
});
it('keeps selected class on rows 1 and 2', function () {
expect($(container.find('.slick-row .slick-cell:first-child ')[0])
.hasClass('selected')).toBeFalsy();
expect($(container.find('.slick-row .slick-cell:first-child ')[1])
.hasClass('selected')).toBeTruthy();
expect($(container.find('.slick-row .slick-cell:first-child ')[2])
.hasClass('selected')).toBeTruthy();
expect($(container.find('.slick-row .slick-cell:first-child ')[3])
.hasClass('selected')).toBeFalsy();
});
});
describe('when the user clicks a cell on the current range', function () {
beforeEach(function () {
container.find('.slick-cell.l1.r1')[5].click();
});
it('row gets deselected', function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var newSelection = selectedRanges[0];
expect(newSelection.fromCell).toBe(1);
expect(newSelection.fromRow).toBe(5);
expect(newSelection.toCell).toBe(1);
expect(newSelection.toRow).toBe(5);
});
it('keep select class on row header', function () {
expect($(container.find('.slick-cell.l0.r0')[5]).hasClass('selected'))
.toBeTruthy();
});
});
describe('when the user clicks a cell outside the current range', function () {
beforeEach(function () {
container.find('.slick-cell.l2.r2')[2].click();
});
it('row gets deselected', function () {
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toBe(1);
var newSelection = selectedRanges[0];
expect(newSelection.fromCell).toBe(2);
expect(newSelection.fromRow).toBe(2);
expect(newSelection.toCell).toBe(2);
expect(newSelection.toRow).toBe(2);
});
it('remove select class on "some-column-name" column header', function () {
expect($(container.find('.slick-cell.l0.r0')[5]).hasClass('selected'))
.toBeFalsy();
expect($(container.find('.slick-cell.l0.r0')[2]).hasClass('selected'))
.toBeTruthy();
});
});
describe('when the user has a column selected', function () {
beforeEach(function () {
var selectedRanges = [new Slick.Range(0, 1, 9, 1)];
cellSelectionModel.setSelectedRanges(selectedRanges);
});
it('no row should have the class "selected"', function () {
expect($(container.find('.slick-cell.l0.r0')[0]).hasClass('selected'))
.toBeFalsy();
expect($(container.find('.slick-cell.l0.r0')[1]).hasClass('selected'))
.toBeFalsy();
expect($(container.find('.slick-cell.l0.r0')[2]).hasClass('selected'))
.toBeFalsy();
expect($(container.find('.slick-cell.l0.r0')[3]).hasClass('selected'))
.toBeFalsy();
expect($(container.find('.slick-cell.l0.r0')[4]).hasClass('selected'))
.toBeFalsy();
expect($(container.find('.slick-cell.l0.r0')[5]).hasClass('selected'))
.toBeFalsy();
});
});
});
describe('when the user clicks multiple row headers', function () {
it('selects another row', function () {
container.find('.slick-row .slick-cell:first-child')[4].click();
container.find('.slick-row .slick-cell:first-child')[0].click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toEqual(2);
var row1 = selectedRanges[0];
expect(row1.fromRow).toBe(4);
expect(row1.toRow).toBe(4);
var row2 = selectedRanges[1];
expect(row2.fromRow).toBe(0);
expect(row2.toRow).toBe(0);
});
});
describe('when a column was already selected', function () {
beforeEach(function () {
var selectedRanges = [new Slick.Range(0, 0, 0, 1)];
cellSelectionModel.setSelectedRanges(selectedRanges);
});
it('deselects the column', function () {
container.find('.slick-row .slick-cell:first-child')[0].click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expectOnlyTheFirstRowToBeSelected(selectedRanges);
});
});
describe('when the row is deselected through setSelectedRanges', function () {
beforeEach(function () {
container.find('.slick-row .slick-cell:first-child')[4].click();
});
it('should remove the selected class', function () {
cellSelectionModel.setSelectedRanges([]);
expect($(container.find('.slick-row .slick-cell:first-child span[data-cell-type="row-header-selector"]')[4])
.hasClass('selected')).toBeFalsy();
});
});
describe('click a second time', function () {
beforeEach(function () {
container.find('.slick-row .slick-cell:first-child')[1].click();
});
it('removes the selected class', function () {
container.find('.slick-row .slick-cell:first-child')[1].click();
expect($(container.find('.slick-row .slick-cell:first-child span[data-cell-type="row-header-selector"]')[1])
.hasClass('selected')).toBeFalsy();
});
it('unselects the row', function () {
container.find('.slick-row .slick-cell:first-child')[1].click();
var selectedRanges = cellSelectionModel.getSelectedRanges();
expect(selectedRanges.length).toEqual(0);
})
});
});
function pressShiftArrow(keyCode) {
var pressEvent = new $.Event('keydown');
pressEvent.shiftKey = true;
pressEvent.ctrlKey = false;
pressEvent.altKey = false;
pressEvent.which = keyCode;
$(container.find('.grid-canvas')).trigger(pressEvent);
}
function expectOnlyTheFirstRowToBeSelected(selectedRanges) {
var row = selectedRanges[0];
expect(selectedRanges.length).toEqual(1);
expect(row.fromCell).toBe(1);
expect(row.toCell).toBe(2);
expect(row.fromRow).toBe(0);
expect(row.toRow).toBe(0);
}
});

896
web/regression/javascript/selection/xcell_selection_model_spec.js
View File

@@ -7,507 +7,505 @@
//
//////////////////////////////////////////////////////////////////////////
define([
'sources/selection/xcell_selection_model',
"slickgrid/slick.grid",
'slickgrid',
], function (XCellSelectionModel, SlickGrid, Slick) {
describe('XCellSelectionModel', function () {
var KEY_RIGHT = 39;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_DOWN = 40;
import XCellSelectionModel from 'sources/selection/xcell_selection_model';
import 'slickgrid.grid';
import Slick from 'slickgrid';
var container, grid;
var oldWindowParent = window.parent;
describe('XCellSelectionModel', function () {
var KEY_RIGHT = 39;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_DOWN = 40;
beforeEach(function () {
window.parent = window;
var container, grid;
var SlickGrid = Slick.Grid;
var oldWindowParent = window.parent;
var columns = [{
id: 'row-header-column',
name: 'row header column name',
selectable: false,
}, {
id: '1',
name: 'some-column-name',
pos: 0
}, {
id: 'second-column-id',
name: 'second column',
pos: 1
}, {
id: 'third-column-id',
name: 'third column',
pos: 2
},
];
beforeEach(function () {
window.parent = window;
var data = [];
for (var i = 0; i < 10; i++) {
data.push({
'some-column-name': 'some-value-' + i,
'second column': 'second value ' + i,
'third column': 'third value ' + i,
'fourth column': 'fourth value ' + i,
});
}
container = $("<div></div>");
container.height(9999);
container.width(9999);
var columns = [{
id: 'row-header-column',
name: 'row header column name',
selectable: false,
}, {
id: '1',
name: 'some-column-name',
pos: 0
}, {
id: 'second-column-id',
name: 'second column',
pos: 1
}, {
id: 'third-column-id',
name: 'third column',
pos: 2
},
];
grid = new SlickGrid(container, data, columns);
grid.setSelectionModel(new XCellSelectionModel());
$("body").append(container);
var data = [];
for (var i = 0; i < 10; i++) {
data.push({
'some-column-name': 'some-value-' + i,
'second column': 'second value ' + i,
'third column': 'third value ' + i,
'fourth column': 'fourth value ' + i,
});
}
container = $("<div></div>");
container.height(9999);
container.width(9999);
grid = new SlickGrid(container, data, columns);
grid.setSelectionModel(new XCellSelectionModel());
$("body").append(container);
});
afterEach(function () {
grid.destroy();
container.remove();
window.parent = oldWindowParent;
});
describe('handleKeyDown', function () {
describe('when we press a random key', function () {
it('should not change the range', function () {
var range = new Slick.Range(1, 2);
grid.setActiveCell(1, 2);
grid.getSelectionModel().setSelectedRanges([range]);
pressKey(72);
expect(grid.getSelectionModel().getSelectedRanges()[0]).toEqual(range);
});
});
afterEach(function () {
grid.destroy();
container.remove();
window.parent = oldWindowParent;
describe('when we press an arrow key ', function () {
it('should select the cell to the right', function () {
var range = new Slick.Range(1, 2);
grid.setActiveCell(1, 2);
grid.getSelectionModel().setSelectedRanges([range]);
pressKey(KEY_RIGHT);
expectOneSelectedRange(1, 3, 1, 3);
});
});
describe('handleKeyDown', function () {
describe('when we press a random key', function () {
it('should not change the range', function () {
var range = new Slick.Range(1, 2);
grid.setActiveCell(1, 2);
grid.getSelectionModel().setSelectedRanges([range]);
pressKey(72);
describe('when we press shift', function () {
describe('and we press an arrow key', function () {
var scrollColumnIntoViewSpy, scrollRowIntoViewSpy;
expect(grid.getSelectionModel().getSelectedRanges()[0]).toEqual(range);
beforeEach(function () {
scrollColumnIntoViewSpy = spyOn(grid, 'scrollColumnIntoView');
scrollRowIntoViewSpy = spyOn(grid, 'scrollRowIntoView');
});
});
describe('when we press an arrow key ', function () {
it('should select the cell to the right', function () {
var range = new Slick.Range(1, 2);
grid.setActiveCell(1, 2);
grid.getSelectionModel().setSelectedRanges([range]);
pressKey(KEY_RIGHT);
expectOneSelectedRange(1, 3, 1, 3);
});
});
describe('when we press shift', function () {
describe('and we press an arrow key', function () {
var scrollColumnIntoViewSpy, scrollRowIntoViewSpy;
beforeEach(function () {
scrollColumnIntoViewSpy = spyOn(grid, 'scrollColumnIntoView');
scrollRowIntoViewSpy = spyOn(grid, 'scrollRowIntoView');
});
describe('the right arrow', function () {
describe('when a cell is selected', function () {
beforeEach(function () {
var range = new Slick.Range(1, 1);
grid.setActiveCell(1, 1);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_RIGHT);
});
it('increases the range by one to the right', function () {
expectOneSelectedRange(1, 1, 1, 2);
});
it('should scroll the next column into view', function () {
expect(scrollColumnIntoViewSpy).toHaveBeenCalledWith(2);
expect(scrollRowIntoViewSpy).not.toHaveBeenCalled();
});
it('pressing right again grows the range right', function () {
pressShiftPlusKey(KEY_RIGHT);
expectOneSelectedRange(1, 1, 1, 3);
});
it('then pressing left keeps the original selection', function () {
pressShiftPlusKey(KEY_LEFT);
expectOneSelectedRange(1, 1, 1, 1);
});
});
describe('when a column is selected', function () {
beforeEach(function () {
var range = new Slick.Range(0, 1, 9, 1);
grid.setActiveCell(0, 1);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_RIGHT);
});
it('increases the range by one column to the right', function () {
expectOneSelectedRange(0, 1, 9, 2);
});
it('should scroll the next column into view', function () {
expect(scrollColumnIntoViewSpy).toHaveBeenCalledWith(2);
expect(scrollRowIntoViewSpy).not.toHaveBeenCalled();
});
});
});
describe('the left arrow', function () {
describe('when a cell is selected', function () {
beforeEach(function () {
var range = new Slick.Range(1, 3);
grid.setActiveCell(1, 3);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_LEFT);
});
it('increases the range by one to the left', function () {
expectOneSelectedRange(1, 2, 1, 3);
});
it('should scroll previous column into view', function () {
expect(scrollColumnIntoViewSpy).toHaveBeenCalledWith(2);
expect(scrollRowIntoViewSpy).not.toHaveBeenCalled();
});
it('pressing left again grows the range the left', function () {
pressShiftPlusKey(KEY_LEFT);
expectOneSelectedRange(1, 1, 1, 3);
});
it('then pressing right keeps the original selection', function () {
pressShiftPlusKey(KEY_RIGHT);
expectOneSelectedRange(1, 3, 1, 3);
});
});
describe('when a column is selected', function () {
beforeEach(function () {
var range = new Slick.Range(0, 2, 9, 2);
grid.setActiveCell(0, 2);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_LEFT);
});
it('increases the range by one column to the left', function () {
expectOneSelectedRange(0, 1, 9, 2);
});
it('should scroll previous column into view', function () {
expect(scrollColumnIntoViewSpy).toHaveBeenCalledWith(1);
expect(scrollRowIntoViewSpy).not.toHaveBeenCalled();
});
});
});
describe('the up arrow', function () {
describe('when a cell is selected', function () {
beforeEach(function () {
var range = new Slick.Range(2, 2);
grid.setActiveCell(2, 2);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_UP);
});
it('increases the range by one up', function () {
expectOneSelectedRange(1, 2, 2, 2);
});
it('should scroll the row above into view', function () {
expect(scrollRowIntoViewSpy).toHaveBeenCalledWith(1);
expect(scrollColumnIntoViewSpy).not.toHaveBeenCalled();
});
it('pressing up again grows the range up', function () {
pressShiftPlusKey(KEY_UP);
expectOneSelectedRange(0, 2, 2, 2);
});
it('then pressing down keeps the original selection', function () {
pressShiftPlusKey(KEY_DOWN);
expectOneSelectedRange(2, 2, 2, 2);
});
});
describe('when a row is selected', function () {
beforeEach(function () {
var range = new Slick.Range(2, 1, 2, 3);
grid.setActiveCell(2, 1);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_UP);
});
it('increases the range by one row up', function () {
expectOneSelectedRange(1, 1, 2, 3);
});
it('should scroll the row above into view', function () {
expect(scrollRowIntoViewSpy).toHaveBeenCalledWith(1);
expect(scrollColumnIntoViewSpy).not.toHaveBeenCalled();
});
});
});
describe('the down arrow', function () {
describe('when a cell is selected', function () {
beforeEach(function () {
var range = new Slick.Range(2, 2);
grid.setActiveCell(2, 2);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_DOWN);
});
it('increases the range by one down', function () {
expectOneSelectedRange(2, 2, 3, 2);
});
it('should scroll the row below into view', function () {
expect(scrollRowIntoViewSpy).toHaveBeenCalledWith(3);
expect(scrollColumnIntoViewSpy).not.toHaveBeenCalled();
});
it('pressing down again grows the range down', function () {
pressShiftPlusKey(KEY_DOWN);
expectOneSelectedRange(2, 2, 4, 2);
});
it('then pressing up keeps the original selection', function () {
pressShiftPlusKey(KEY_UP);
expectOneSelectedRange(2, 2, 2, 2);
});
});
describe('when a row is selected', function () {
beforeEach(function () {
var range = new Slick.Range(2, 1, 2, 3);
grid.setActiveCell(2, 1);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_DOWN);
});
it('increases the range by one row down', function () {
expectOneSelectedRange(2, 1, 3, 3);
});
it('should scroll the row below into view', function () {
expect(scrollRowIntoViewSpy).toHaveBeenCalledWith(3);
expect(scrollColumnIntoViewSpy).not.toHaveBeenCalled();
});
});
});
describe('rectangular selection works', function () {
it('in the down-and-rightward direction', function () {
describe('the right arrow', function () {
describe('when a cell is selected', function () {
beforeEach(function () {
var range = new Slick.Range(1, 1);
grid.setActiveCell(1, 1);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_DOWN);
pressShiftPlusKey(KEY_DOWN);
pressShiftPlusKey(KEY_DOWN);
pressShiftPlusKey(KEY_RIGHT);
pressShiftPlusKey(KEY_RIGHT);
expectOneSelectedRange(1, 1, 4, 3);
});
it('in the up-and-leftward direction', function () {
var range = new Slick.Range(4, 3);
grid.setActiveCell(4, 3);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_UP);
pressShiftPlusKey(KEY_UP);
pressShiftPlusKey(KEY_UP);
pressShiftPlusKey(KEY_LEFT);
pressShiftPlusKey(KEY_LEFT);
expectOneSelectedRange(1, 1, 4, 3);
it('increases the range by one to the right', function () {
expectOneSelectedRange(1, 1, 1, 2);
});
it('in the up-and-rightward direction', function () {
var range = new Slick.Range(4, 1);
grid.setActiveCell(4, 1);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_UP);
pressShiftPlusKey(KEY_UP);
pressShiftPlusKey(KEY_UP);
pressShiftPlusKey(KEY_RIGHT);
pressShiftPlusKey(KEY_RIGHT);
expectOneSelectedRange(1, 1, 4, 3);
it('should scroll the next column into view', function () {
expect(scrollColumnIntoViewSpy).toHaveBeenCalledWith(2);
expect(scrollRowIntoViewSpy).not.toHaveBeenCalled();
});
it('in the down-and-leftward direction', function () {
var range = new Slick.Range(1, 3);
grid.setActiveCell(1, 3);
grid.getSelectionModel().setSelectedRanges([range]);
it('pressing right again grows the range right', function () {
pressShiftPlusKey(KEY_RIGHT);
pressShiftPlusKey(KEY_DOWN);
pressShiftPlusKey(KEY_DOWN);
pressShiftPlusKey(KEY_DOWN);
pressShiftPlusKey(KEY_LEFT);
expectOneSelectedRange(1, 1, 1, 3);
});
it('then pressing left keeps the original selection', function () {
pressShiftPlusKey(KEY_LEFT);
expectOneSelectedRange(1, 1, 4, 3);
expectOneSelectedRange(1, 1, 1, 1);
});
});
describe('and we are on an edge', function () {
var range;
describe('when a column is selected', function () {
beforeEach(function () {
range = new Slick.Range(2, 1);
var range = new Slick.Range(0, 1, 9, 1);
grid.setActiveCell(0, 1);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_RIGHT);
});
it('increases the range by one column to the right', function () {
expectOneSelectedRange(0, 1, 9, 2);
});
it('should scroll the next column into view', function () {
expect(scrollColumnIntoViewSpy).toHaveBeenCalledWith(2);
expect(scrollRowIntoViewSpy).not.toHaveBeenCalled();
});
});
});
describe('the left arrow', function () {
describe('when a cell is selected', function () {
beforeEach(function () {
var range = new Slick.Range(1, 3);
grid.setActiveCell(1, 3);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_LEFT);
});
it('increases the range by one to the left', function () {
expectOneSelectedRange(1, 2, 1, 3);
});
it('should scroll previous column into view', function () {
expect(scrollColumnIntoViewSpy).toHaveBeenCalledWith(2);
expect(scrollRowIntoViewSpy).not.toHaveBeenCalled();
});
it('pressing left again grows the range the left', function () {
pressShiftPlusKey(KEY_LEFT);
expectOneSelectedRange(1, 1, 1, 3);
});
it('then pressing right keeps the original selection', function () {
pressShiftPlusKey(KEY_RIGHT);
expectOneSelectedRange(1, 3, 1, 3);
});
});
describe('when a column is selected', function () {
beforeEach(function () {
var range = new Slick.Range(0, 2, 9, 2);
grid.setActiveCell(0, 2);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_LEFT);
});
it('increases the range by one column to the left', function () {
expectOneSelectedRange(0, 1, 9, 2);
});
it('should scroll previous column into view', function () {
expect(scrollColumnIntoViewSpy).toHaveBeenCalledWith(1);
expect(scrollRowIntoViewSpy).not.toHaveBeenCalled();
});
});
});
describe('the up arrow', function () {
describe('when a cell is selected', function () {
beforeEach(function () {
var range = new Slick.Range(2, 2);
grid.setActiveCell(2, 2);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_UP);
});
it('increases the range by one up', function () {
expectOneSelectedRange(1, 2, 2, 2);
});
it('should scroll the row above into view', function () {
expect(scrollRowIntoViewSpy).toHaveBeenCalledWith(1);
expect(scrollColumnIntoViewSpy).not.toHaveBeenCalled();
});
it('pressing up again grows the range up', function () {
pressShiftPlusKey(KEY_UP);
expectOneSelectedRange(0, 2, 2, 2);
});
it('then pressing down keeps the original selection', function () {
pressShiftPlusKey(KEY_DOWN);
expectOneSelectedRange(2, 2, 2, 2);
});
});
describe('when a row is selected', function () {
beforeEach(function () {
var range = new Slick.Range(2, 1, 2, 3);
grid.setActiveCell(2, 1);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_UP);
});
it('we still have the selected range before we arrowed', function () {
pressShiftPlusKey(KEY_LEFT);
expectOneSelectedRange(2, 1, 2, 1);
it('increases the range by one row up', function () {
expectOneSelectedRange(1, 1, 2, 3);
});
it('should scroll the row above into view', function () {
expect(scrollRowIntoViewSpy).toHaveBeenCalledWith(1);
expect(scrollColumnIntoViewSpy).not.toHaveBeenCalled();
});
});
});
describe('the down arrow', function () {
describe('when a cell is selected', function () {
beforeEach(function () {
var range = new Slick.Range(2, 2);
grid.setActiveCell(2, 2);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_DOWN);
});
it('increases the range by one down', function () {
expectOneSelectedRange(2, 2, 3, 2);
});
it('should scroll the row below into view', function () {
expect(scrollRowIntoViewSpy).toHaveBeenCalledWith(3);
expect(scrollColumnIntoViewSpy).not.toHaveBeenCalled();
});
it('pressing down again grows the range down', function () {
pressShiftPlusKey(KEY_DOWN);
expectOneSelectedRange(2, 2, 4, 2);
});
it('then pressing up keeps the original selection', function () {
pressShiftPlusKey(KEY_UP);
expectOneSelectedRange(2, 2, 2, 2);
});
});
describe('when a row is selected', function () {
beforeEach(function () {
var range = new Slick.Range(2, 1, 2, 3);
grid.setActiveCell(2, 1);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_DOWN);
});
it('increases the range by one row down', function () {
expectOneSelectedRange(2, 1, 3, 3);
});
it('should scroll the row below into view', function () {
expect(scrollRowIntoViewSpy).toHaveBeenCalledWith(3);
expect(scrollColumnIntoViewSpy).not.toHaveBeenCalled();
});
});
});
describe('rectangular selection works', function () {
it('in the down-and-rightward direction', function () {
var range = new Slick.Range(1, 1);
grid.setActiveCell(1, 1);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_DOWN);
pressShiftPlusKey(KEY_DOWN);
pressShiftPlusKey(KEY_DOWN);
pressShiftPlusKey(KEY_RIGHT);
pressShiftPlusKey(KEY_RIGHT);
expectOneSelectedRange(1, 1, 4, 3);
});
it('in the up-and-leftward direction', function () {
var range = new Slick.Range(4, 3);
grid.setActiveCell(4, 3);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_UP);
pressShiftPlusKey(KEY_UP);
pressShiftPlusKey(KEY_UP);
pressShiftPlusKey(KEY_LEFT);
pressShiftPlusKey(KEY_LEFT);
expectOneSelectedRange(1, 1, 4, 3);
});
it('in the up-and-rightward direction', function () {
var range = new Slick.Range(4, 1);
grid.setActiveCell(4, 1);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_UP);
pressShiftPlusKey(KEY_UP);
pressShiftPlusKey(KEY_UP);
pressShiftPlusKey(KEY_RIGHT);
pressShiftPlusKey(KEY_RIGHT);
expectOneSelectedRange(1, 1, 4, 3);
});
it('in the down-and-leftward direction', function () {
var range = new Slick.Range(1, 3);
grid.setActiveCell(1, 3);
grid.getSelectionModel().setSelectedRanges([range]);
pressShiftPlusKey(KEY_DOWN);
pressShiftPlusKey(KEY_DOWN);
pressShiftPlusKey(KEY_DOWN);
pressShiftPlusKey(KEY_LEFT);
pressShiftPlusKey(KEY_LEFT);
expectOneSelectedRange(1, 1, 4, 3);
});
});
describe('and we are on an edge', function () {
var range;
beforeEach(function () {
range = new Slick.Range(2, 1);
grid.setActiveCell(2, 1);
grid.getSelectionModel().setSelectedRanges([range]);
});
it('we still have the selected range before we arrowed', function () {
pressShiftPlusKey(KEY_LEFT);
expectOneSelectedRange(2, 1, 2, 1);
});
});
});
});
});
describe('when we drag and drop', function () {
var dd;
// We could not find an elegant way to calculate this value
// after changing window size we saw this was a constant value
var offsetLeftColumns = 100;
describe('when we drag and drop', function () {
var dd;
// We could not find an elegant way to calculate this value
// after changing window size we saw this was a constant value
var offsetLeftColumns = 100;
function cellTopPosition($cell, rowNumber) {
return $(grid.getCanvasNode()).offset().top + $cell[0].scrollHeight * rowNumber;
}
function cellTopPosition($cell, rowNumber) {
return $(grid.getCanvasNode()).offset().top + $cell[0].scrollHeight * rowNumber;
}
function cellLeftPosition(columnNumber) {
return $(grid.getCanvasNode()).offset().left + offsetLeftColumns * columnNumber;
}
function cellLeftPosition(columnNumber) {
return $(grid.getCanvasNode()).offset().left + offsetLeftColumns * columnNumber;
}
beforeEach(function () {
var initialPosition = {cell: 3, row: 4};
var $cell = $($('.slick-cell.l3')[initialPosition.row]);
var event = {
target: $cell,
isPropagationStopped: jasmine.createSpy('isPropagationStopped').and.returnValue(false),
isImmediatePropagationStopped: jasmine.createSpy('isImmediatePropagationStopped').and.returnValue(false),
stopImmediatePropagation: jasmine.createSpy('stopImmediatePropagation')
};
dd = {
grid: grid,
startX: cellLeftPosition(initialPosition.cell),
startY: cellTopPosition($cell, initialPosition.row)
};
grid.onDragStart.notify(dd, event, grid);
});
describe('when the drop happens outside of the grid', function () {
beforeEach(function () {
var initialPosition = {cell: 3, row: 4};
var $cell = $($('.slick-cell.l3')[initialPosition.row]);
var $cell = $($('.slick-cell.l1')[1]);
var finalPosition = {cell: 1, row: 1};
var event = {
target: $cell,
isPropagationStopped: jasmine.createSpy('isPropagationStopped').and.returnValue(false),
isImmediatePropagationStopped: jasmine.createSpy('isImmediatePropagationStopped').and.returnValue(false),
stopImmediatePropagation: jasmine.createSpy('stopImmediatePropagation')
stopImmediatePropagation: jasmine.createSpy('stopImmediatePropagation'),
pageX: cellLeftPosition(finalPosition.cell),
pageY: cellTopPosition($cell, finalPosition.row)
};
dd = {
grid: grid,
startX: cellLeftPosition(initialPosition.cell),
startY: cellTopPosition($cell, initialPosition.row)
};
grid.onDragStart.notify(dd, event, grid);
});
describe('when the drop happens outside of the grid', function () {
beforeEach(function () {
var $cell = $($('.slick-cell.l1')[1]);
var finalPosition = {cell: 1, row: 1};
var event = {
target: $cell,
isPropagationStopped: jasmine.createSpy('isPropagationStopped').and.returnValue(false),
isImmediatePropagationStopped: jasmine.createSpy('isImmediatePropagationStopped').and.returnValue(false),
stopImmediatePropagation: jasmine.createSpy('stopImmediatePropagation'),
pageX: cellLeftPosition(finalPosition.cell),
pageY: cellTopPosition($cell, finalPosition.row)
};
grid.onDrag.notify(dd, event, grid);
$(window).mouseup();
});
it('should call handleDragEnd from CellRangeSelector', function () {
var newRange = grid.getSelectionModel().getSelectedRanges();
expect(newRange.length).toBe(1);
expect(newRange[0].fromCell).toBe(1);
expect(newRange[0].toCell).toBe(3);
expect(newRange[0].fromRow).toBe(1);
expect(newRange[0].toRow).toBe(4);
});
});
});
describe('when we mouse up and no drag and drop occured', function () {
beforeEach(function () {
grid.onDragEnd.notify = jasmine.createSpy('notify');
grid.onDragEnd.notify.calls.reset();
grid.onDrag.notify(dd, event, grid);
$(window).mouseup();
});
it('should call handleDragEnd from CellRangeSelector', function () {
var newRange = grid.getSelectionModel().getSelectedRanges();
it('do not notify onDragEnd', function () {
expect(grid.onDragEnd.notify).not.toHaveBeenCalled()
expect(newRange.length).toBe(1);
expect(newRange[0].fromCell).toBe(1);
expect(newRange[0].toCell).toBe(3);
expect(newRange[0].fromRow).toBe(1);
expect(newRange[0].toRow).toBe(4);
});
});
describe('setSelectedRows', function () {
beforeEach(function () {
grid.getSelectionModel().setSelectedRanges(
[new Slick.Range(1, 1, 1, 1)]
);
});
describe('when passed an empty array', function () {
beforeEach(function () {
grid.getSelectionModel().setSelectedRows([]);
});
it('clears ranges', function () {
var newRanges = grid.getSelectionModel().getSelectedRanges();
expect(newRanges.length).toEqual(0);
});
});
it('sets ranges corresponding to rows', function () {
grid.getSelectionModel().setSelectedRows([0, 2]);
var selectedRanges = grid.getSelectionModel().getSelectedRanges();
expect(selectedRanges.length).toBe(2);
expectRangeToMatch(selectedRanges[0], 0, 1, 0, 3);
expectRangeToMatch(selectedRanges[1], 2, 1, 2, 3);
});
});
function pressKey(keyCode) {
var pressEvent = new $.Event("keydown");
pressEvent.which = keyCode;
$(container.find('.grid-canvas')).trigger(pressEvent);
}
function pressShiftPlusKey(keyCode) {
var pressEvent = new $.Event("keydown");
pressEvent.shiftKey = true;
pressEvent.which = keyCode;
$(container.find('.grid-canvas')).trigger(pressEvent);
}
function expectOneSelectedRange(fromRow, fromCell, toRow, toCell) {
var selectedRanges = grid.getSelectionModel().getSelectedRanges();
expect(selectedRanges.length).toBe(1);
expectRangeToMatch(selectedRanges[0], fromRow, fromCell, toRow, toCell);
}
function expectRangeToMatch(range, fromRow, fromCell, toRow, toCell) {
expect(range.fromRow).toBe(fromRow);
expect(range.toRow).toBe(toRow);
expect(range.fromCell).toBe(fromCell);
expect(range.toCell).toBe(toCell);
}
});
})
;
describe('when we mouse up and no drag and drop occured', function () {
beforeEach(function () {
grid.onDragEnd.notify = jasmine.createSpy('notify');
grid.onDragEnd.notify.calls.reset();
$(window).mouseup();
});
it('do not notify onDragEnd', function () {
expect(grid.onDragEnd.notify).not.toHaveBeenCalled()
});
});
describe('setSelectedRows', function () {
beforeEach(function () {
grid.getSelectionModel().setSelectedRanges(
[new Slick.Range(1, 1, 1, 1)]
);
});
describe('when passed an empty array', function () {
beforeEach(function () {
grid.getSelectionModel().setSelectedRows([]);
});
it('clears ranges', function () {
var newRanges = grid.getSelectionModel().getSelectedRanges();
expect(newRanges.length).toEqual(0);
});
});
it('sets ranges corresponding to rows', function () {
grid.getSelectionModel().setSelectedRows([0, 2]);
var selectedRanges = grid.getSelectionModel().getSelectedRanges();
expect(selectedRanges.length).toBe(2);
expectRangeToMatch(selectedRanges[0], 0, 1, 0, 3);
expectRangeToMatch(selectedRanges[1], 2, 1, 2, 3);
});
});
function pressKey(keyCode) {
var pressEvent = new $.Event("keydown");
pressEvent.which = keyCode;
$(container.find('.grid-canvas')).trigger(pressEvent);
}
function pressShiftPlusKey(keyCode) {
var pressEvent = new $.Event("keydown");
pressEvent.shiftKey = true;
pressEvent.which = keyCode;
$(container.find('.grid-canvas')).trigger(pressEvent);
}
function expectOneSelectedRange(fromRow, fromCell, toRow, toCell) {
var selectedRanges = grid.getSelectionModel().getSelectedRanges();
expect(selectedRanges.length).toBe(1);
expectRangeToMatch(selectedRanges[0], fromRow, fromCell, toRow, toCell);
}
function expectRangeToMatch(range, fromRow, fromCell, toRow, toCell) {
expect(range.fromRow).toBe(fromRow);
expect(range.toRow).toBe(toRow);
expect(range.fromCell).toBe(fromCell);
expect(range.toCell).toBe(toCell);
}
});