Skip to content

Commit ec507c6

Browse files
PlamenaMitevaPlamenaMiteva
committed
test(overlay): add formatString function#6692
1 parent e78694f commit ec507c6

File tree

2 files changed

+44
-20
lines changed

2 files changed

+44
-20
lines changed

‎projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -366,11 +366,12 @@ describe('IgxAutocomplete', () => {
366366
const verifyDropdownItems = function() {
367367
expect(dropdownListScrollElement.children.length).toEqual(filteredTowns.length);
368368
for (let itemIndex = 0; itemIndex < filteredTowns.length; itemIndex++) {
369-
expect(dropdownListScrollElement.children[itemIndex].nativeElement.textContent.trim()).
369+
const itemElement = dropdownListScrollElement.children[itemIndex].nativeElement;
370+
expect(itemElement.textContent.trim()).
370371
toEqual(filteredTowns[itemIndex]);
371372
const isFocused = itemIndex === 0 ? true : false;
372373
const hasFocusedClass =
373-
dropdownListScrollElement.children[itemIndex].nativeElement.classList.contains(CSS_CLASS_DROP_DOWN_ITEM_FOCUSED);
374+
itemElement.classList.contains(CSS_CLASS_DROP_DOWN_ITEM_FOCUSED);
374375
isFocused ? expect(hasFocusedClass).toBeTruthy() :
375376
expect(hasFocusedClass).toBeFalsy();
376377
expect(dropDown.items[itemIndex].focused).toEqual(isFocused);

‎projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts‎

Lines changed: 41 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ function getOverlayWrapperLocation(
147147
} else if (positionSettings.verticalStartPoint === VerticalAlignment.Middle) {
148148
location.y = Math.max(0, targetRect.top + targetRect.height / 2 - flipOffset);
149149
} else {
150-
location.y = Math.max(0, targetRect.top - flipOffset);
150+
location.y = Math.max(0, targetRect.top - flipOffset);
151151
}
152152
}
153153
} else if (location.y + wrapperRect.height > screenRect.bottom && !elastic) {
@@ -163,7 +163,23 @@ function getOverlayWrapperLocation(
163163
return location;
164164
}
165165

166+
/**
167+
* Formats a string according to the given formatters
168+
* @param inputString String to be formatted
169+
* @param formatters Each formatter should include regex expressions and replacements to be applied on the inputString
170+
*/
171+
function formatString(inputString: string, formatters: any[]) {
172+
formatters.forEach(function (formatter) {
173+
inputString = inputString.replace(formatter.pattern, formatter.replacement);
174+
});
175+
return inputString;
176+
}
177+
166178
describe('igxOverlay', () => {
179+
const formatters = [
180+
{pattern: /:\s/g, replacement: ':'},
181+
{pattern: /red;/, replacement: 'red'}
182+
];
167183
beforeEach(async(() => {
168184
UIInteractions.clearOverlay();
169185
}));
@@ -856,10 +872,10 @@ describe('igxOverlay', () => {
856872
spyOn(Util, 'getViewportRect').and.returnValue(viewPortRect);
857873
spyOn(Util, 'getTargetRect').and.returnValue(targetRect);
858874

859-
const element = jasmine.createSpyObj('HTMLElement', ['getBoundingClientRect'] );
875+
const element = jasmine.createSpyObj('HTMLElement', ['getBoundingClientRect']);
860876
spyOn(element, 'getBoundingClientRect').and.returnValue(elementRect);
861-
element.classList = { add: () => {} };
862-
element.style = { width: '', height: ''};
877+
element.classList = { add: () => { } };
878+
element.style = { width: '', height: '' };
863879
elastic.position(element, null, null, true);
864880

865881
expect(element.style.width).toBe('200px');
@@ -1678,8 +1694,9 @@ describe('igxOverlay', () => {
16781694
const wrappers = document.getElementsByClassName(CLASS_OVERLAY_CONTENT);
16791695
const wrapperContent = wrappers[wrappers.length - 1].lastElementChild; // wrapped in NG-COMPONENT
16801696
expect(wrapperContent.children.length).toEqual(1);
1681-
expect(wrapperContent.lastElementChild.getAttribute('style').replace(/:\s/g, ':').replace(/red;/, 'red'))
1682-
.toEqual('width:100px; height:100px; background-color:red');
1697+
let overlayStyle = wrapperContent.lastElementChild.getAttribute('style');
1698+
overlayStyle = formatString(overlayStyle, formatters);
1699+
expect(overlayStyle).toEqual('width:100px; height:100px; background-color:red');
16831700
}));
16841701

16851702
it('Should show the component inside of the viewport if it would normally be outside of bounds, BOTTOM + RIGHT.', fakeAsync(() => {
@@ -1703,8 +1720,9 @@ describe('igxOverlay', () => {
17031720
const wrappers = document.getElementsByClassName(CLASS_OVERLAY_CONTENT);
17041721
const wrapperContent = wrappers[wrappers.length - 1] as HTMLElement; // wrapped in NG-COMPONENT
17051722
const expectedStyle = 'width:100px; height:100px; background-color:red';
1706-
expect(wrapperContent.lastElementChild.lastElementChild.getAttribute('style').replace(/:\s/g, ':').replace(/red;/, 'red'))
1707-
.toEqual(expectedStyle);
1723+
let overlayStyle = wrapperContent.lastElementChild.lastElementChild.getAttribute('style');
1724+
overlayStyle = formatString(overlayStyle, formatters);
1725+
expect(overlayStyle).toEqual(expectedStyle);
17081726
const buttonLeft = buttonElement.offsetLeft;
17091727
const buttonTop = buttonElement.offsetTop;
17101728
const expectedLeft = buttonLeft - wrapperContent.lastElementChild.lastElementChild.clientWidth;
@@ -2132,8 +2150,9 @@ describe('igxOverlay', () => {
21322150
const wrappers = document.getElementsByClassName(CLASS_OVERLAY_CONTENT);
21332151
const wrapperContent = wrappers[wrappers.length - 1].lastElementChild; // wrapped in NG-COMPONENT
21342152
expect(wrapperContent.children.length).toEqual(1);
2135-
expect(wrapperContent.lastElementChild.getAttribute('style').replace(/:\s/g, ':').replace(/red;/, 'red'))
2136-
.toEqual('width:100px; height:100px; background-color:red');
2153+
let overlayStyle = wrapperContent.lastElementChild.getAttribute('style');
2154+
overlayStyle = formatString(overlayStyle, formatters);
2155+
expect(overlayStyle).toEqual('width:100px; height:100px; background-color:red');
21372156
}));
21382157

21392158
it('Should show the component inside of the viewport if it would normally be outside of bounds, BOTTOM + RIGHT.', fakeAsync(() => {
@@ -2912,8 +2931,9 @@ describe('igxOverlay', () => {
29122931
const wrappers = document.getElementsByClassName(CLASS_OVERLAY_CONTENT);
29132932
const wrapperContent = wrappers[wrappers.length - 1] as HTMLElement;
29142933
const expectedStyle = 'width:100px; height:100px; background-color:red';
2915-
expect(wrapperContent.lastElementChild.lastElementChild.getAttribute('style').replace(/:\s/g, ':').replace(/red;/, 'red'))
2916-
.toEqual(expectedStyle);
2934+
let overlayStyle = wrapperContent.lastElementChild.lastElementChild.getAttribute('style');
2935+
overlayStyle = formatString(overlayStyle, formatters);
2936+
expect(overlayStyle).toEqual(expectedStyle);
29172937
const buttonLeft = buttonElement.offsetLeft;
29182938
const buttonTop = buttonElement.offsetTop;
29192939
const expectedLeft = buttonLeft + buttonElement.clientWidth; // To the right of the button
@@ -2963,8 +2983,9 @@ describe('igxOverlay', () => {
29632983
const wrappers = document.getElementsByClassName(CLASS_OVERLAY_CONTENT);
29642984
const wrapperContent = wrappers[wrappers.length - 1] as HTMLElement;
29652985
const expectedStyle = 'width:100px; height:100px; background-color:red';
2966-
expect(wrapperContent.lastElementChild.lastElementChild.getAttribute('style').replace(/:\s/g, ':').replace(/red;/, 'red'))
2967-
.toEqual(expectedStyle);
2986+
let overlayStyle = wrapperContent.lastElementChild.lastElementChild.getAttribute('style');
2987+
overlayStyle = formatString(overlayStyle, formatters);
2988+
expect(overlayStyle).toEqual(expectedStyle);
29682989
const buttonLeft = buttonElement.offsetLeft;
29692990
const buttonTop = buttonElement.offsetTop;
29702991
const expectedRight = buttonLeft; // To the left of the button
@@ -3013,8 +3034,9 @@ describe('igxOverlay', () => {
30133034
const wrappers = document.getElementsByClassName(CLASS_OVERLAY_CONTENT);
30143035
const contentElement = wrappers[wrappers.length - 1] as HTMLElement; // wrapper in NG-COMPONENT
30153036
const expectedStyle = 'width:100px; height:100px; background-color:red';
3016-
expect(contentElement.lastElementChild.lastElementChild.getAttribute('style').replace(/:\s/g, ':').replace(/red;/, 'red'))
3017-
.toEqual(expectedStyle);
3037+
let overlayStyle = contentElement.lastElementChild.lastElementChild.getAttribute('style');
3038+
overlayStyle = formatString(overlayStyle, formatters);
3039+
expect(overlayStyle).toEqual(expectedStyle);
30183040
const expectedRight = buttonElement.offsetLeft;
30193041
const expectedTop = buttonElement.offsetTop + buttonElement.clientHeight;
30203042
const contentElementRect = contentElement.getBoundingClientRect();
@@ -3063,8 +3085,9 @@ describe('igxOverlay', () => {
30633085
const wrappers = document.getElementsByClassName(CLASS_OVERLAY_CONTENT);
30643086
const wrapperContent = wrappers[wrappers.length - 1] as HTMLElement;
30653087
const expectedStyle = 'width:100px; height:100px; background-color:red';
3066-
expect(wrapperContent.lastElementChild.lastElementChild.getAttribute('style').replace(/:\s/g, ':').replace(/red;/, 'red'))
3067-
.toEqual(expectedStyle);
3088+
let overlayStyle = wrapperContent.lastElementChild.lastElementChild.getAttribute('style');
3089+
overlayStyle = formatString(overlayStyle, formatters);
3090+
expect(overlayStyle).toEqual(expectedStyle);
30683091
const buttonLeft = buttonElement.offsetLeft;
30693092
const buttonTop = buttonElement.offsetTop;
30703093
const expectedLeft = buttonLeft + buttonElement.clientWidth; // To the right of the button

0 commit comments

Comments
 (0)