Question

下面是我需要使用笑话来测试的功能。还需要100％的声纳覆盖率。因此，非常感谢您的帮助。

searchBox = () => {
    var input, filter, table, row, cell, i;
    input = document.getElementById("enter_search");
    filter = input.value.toUpperCase();
    table = document.getElementById("env_tabulator");
    row = table.getElementsByClassName("tabulator-row");
    for (i = 0; i < row.length; i++) {
      cell = row[i].getElementsByClassName("tabulator-cell");
      var flag = false;
      for (var j = 0; j < cell.length; j++) {
        var td = cell[j];
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
          flag = true;
        }
      }
      if (flag) {
        row[i].style.display = "";
      } else {
        row[i].style.display = "none";
      }
    }
  };

Answer 1

这是解决方案：

index.ts：

export const searchBox = () => {
  var input, filter, table, row, cell, i;
  input = document.getElementById('enter_search');
  filter = input.value.toUpperCase();
  table = document.getElementById('env_tabulator');
  row = table.getElementsByClassName('tabulator-row');
  for (i = 0; i < row.length; i++) {
    cell = row[i].getElementsByClassName('tabulator-cell');
    var flag = false;
    for (var j = 0; j < cell.length; j++) {
      var td = cell[j];
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        flag = true;
      }
    }
    if (flag) {
      row[i].style.display = '';
    } else {
      row[i].style.display = 'none';
    }
  }
};

index.spec.ts：

import { searchBox } from './';

describe('searchBox', () => {
  let getElementByIdSpy;
  let mRow;
  beforeAll(() => {
    const mInput = { value: 'jest' } as any;
    mRow = {
      getElementsByClassName: jest
        .fn()
        .mockReturnValueOnce([{ innerHTML: 'jest' }])
        .mockReturnValueOnce([{ innerHTML: 'unit test' }]),
      style: { display: '' }
    };
    const mRows = [mRow];
    const mTable = { getElementsByClassName: jest.fn(() => mRows) };
    getElementByIdSpy = jest.spyOn(document, 'getElementById').mockImplementation(selector => {
      switch (selector) {
        case 'enter_search':
          return mInput;
        case 'env_tabulator':
          return mTable;
      }
    });
  });
  test('t1', () => {
    searchBox();
    expect(getElementByIdSpy.mock.calls[0]).toEqual(['enter_search']);
    expect(getElementByIdSpy.mock.calls[1]).toEqual(['env_tabulator']);
    expect(mRow.getElementsByClassName).toBeCalledWith('tabulator-cell');
    expect(mRow.style.display).toBe('');
  });

  test('t2', () => {
    searchBox();
    expect(getElementByIdSpy.mock.calls[0]).toEqual(['enter_search']);
    expect(getElementByIdSpy.mock.calls[1]).toEqual(['env_tabulator']);
    expect(mRow.getElementsByClassName).toBeCalledWith('tabulator-cell');
    expect(mRow.style.display).toBe('none');
  });
});

覆盖率100％的单元测试结果：

PASS  src/stackoverflow/58519556/index.spec.ts (6.165s)
  searchBox
    ✓ t1 (4ms)
    ✓ t2 (2ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 index.ts |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        7.193s, estimated 9s

源代码：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58519556

Answer 2

您绝对不应该直接在表中操作DOM！

制表器使用虚拟DOM，因为并非表中的所有元素实际上都同时存在，而是在用户滚动表时创建和销毁的，请参见Virtual DOM Documentation。

如果您想从表中过滤行，请使用内置的Filter Functionality，它会更加高效，并且会为使用表带来更流畅的体验。

用玩笑测试功能

2 个答案: