mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-24 14:04:09 +03:00
Code Activity

restrict changes only to backdrop.js, add test

Browse Source
This commit is contained in:
GeoSot
2021-06-23 02:11:18 +03:00
parent 1eb2ffa0db
commit 34ed569610
5 changed files with 67 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/src/modal.js
+1 -3
View File
@@ -61,7 +61,6 @@ const CLASS_NAME_OPEN = 'modal-open'
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_STATIC = 'modal-static'
const CLASS_NAME_BACKDROP = 'modal-backdrop'
const SELECTOR_DIALOG = '.modal-dialog'
const SELECTOR_MODAL_BODY = '.modal-body'
@@ -203,8 +202,7 @@ class Modal extends BaseComponent {
_initializeBackDrop() {
return new Backdrop({
isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value
isAnimated: this._isAnimated(),
backdropClassName: CLASS_NAME_BACKDROP
isAnimated: this._isAnimated()
})
}
js/src/offcanvas.js
+1 -2
View File
@@ -46,7 +46,6 @@ const DefaultType = {
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_BACKDROP = 'offcanvas-backdrop'
const OPEN_SELECTOR = '.offcanvas.show'
const EVENT_SHOW = `show${EVENT_KEY}`
@@ -179,10 +178,10 @@ class Offcanvas extends BaseComponent {
_initializeBackDrop() {
return new Backdrop({
className: CLASS_NAME_BACKDROP,
isVisible: this._config.backdrop,
isAnimated: true,
rootElement: this._element.parentNode,
backdropClassName: CLASS_NAME_BACKDROP,
clickCallback: () => this.hide()
})
}
js/src/util/backdrop.js
+3 -1
View File
@@ -9,6 +9,7 @@ import EventHandler from '../dom/event-handler'
import { execute, executeAfterTransition, getElement, reflow, typeCheckConfig } from './index'
const Default = {
className: 'modal-backdrop',
isVisible: true, // if false, we use the backdrop helper without adding any element to the dom
isAnimated: false,
rootElement: 'body', // give the choice to place backdrop under different elements
@@ -16,6 +17,7 @@ const Default = {
}
const DefaultType = {
className: 'string',
isVisible: 'boolean',
isAnimated: 'boolean',
rootElement: '(element|string)',
@@ -72,7 +74,7 @@ class Backdrop {
_getElement() {
if (!this._element) {
const backdrop = document.createElement('div')
backdrop.className = this._config.backdropClassName
backdrop.className = this._config.className
if (this._config.isAnimated) {
backdrop.classList.add(CLASS_NAME_FADE)
}
js/tests/unit/util/backdrop.spec.js
+62 -61
View File
@@ -3,7 +3,6 @@ import { getTransitionDurationFromElement } from '../../../src/util/index'
import { clearFixture, getFixture } from '../../helpers/fixture'
const CLASS_BACKDROP = '.modal-backdrop'
const CLASS_NAME_BACKDROP = 'modal-backdrop'
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
@@ -27,8 +26,7 @@ describe('Backdrop', () => {
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,
backdropClassName: CLASS_NAME_BACKDROP
isAnimated: false
})
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
@@ -47,8 +45,7 @@ describe('Backdrop', () => {
it('if it is not "shown", should not append the backdrop html', done => {
const instance = new Backdrop({
isVisible: false,
isAnimated: true,
backdropClassName: CLASS_NAME_BACKDROP
isAnimated: true
})
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
@@ -62,8 +59,7 @@ describe('Backdrop', () => {
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,
backdropClassName: CLASS_NAME_BACKDROP
isAnimated: true
})
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
@@ -83,8 +79,7 @@ describe('Backdrop', () => {
it('should remove the backdrop html', done => {
const instance = new Backdrop({
isVisible: true,
isAnimated: true,
backdropClassName: CLASS_NAME_BACKDROP
isAnimated: true
})
const getElements = () => document.body.querySelectorAll(CLASS_BACKDROP)
@@ -102,8 +97,7 @@ describe('Backdrop', () => {
it('should remove "show" class', done => {
const instance = new Backdrop({
isVisible: true,
isAnimated: true,
backdropClassName: CLASS_NAME_BACKDROP
isAnimated: true
})
const elem = instance._getElement()
@@ -117,8 +111,7 @@ describe('Backdrop', () => {
it('if it is not "shown", should not try to remove Node on remove method', done => {
const instance = new Backdrop({
isVisible: false,
isAnimated: true,
backdropClassName: CLASS_NAME_BACKDROP
isAnimated: true
})
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
const spy = spyOn(instance, 'dispose').and.callThrough()
@@ -142,8 +135,7 @@ describe('Backdrop', () => {
const instance = new Backdrop({
isVisible: true,
isAnimated: true,
rootElement: wrapper,
backdropClassName: CLASS_NAME_BACKDROP
rootElement: wrapper
})
const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
@@ -165,7 +157,6 @@ describe('Backdrop', () => {
const instance = new Backdrop({
isVisible: true,
isAnimated: false,
backdropClassName: CLASS_NAME_BACKDROP,
clickCallback: () => spy()
})
const endTest = () => {
@@ -188,8 +179,7 @@ describe('Backdrop', () => {
it('if it is animated, should show and hide backdrop after counting transition duration', done => {
const instance = new Backdrop({
isVisible: true,
isAnimated: true,
backdropClassName: CLASS_NAME_BACKDROP
isAnimated: true
})
const spy2 = jasmine.createSpy('spy2')
@@ -212,8 +202,7 @@ describe('Backdrop', () => {
const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
const instance = new Backdrop({
isVisible: true,
isAnimated: false,
backdropClassName: CLASS_NAME_BACKDROP
isAnimated: false
})
const spy2 = jasmine.createSpy('spy2')
@@ -230,8 +219,7 @@ describe('Backdrop', () => {
it('if it is not "shown", should not call delay callbacks', done => {
const instance = new Backdrop({
isVisible: false,
isAnimated: true,
backdropClassName: CLASS_NAME_BACKDROP
isAnimated: true
})
const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
@@ -242,49 +230,62 @@ describe('Backdrop', () => {
})
})
})
describe('rootElement initialization', () => {
it('Should be appended on "document.body" by default', done => {
const instance = new Backdrop({
isVisible: true,
backdropClassName: CLASS_NAME_BACKDROP
describe('Config', () => {
describe('rootElement initialization', () => {
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()
})
})
const getElement = () => document.querySelector(CLASS_BACKDROP)
instance.show(() => {
expect(getElement().parentElement).toEqual(document.body)
done()
it('Should find the rootElement if passed as a string', done => {
const instance = new Backdrop({
isVisible: true,
rootElement: 'body'
})
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()
})
})
})
it('Should find the rootElement if passed as a string', done => {
const instance = new Backdrop({
isVisible: true,
rootElement: 'body',
backdropClassName: CLASS_NAME_BACKDROP
})
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,
backdropClassName: CLASS_NAME_BACKDROP
})
const getElement = () => document.querySelector(CLASS_BACKDROP)
instance.show(() => {
expect(getElement().parentElement).toEqual(wrapper)
done()
describe('ClassName', () => {
it('Should be able to have different classNames than default', done => {
const instance = new Backdrop({
isVisible: true,
className: 'foo'
})
const getElement = () => document.querySelector('.foo')
instance.show(() => {
expect(getElement()).toEqual(instance._getElement())
instance.dispose()
done()
})
})
})
})
scss/_offcanvas.scss
-4
View File
@@ -14,10 +14,6 @@
@include transition(transform $offcanvas-transition-duration ease-in-out);
}
.offcanvas-backdrop {
@extend .modal-backdrop;
}
.offcanvas-header {
display: flex;
align-items: center;