simplify filter creation, add basic filter tests

This commit is contained in:
Mike Rodarte 2025-04-07 20:34:46 -04:00
parent d7e107b690
commit f346130ac3
No known key found for this signature in database
GPG key ID: 32DCD8C789A592CC
3 changed files with 57 additions and 15 deletions

View file

@ -49,11 +49,16 @@ export class WordFrequencyDisplay {
}
createFilter(contentEl: HTMLElement) {
const filterContainer = contentEl.createEl('div');
const filterInput = filterContainer.createEl('input');
filterInput.setAttr('type', 'text');
filterInput.addClass(ELEMENT_CLASSES.filter);
filterInput.setAttr('placeholder', 'Type to filter results');
const filterContainer = contentEl.createEl('div', {
cls: ELEMENT_CLASSES.containerFilter,
});
const filterInput = filterContainer.createEl('input', {
cls: ELEMENT_CLASSES.filter,
attr: {
type: 'text',
placeholder: 'Type to filter results',
},
});
const debouncedMethod = debounce((event: Event) => {
const target = event.target as HTMLInputElement;

View file

@ -7,8 +7,10 @@ describe('WordFrequencyDisplay', () => {
let blacklist: Set<string>;
let display: WordFrequencyDisplay;
let contentEl: HTMLElement;
let firstElement: HTMLElement;
let mockPlugin: WordFrequencyPlugin;
let mockView: WordFrequencyView;
let secondElement: HTMLElement;
beforeEach(() => {
mockPlugin = {
@ -33,12 +35,20 @@ describe('WordFrequencyDisplay', () => {
onClose: jest.fn(),
updateContent: jest.fn(),
} as unknown as WordFrequencyView;
secondElement = {
addClass: jest.fn(),
createEl: jest.fn(),
mockCallback: jest.fn(),
setAttr: jest.fn(),
setText: jest.fn(),
} as unknown as HTMLElement;
firstElement = {
createEl: jest.fn().mockReturnValue(secondElement),
setAttr: jest.fn(),
setText: jest.fn(),
} as unknown as HTMLElement;
contentEl = {
createEl: jest.fn().mockReturnValue({
createEl: jest.fn().mockReturnThis(),
setAttr: jest.fn(),
setText: jest.fn(),
}),
createEl: jest.fn().mockReturnValue(firstElement),
} as unknown as HTMLElement;
blacklist = new Set(
mockPlugin.settings.blacklist.split(',').map((word) => word.trim())
@ -124,16 +134,42 @@ describe('WordFrequencyDisplay', () => {
it.todo('should verify the button click event handles the word');
});
describe('createFilter', () => {
it('should create an input element with a container', () => {
display.createFilter(contentEl);
expect(contentEl.createEl).toHaveBeenCalledWith('div', {
cls: ELEMENT_CLASSES.containerFilter,
});
expect(firstElement.createEl).toHaveBeenCalledWith('input', {
cls: ELEMENT_CLASSES.filter,
attr: {
type: 'text',
placeholder: 'Type to filter results',
},
});
});
it('should register a DOM event with the input element', () => {
display.createFilter(contentEl);
expect(mockPlugin.registerDomEvent).toHaveBeenCalledWith(
secondElement,
'input',
expect.any(Function)
);
});
it.todo('should update view content when the filter input changes');
});
describe('createHeader', () => {
it('should set text in the content', () => {
display.createHeader(contentEl);
expect(contentEl.createEl).toHaveBeenCalledWith('div');
const headerContainer = contentEl.createEl('div');
expect(headerContainer.createEl).toHaveBeenCalledWith('h4');
const headerElement = headerContainer.createEl('h4');
expect(headerElement.createEl).toHaveBeenCalledWith('h4');
expect(headerElement.setText).toHaveBeenCalledWith(PLUGIN_NAME);
expect(firstElement.createEl).toHaveBeenCalledWith('h4');
expect(secondElement.setText).toHaveBeenCalledWith(PLUGIN_NAME);
});
});

View file

@ -12,6 +12,7 @@ export const ELEMENT_CLASSES = {
containerButton: 'word-frequency-button-container',
containerContent: 'word-frequency-sidebar-content',
containerCount: 'word-frequency-count-container',
containerFilter: 'word-frequency-filter-container',
containerRow: 'word-frequency-row',
containerThreshold: 'word-frequency-threshold-display',
containerWordList: 'word-frequency-word-list',