From 455a5bd2129a969c2c778974eb68200eb366dd9b Mon Sep 17 00:00:00 2001
From: Takeharu Oshida <takeharu.oshida@mobilus.co.jp>
Date: Fri, 12 Jun 2015 13:44:25 +0900
Subject: [PATCH] #9 Add TabTemplate class

---
 components/TabTemplate.js           | 41 +++++++++++++++++++++++++++++
 test/components/TabTemplate_spec.js | 30 +++++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 components/TabTemplate.js
 create mode 100644 test/components/TabTemplate_spec.js

diff --git a/components/TabTemplate.js b/components/TabTemplate.js
new file mode 100644
index 0000000..cb23070
--- /dev/null
+++ b/components/TabTemplate.js
@@ -0,0 +1,41 @@
+'use strict';
+
+import React from 'react';
+
+const styles = {
+  root: {
+    width: '100%',
+    position: 'relative',
+    textAlign: 'initial'
+  },
+  unselected: {
+    height: '0px',
+    overflow: 'hidden'
+  }
+};
+
+class TabTemplate extends React.Component {
+
+  render(){
+    let css = [styles.root];
+    if (!this.props.selected) {
+      css.push(styles.unselected);
+    }
+
+    return (
+      <div styles={css}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+TabTemplate.defaultProps = {
+  selected:false
+};
+
+TabTemplate.propTypes = {
+  selected: React.PropTypes.bool.isRequired
+};
+
+export default TabTemplate;
diff --git a/test/components/TabTemplate_spec.js b/test/components/TabTemplate_spec.js
new file mode 100644
index 0000000..db60a54
--- /dev/null
+++ b/test/components/TabTemplate_spec.js
@@ -0,0 +1,30 @@
+'use strict';
+import React from 'react/addons';
+import chai from 'chai';
+let expect = chai.expect;
+import TabTemplate from '../../components/TabTemplate';
+const {TestUtils} = React.addons;
+
+describe('Test of TabTemplate', () => {
+  let component;
+
+  beforeEach(() => {
+  });
+
+  it('should have default properties', function () {
+    component = TestUtils.renderIntoDocument(<TabTemplate><p>test tab</p></TabTemplate>);
+    expect(component.props.selected).to.be.equal(false);
+  });
+
+  it('It will be height 0 none when not selected', () => {
+    component = TestUtils.renderIntoDocument(<TabTemplate selected={false} ><p>not test tab</p></TabTemplate>);
+    const p = TestUtils.findRenderedDOMComponentWithTag(component, 'p');
+    expect(React.findDOMNode(p).parentNode.style.height).to.be.equal('0px');
+  });
+
+  it('It will have visible height when selected', () => {
+    component = TestUtils.renderIntoDocument(<TabTemplate selected={true}><p>not test tab</p></TabTemplate>);
+    const p = TestUtils.findRenderedDOMComponentWithTag(component, 'p');
+    expect(React.findDOMNode(p).parentNode.style.height).to.be.not.equal('0px');
+  });
+});