Skip to content

Commit

Permalink
rewrite collapse unit tests
Browse files Browse the repository at this point in the history
  • Loading branch information
Johann-S committed Apr 4, 2019
1 parent 711a0c5 commit e233121
Show file tree
Hide file tree
Showing 6 changed files with 231 additions and 117 deletions.
2 changes: 1 addition & 1 deletion build/build-plugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const bsPlugins = {
Alert: path.resolve(__dirname, '../js/src/alert/alert.js'),
Button: path.resolve(__dirname, '../js/src/button/button.js'),
Carousel: path.resolve(__dirname, '../js/src/carousel/carousel.js'),
Collapse: path.resolve(__dirname, '../js/src/collapse.js'),
Collapse: path.resolve(__dirname, '../js/src/collapse/collapse.js'),
Dropdown: path.resolve(__dirname, '../js/src/dropdown.js'),
Modal: path.resolve(__dirname, '../js/src/modal.js'),
Popover: path.resolve(__dirname, '../js/src/popover.js'),
Expand Down
2 changes: 1 addition & 1 deletion js/index.esm.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import Alert from './src/alert/alert'
import Button from './src/button/button'
import Carousel from './src/carousel/carousel'
import Collapse from './src/collapse'
import Collapse from './src/collapse/collapse'
import Dropdown from './src/dropdown'
import Modal from './src/modal'
import Popover from './src/popover'
Expand Down
2 changes: 1 addition & 1 deletion js/index.umd.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import Alert from './src/alert/alert'
import Button from './src/button/button'
import Carousel from './src/carousel/carousel'
import Collapse from './src/collapse'
import Collapse from './src/collapse/collapse'
import Dropdown from './src/dropdown'
import Modal from './src/modal'
import Popover from './src/popover'
Expand Down
12 changes: 6 additions & 6 deletions js/src/collapse.js → js/src/collapse/collapse.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ import {
makeArray,
reflow,
typeCheckConfig
} from './util/index'
import Data from './dom/data'
import EventHandler from './dom/eventHandler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selectorEngine'
} from '../util/index'
import Data from '../dom/data'
import EventHandler from '../dom/eventHandler'
import Manipulator from '../dom/manipulator'
import SelectorEngine from '../dom/selectorEngine'

/**
* ------------------------------------------------------------------------
Expand Down Expand Up @@ -431,7 +431,7 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
* ------------------------------------------------------------------------
* add .collapse to jQuery only if jQuery is present
*/

