Merge branch 'main' into jo-docs-thanks-pagejo-docs-thanks-page

4 files changed, 678 insertions, 3 deletions

diff --git a/js/tests/unit/util/backdrop.spec.js b/js/tests/unit/util/backdrop.spec.js
new file mode 100644
index 000000000..0a20a13bc
--- /dev/null
+++ b/js/tests/unit/util/backdrop.spec.js
@@ -0,0 +1,241 @@
+import Backdrop from '../../../src/util/backdrop'
+import { getTransitionDurationFromElement } from '../../../src/util/index'
+import { clearFixture, getFixture } from '../../helpers/fixture'
+
+const CLASS_BACKDROP = '.modal-backdrop'
+const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_SHOW = 'show'
+
+describe('Backdrop', () => {
+  let fixtureEl
+
+  beforeAll(() => {
+    fixtureEl = getFixture()
+  })
+
+  afterEach(() => {
+    clearFixture()
+    const list = document.querySelectorAll(CLASS_BACKDROP)
+
+    list.forEach(el => {
+      document.body.removeChild(el)
+    })
+  })
+
+  describe('show', () => {
+    it('if it is "shown", should append the backdrop html once, on show, and contain "show" class', done => {
+      const instance = new Backdrop({
+        isVisible: true,
+        isAnimated: false
+      })
+      const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+
+      expect(getElements().length).toEqual(0)
+
+      instance.show()
+      instance.show(() => {
+        expect(getElements().length).toEqual(1)
+        getElements().forEach(el => {
+          expect(el.classList.contains(CLASS_NAME_SHOW)).toEqual(true)
+        })
+        done()
+      })
+    })
+
+    it('if it is not "shown", should not append the backdrop html', done => {
+      const instance = new Backdrop({
+        isVisible: false,
+        isAnimated: true
+      })
+      const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+
+      expect(getElements().length).toEqual(0)
+      instance.show(() => {
+        expect(getElements().length).toEqual(0)
+        done()
+      })
+    })
+
+    it('if it is "shown" and "animated", should append the backdrop html once, and contain "fade" class', done => {
+      const instance = new Backdrop({
+        isVisible: true,
+        isAnimated: true
+      })
+      const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+
+      expect(getElements().length).toEqual(0)
+
+      instance.show(() => {
+        expect(getElements().length).toEqual(1)
+        getElements().forEach(el => {
+          expect(el.classList.contains(CLASS_NAME_FADE)).toEqual(true)
+        })
+        done()
+      })
+    })
+
+    it('Should be appended on "document.body" by default', done => {
+      const instance = new Backdrop({
+        isVisible: true
+      })
+      const getElement = () => document.querySelector(CLASS_BACKDROP)
+      instance.show(() => {
+        expect(getElement().parentElement).toEqual(document.body)
+        done()
+      })
+    })
+
+    it('Should appended on any element given by the proper config', done => {
+      fixtureEl.innerHTML = [
+        '<div id="wrapper">',
+        '</div>'
+      ].join('')
+
+      const wrapper = fixtureEl.querySelector('#wrapper')
+      const instance = new Backdrop({
+        isVisible: true,
+        rootElement: wrapper
+      })
+      const getElement = () => document.querySelector(CLASS_BACKDROP)
+      instance.show(() => {
+        expect(getElement().parentElement).toEqual(wrapper)
+        done()
+      })
+    })
+  })
+
+  describe('hide', () => {
+    it('should remove the backdrop html', done => {
+      const instance = new Backdrop({
+        isVisible: true,
+        isAnimated: true
+      })
+
+      const getElements = () => document.body.querySelectorAll(CLASS_BACKDROP)
+
+      expect(getElements().length).toEqual(0)
+      instance.show(() => {
+        expect(getElements().length).toEqual(1)
+        instance.hide(() => {
+          expect(getElements().length).toEqual(0)
+          done()
+        })
+      })
+    })
+
+    it('should remove "show" class', done => {
+      const instance = new Backdrop({
+        isVisible: true,
+        isAnimated: true
+      })
+      const elem = instance._getElement()
+
+      instance.show()
+      instance.hide(() => {
+        expect(elem.classList.contains(CLASS_NAME_SHOW)).toEqual(false)
+        done()
+      })
+    })
+
+    it('if it is not "shown", should not try to remove Node on remove method', done => {
+      const instance = new Backdrop({
+        isVisible: false,
+        isAnimated: true
+      })
+      const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+      const spy = spyOn(instance, 'dispose').and.callThrough()
+
+      expect(getElements().length).toEqual(0)
+      expect(instance._isAppended).toEqual(false)
+      instance.show(() => {
+        instance.hide(() => {
+          expect(getElements().length).toEqual(0)
+          expect(spy).not.toHaveBeenCalled()
+          expect(instance._isAppended).toEqual(false)
+          done()
+        })
+      })
+    })
+  })
+
+  describe('click callback', () => {
+    it('it should execute callback on click', done => {
+      const spy = jasmine.createSpy('spy')
+
+      const instance = new Backdrop({
+        isVisible: true,
+        isAnimated: false,
+        clickCallback: () => spy()
+      })
+      const endTest = () => {
+        setTimeout(() => {
+          expect(spy).toHaveBeenCalled()
+          done()
+        }, 10)
+      }
+
+      instance.show(() => {
+        const clickEvent = document.createEvent('MouseEvents')
+        clickEvent.initEvent('mousedown', true, true)
+        document.querySelector(CLASS_BACKDROP).dispatchEvent(clickEvent)
+        endTest()
+      })
+    })
+  })
+
+  describe('animation callbacks', () => {
+    it('if it is animated, should show and hide backdrop after counting transition duration', done => {
+      const instance = new Backdrop({
+        isVisible: true,
+        isAnimated: true
+      })
+      const spy2 = jasmine.createSpy('spy2')
+
+      const execDone = () => {
+        setTimeout(() => {
+          expect(spy2).toHaveBeenCalledTimes(2)
+          done()
+        }, 10)
+      }
+
+      instance.show(spy2)
+      instance.hide(() => {
+        spy2()
+        execDone()
+      })
+      expect(spy2).not.toHaveBeenCalled()
+    })
+
+    it('if it is not animated, should show and hide backdrop without delay', done => {
+      const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
+      const instance = new Backdrop({
+        isVisible: true,
+        isAnimated: false
+      })
+      const spy2 = jasmine.createSpy('spy2')
+
+      instance.show(spy2)
+      instance.hide(spy2)
+
+      setTimeout(() => {
+        expect(spy2).toHaveBeenCalled()
+        expect(spy).not.toHaveBeenCalled()
+        done()
+      }, 10)
+    })
+
+    it('if it is not "shown", should not call delay callbacks', done => {
+      const instance = new Backdrop({
+        isVisible: false,
+        isAnimated: true
+      })
+      const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
+
+      instance.show()
+      instance.hide(() => {
+        expect(spy).not.toHaveBeenCalled()
+        done()
+      })
+    })
+  })
+})
diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js
index ecad59b4d..11b6f7fa4 100644
--- a/js/tests/unit/util/index.spec.js
+++ b/js/tests/unit/util/index.spec.js
@@ -57,6 +57,28 @@ describe('Util', () => {
       expect(Util.getSelectorFromElement(testEl)).toEqual('.target')
     })
 
