rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00
Code Issues Actions Packages Releases Activity

fix(manipulator): increase coverage for manipulator

Browse Source
This commit is contained in:
Johann-S 2018-06-09 21:11:05 +02:00 committed by XhmikosR
parent 4d6e41dea6
commit 64591b3722
12 changed files with 286 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/src/carousel.js
View File

@ -562,8 +562,8 @@ class Carousel {
}
const config = {
...Util.getDataAttributes(target),
...Util.getDataAttributes(this)
...Manipulator.getDataAttributes(target),
...Manipulator.getDataAttributes(this)
}
const slideIndex = this.getAttribute('data-slide-to')

5
js/src/collapse.js
View File

@ -7,6 +7,7 @@
import Data from './dom/data'
import EventHandler from './dom/eventHandler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selectorEngine'
import Util from './util'
@ -347,7 +348,7 @@ class Collapse {
let data = Data.getData(element, DATA_KEY)
const _config = {
...Default,
...Util.getDataAttributes(element),
...Manipulator.getDataAttributes(element),
...typeof config === 'object' && config ? config : {}
}
@ -391,7 +392,7 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
event.preventDefault()
}
const triggerData = Util.getDataAttributes(this)
const triggerData = Manipulator.getDataAttributes(this)
const selector = Util.getSelectorFromElement(this)
const selectorElements = Util.makeArray(SelectorEngine.find(selector))

80
js/src/dom/manipulator.js
View File

