pgadmin4/web/regression/javascript/selection/column_selector_spec.js

define(
  ["jquery",
    "underscore",
    "sources/selection/column_selector",
    "sources/selection/active_cell_capture",
    "sources/selection/grid_selector",
    'sources/selection/xcell_selection_model',

    "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;

    var Slick = window.Slick;
    var SlickGrid = Slick.Grid;

    describe("ColumnSelector", function () {
      var container, data, columns, options;
      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.find('.slick-header-column:contains(some-column-name)').click();
            container.find('.slick-header-column:contains(second column)').click();
          });

          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 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);
      }
    });
  });