debugger-app/modules/debugger-page-sk/debugger-page-sk_test.ts

import './index';
import { expect } from 'chai';
import { DebuggerPageSk } from './debugger-page-sk';
import { testData } from '../commands-sk/test-data';
import { CommandsSk } from '../commands-sk/commands-sk';
import { HistogramSk } from '../histogram-sk/histogram-sk';

import { setUpElementUnderTest } from '../../../infra-sk/modules/test_util';

function hasClass(e: HTMLElement, expected: string): boolean {
  const c = e.getAttribute('class');
  if (!c) { return false; }
  return e.classList.contains(expected);
}

describe('debugger-page-sk', () => {
  const newInstance = setUpElementUnderTest<DebuggerPageSk>('debugger-page-sk');

  let debuggerPageSk: DebuggerPageSk;
  beforeEach(() => {
    debuggerPageSk = newInstance((el: DebuggerPageSk) => {});
  });

  // In addition to showing counts, the histogram functions as a way to toggle any
  // command in or out of the filter. is is integrated closely with commandsSk, and
  // that integration is tested here.
  describe('commands-histogram interaction', () => {
    it('can set a negative text filter and it is reflected in the histogram', () => {
      const commandsSk = debuggerPageSk.querySelector<CommandsSk>('commands-sk')!;
      const histogramSk = debuggerPageSk.querySelector<HistogramSk>('histogram-sk')!;

      commandsSk.clearFilter();
      commandsSk.processCommands(testData);
      commandsSk.textFilter = '!Restore Save';

      // expect histogram selection are highlighted correctly
      expect(hasClass(histogramSk.querySelector<HTMLElement>(
        '#hist-row-save',
      )!, 'pinkBackground')).to.equal(true);
      expect(hasClass(histogramSk.querySelector<HTMLElement>(
        '#hist-row-restore',
      )!, 'pinkBackground')).to.equal(true);
      expect(hasClass(histogramSk.querySelector<HTMLElement>(
        '#hist-row-drawannotation',
      )!, 'pinkBackground')).to.equal(false);
      expect(hasClass(histogramSk.querySelector<HTMLElement>(
        '#hist-row-drawimagerect',
      )!, 'pinkBackground')).to.equal(false);
    });

    it('can set a postive text filter and it is reflected in the histogram', () => {
      const commandsSk = debuggerPageSk.querySelector<CommandsSk>('commands-sk')!;
      const histogramSk = debuggerPageSk.querySelector<HistogramSk>('histogram-sk')!;

      commandsSk.clearFilter();
      commandsSk.processCommands(testData);
      commandsSk.textFilter = 'Restore Save';

      // expect histogram selection are highlighted correctly
      expect(hasClass(histogramSk.querySelector<HTMLElement>(
        '#hist-row-save',
      )!, 'pinkBackground')).to.equal(false);
      expect(hasClass(histogramSk.querySelector<HTMLElement>(
        '#hist-row-restore',
      )!, 'pinkBackground')).to.equal(false);
      expect(hasClass(histogramSk.querySelector<HTMLElement>(
        '#hist-row-drawannotation',
      )!, 'pinkBackground')).to.equal(true);
      expect(hasClass(histogramSk.querySelector<HTMLElement>(
        '#hist-row-drawimagerect',
      )!, 'pinkBackground')).to.equal(true);
    });

    it('can click a histogram row and reflect it in the text filter', () => {
      const commandsSk = debuggerPageSk.querySelector<CommandsSk>('commands-sk')!;
      const histogramSk = debuggerPageSk.querySelector<HistogramSk>('histogram-sk')!;

      commandsSk.clearFilter();
      commandsSk.processCommands(testData);

      // expect histogram selection are highlighted correctly
      histogramSk.querySelector<HTMLElement>('#hist-row-save')!.click();

      expect(commandsSk.querySelector<HTMLInputElement>(
        '#text-filter',
      )!.value).to.equal('!save');
    });
  });
});