@ -1,12 +1,32 @@
import Util from '../util'
/**
* --------------------------------------------------------------------------
* Bootstrap (v4.0.0-beta): dom/manipulator.js
* Bootstrap (v4.1.1): dom/manipulator.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* --------------------------------------------------------------------------
*/
const regexDataKey = /[A-Z]/g
function normalizeData(val) {
if (val === 'true') {
return true
} else if (val === 'false') {
return false
} else if (val === 'null') {
return null
} else if (val === Number(val).toString()) {
return Number(val)
} else if (val === '') {
return null
}
return val
}
function normalizeDataKey(key) {
return key.replace(regexDataKey, (chr) => chr.toLowerCase())
}
const Manipulator = {
setChecked(input, val) {
if (input instanceof HTMLInputElement) {
@ -23,21 +43,55 @@ const Manipulator = {
},
setDataAttribute(element, key, value) {
const $ = Util.jQuery
if (typeof $ !== 'undefined') {
$(element).data(key, value)
}
element.setAttribute(`data-${key.replace(/[A-Z]/g, (chr) => `-${chr.toLowerCase()}`)}`, value)
element.setAttribute(`data-${normalizeDataKey(key)}`, value)
},
removeDataAttribute(element, key) {
const $ = Util.jQuery
if (typeof $ !== 'undefined') {
$(element).removeData(key)
element.removeAttribute(`data-${normalizeDataKey(key)}`)
},
getDataAttributes(element) {
if (typeof element === 'undefined' || element === null) {
return {}
}
element.removeAttribute(`data-${key.replace(/[A-Z]/g, (chr) => `-${chr.toLowerCase()}`)}`)
let attributes
if (Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'dataset')) {
attributes = {
...element.dataset
}
} else {
attributes = {}
for (let i = 0; i < element.attributes.length; i++) {
const attribute = element.attributes[i]
if (attribute.nodeName.indexOf('data-') !== -1) {
// remove 'data-' part of the attribute name
const attributeName = attribute
.nodeName
.substring('data-'.length)
.replace(/-./g, (str) => str.charAt(1).toUpperCase())
attributes[attributeName] = attribute.nodeValue
}
}
}
for (const key in attributes) {
if (!Object.prototype.hasOwnProperty.call(attributes, key)) {
continue
}
attributes[key] = normalizeData(attributes[key])
}
return attributes
},
getDataAttribute(element, key) {
return normalizeData(element
.getAttribute(`data-${normalizeDataKey(key)}`)
)
},
offset(element) {

2
js/src/dropdown.js
View File

@ -267,7 +267,7 @@ class Dropdown {
_getConfig(config) {
config = {
...this.constructor.Default,
...Util.getDataAttributes(this._element),
...Manipulator.getDataAttributes(this._element),
...config
}

20
js/src/modal.js
View File

@ -473,7 +473,7 @@ class Modal {
// Restore fixed content padding
Util.makeArray(SelectorEngine.find(Selector.FIXED_CONTENT))
.forEach((element) => {
const padding = Util.getDataAttribute(element, 'padding-right')
const padding = Manipulator.getDataAttribute(element, 'padding-right')
if (typeof padding !== 'undefined') {
Manipulator.removeDataAttribute(element, 'padding-right')
element.style.paddingRight = padding
@ -483,7 +483,7 @@ class Modal {
// Restore sticky content and navbar-toggler margin
Util.makeArray(SelectorEngine.find(`${Selector.STICKY_CONTENT}`))
.forEach((element) => {
const margin = Util.getDataAttribute(element, 'margin-right')
const margin = Manipulator.getDataAttribute(element, 'margin-right')
if (typeof margin !== 'undefined') {
Manipulator.removeDataAttribute(element, 'margin-right')
element.style.marginRight = margin
@ -491,17 +491,13 @@ class Modal {
})
// Restore body padding
const padding = Util.getDataAttribute(document.body, 'padding-right')
const padding = Manipulator.getDataAttribute(document.body, 'padding-right')
if (typeof padding !== 'undefined') {
Manipulator.removeDataAttribute(document.body, 'padding-right')
document.body.style.paddingRight = padding
} else {
document.body.style.paddingRight = ''
}
static _getInstance(element) {
return Data.getData(element, DATA_KEY)
}
}
_getScrollbarWidth() { // thx d.walsh
@ -520,7 +516,7 @@ class Modal {
let data = Data.getData(this, DATA_KEY)
const _config = {
...Default,
...Util.getDataAttributes(this),
...Manipulator.getDataAttributes(this),
...typeof config === 'object' && config ? config : {}
}
@ -539,6 +535,10 @@ class Modal {
}
})
}
static _getInstance(element) {
return Data.getData(element, DATA_KEY)
}
}
/**
@ -557,8 +557,8 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
const config = Data.getData(target, DATA_KEY)
? 'toggle' : {
...Util.getDataAttributes(target),
...Util.getDataAttributes(this)
...Manipulator.getDataAttributes(target),
...Manipulator.getDataAttributes(this)
}
if (this.tagName === 'A' || this.tagName === 'AREA') {

2
js/src/scrollspy.js
View File

@ -322,7 +322,7 @@ class ScrollSpy {
EventHandler.on(window, Event.LOAD_DATA_API, () => {
Util.makeArray(SelectorEngine.find(Selector.DATA_SPY))
.forEach((spy) => new ScrollSpy(spy, Util.getDataAttributes(spy)))
.forEach((spy) => new ScrollSpy(spy, Manipulator.getDataAttributes(spy)))
})
/**

11
js/src/tooltip.js
View File

@ -11,6 +11,7 @@ import {
} from './tools/sanitizer'
import Data from './dom/data'
import EventHandler from './dom/eventHandler'
import Manipulator from './dom/manipulator'
import Popper from 'popper.js'
import SelectorEngine from './dom/selectorEngine'
import Util from './util'
@ -671,7 +672,7 @@ class Tooltip {
}
_getConfig(config) {
const dataAttributes = Util.getDataAttributes(this.element)
const dataAttributes = Manipulator.getDataAttributes(this.element)
Object.keys(dataAttributes)
.forEach((dataAttr) => {
@ -741,10 +742,6 @@ class Tooltip {
.map((token) => token.trim())
.forEach((tClass) => tip.classList.remove(tClass))
}
static _getInstance(element) {
return Data.getData(element, DATA_KEY)
}
}
_handlePopperPlacementChange(popperData) {
@ -793,6 +790,10 @@ class Tooltip {
}
})
}
static _getInstance(element) {
return Data.getData(element, DATA_KEY)
}
}
/**

49
js/src/util.js
View File

@ -22,20 +22,6 @@ function toType(obj) {
return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase()
}
function normalizeData(val) {
if (val === 'true') {
return true
} else if (val === 'false') {
return false
} else if (val === 'null') {
return null
} else if (val === Number(val).toString()) {
return Number(val)
}
return val
}
const Util = {
TRANSITION_END: 'bsTransitionEnd',
@ -164,41 +150,6 @@ const Util = {
return [nodeList]
},
getDataAttributes(element) {
if (typeof element === 'undefined' || element === null) {
return {}
}
let attributes
if (Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'dataset')) {
attributes = this.extend({}, element.dataset)
} else {
attributes = {}
for (let i = 0; i < element.attributes.length; i++) {
const attribute = element.attributes[i]
if (attribute.nodeName.indexOf('data-') !== -1) {
// remove 'data-' part of the attribute name
const attributeName = attribute.nodeName.substring('data-'.length).replace(/-./g, (str) => str.charAt(1).toUpperCase())
attributes[attributeName] = attribute.nodeValue
}
}
}
for (const key in attributes) {
if (!Object.prototype.hasOwnProperty.call(attributes, key)) {
continue
}
attributes[key] = normalizeData(attributes[key])
}
return attributes
},
getDataAttribute(element, key) {
return normalizeData(element.getAttribute(`data-${key.replace(/[A-Z]/g, (chr) => `-${chr.toLowerCase()}`)}`))
},
isVisible(element) {
if (typeof element === 'undefined' || element === null) {
return false

5
js/tests/index.html
View File

@ -97,10 +97,11 @@
</script>
<!-- Transpiled Plugins -->
<script src="../dist/dom/polyfill.js"></script>
<script src="../dist/dom/manipulator.js"></script>
<script src="../dist/dom/eventHandler.js"></script>
<script src="../dist/dom/selectorEngine.js"></script>
<script src="../dist/dom/data.js"></script>
<script src="../dist/dom/manipulator.js"></script>
<script src="../dist/util.js"></script>
<script src="../dist/alert.js"></script>
<script src="../dist/button.js"></script>
@ -116,6 +117,8 @@
<!-- Unit Tests -->
<script src="unit/dom/eventHandler.js"></script>
<script src="unit/dom/manipulator.js"></script>
<script src="unit/dom/data.js"></script>
<script src="unit/alert.js"></script>
<script src="unit/button.js"></script>
<script src="unit/carousel.js"></script>

10
js/tests/karma.conf.js
View File

@ -140,6 +140,16 @@ if (bundle) {
branches: 86,
functions: 89,
lines: 90
},
each: {
overrides: {
'js/src/dom/polyfill.js': {
statements: 39,
lines: 37,
branches: 19,
functions: 50
}
}
}
}
}

179
js/tests/unit/dom/manipulator.js Normal file
View File

@ -0,0 +1,179 @@
$(function () {
'use strict'
QUnit.module('manipulator')
QUnit.test('should be defined', function (assert) {
assert.expect(1)
assert.ok(Manipulator, 'Manipulator is defined')
})
QUnit.test('should set checked for input', function (assert) {
assert.expect(2)
var $input = $('<input type="checkbox" />').appendTo('#qunit-fixture')
Manipulator.setChecked($input[0], true)
assert.ok($input[0].checked)
Manipulator.setChecked($input[0], false)
assert.ok(!$input[0].checked)
})
QUnit.test('should not set checked for non input element', function (assert) {
assert.expect(1)
var $div = $('<div />').appendTo('#qunit-fixture')
Manipulator.setChecked($div[0], true)
assert.ok(typeof $div[0].checked === 'undefined')
})
QUnit.test('should verify if an element is checked', function (assert) {
assert.expect(2)
var $input = $('<input type="checkbox" />').appendTo('#qunit-fixture')
Manipulator.setChecked($input[0], true)
assert.ok(Manipulator.isChecked($input[0]))
Manipulator.setChecked($input[0], false)
assert.ok(!Manipulator.isChecked($input[0]))
})
QUnit.test('should throw an error when the element is not an input', function (assert) {
assert.expect(1)
var $div = $('<div />').appendTo('#qunit-fixture')
try {
Manipulator.isChecked($div[0])
} catch (e) {
assert.strictEqual(e.message, 'INPUT parameter is not an HTMLInputElement')
}
})
QUnit.test('should set data attribute', function (assert) {
assert.expect(1)
var $div = $('<div />').appendTo('#qunit-fixture')
Manipulator.setDataAttribute($div[0], 'test', 'test')
assert.strictEqual($div[0].getAttribute('data-test'), 'test')
})
QUnit.test('should set data attribute in lower case', function (assert) {
assert.expect(1)
var $div = $('<div />').appendTo('#qunit-fixture')
Manipulator.setDataAttribute($div[0], 'tEsT', 'test')
assert.strictEqual($div[0].getAttribute('data-test'), 'test')
})
QUnit.test('should get data attribute', function (assert) {
assert.expect(2)
var $div = $('<div data-test="null" />').appendTo('#qunit-fixture')
assert.strictEqual(Manipulator.getDataAttribute($div[0], 'test'), null)
var $div2 = $('<div data-test2="js" />').appendTo('#qunit-fixture')
assert.strictEqual(Manipulator.getDataAttribute($div2[0], 'tEst2'), 'js')
})
QUnit.test('should get data attributes', function (assert) {
assert.expect(2)
var $div = $('<div data-test="js" data-test2="js2" />').appendTo('#qunit-fixture')
var $div2 = $('<div data-test3="js" data-test4="js2" />').appendTo('#qunit-fixture')
assert.propEqual(Manipulator.getDataAttributes($div[0]), {
test: 'js',
test2: 'js2'
})
var stub = sinon
.stub(Object, 'getOwnPropertyDescriptor')
.callsFake(function () {
return false
})
assert.propEqual(Manipulator.getDataAttributes($div2[0]), {
test3: 'js',
test4: 'js2'
})
stub.restore()
})
QUnit.test('should remove data attribute', function (assert) {
assert.expect(2)
var $div = $('<div />').appendTo('#qunit-fixture')
Manipulator.setDataAttribute($div[0], 'test', 'test')
assert.strictEqual($div[0].getAttribute('data-test'), 'test')
Manipulator.removeDataAttribute($div[0], 'test')
assert.strictEqual($div[0].getAttribute('data-test'), null)
})
QUnit.test('should remove data attribute in lower case', function (assert) {
assert.expect(2)
var $div = $('<div />').appendTo('#qunit-fixture')
Manipulator.setDataAttribute($div[0], 'test', 'test')
assert.strictEqual($div[0].getAttribute('data-test'), 'test')
Manipulator.removeDataAttribute($div[0], 'tESt')
assert.strictEqual($div[0].getAttribute('data-test'), null)
})
QUnit.test('should return element offsets', function (assert) {
assert.expect(2)
var $div = $('<div />').appendTo('#qunit-fixture')
var offset = Manipulator.offset($div[0])
assert.ok(typeof offset.top === 'number')
assert.ok(typeof offset.left === 'number')
})
QUnit.test('should return element position', function (assert) {
assert.expect(2)
var $div = $('<div />').appendTo('#qunit-fixture')
var offset = Manipulator.position($div[0])
assert.ok(typeof offset.top === 'number')
assert.ok(typeof offset.left === 'number')
})
QUnit.test('should toggle class', function (assert) {
assert.expect(2)
var $div = $('<div class="test" />').appendTo('#qunit-fixture')
Manipulator.toggleClass($div[0], 'test')
assert.ok(!$div.hasClass('test'))
Manipulator.toggleClass($div[0], 'test')
assert.ok($div.hasClass('test'))
Manipulator.toggleClass(null)
})
})

6
js/tests/unit/modal.js
View File

@ -422,7 +422,7 @@ $(function () {
$('<div id="modal-test"/>')
.on('hidden.bs.modal', function () {
assert.strictEqual(typeof $body.data('padding-right'), 'undefined', 'data-padding-right should be cleared after closing')
assert.strictEqual(document.body.getAttribute('data-padding-right'), null, 'data-padding-right should be cleared after closing')
$body.removeAttr('style')
done()
})
@ -488,7 +488,7 @@ $(function () {
$('<div id="modal-test"/>')
.on('hidden.bs.modal', function () {
assert.strictEqual(typeof $element.data('padding-right'), 'undefined', 'data-padding-right should be cleared after closing')
assert.strictEqual($element[0].getAttribute('data-padding-right'), null, 'data-padding-right should be cleared after closing')
$element.remove()
done()
})
@ -530,7 +530,7 @@ $(function () {
$('<div id="modal-test"/>')
.on('hidden.bs.modal', function () {
assert.strictEqual(typeof $element.data('margin-right'), 'undefined', 'data-margin-right should be cleared after closing')
assert.strictEqual($element[0].getAttribute('data-margin-right'), null, 'data-margin-right should be cleared after closing')
$element.remove()
done()
})