+
{this.props.footer}
);
diff --git a/src/PanelGroup.jsx b/src/PanelGroup.jsx
index eb177b4a4d..1c0d4b1b07 100644
--- a/src/PanelGroup.jsx
+++ b/src/PanelGroup.jsx
@@ -66,7 +66,9 @@ var PanelGroup = React.createClass({
return !this._isChanging;
},
- handleSelect: function (key) {
+ handleSelect: function (e, key) {
+ e.preventDefault();
+
if (this.props.onSelect) {
this._isChanging = true;
this.props.onSelect(key);
diff --git a/test/BootstrapMixinSpec.jsx b/test/BootstrapMixinSpec.jsx
index a80545c519..eb3fb69096 100644
--- a/test/BootstrapMixinSpec.jsx
+++ b/test/BootstrapMixinSpec.jsx
@@ -188,5 +188,14 @@ describe('BootstrapMixin', function () {
);
assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-xs': true});
});
+
+ it('should return "btn-title"', function () {
+ var instance = ReactTestUtils.renderIntoDocument(
+
+ content
+
+ );
+ assert.equal(instance.prefixClass('title'), 'btn-title');
+ });
});
});
diff --git a/test/CollapsableMixinSpec.jsx b/test/CollapsableMixinSpec.jsx
new file mode 100644
index 0000000000..1c613ea800
--- /dev/null
+++ b/test/CollapsableMixinSpec.jsx
@@ -0,0 +1,220 @@
+/*global describe, it, assert */
+
+var React = require('react');
+var ReactTestUtils = require('react/lib/ReactTestUtils');
+var CollapsableMixin = require('../lib/CollapsableMixin');
+var classSet = require('../lib/utils/classSet');
+
+describe('CollapsableMixin', function () {
+
+ var Component, instance;
+
+ beforeEach(function(){
+ Component = React.createClass({
+ mixins: [CollapsableMixin],
+
+ getCollapsableDOMNode: function(){
+ return this.refs.panel.getDOMNode();
+ },
+
+ getCollapsableDimensionValue: function(){
+ return 15;
+ },
+
+ render: function(){
+ var styles = this.getCollapsableClassSet();
+ return (
+
+
+ {this.props.children}
+
+
+ );
+ }
+ });
+ });
+
+ describe('getInitialState', function(){
+ it('Should check defaultExpanded', function () {
+ instance = ReactTestUtils.renderIntoDocument(
+
Panel content
+ );
+ var state = instance.getInitialState();
+ assert.ok(state.expanded === true);
+ });
+
+ it('Should default collapsing to false', function () {
+ instance = ReactTestUtils.renderIntoDocument(
+
Panel content
+ );
+ var state = instance.getInitialState();
+ assert.ok(state.collapsing === false);
+ });
+ });
+
+ describe('collapsed', function(){
+ it('Should have collapse class', function () {
+ instance = ReactTestUtils.renderIntoDocument(
+
Panel content
+ );
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'collapse'));
+ });
+ });
+
+ describe('from collapsed to expanded', function(){
+ beforeEach(function(){
+ instance = ReactTestUtils.renderIntoDocument(
+
Panel content
+ );
+ });
+
+ it('Should have collapsing class', function () {
+ instance.setProps({expanded:true});
+ var node = instance.getCollapsableDOMNode();
+ assert.equal(node.className, 'collapsing');
+ });
+
+ it('Should set initial 0px height', function () {
+ var node = instance.getCollapsableDOMNode();
+ assert.equal(node.style['height'], '');
+
+ instance._afterWillUpdate = function(){
+ assert.equal(node.style['height'], '0px');
+ };
+
+ instance.setProps({expanded:true});
+ });
+
+ it('Should set transition to height', function () {
+ var node = instance.getCollapsableDOMNode();
+ assert.equal(node.style['height'], '');
+
+ instance.setProps({expanded:true});
+ assert.equal(node.style['height'], '15px');
+ });
+
+ it('Should transition from collapsing to not collapsing', function (done) {
+ instance._addEndEventListener = function(node, complete){
+ setTimeout(function(){
+ complete();
+ assert.ok(!instance.state.collapsing);
+ done();
+ }, 100);
+ };
+ instance.setProps({expanded:true});
+ assert.ok(instance.state.collapsing);
+ });
+
+ it('Should clear height after transition complete', function (done) {
+ var node = instance.getCollapsableDOMNode();
+
+ instance._addEndEventListener = function(node, complete){
+ setTimeout(function(){
+ complete();
+ assert.equal(node.style['height'], '');
+ done();
+ }, 100);
+ };
+
+ assert.equal(node.style['height'], '');
+ instance.setProps({expanded:true});
+ assert.equal(node.style['height'], '15px');
+ });
+ });
+
+ describe('from expanded to collapsed', function(){
+ beforeEach(function(){
+ instance = ReactTestUtils.renderIntoDocument(
+
Panel content
+ );
+ });
+
+ it('Should have collapsing class', function () {
+ instance.setProps({expanded:false});
+ var node = instance.getCollapsableDOMNode();
+ assert.equal(node.className, 'collapsing');
+ });
+
+ it('Should set initial height', function () {
+ var node = instance.getCollapsableDOMNode();
+
+ instance._afterWillUpdate = function(){
+ assert.equal(node.style['height'], '15px');
+ };
+
+ assert.equal(node.style['height'], '');
+ instance.setProps({expanded:false});
+ });
+
+ it('Should set transition to height', function () {
+ var node = instance.getCollapsableDOMNode();
+ assert.equal(node.style['height'], '');
+
+ instance.setProps({expanded:false});
+ assert.equal(node.style['height'], '0px');
+ });
+
+ it('Should transition from collapsing to not collapsing', function (done) {
+ instance._addEndEventListener = function(node, complete){
+ setTimeout(function(){
+ complete();
+ assert.ok(!instance.state.collapsing);
+ done();
+ }, 100);
+ };
+ instance.setProps({expanded:false});
+ assert.ok(instance.state.collapsing);
+ });
+
+ it('Should have 0px height after transition complete', function (done) {
+ var node = instance.getCollapsableDOMNode();
+
+ instance._addEndEventListener = function(node, complete){
+ setTimeout(function(){
+ complete();
+ assert.ok(node.style['height'] === '0px');
+ done();
+ }, 100);
+ };
+
+ assert.equal(node.style['height'], '');
+ instance.setProps({expanded:false});
+ assert.equal(node.style['height'], '0px');
+ });
+ });
+
+ describe('expanded', function(){
+ it('Should have collapse and in class', function () {
+ instance = ReactTestUtils.renderIntoDocument(
+
Panel content
+ );
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'collapse in'));
+ });
+
+ it('Should have collapse and in class with defaultExpanded', function () {
+ instance = ReactTestUtils.renderIntoDocument(
+
Panel content
+ );
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'collapse in'));
+ });
+ });
+
+ describe('dimension', function(){
+ beforeEach(function(){
+ instance = ReactTestUtils.renderIntoDocument(
+
Panel content
+ );
+ });
+
+ it('Defaults to height', function(){
+ assert.equal(instance.dimension(), 'height');
+ });
+
+ it('Uses getCollapsableDimension if exists', function(){
+ instance.getCollapsableDimension = function(){
+ return 'whatevs';
+ };
+ assert.equal(instance.dimension(), 'whatevs');
+ });
+ });
+});
diff --git a/test/PanelSpec.jsx b/test/PanelSpec.jsx
index 37a93c38d0..a761242204 100644
--- a/test/PanelSpec.jsx
+++ b/test/PanelSpec.jsx
@@ -113,8 +113,28 @@ describe('Panel', function () {
assert.ok(anchor.className.match(/\bcollapsed\b/));
});
+ it('Should be aria-expanded=true', function () {
+ var instance = ReactTestUtils.renderIntoDocument(
+
Panel content
+ );
+ var collapse = instance.getDOMNode().querySelector('.panel-collapse');
+ var anchor = instance.getDOMNode().querySelector('.panel-title a');
+ assert.equal(collapse.getAttribute('aria-expanded'), 'true');
+ assert.equal(anchor.getAttribute('aria-expanded'), 'true');
+ });
+
+ it('Should be aria-expanded=false', function () {
+ var instance = ReactTestUtils.renderIntoDocument(
+
Panel content
+ );
+ var collapse = instance.getDOMNode().querySelector('.panel-collapse');
+ var anchor = instance.getDOMNode().querySelector('.panel-title a');
+ assert.equal(collapse.getAttribute('aria-expanded'), 'false');
+ assert.equal(anchor.getAttribute('aria-expanded'), 'false');
+ });
+
it('Should call onSelect handler', function (done) {
- function handleSelect (key) {
+ function handleSelect (e, key) {
assert.equal(key, '1');
done();
}
@@ -174,4 +194,4 @@ describe('Panel', function () {
assert.equal(children[0].nodeName, 'TABLE');
assert.notOk(children[0].className.match(/\bpanel-body\b/));
});
-});
\ No newline at end of file
+});