/* istanbul ignore if */
if (typeof $ !== 'undefined') {
const JQUERY_NO_CONFLICT = $.fn[NAME]
$.fn[NAME] = Collapse._jQueryInterface
Expand Down
222 changes: 222 additions & 0 deletions js/src/collapse/collapse.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
import Collapse from './collapse'
import EventHandler from '../dom/eventHandler'

/** Test helpers */
import { getFixture, clearFixture } from '../../tests/helpers/fixture'

describe('Collapse', () => {
let fixtureEl

beforeAll(() => {
fixtureEl = getFixture()
})

afterEach(() => {
clearFixture()
})

describe('VERSION', () => {
it('should return plugin version', () => {
expect(Collapse.VERSION).toEqual(jasmine.any(String))
})
})

describe('Default', () => {
it('should return plugin default config', () => {
expect(Collapse.Default).toEqual(jasmine.any(Object))
})
})

describe('toggle', () => {
it('should call show method if show class is not present', () => {
fixtureEl.innerHTML = '<div></div>'

const collapseEl = fixtureEl.querySelector('div')
const collapse = new Collapse(collapseEl)

spyOn(collapse, 'show')

collapse.toggle()

expect(collapse.show).toHaveBeenCalled()
})

it('should call hide method if show class is present', () => {
fixtureEl.innerHTML = '<div class="show"></div>'

const collapseEl = fixtureEl.querySelector('.show')
const collapse = new Collapse(collapseEl, {
toggle: false
})

spyOn(collapse, 'hide')

collapse.toggle()

expect(collapse.hide).toHaveBeenCalled()
})
})

describe('show', () => {
it('should do nothing if is transitioning', () => {
fixtureEl.innerHTML = '<div></div>'

spyOn(EventHandler, 'trigger')

const collapseEl = fixtureEl.querySelector('div')
const collapse = new Collapse(collapseEl, {
toggle: false
})

collapse._isTransitioning = true
collapse.show()

expect(EventHandler.trigger).not.toHaveBeenCalled()
})

it('should do nothing if already shown', () => {
fixtureEl.innerHTML = '<div class="show"></div>'

spyOn(EventHandler, 'trigger')

const collapseEl = fixtureEl.querySelector('div')
const collapse = new Collapse(collapseEl, {
toggle: false
})

collapse.show()

expect(EventHandler.trigger).not.toHaveBeenCalled()
})

it('should show a collapsed element', done => {
fixtureEl.innerHTML = '<div class="collapse" style="height: 0px;"></div>'

const collapseEl = fixtureEl.querySelector('div')
const collapse = new Collapse(collapseEl, {
toggle: false
})

collapseEl.addEventListener('show.bs.collapse', () => {
expect(collapseEl.style.height).toEqual('0px')
})
collapseEl.addEventListener('shown.bs.collapse', () => {
expect(collapseEl.classList.contains('show')).toEqual(true)
expect(collapseEl.style.height).toEqual('')
done()
})

collapse.show()
})

it('should collapse only the first collapse', done => {
fixtureEl.innerHTML = [
'<div class="card" id="accordion1">',
' <div id="collapse1" class="collapse"/>',
'</div>',
'<div class="card" id="accordion2">',
' <div id="collapse2" class="collapse show"/>',
'</div>'
].join('')

const el1 = fixtureEl.querySelector('#collapse1')
const el2 = fixtureEl.querySelector('#collapse2')
const collapse = new Collapse(el1, {
toggle: false
})

el1.addEventListener('shown.bs.collapse', () => {
expect(el1.classList.contains('show')).toEqual(true)
expect(el2.classList.contains('show')).toEqual(true)
done()
})

collapse.show()
})

it('should not fire shown when show is prevented', done => {
fixtureEl.innerHTML = '<div class="collapse"></div>'

const collapseEl = fixtureEl.querySelector('div')
const collapse = new Collapse(collapseEl, {
toggle: false
})

const expectEnd = () => {
setTimeout(() => {
expect().nothing()
done()
}, 10)
}

collapseEl.addEventListener('show.bs.collapse', e => {
e.preventDefault()
expectEnd()
})

collapseEl.addEventListener('shown.bs.collapse', () => {
throw new Error('should not fire shown event')
})

collapse.show()
})
})

describe('hide', () => {
it('should hide a collapsed element', done => {
fixtureEl.innerHTML = '<div class="collapse show"></div>'

const collapseEl = fixtureEl.querySelector('div')
const collapse = new Collapse(collapseEl, {
toggle: false
})

collapseEl.addEventListener('hidden.bs.collapse', () => {
expect(collapseEl.classList.contains('show')).toEqual(false)
expect(collapseEl.style.height).toEqual('')
done()
})

collapse.hide()
})
})

describe('data-api', () => {
it('should show multiple collapsed elements', done => {
fixtureEl.innerHTML = [
'<a role="button" data-toggle="collapse" class="collapsed" href=".multi"></a>',
'<div id="collapse1" class="collapse multi"/>',
'<div id="collapse2" class="collapse multi"/>'
].join('')

const trigger = fixtureEl.querySelector('a')
const collapse1 = fixtureEl.querySelector('#collapse1')
const collapse2 = fixtureEl.querySelector('#collapse2')

collapse2.addEventListener('shown.bs.collapse', () => {
expect(collapse1.classList.contains('show')).toEqual(true)
expect(collapse1.classList.contains('show')).toEqual(true)
done()
})

trigger.click()
})

it('should remove "collapsed" class from target when collapse is shown', done => {
fixtureEl.innerHTML = [
'<a role="button" data-toggle="collapse" class="collapsed" href="#" data-target="#test1" />',
'<div id="test1"></div>'
].join('')

const link = fixtureEl.querySelector('a')
const collapseTest1 = fixtureEl.querySelector('#test1')

collapseTest1.addEventListener('shown.bs.collapse', () => {
expect(link.classList.contains('collapsed')).toEqual(false)
done()
})

link.click()
})
})
})
108 changes: 0 additions & 108 deletions js/tests/unit/collapse.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,114 +46,6 @@ $(function () {
assert.strictEqual($collapse[0], $el[0], 'collection contains element')
})

QUnit.test('should show a collapsed element', function (assert) {
assert.expect(2)
var done = assert.async()
var $el = $('<div class="collapse"/>')

$el.one('shown.bs.collapse', function () {
assert.ok($el.hasClass('show'), 'has class "show"')
assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
done()
}).bootstrapCollapse('show')
})

QUnit.test('should show multiple collapsed elements', function (assert) {
assert.expect(4)
var done = assert.async()
var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href=".multi"/>').appendTo('#qunit-fixture')
var $el = $('<div class="collapse multi"/>').appendTo('#qunit-fixture')
var $el2 = $('<div class="collapse multi"/>').appendTo('#qunit-fixture')
$el.one('shown.bs.collapse', function () {
assert.ok($el.hasClass('show'), 'has class "show"')
assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
})
$el2.one('shown.bs.collapse', function () {
assert.ok($el2.hasClass('show'), 'has class "show"')
assert.ok(!/height/i.test($el2.attr('style')), 'has height reset')
done()
})
$target[0].click()
})

QUnit.test('should collapse only the first collapse', function (assert) {
assert.expect(2)
var done = assert.async()
var html = [
'<div class="panel-group" id="accordion1">',
'<div class="panel">',
'<div id="collapse1" class="collapse"/>',
'</div>',
'</div>',
'<div class="panel-group" id="accordion2">',
'<div class="panel">',
'<div id="collapse2" class="collapse show"/>',
'</div>',
'</div>'
].join('')
$(html).appendTo('#qunit-fixture')
var $el1 = $('#collapse1')
var $el2 = $('#collapse2')
$el1.one('shown.bs.collapse', function () {
assert.ok($el1.hasClass('show'))
assert.ok($el2.hasClass('show'))
done()
}).bootstrapCollapse('show')
})

QUnit.test('should hide a collapsed element', function (assert) {
assert.expect(1)
var $el = $('<div class="collapse"/>').bootstrapCollapse('hide')

assert.ok(!$el.hasClass('show'), 'does not have class "show"')
})

QUnit.test('should not fire shown when show is prevented', function (assert) {
assert.expect(1)
var done = assert.async()

$('<div class="collapse"/>')
.on('show.bs.collapse', function (e) {
e.preventDefault()
assert.ok(true, 'show event fired')
done()
})
.on('shown.bs.collapse', function () {
assert.ok(false, 'shown event fired')
})
.bootstrapCollapse('show')
})

QUnit.test('should reset style to auto after finishing opening collapse', function (assert) {
assert.expect(2)
var done = assert.async()

$('<div class="collapse" style="height: 0px"/>')
.on('show.bs.collapse', function () {
assert.strictEqual(this.style.height, '0px', 'height is 0px')
})
.on('shown.bs.collapse', function () {
assert.strictEqual(this.style.height, '', 'height is auto')
done()
})
.bootstrapCollapse('show')
})

QUnit.test('should reset style to auto after finishing closing collapse', function (assert) {
assert.expect(1)
var done = assert.async()

$('<div class="collapse"/>')
.on('shown.bs.collapse', function () {
$(this).bootstrapCollapse('hide')
})
.on('hidden.bs.collapse', function () {
assert.strictEqual(this.style.height, '', 'height is auto')
done()
})
.bootstrapCollapse('show')
})

QUnit.test('should remove "collapsed" class from target when collapse is shown', function (assert) {
assert.expect(1)
var done = assert.async()
Expand Down

0 comments on commit e233121

Please sign in to comment.