+    it('should return null if a selector from a href is a url without an anchor', () => {
+      fixtureEl.innerHTML = [
+        '<a id="test" data-bs-target="#" href="foo/bar.html"></a>',
+        '<div class="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(Util.getSelectorFromElement(testEl)).toBeNull()
+    })
+
+    it('should return the anchor if a selector from a href is a url', () => {
+      fixtureEl.innerHTML = [
+        '<a id="test" data-bs-target="#" href="foo/bar.html#target"></a>',
+        '<div id="target"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(Util.getSelectorFromElement(testEl)).toEqual('#target')
+    })
+
     it('should return null if selector not found', () => {
       fixtureEl.innerHTML = '<a id="test" href=".target"></a>'
 
@@ -212,7 +234,7 @@ describe('Util', () => {
 
       expect(() => {
         Util.typeCheckConfig(namePlugin, config, defaultType)
-      }).toThrow(new Error('COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".'))
+      }).toThrowError(TypeError, 'COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".')
     })
 
     it('should return null stringified when null is passed', () => {
@@ -295,6 +317,114 @@ describe('Util', () => {
     })
   })
 
+  describe('isDisabled', () => {
+    it('should return true if the element is not defined', () => {
+      expect(Util.isDisabled(null)).toEqual(true)
+      expect(Util.isDisabled(undefined)).toEqual(true)
+      expect(Util.isDisabled()).toEqual(true)
+    })
+
+    it('should return true if the element provided is not a dom element', () => {
+      expect(Util.isDisabled({})).toEqual(true)
+      expect(Util.isDisabled('test')).toEqual(true)
+    })
+
+    it('should return true if the element has disabled attribute', () => {
+      fixtureEl.innerHTML = [
+        '<div>',
+        '  <div id="element" disabled="disabled"></div>',
+        '  <div id="element1" disabled="true"></div>',
+        '  <div id="element2" disabled></div>',
+        '</div>'
+      ].join('')
+
+      const div = fixtureEl.querySelector('#element')
+      const div1 = fixtureEl.querySelector('#element1')
+      const div2 = fixtureEl.querySelector('#element2')
+
+      expect(Util.isDisabled(div)).toEqual(true)
+      expect(Util.isDisabled(div1)).toEqual(true)
+      expect(Util.isDisabled(div2)).toEqual(true)
+    })
+
+    it('should return false if the element has disabled attribute with "false" value, or doesn\'t have attribute', () => {
+      fixtureEl.innerHTML = [
+        '<div>',
+        '  <div id="element" disabled="false"></div>',
+        '  <div id="element1" ></div>',
+        '</div>'
+      ].join('')
+
+      const div = fixtureEl.querySelector('#element')
+      const div1 = fixtureEl.querySelector('#element1')
+
+      expect(Util.isDisabled(div)).toEqual(false)
+      expect(Util.isDisabled(div1)).toEqual(false)
+    })
+
+    it('should return false if the element is not disabled ', () => {
+      fixtureEl.innerHTML = [
+        '<div>',
+        '  <button id="button"></button>',
+        '  <select id="select"></select>',
+        '  <select id="input"></select>',
+        '</div>'
+      ].join('')
+
+      const el = selector => fixtureEl.querySelector(selector)
+
+      expect(Util.isDisabled(el('#button'))).toEqual(false)
+      expect(Util.isDisabled(el('#select'))).toEqual(false)
+      expect(Util.isDisabled(el('#input'))).toEqual(false)
+    })
+    it('should return true if the element has disabled attribute', () => {
+      fixtureEl.innerHTML = [
+        '<div>',
+        '  <input id="input" disabled="disabled"/>',
+        '  <input id="input1" disabled="disabled"/>',
+        '  <button id="button" disabled="true"></button>',
+        '  <button id="button1" disabled="disabled"></button>',
+        '  <button id="button2" disabled></button>',
+        '  <select id="select" disabled></select>',
+        '  <select id="input" disabled></select>',
+        '</div>'
+      ].join('')
+
+      const el = selector => fixtureEl.querySelector(selector)
+
+      expect(Util.isDisabled(el('#input'))).toEqual(true)
+      expect(Util.isDisabled(el('#input1'))).toEqual(true)
+      expect(Util.isDisabled(el('#button'))).toEqual(true)
+      expect(Util.isDisabled(el('#button1'))).toEqual(true)
+      expect(Util.isDisabled(el('#button2'))).toEqual(true)
+      expect(Util.isDisabled(el('#input'))).toEqual(true)
+    })
+
+    it('should return true if the element has class "disabled"', () => {
+      fixtureEl.innerHTML = [
+        '<div>',
+        '  <div id="element" class="disabled"></div>',
+        '</div>'
+      ].join('')
+
+      const div = fixtureEl.querySelector('#element')
+
+      expect(Util.isDisabled(div)).toEqual(true)
+    })
+
+    it('should return true if the element has class "disabled" but disabled attribute is false', () => {
+      fixtureEl.innerHTML = [
+        '<div>',
+        '  <input id="input" class="disabled" disabled="false"/>',
+        '</div>'
+      ].join('')
+
+      const div = fixtureEl.querySelector('#input')
+
+      expect(Util.isDisabled(div)).toEqual(true)
+    })
+  })
+
   describe('findShadowRoot', () => {
     it('should return null if shadow dom is not available', () => {
       // Only for newer browsers
@@ -347,8 +477,8 @@ describe('Util', () => {
   })
 
   describe('noop', () => {
-    it('should return a function', () => {
-      expect(typeof Util.noop()).toEqual('function')
+    it('should be a function', () => {
+      expect(typeof Util.noop).toEqual('function')
     })
   })
 
@@ -413,4 +543,37 @@ describe('Util', () => {
       expect(spy).toHaveBeenCalled()
     })
   })
+
+  describe('defineJQueryPlugin', () => {
+    const fakejQuery = { fn: {} }
+
+    beforeEach(() => {
+      Object.defineProperty(window, 'jQuery', {
+        value: fakejQuery,
+        writable: true
+      })
+    })
+
+    afterEach(() => {
+      window.jQuery = undefined
+    })
+
+    it('should define a plugin on the jQuery instance', () => {
+      const pluginMock = function () {}
+      pluginMock.jQueryInterface = function () {}
+
+      Util.defineJQueryPlugin('test', pluginMock)
+      expect(fakejQuery.fn.test).toBe(pluginMock.jQueryInterface)
+      expect(fakejQuery.fn.test.Constructor).toBe(pluginMock)
+      expect(typeof fakejQuery.fn.test.noConflict).toEqual('function')
+    })
+  })
+
+  describe('execute', () => {
+    it('should execute if arg is function', () => {
+      const spy = jasmine.createSpy('spy')
+      Util.execute(spy)
+      expect(spy).toHaveBeenCalled()
+    })
+  })
 })
diff --git a/js/tests/unit/util/sanitizer.spec.js b/js/tests/unit/util/sanitizer.spec.js
index 869b8c561..7379d221f 100644
--- a/js/tests/unit/util/sanitizer.spec.js
+++ b/js/tests/unit/util/sanitizer.spec.js
@@ -66,5 +66,15 @@ describe('Sanitizer', () => {
       expect(result).toEqual(template)
       expect(DOMParser.prototype.parseFromString).not.toHaveBeenCalled()
     })
+
+    it('should allow multiple sanitation passes of the same template', () => {
+      const template = '<img src="test.jpg">'
+
+      const firstResult = sanitizeHtml(template, DefaultAllowlist, null)
+      const secondResult = sanitizeHtml(template, DefaultAllowlist, null)
+
+      expect(firstResult).toContain('src')
+      expect(secondResult).toContain('src')
+    })
   })
 })
