Skip to content

Commit

Permalink
CXSPA-8270 fix random failing unit tests (#19417)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Uli-Tiger
Uli-Tiger authored Oct 22, 2024
1 parent 103db4d commit e8eedb1
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 90 deletions.
123 changes: 61 additions & 62 deletions ...t-configurator/rulebased/components/service/configurator-storefront-utils.service.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,23 @@ import { Configurator } from '../../core/model/configurator.model';
import { ConfiguratorStorefrontUtilsService } from './configurator-storefront-utils.service';
import { ConfiguratorTestUtils } from '../../testing/configurator-test-utils';

let mockedWindow: {
innerWidth?: number;
innerHeight?: number;
scrollY?: number;
scroll(): void;
} = {
innerWidth: 1000,
innerHeight: 1000,
scrollY: 1000,
scroll() {},
};
class MockedWindowRef extends WindowRef {
get nativeWindow(): Window | undefined {
return this.isBrowser() ? <any>mockedWindow : undefined;
}
}

let isGroupVisited: Observable<boolean> = of(false);
const testSelector = 'test-configurator-overview-menu';

Expand Down Expand Up @@ -116,7 +133,6 @@ describe('ConfiguratorStorefrontUtilsService', () => {
);
let windowRef: WindowRef;
let keyboardFocusService: KeyboardFocusService;
let querySelectorOriginal: any;

beforeEach(() => {
mockRouterState.state.params.displayOnly = false;
Expand All @@ -141,22 +157,26 @@ describe('ConfiguratorStorefrontUtilsService', () => {
provide: ProductService,
useClass: MockProductService,
},
{ provide: WindowRef, useClass: MockedWindowRef },
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
});
classUnderTest = TestBed.inject(ConfiguratorStorefrontUtilsService);
fixture = TestBed.createComponent(MockComponent);
htmlElem = fixture.nativeElement;
windowRef = TestBed.inject(WindowRef as Type<WindowRef>);
windowRef = TestBed.inject(WindowRef);
mockedWindow.innerHeight = 1000;
mockedWindow.innerWidth = 1000;
mockedWindow.scrollY = 1000;
keyboardFocusService = TestBed.inject(
KeyboardFocusService as Type<KeyboardFocusService>
);
querySelectorOriginal = document.querySelector;
});

afterEach(() => {
document.querySelector = querySelectorOriginal;
document.body.removeChild(htmlElem);
if (htmlElem) {
document.body.removeChild(htmlElem);
}
});

it('should be created', () => {
Expand All @@ -174,9 +194,7 @@ describe('ConfiguratorStorefrontUtilsService', () => {

it('should scroll to element', () => {
const theElement = document.createElement('div');
document.querySelector = jasmine
.createSpy('HTML Element')
.and.returnValue(theElement);
spyOn(windowRef.document, 'querySelector').and.returnValue(theElement);
spyOn(theElement, 'getBoundingClientRect').and.returnValue(
new DOMRect(100, 2000, 100, 100)
);
Expand Down Expand Up @@ -308,9 +326,9 @@ describe('ConfiguratorStorefrontUtilsService', () => {
it('should delegate to keyboard focus service', () => {
spyOn(windowRef, 'isBrowser').and.returnValue(true);
const focusedElements = createFocusedElements('ATTR', 2, 3);
document.querySelector = jasmine
.createSpy('HTML Element')
.and.returnValue(focusedElements);
spyOn(windowRef.document, 'querySelector').and.returnValue(
focusedElements[0]
);
spyOn(keyboardFocusService, 'findFocusable').and.returnValue(
focusedElements
);
Expand All @@ -320,9 +338,7 @@ describe('ConfiguratorStorefrontUtilsService', () => {

it('should not delegate to keyboard focus service because form is undefined', () => {
spyOn(windowRef, 'isBrowser').and.returnValue(true);
document.querySelector = jasmine
.createSpy('HTML Element')
.and.returnValue(undefined);
spyOn(windowRef.document, 'querySelector').and.returnValue(undefined);
spyOn(keyboardFocusService, 'findFocusable').and.returnValue([]);
classUnderTest.focusFirstActiveElement('elementSelector');
expect(keyboardFocusService.findFocusable).toHaveBeenCalledTimes(0);
Expand All @@ -338,9 +354,9 @@ describe('ConfiguratorStorefrontUtilsService', () => {
it('should not delegate to keyboard focus service because keyboard focus service returns no focusable elements', () => {
spyOn(windowRef, 'isBrowser').and.returnValue(true);
const focusedElements = createFocusedElements('ATTR', 2, 3);
document.querySelector = jasmine
.createSpy('HTML Element')
.and.returnValue(focusedElements);
spyOn(windowRef.document, 'querySelector').and.returnValue(
focusedElements[0]
);
spyOn(keyboardFocusService, 'findFocusable').and.returnValue([]);
classUnderTest.focusFirstActiveElement('elementSelector');
expect(keyboardFocusService.findFocusable).toHaveBeenCalledTimes(1);
Expand Down Expand Up @@ -394,9 +410,9 @@ describe('ConfiguratorStorefrontUtilsService', () => {
.queryAll(By.css('label'))
.map((el) => el.nativeNode);

document.querySelector = jasmine
.createSpy('HTML Element')
.and.returnValue(focusedElements);
spyOn(windowRef.document, 'querySelector').and.returnValue(
focusedElements
);
});

it('should not set focus because attribute does not contain any values', () => {
Expand Down Expand Up @@ -458,9 +474,7 @@ describe('ConfiguratorStorefrontUtilsService', () => {
spyOn(keyboardFocusService, 'findFocusable').and.returnValue(
focusedElements
);
document.querySelector = jasmine
.createSpy('HTML Element')
.and.returnValue(undefined);
asSpy(windowRef.document.querySelector).and.returnValue(undefined);

verify(focusedElements);
});
Expand Down Expand Up @@ -526,9 +540,7 @@ describe('ConfiguratorStorefrontUtilsService', () => {
it('should get HTML element based on query selector', () => {
spyOn(windowRef, 'isBrowser').and.returnValue(true);
const theElement = document.createElement('elementMock');
document.querySelector = jasmine
.createSpy('HTML Element')
.and.returnValue(theElement);
spyOn(windowRef.document, 'querySelector').and.returnValue(theElement);

expect(classUnderTest.getElement('elementMock')).toEqual(theElement);
});
Expand All @@ -537,19 +549,15 @@ describe('ConfiguratorStorefrontUtilsService', () => {
describe('changeStyling', () => {
it('should change styling of HTML element', () => {
const theElement = document.createElement('elementMock');
document.querySelector = jasmine
.createSpy('HTML Element')
.and.returnValue(undefined);
spyOn(windowRef.document, 'querySelector').and.returnValue(undefined);

classUnderTest.changeStyling('elementMock', 'position', 'sticky');
expect(theElement.style.position).not.toEqual('sticky');
});

it('should change styling of HTML element', () => {
const theElement = document.createElement('elementMock');
document.querySelector = jasmine
.createSpy('HTML Element')
.and.returnValue(theElement);
spyOn(windowRef.document, 'querySelector').and.returnValue(theElement);

classUnderTest.changeStyling('elementMock', 'position', 'sticky');
expect(theElement.style.position).toEqual('sticky');
Expand All @@ -561,9 +569,7 @@ describe('ConfiguratorStorefrontUtilsService', () => {
spyOn(windowRef, 'isBrowser').and.returnValue(true);
const theElement = document.createElement('elementMock');
theElement.style.position = 'sticky';
document.querySelector = jasmine
.createSpy('HTML Element')
.and.returnValue(undefined);
spyOn(windowRef.document, 'querySelector').and.returnValue(undefined);

classUnderTest.removeStyling('elementMock', 'position');
expect(theElement.style.position).toEqual('sticky');
Expand All @@ -573,9 +579,7 @@ describe('ConfiguratorStorefrontUtilsService', () => {
spyOn(windowRef, 'isBrowser').and.returnValue(true);
const theElement = document.createElement('elementMock');
theElement.style.position = 'sticky';
document.querySelector = jasmine
.createSpy('HTML Element')
.and.returnValue(theElement);
spyOn(windowRef.document, 'querySelector').and.returnValue(theElement);

classUnderTest.removeStyling('elementMock', 'position');
expect(theElement.style.position).toBe('');
Expand Down Expand Up @@ -605,9 +609,7 @@ describe('ConfiguratorStorefrontUtilsService', () => {
spyOn(windowRef, 'isBrowser').and.returnValue(true);
const elements: Array<HTMLElement> = createElements('section', 10);

document.querySelectorAll = jasmine
.createSpy('section')
.and.returnValue(elements);
asSpy(windowRef.document.querySelectorAll).and.returnValue(<any>elements);

const htmlElements = classUnderTest.getElements('section');

Expand All @@ -627,7 +629,7 @@ describe('ConfiguratorStorefrontUtilsService', () => {

it('should return number of pixels that the document is currently scrolled vertically', () => {
spyOn(windowRef, 'isBrowser').and.returnValue(true);
spyOnProperty(window, 'scrollY').and.returnValue(250);
mockedWindow.scrollY = 250;
const nativeWindow = windowRef.nativeWindow;
if (nativeWindow) {
expect(classUnderTest.getVerticallyScrolledPixels()).toBe(250);
Expand All @@ -637,9 +639,7 @@ describe('ConfiguratorStorefrontUtilsService', () => {

describe('hasScrollbar', () => {
it('should return false because element is undefined', () => {
document.querySelector = jasmine
.createSpy('HTML Element')
.and.returnValue(undefined);
spyOn(windowRef.document, 'querySelector').and.returnValue(undefined);

expect(classUnderTest.hasScrollbar('elementMock')).toBe(false);
});
Expand Down Expand Up @@ -711,27 +711,25 @@ describe('ConfiguratorStorefrontUtilsService', () => {
label.style.height = '10px';
});

spyOnProperty(window, 'innerWidth').and.returnValue(100);
mockedWindow.innerWidth = 100;

expect(classUnderTest['isInViewport'](form)).toBe(false);
});

// TODO: CXSPA-8270 - fix failing tests on Azure & GiHub
xit("should return true because window's innerWith is known", () => {
it("should return true because window's innerWith is known", () => {
form.style.display = 'flex';
form.style.flexDirection = 'column';

spyOnProperty(window, 'innerWidth').and.returnValue(1000);
mockedWindow.innerWidth = 1000;

expect(classUnderTest['isInViewport'](form)).toBe(true);
});

// TODO: CXSPA-8270 - fix failing tests on Azure & GiHub
xit('should return true because clientWidth of element is known and its right is less than its width', () => {
it('should return true because clientWidth of element is known and its right is less than its width', () => {
form.style.display = 'flex';
form.style.flexDirection = 'column';

spyOnProperty(window, 'innerWidth').and.returnValue(undefined);
mockedWindow.innerWidth = undefined;

expect(classUnderTest['isInViewport'](form)).toBe(true);
});
Expand All @@ -741,7 +739,7 @@ describe('ConfiguratorStorefrontUtilsService', () => {
form.style.flexDirection = 'column';
form.style.height = '1000px';

spyOnProperty(window, 'innerHeight').and.returnValue(undefined);
mockedWindow.innerHeight = undefined;

expect(classUnderTest['isInViewport'](form)).toBe(true);
});
Expand All @@ -765,15 +763,14 @@ describe('ConfiguratorStorefrontUtilsService', () => {
expect(classUnderTest['getHeight']('unknown-query')).toBe(0);
});

it('should return zero because form is not im viewport', () => {
spyOnProperty(window, 'innerWidth').and.returnValue(100);
it('should return zero because form is not in viewport', () => {
mockedWindow.innerWidth = 100;

expect(classUnderTest['getHeight']('cx-configurator-form')).toBe(0);
});

// TODO: CXSPA-8270 - fix failing tests on Azure & GiHub
xit('should return offsetHeight of the element because form is not im viewport', () => {
spyOnProperty(window, 'innerWidth').and.returnValue(1000);
it('should return offsetHeight of the element because form is not in viewport', () => {
mockedWindow.innerWidth = 1000;

expect(
classUnderTest['getHeight']('cx-configurator-form')
Expand Down Expand Up @@ -804,7 +801,7 @@ describe('ConfiguratorStorefrontUtilsService', () => {
addToCart = document.createElement('cx-configurator-add-to-cart-button');
document.body.append(addToCart);

spyOnProperty(window, 'innerWidth').and.returnValue(1000);
mockedWindow.innerWidth = 1000;
}

it('should return zero because isBrowser is undefined', () => {
Expand Down Expand Up @@ -877,9 +874,7 @@ describe('ConfiguratorStorefrontUtilsService', () => {
it('should not ensure visibility of the element', () => {
spyOn(windowRef, 'isBrowser').and.returnValue(false);
ovMenu = document.createElement('cx-configurator-overview-menu');
document.querySelector = jasmine
.createSpy('HTML Element')
.and.returnValue(ovMenu);
spyOn(windowRef.document, 'querySelector').and.returnValue(ovMenu);
classUnderTest.ensureElementVisible(
'cx-configurator-overview-menu',
undefined
Expand Down Expand Up @@ -988,4 +983,8 @@ describe('ConfiguratorStorefrontUtilsService', () => {
expect(classUnderTest.isLastSelected('name', 'code')).toBe(false);
});
});

function asSpy(f: any) {
return <jasmine.Spy>f;
}
});
Loading

0 comments on commit e8eedb1

Please sign in to comment.