Repository: mlaursen/react-md
Pull request #84 (2016-05-12 18:14:28)

Enhancement/subheader tests
This should solve #59 


Patch:
diff --git a/src/js/Subheaders/Subheader.js b/src/js/Subheaders/Subheader.js
index 21311e4a4f..dcb9af1b1d 100644
--- a/src/js/Subheaders/Subheader.js
+++ b/src/js/Subheaders/Subheader.js
@@ -2,6 +2,9 @@ import React, { Component, PropTypes } from 'react';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import classnames from 'classnames';
 
+/**
+ * The `Subheader` component is generally used inside of lists or menus.
+ */
 export default class Subheader extends Component {
   constructor(props) {
     super(props);
@@ -10,21 +13,43 @@ export default class Subheader extends Component {
   }
 
   static propTypes = {
+    /**
+     * The text to display as a subheader.
+     */
+    primaryText: PropTypes.string.isRequired,
+
+    /**
+     * The component to render the Subheader as.
+     */
+    component: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.func,
+    ]).isRequired,
+
+    /**
+     * An optional className to apply to the subheader.
+     */
     className: PropTypes.string,
+
+    /**
+     * Boolean if the subheader should be styled with the primary color.
+     */
     primary: PropTypes.bool,
+
+    /**
+     * Boolean if the Subheader is inset in the list. This will add additional
+     * spacing to align the subheader.
+     */
     inset: PropTypes.bool,
-    menu: PropTypes.bool,
-    menuComponent: PropTypes.string,
-    primaryText: PropTypes.string.isRequired,
   };
 
   static defaultProps = {
-    menuComponent: 'h5',
+    component: 'li',
   };
 
   render() {
-    const { menu, menuComponent, inset, primary, primaryText, className, ...props } = this.props;
-    return React.createElement(menu ? menuComponent : 'li', {
+    const { component, inset, primary, primaryText, className, ...props } = this.props;
+    return React.createElement(component, {
       ...props,
       className: classnames('md-subheader', className, {
         inset,


Test patch:
diff --git a/src/js/Subheaders/__tests__/Subheader.js b/src/js/Subheaders/__tests__/Subheader.js
new file mode 100644
index 0000000000..8917ac34e6
--- /dev/null
+++ b/src/js/Subheaders/__tests__/Subheader.js
@@ -0,0 +1,38 @@
+/*eslint-env jest*/
+jest.unmock('../Subheader');
+
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+import {
+  renderIntoDocument,
+} from 'react-addons-test-utils';
+
+import Subheader from '../Subheader';
+
+describe('Subheader', () => {
+  it('merges className and style', () => {
+    const style = { display: 'block' };
+    const className = 'test';
+    const subheader = renderIntoDocument(
+      <Subheader style={style} className={className} primaryText="A" />
+    );
+
+    const subheaderNode = findDOMNode(subheader);
+    expect(subheaderNode.style.display).toBe(style.display);
+    expect(subheaderNode.classList.contains(className)).toBe(true);
+  });
+
+  it('can render as different components', () => {
+    let subheader = renderIntoDocument(<Subheader primaryText="A" />);
+
+    let subheaderNode = findDOMNode(subheader);
+    expect(subheaderNode.tagName).toBe(Subheader.defaultProps.component.toUpperCase());
+
+    subheader = renderIntoDocument(
+      <Subheader primaryText="A" component="h5" />
+    );
+
+    subheaderNode = findDOMNode(subheader);
+    expect(subheaderNode.tagName).toBe('H5');
+  });
+});