Skip to content

Commit

Permalink
fix(27428): Attach more tests to pass sonar quality gate
Browse files Browse the repository at this point in the history
  • Loading branch information
@DDDDDanica
DDDDDanica committed Oct 1, 2024
1 parent 2c56d62 commit 3535156
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 1 deletion.
2 changes: 1 addition & 1 deletion ui/helpers/utils/settings-search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export function handleSettingsRefs(t, tabMessage, settingsRefs) {
}
}

function colorText(menuElement, regex) {
export function colorText(menuElement, regex) {
if (menuElement !== null) {
let elemText = menuElement.innerHTML;
elemText = elemText.replace('&', '&');
Expand Down
153 changes: 153 additions & 0 deletions ui/helpers/utils/settings-search.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import {
getNumberOfSettingRoutesInTab,
handleSettingsRefs,
escapeRegExp,
colorText,
highlightSearchedText,
} from './settings-search';

const t = (key) => {
Expand Down Expand Up @@ -234,6 +236,7 @@ describe('Settings Search Utils', () => {
expect(escapeRegExp(input)).toBe(expectedOutput);
});
});

// Can't be tested without DOM element
describe('handleSettingsRefs', () => {
it('should handle general refs', () => {
Expand All @@ -245,4 +248,154 @@ describe('Settings Search Utils', () => {
expect(handleSettingsRefs(t, t('general'), settingsRefs)).toBeUndefined();
});
});

describe('colorText', () => {
let mockElement;

beforeEach(() => {
mockElement = {
innerHTML: 'Test & string with multiple words',
};
});

afterEach(() => {
jest.clearAllMocks();
});

it('should highlight text that matches the regex', () => {
const regex = /string/giu;
colorText(mockElement, regex);
expect(mockElement.innerHTML).toBe(
'Test & <span class="settings-page__header__search__list__item__highlight">string</span> with multiple words',
);
});

it('should correctly decode &amp; to &', () => {
const regex = /&/giu;
colorText(mockElement, regex);
expect(mockElement.innerHTML).toBe(
'Test <span class="settings-page__header__search__list__item__highlight">&</span> string with multiple words',
);
});

it('should remove any existing highlight spans before applying new highlights', () => {
mockElement.innerHTML =
'Test &amp; <span class="settings-page__header__search__list__item__highlight">string</span> with multiple words';
const regex = /multiple/giu;
colorText(mockElement, regex);
expect(mockElement.innerHTML).toBe(
'Test & string with <span class="settings-page__header__search__list__item__highlight">multiple</span> words',
);
});

it('should not modify innerHTML if menuElement is null', () => {
const regex = /string/giu;
const nullElement = null;
colorText(nullElement, regex);
expect(nullElement).toBeNull();
});

it('should not highlight anything if regex doesn’t match', () => {
const regex = /nomatch/giu;
colorText(mockElement, regex);
expect(mockElement.innerHTML).toBe('Test & string with multiple words');
});
});

describe('highlightSearchedText', () => {
let searchElem;
let mockResultItems;
let mockMenuTabElement;
let mockMenuSectionElement;

beforeEach(() => {
searchElem = document.createElement('input');
searchElem.id = 'search-settings';
searchElem.value = 'test';
document.body.appendChild(searchElem);

// Mock result list items
mockResultItems = [...Array(2)].map(() => {
const item = document.createElement('div');
item.classList.add('settings-page__header__search__list__item');

mockMenuTabElement = document.createElement('div');
mockMenuTabElement.classList.add(
'settings-page__header__search__list__item__tab',
);
mockMenuTabElement.innerHTML = 'Test tab';

mockMenuSectionElement = document.createElement('div');
mockMenuSectionElement.classList.add(
'settings-page__header__search__list__item__section',
);
mockMenuSectionElement.innerHTML = 'Test section';

item.appendChild(mockMenuTabElement);
item.appendChild(mockMenuSectionElement);

return item;
});

mockResultItems.forEach((item) => document.body.appendChild(item));
});

afterEach(() => {
document.body.innerHTML = '';
});

it('should highlight the matching text in both menuTabElement and menuSectionElement', () => {
highlightSearchedText();
mockResultItems.forEach((item) => {
const tabElement = item.querySelector(
'.settings-page__header__search__list__item__tab',
);
const sectionElement = item.querySelector(
'.settings-page__header__search__list__item__section',
);
expect(tabElement.innerHTML).toBe(
'<span class="settings-page__header__search__list__item__highlight">Test</span> tab',
);
expect(sectionElement.innerHTML).toBe(
'<span class="settings-page__header__search__list__item__highlight">Test</span> section',
);
});
});

it('should not alter the innerHTML if no match is found', () => {
searchElem.value = 'nomatch';
highlightSearchedText();
mockResultItems.forEach((item) => {
const tabElement = item.querySelector(
'.settings-page__header__search__list__item__tab',
);
const sectionElement = item.querySelector(
'.settings-page__header__search__list__item__section',
);

expect(tabElement.innerHTML).toBe('Test tab');
expect(sectionElement.innerHTML).toBe('Test section');
});
});

it('should do nothing if the search input is empty', () => {
searchElem.value = '';
highlightSearchedText();
mockResultItems.forEach((item) => {
const tabElement = item.querySelector(
'.settings-page__header__search__list__item__tab',
);
const sectionElement = item.querySelector(
'.settings-page__header__search__list__item__section',
);

expect(tabElement.innerHTML).toBe(
'<span class="settings-page__header__search__list__item__highlight"></span>T<span class="settings-page__header__search__list__item__highlight"></span>e<span class="settings-page__header__search__list__item__highlight"></span>s<span class="settings-page__header__search__list__item__highlight"></span>t<span class="settings-page__header__search__list__item__highlight"></span> <span class="settings-page__header__search__list__item__highlight"></span>t<span class="settings-page__header__search__list__item__highlight"></span>a<span class="settings-page__header__search__list__item__highlight"></span>b<span class="settings-page__header__search__list__item__highlight"></span>',
);
expect(sectionElement.innerHTML).toBe(
'<span class="settings-page__header__search__list__item__highlight"></span>T<span class="settings-page__header__search__list__item__highlight"></span>e<span class="settings-page__header__search__list__item__highlight"></span>s<span class="settings-page__header__search__list__item__highlight"></span>t<span class="settings-page__header__search__list__item__highlight"></span> <span class="settings-page__header__search__list__item__highlight"></span>s<span class="settings-page__header__search__list__item__highlight"></span>e<span class="settings-page__header__search__list__item__highlight"></span>c<span class="settings-page__header__search__list__item__highlight"></span>t<span class="settings-page__header__search__list__item__highlight"></span>i<span class="settings-page__header__search__list__item__highlight"></span>o<span class="settings-page__header__search__list__item__highlight"></span>n<span class="settings-page__header__search__list__item__highlight"></span>',
);
});
});
});
});

0 comments on commit 3535156

Please sign in to comment.