diff --git a/js/tests/unit/util/scrollbar.spec.js b/js/tests/unit/util/scrollbar.spec.js
new file mode 100644
index 000000000..e09a37ce7
--- /dev/null
+++ b/js/tests/unit/util/scrollbar.spec.js
@@ -0,0 +1,261 @@
+import * as Scrollbar from '../../../src/util/scrollbar'
+import { clearBodyAndDocument, clearFixture, getFixture } from '../../helpers/fixture'
+import Manipulator from '../../../src/dom/manipulator'
+
+describe('ScrollBar', () => {
+  let fixtureEl
+  const parseInt = arg => Number.parseInt(arg, 10)
+  const getRightPadding = el => parseInt(window.getComputedStyle(el).paddingRight)
+  const getOverFlow = el => el.style.overflow
+  const getPaddingAttr = el => Manipulator.getDataAttribute(el, 'padding-right')
+  const getOverFlowAttr = el => Manipulator.getDataAttribute(el, 'overflow')
+  const windowCalculations = () => {
+    return {
+      htmlClient: document.documentElement.clientWidth,
+      htmlOffset: document.documentElement.offsetWidth,
+      docClient: document.body.clientWidth,
+      htmlBound: document.documentElement.getBoundingClientRect().width,
+      bodyBound: document.body.getBoundingClientRect().width,
+      window: window.innerWidth,
+      width: Math.abs(window.innerWidth - document.documentElement.clientWidth)
+    }
+  }
+
+  const isScrollBarHidden = () => { // IOS devices, Android devices and Browsers on Mac, hide scrollbar by default and appear it, only while scrolling. So the tests for scrollbar would fail
+    const calc = windowCalculations()
+    return calc.htmlClient === calc.htmlOffset && calc.htmlClient === calc.window
+  }
+
+  beforeAll(() => {
+    fixtureEl = getFixture()
+    // custom fixture to avoid extreme style values
+    fixtureEl.removeAttribute('style')
+  })
+
+  afterAll(() => {
+    fixtureEl.remove()
+  })
+
+  afterEach(() => {
+    clearFixture()
+    clearBodyAndDocument()
+  })
+
+  beforeEach(() => {
+    clearBodyAndDocument()
+  })
+
+  describe('isBodyOverflowing', () => {
+    it('should return true if body is overflowing', () => {
+      document.documentElement.style.overflowY = 'scroll'
+      document.body.style.overflowY = 'scroll'
+      fixtureEl.innerHTML = [
+        '<div style="height: 110vh; width: 100%"></div>'
+      ].join('')
+      const result = Scrollbar.isBodyOverflowing()
+
+      if (isScrollBarHidden()) {
+        expect(result).toEqual(false)
+      } else {
+        expect(result).toEqual(true)
+      }
+    })
+
+    it('should return false if body is overflowing', () => {
+      document.documentElement.style.overflowY = 'hidden'
+      document.body.style.overflowY = 'hidden'
+      fixtureEl.innerHTML = [
+        '<div style="height: 110vh; width: 100%"></div>'
+      ].join('')
+      const result = Scrollbar.isBodyOverflowing()
+
+      expect(result).toEqual(false)
+    })
+  })
+
+  describe('getWidth', () => {
+    it('should return an integer greater than zero, if body is overflowing', () => {
+      document.documentElement.style.overflowY = 'scroll'
+      document.body.style.overflowY = 'scroll'
+      fixtureEl.innerHTML = [
+        '<div style="height: 110vh; width: 100%"></div>'
+      ].join('')
+      const result = Scrollbar.getWidth()
+
+      if (isScrollBarHidden()) {
+        expect(result).toBe(0)
+      } else {
+        expect(result).toBeGreaterThan(1)
+      }
+    })
+
+    it('should return 0 if body is not overflowing', () => {
+      document.documentElement.style.overflowY = 'hidden'
+      document.body.style.overflowY = 'hidden'
+      fixtureEl.innerHTML = [
+        '<div style="height: 110vh; width: 100%"></div>'
+      ].join('')
+
+      const result = Scrollbar.getWidth()
+
+      expect(result).toEqual(0)
+    })
+  })
+
+  describe('hide - reset', () => {
+    it('should adjust the inline padding of fixed elements which are full-width', done => {
+      fixtureEl.innerHTML = [
+        '<div style="height: 110vh; width: 100%">' +
+        '<div class="fixed-top" id="fixed1" style="padding-right: 0px; width: 100vw"></div>',
+        '<div class="fixed-top" id="fixed2" style="padding-right: 5px; width: 100vw"></div>',
+        '</div>'
+      ].join('')
+      document.documentElement.style.overflowY = 'scroll'
+
+      const fixedEl = fixtureEl.querySelector('#fixed1')
+      const fixedEl2 = fixtureEl.querySelector('#fixed2')
+      const originalPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
+      const originalPadding2 = Number.parseInt(window.getComputedStyle(fixedEl2).paddingRight, 10)
+      const expectedPadding = originalPadding + Scrollbar.getWidth()
+      const expectedPadding2 = originalPadding2 + Scrollbar.getWidth()
+
+      Scrollbar.hide()
+
+      let currentPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
+      let currentPadding2 = Number.parseInt(window.getComputedStyle(fixedEl2).paddingRight, 10)
+      expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-bs-padding-right')
+      expect(fixedEl2.getAttribute('data-bs-padding-right')).toEqual('5px', 'original fixed element padding should be stored in data-bs-padding-right')
+      expect(currentPadding).toEqual(expectedPadding, 'fixed element padding should be adjusted while opening')
+      expect(currentPadding2).toEqual(expectedPadding2, 'fixed element padding should be adjusted while opening')
+
+      Scrollbar.reset()
+      currentPadding = Number.parseInt(window.getComputedStyle(fixedEl).paddingRight, 10)
+      currentPadding2 = Number.parseInt(window.getComputedStyle(fixedEl2).paddingRight, 10)
+      expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual(null, 'data-bs-padding-right should be cleared after closing')
+      expect(fixedEl2.getAttribute('data-bs-padding-right')).toEqual(null, 'data-bs-padding-right should be cleared after closing')
+      expect(currentPadding).toEqual(originalPadding, 'fixed element padding should be reset after closing')
+      expect(currentPadding2).toEqual(originalPadding2, 'fixed element padding should be reset after closing')
+      done()
+    })
+
+    it('should adjust the inline margin of sticky elements', done => {
+      fixtureEl.innerHTML = [
+        '<div style="height: 110vh">' +
+        '<div class="sticky-top" style="margin-right: 0px; width: 100vw; height: 10px"></div>',
+        '</div>'
+      ].join('')
+      document.documentElement.style.overflowY = 'scroll'
+
+      const stickyTopEl = fixtureEl.querySelector('.sticky-top')
+      const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+      const expectedMargin = originalMargin - Scrollbar.getWidth()
+      Scrollbar.hide()
+
+      let currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+      expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual('0px', 'original sticky element margin should be stored in data-bs-margin-right')
+      expect(currentMargin).toEqual(expectedMargin, 'sticky element margin should be adjusted while opening')
+
+      Scrollbar.reset()
+      currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+
+      expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual(null, 'data-bs-margin-right should be cleared after closing')
+      expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing')
+      done()
+    })
+
+    it('should not adjust the inline margin and padding of sticky and fixed elements when element do not have full width', () => {
+      fixtureEl.innerHTML = [
+        '<div class="sticky-top" style="margin-right: 0px; padding-right: 0px; width: 50vw"></div>'
+      ].join('')
+
+      const stickyTopEl = fixtureEl.querySelector('.sticky-top')
+      const originalMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+      const originalPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10)
+
+      Scrollbar.hide()
+
+      const currentMargin = Number.parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10)
+      const currentPadding = Number.parseInt(window.getComputedStyle(stickyTopEl).paddingRight, 10)
+
+      expect(currentMargin).toEqual(originalMargin, 'sticky element\'s margin should not be adjusted while opening')
+      expect(currentPadding).toEqual(originalPadding, 'sticky element\'s padding should not be adjusted while opening')
+
+      Scrollbar.reset()
+    })
+
+    describe('Body Handling', () => {
+      it('should hide scrollbar and reset it to its initial value', () => {
+        const styleSheetPadding = '7px'
+        fixtureEl.innerHTML = [
+          '<style>',
+          '  body {',
+          `       padding-right: ${styleSheetPadding} }`,
+          '  }',
+          '</style>'
+        ].join('')
+
+        const el = document.body
+        const inlineStylePadding = '10px'
+        el.style.paddingRight = inlineStylePadding
+
+        const originalPadding = getRightPadding(el)
+        expect(originalPadding).toEqual(parseInt(inlineStylePadding)) // Respect only the inline style as it has prevails this of css
+        const originalOverFlow = 'auto'
+        el.style.overflow = originalOverFlow
+        const scrollBarWidth = Scrollbar.getWidth()
+
+        Scrollbar.hide()
+
+        const currentPadding = getRightPadding(el)
+
+        expect(currentPadding).toEqual(scrollBarWidth + originalPadding)
+        expect(currentPadding).toEqual(scrollBarWidth + parseInt(inlineStylePadding))
+        expect(getPaddingAttr(el)).toEqual(inlineStylePadding)
+        expect(getOverFlow(el)).toEqual('hidden')
+        expect(getOverFlowAttr(el)).toEqual(originalOverFlow)
+
+        Scrollbar.reset()
+
+        const currentPadding1 = getRightPadding(el)
+        expect(currentPadding1).toEqual(originalPadding)
+        expect(getPaddingAttr(el)).toEqual(null)
+        expect(getOverFlow(el)).toEqual(originalOverFlow)
+        expect(getOverFlowAttr(el)).toEqual(null)
+      })
+
+      it('should hide scrollbar and reset it to its initial value - respecting css rules', () => {
+        const styleSheetPadding = '7px'
+        fixtureEl.innerHTML = [
+          '<style>',
+          '  body {',
+          `       padding-right: ${styleSheetPadding} }`,
+          '  }',
+          '</style>'
+        ].join('')
+        const el = document.body
+        const originalPadding = getRightPadding(el)
+        const originalOverFlow = 'scroll'
+        el.style.overflow = originalOverFlow
+        const scrollBarWidth = Scrollbar.getWidth()
+
+        Scrollbar.hide()
+
+        const currentPadding = getRightPadding(el)
+
+        expect(currentPadding).toEqual(scrollBarWidth + originalPadding)
+        expect(currentPadding).toEqual(scrollBarWidth + parseInt(styleSheetPadding))
+        expect(getPaddingAttr(el)).toBeNull() // We do not have to keep css padding
+        expect(getOverFlow(el)).toEqual('hidden')
+        expect(getOverFlowAttr(el)).toEqual(originalOverFlow)
+
+        Scrollbar.reset()
+
+        const currentPadding1 = getRightPadding(el)
+        expect(currentPadding1).toEqual(originalPadding)
+        expect(getPaddingAttr(el)).toEqual(null)
+        expect(getOverFlow(el)).toEqual(originalOverFlow)
+        expect(getOverFlowAttr(el)).toEqual(null)
+      })
+    })
+  })
+})