Тестирование функции с использованием Jest

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