| import './index'; |
| 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'; |
| import { expect } from 'chai'; |
| |
| function hasClass(e: HTMLElement, expected: string): boolean { |
| const c = e.getAttribute("class") |
| if (!c) { return false; } |
| return e.classList.contains(expected); |
| } |
| |
| // debugger-page-sk expects to find this defined |
| const SKIA_VERSION = 'test'; |
| |
| 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') |
| }); |
| }); |
| }); |