javascript - 基于 Javascript 的网格的测试用例

Question

我正在使用 AG-Grid 将数据加载到我的 Web 应用程序中。代码看起来像这个链接。

var gridOptions = {
  columnDefs: [
    { field: 'firstName' },
    { field: 'lastName' },
    { field: 'gender' },
    { field: 'age' },
    { field: 'mood' },
    { field: 'country' },
    { field: 'address', minWidth: 550 },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 110,
    editable: true,
    resizable: true,
  },
  rowData: rowData,
  pinnedTopRowData: getPinnedTopData(),
  pinnedBottomRowData: getPinnedBottomData(),
  onRowEditingStarted: function (event) {
    console.log('never called - not doing row editing');
  },
  onRowEditingStopped: function (event) {
    console.log('never called - not doing row editing');
  },
  onCellEditingStarted: function (event) {
    console.log('cellEditingStarted');
  },
  onCellEditingStopped: function (event) {
    console.log('cellEditingStopped');
  },
};

function onBtStopEditing() {
  gridOptions.api.stopEditing();
}

function onBtStartEditing(key, char, pinned) {
  gridOptions.api.setFocusedCell(0, 'lastName', pinned);

  gridOptions.api.startEditingCell({
    rowIndex: 0,
    colKey: 'lastName',
    // set to 'top', 'bottom' or undefined
    rowPinned: pinned,
    keyPress: key,
    charPress: char,
  });
}

function getCharCodeFromEvent(event) {
  event = event || window.event;
  return typeof event.which === 'undefined' ? event.keyCode : event.which;
}

function isCharNumeric(charStr) {
  return !!/\d/.test(charStr);
}

function isKeyPressedNumeric(event) {
  var charCode = getCharCodeFromEvent(event);
  var charStr = String.fromCharCode(charCode);
  return isCharNumeric(charStr);
}

function onBtNextCell() {
  gridOptions.api.tabToNextCell();
}

function onBtPreviousCell() {
  gridOptions.api.tabToPreviousCell();
}

function onBtWhich() {
  var cellDefs = gridOptions.api.getEditingCells();
  if (cellDefs.length > 0) {
    var cellDef = cellDefs[0];
    console.log(
      'editing cell is: row = ' +
        cellDef.rowIndex +
        ', col = ' +
        cellDef.column.getId() +
        ', floating = ' +
        cellDef.rowPinned
    );
  } else {
    console.log('no cells are editing');
  }
}

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
});

用户将编辑网格的一行，然后单击提交按钮将有关已编辑行的信息发布到服务器。发布的数据将包含所有列。除此之外，用户还将发布有关已修改的每一列的信息。

我想针对网格编写测试用例并验证正确的信息（新数据以及谈论修改了哪一列的新字段）已发布到 server 。

测试这种场景的最佳方法是什么。

标签： javascriptjqueryreactjsjasminemocha.js