From 37211ca834f239929063c995344f29f5765e578e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= Date: Fri, 20 Jan 2023 23:39:50 +0300 Subject: [PATCH] ConnectedOverlayScrollHandler test updates --- .../ConnectedOverlayScrollHandler.spec.js | 33 +++++ components/utils/test/DomHandler.spec.js | 132 ++++++++++++++++-- 2 files changed, 155 insertions(+), 10 deletions(-) create mode 100644 components/utils/test/ConnectedOverlayScrollHandler.spec.js diff --git a/components/utils/test/ConnectedOverlayScrollHandler.spec.js b/components/utils/test/ConnectedOverlayScrollHandler.spec.js new file mode 100644 index 000000000..7a34f3cb3 --- /dev/null +++ b/components/utils/test/ConnectedOverlayScrollHandler.spec.js @@ -0,0 +1,33 @@ +import { expect } from 'vitest'; +import ConnectedOverlayScrollHandler from '../ConnectedOverlayScrollHandler'; +import DomHandler from '../DomHandler'; + +describe('ConnectedOverlayScrollHandler', () => { + it('When bindScrollListener triggered,getScrollableParents should be called', () => { + const element = 'element'; + const listener = 'listener'; + + const connectedOverlayScrollHandler = new ConnectedOverlayScrollHandler(element, listener); + + vi.spyOn(DomHandler, 'getScrollableParents').mockReturnValue([{ addEventListener: vi.fn() }, { addEventListener: vi.fn() }]); + + connectedOverlayScrollHandler.bindScrollListener(); + + expect(DomHandler.getScrollableParents).toHaveBeenCalledWith(element); + }); + + it('When destroy method triggered, unbindScrollListener should be called ', () => { + const element = 'element'; + const listener = 'listener'; + + const connectedOverlayScrollHandler = new ConnectedOverlayScrollHandler(element, listener); + + vi.spyOn(connectedOverlayScrollHandler, 'unbindScrollListener'); + + connectedOverlayScrollHandler.destroy(); + + expect(connectedOverlayScrollHandler.unbindScrollListener).toHaveBeenCalled(); + expect(connectedOverlayScrollHandler.element).toBeNull(); + expect(connectedOverlayScrollHandler.listener).toBeNull(); + }); +}); diff --git a/components/utils/test/DomHandler.spec.js b/components/utils/test/DomHandler.spec.js index 158d92c46..b1b1c7bb4 100644 --- a/components/utils/test/DomHandler.spec.js +++ b/components/utils/test/DomHandler.spec.js @@ -11,7 +11,7 @@ beforeEach(() => { userAgent: 'testUserAgent' }; - let testId = 'dummy-testId'; + const testId = 'dummy-testId'; mockHtmlElement = document.createElement('div'); mockHtmlElement.setAttribute('id', testId); @@ -351,10 +351,10 @@ describe('DomHandler', () => { describe('absolutePosition', () => { it('When element position bigger than viewport.height', () => { - let element = document.createElement('div'); + const element = document.createElement('div'); document.body.appendChild(element); - let target = document.createElement('div'); + const target = document.createElement('div'); target.getBoundingClientRect = () => { return { @@ -373,10 +373,10 @@ describe('DomHandler', () => { }); it('When element position smaller than viewport.height', () => { - let element = document.createElement('div'); + const element = document.createElement('div'); document.body.appendChild(element); - let target = document.createElement('div'); + const target = document.createElement('div'); target.getBoundingClientRect = () => { return { @@ -397,11 +397,11 @@ describe('DomHandler', () => { describe('relativePosition', () => { it('When element position bigger than viewport.height', () => { - let element = document.createElement('div'); + const element = document.createElement('div'); document.body.appendChild(element); - let target = document.createElement('div'); + const target = document.createElement('div'); target.getBoundingClientRect = () => { return { @@ -421,11 +421,11 @@ describe('DomHandler', () => { }); it('When element position smaller than viewport.height', () => { - let element = document.createElement('div'); + const element = document.createElement('div'); document.body.appendChild(element); - let target = document.createElement('div'); + const target = document.createElement('div'); target.getBoundingClientRect = () => { return { @@ -505,6 +505,103 @@ describe('DomHandler', () => { }); }); + describe('fadeIn', () => { + it('When element is a html html, elements opactiy should be changed after timeout', () => { + const element = document.createElement('div'); + + element.style.opacity = 0; + DomHandler.fadeIn(element, 50); + + setTimeout(function () { + expect(element.style.opacity).toBe('1'); + }, 100); + }); + }); + + describe('fadeOut', () => { + it('When element is a html html, elements opactiy should be changed after timeout', () => { + const el = document.createElement('div'); + + el.style.opacity = 1; + DomHandler.fadeOut(el, 50); + + setTimeout(() => { + expect(el.style.opacity).toBe('0'); + }, 100); + }); + }); + + describe('getFirstFocusableElement', () => { + it('When element has children, function should be return first child', () => { + const element = document.createElement('div'); + const div1 = document.createElement('div'); + const div2 = document.createElement('div'); + + div1.setAttribute('tabindex', '0'); + div2.setAttribute('tabindex', '1'); + + element.appendChild(div1); + element.appendChild(div2); + + expect(DomHandler.getFirstFocusableElement(element, 'div')).toBe(div1); + }); + + it('When element has not children, function should be return null', () => { + const element = document.createElement('div'); + + expect(DomHandler.getFirstFocusableElement(element, 'div')).toBe(null); + }); + }); + + describe('getLastFocusableElement', () => { + it('When element has children, function should be return last child', () => { + const element = document.createElement('div'); + const div1 = document.createElement('div'); + const div2 = document.createElement('div'); + + div1.setAttribute('tabindex', '0'); + div2.setAttribute('tabindex', '1'); + + element.appendChild(div1); + element.appendChild(div2); + + expect(DomHandler.getLastFocusableElement(element, 'div')).toBe(div2); + }); + + it('When element has not children, function should be return null', () => { + const element = document.createElement('div'); + + expect(DomHandler.getLastFocusableElement(element, 'div')).toBe(null); + }); + }); + + describe('getNextFocusableElement', () => { + it('When element has children, function should be return last child', () => { + const element = document.createElement('div'); + const div1 = document.createElement('div'); + const div2 = document.createElement('div'); + + div1.setAttribute('tabindex', '0'); + div2.setAttribute('tabindex', '1'); + + element.appendChild(div1); + element.appendChild(div2); + + expect(DomHandler.getNextFocusableElement(element, div1, 'div')).toBe(div2); + }); + + it('When element has not children, function should be return null', () => { + const element = document.createElement('div'); + const div1 = document.createElement('div'); + + div1.setAttribute('tabindex', '-1'); + + element.appendChild(div1); + + expect(DomHandler.getNextFocusableElement(element, div1, 'div')).toBe(null); + }); + }); + describe('getUserAgent', () => { it('When element is null or not html element', () => { expect(DomHandler.getUserAgent()).toBe('testUserAgent'); @@ -578,6 +675,21 @@ describe('DomHandler', () => { expect(DomHandler.resolveUserAgent()).toStrictEqual({ browser: '', version: '0' }); }); }); + + describe('calculateScrollbarWidth', () => { + it('When getSelection is not empty', () => { + const scrollDiv = document.createElement('div'); + + scrollDiv.className = 'p-scrollbar-measure'; + document.body.appendChild(scrollDiv); + const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; + + document.body.removeChild(scrollDiv); + + expect(DomHandler.calculateScrollbarWidth()).toBe(scrollbarWidth); + }); + }); + describe('isExist', () => { it('When element is null or undefined', () => { expect(DomHandler.isExist(null)).toBeFalsy(); @@ -628,7 +740,7 @@ describe('DomHandler', () => { }); it('When style parametre is a string', () => { - let style = 'color:red'; + const style = 'color:red'; DomHandler.applyStyle(mockHtmlElement, style);