From 9f249cf0176e0bd24b1ea75c68ccffea0acce2a8 Mon Sep 17 00:00:00 2001 From: Jamie Hill Date: Fri, 24 Jun 2016 12:41:09 +0100 Subject: [PATCH 01/14] Update Header to v1 API - Updates the Header component to v1 Api - Examples updated to match Semantic Docs - Multiple tests for Header variants added to suite --- src/elements/Header/Header.js | 40 +++--- src/elements/Header/HeaderH1.js | 26 ++-- src/elements/Header/HeaderH2.js | 27 ++-- src/elements/Header/HeaderH3.js | 26 ++-- src/elements/Header/HeaderH4.js | 26 ++-- src/elements/Header/HeaderH5.js | 26 ++-- src/elements/Header/HeaderH6.js | 26 ++-- src/elements/Header/HeaderSubheader.js | 72 ++++++---- src/elements/Header/_Header.js | 132 +++++++++++++----- test/specs/elements/Header/Header-test.js | 36 +++++ .../elements/Header/HeaderHeadings-test.js | 34 +++++ .../elements/Header/HeaderSubheader-test.js | 20 +++ test/specs/elements/Header/_Header-test.js | 15 ++ 13 files changed, 338 insertions(+), 168 deletions(-) create mode 100644 test/specs/elements/Header/Header-test.js create mode 100644 test/specs/elements/Header/HeaderHeadings-test.js create mode 100644 test/specs/elements/Header/HeaderSubheader-test.js create mode 100644 test/specs/elements/Header/_Header-test.js diff --git a/src/elements/Header/Header.js b/src/elements/Header/Header.js index 7b67a107c1..e49f3fa209 100644 --- a/src/elements/Header/Header.js +++ b/src/elements/Header/Header.js @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import META from '../../utils/Meta' import _Header from './_Header' import HeaderH1 from './HeaderH1' @@ -9,24 +9,24 @@ import HeaderH5 from './HeaderH5' import HeaderH6 from './HeaderH6' import HeaderSubheader from './HeaderSubheader' -export default class Header extends Component { - static _meta = { - library: META.library.semanticUI, - name: 'Header', - type: META.type.element, - } - - static H1 = HeaderH1 - static H2 = HeaderH2 - static H3 = HeaderH3 - static H4 = HeaderH4 - static H5 = HeaderH5 - static H6 = HeaderH6 - static Subheader = HeaderSubheader +function Header(props) { + return ( + <_Header {...props} /> + ) +} - render() { - return ( - <_Header {...this.props} /> - ) - } +Header._meta = { + library: META.library.semanticUI, + name: 'Header', + type: META.type.element, } + +Header.H1 = HeaderH1 +Header.H2 = HeaderH2 +Header.H3 = HeaderH3 +Header.H4 = HeaderH4 +Header.H5 = HeaderH5 +Header.H6 = HeaderH6 +Header.Subheader = HeaderSubheader + +export default Header diff --git a/src/elements/Header/HeaderH1.js b/src/elements/Header/HeaderH1.js index 5a7cf545c0..fdddd70896 100644 --- a/src/elements/Header/HeaderH1.js +++ b/src/elements/Header/HeaderH1.js @@ -1,18 +1,18 @@ -import React, { Component } from 'react' +import React, { PropTypes } from 'react' import META from '../../utils/Meta' import _Header from './_Header' -export default class HeaderH1 extends Component { - static _meta = { - library: META.library.semanticUI, - name: 'HeaderH1', - parent: 'Header', - type: META.type.element, - } +function HeaderH1(props) { + return ( + <_Header {...props} _sdClass='sd-header-h1' _headerElement='h1' /> + ) +} - render() { - return ( - <_Header {...this.props} _sdClass='sd-header-h1' _headerElement='h1' /> - ) - } +HeaderH1._meta = { + library: META.library.semanticUI, + name: 'HeaderH1', + parent: 'Header', + type: META.type.element, } + +export default HeaderH1 diff --git a/src/elements/Header/HeaderH2.js b/src/elements/Header/HeaderH2.js index 0cd00512d2..e088e95b82 100644 --- a/src/elements/Header/HeaderH2.js +++ b/src/elements/Header/HeaderH2.js @@ -1,19 +1,18 @@ -import React, { Component } from 'react' +import React from 'react' import META from '../../utils/Meta' import _Header from './_Header' -export default class HeaderH2 extends Component { - - static _meta = { - library: META.library.semanticUI, - name: 'HeaderH2', - parent: 'Header', - type: META.type.element, - } +function HeaderH2(props) { + return ( + <_Header {...props} _sdClass='sd-header-h2' _headerElement='h2' /> + ) +} - render() { - return ( - <_Header {...this.props} _sdClass='sd-header-h2' _headerElement='h2' /> - ) - } +HeaderH2._meta = { + library: META.library.semanticUI, + name: 'HeaderH2', + parent: 'Header', + type: META.type.element, } + +export default HeaderH2 diff --git a/src/elements/Header/HeaderH3.js b/src/elements/Header/HeaderH3.js index ac0304ee28..b47a366d91 100644 --- a/src/elements/Header/HeaderH3.js +++ b/src/elements/Header/HeaderH3.js @@ -1,18 +1,18 @@ -import React, { Component } from 'react' +import React from 'react' import META from '../../utils/Meta' import _Header from './_Header' -export default class HeaderH3 extends Component { - static _meta = { - library: META.library.semanticUI, - name: 'HeaderH3', - parent: 'Header', - type: META.type.element, - } +function HeaderH3(props) { + return ( + <_Header {...props} _sdClass='sd-header-h3' _headerElement='h3' /> + ) +} - render() { - return ( - <_Header {...this.props} _sdClass='sd-header-h3' _headerElement='h3' /> - ) - } +HeaderH3._meta = { + library: META.library.semanticUI, + name: 'HeaderH3', + parent: 'Header', + type: META.type.element, } + +export default HeaderH3 diff --git a/src/elements/Header/HeaderH4.js b/src/elements/Header/HeaderH4.js index e30c2a7023..8339f066bc 100644 --- a/src/elements/Header/HeaderH4.js +++ b/src/elements/Header/HeaderH4.js @@ -1,18 +1,18 @@ -import React, { Component } from 'react' +import React from 'react' import META from '../../utils/Meta' import _Header from './_Header' -export default class HeaderH4 extends Component { - static _meta = { - library: META.library.semanticUI, - name: 'HeaderH4', - parent: 'Header', - type: META.type.element, - } +function HeaderH4(props) { + return ( + <_Header {...props} _sdClass='sd-header-h4' _headerElement='h4' /> + ) +} - render() { - return ( - <_Header {...this.props} _sdClass='sd-header-h4' _headerElement='h4' /> - ) - } +HeaderH4._meta = { + library: META.library.semanticUI, + name: 'HeaderH4', + parent: 'Header', + type: META.type.element, } + +export default HeaderH4 diff --git a/src/elements/Header/HeaderH5.js b/src/elements/Header/HeaderH5.js index 0419266d74..3bd2ab0b67 100644 --- a/src/elements/Header/HeaderH5.js +++ b/src/elements/Header/HeaderH5.js @@ -1,18 +1,18 @@ -import React, { Component } from 'react' +import React from 'react' import META from '../../utils/Meta' import _Header from './_Header' -export default class HeaderH5 extends Component { - static _meta = { - library: META.library.semanticUI, - name: 'HeaderH5', - parent: 'Header', - type: META.type.element, - } +function HeaderH5(props) { + return ( + <_Header {...props} _sdClass='sd-header-h5' _headerElement='h5' /> + ) +} - render() { - return ( - <_Header {...this.props} _sdClass='sd-header-h5' _headerElement='h5' /> - ) - } +HeaderH5._meta = { + library: META.library.semanticUI, + name: 'HeaderH5', + parent: 'Header', + type: META.type.element, } + +export default HeaderH5 diff --git a/src/elements/Header/HeaderH6.js b/src/elements/Header/HeaderH6.js index f911da65b5..ee67420e9d 100644 --- a/src/elements/Header/HeaderH6.js +++ b/src/elements/Header/HeaderH6.js @@ -1,18 +1,18 @@ -import React, { Component } from 'react' +import React from 'react' import META from '../../utils/Meta' import _Header from './_Header' -export default class HeaderH6 extends Component { - static _meta = { - library: META.library.semanticUI, - name: 'HeaderH6', - parent: 'Header', - type: META.type.element, - } +function HeaderH6(props) { + return ( + <_Header {...props} _sdClass='sd-header-h6' _headerElement='h6' /> + ) +} - render() { - return ( - <_Header {...this.props} _sdClass='sd-header-h6' _headerElement='h6' /> - ) - } +HeaderH6._meta = { + library: META.library.semanticUI, + name: 'HeaderH6', + parent: 'Header', + type: META.type.element, } + +export default HeaderH6 diff --git a/src/elements/Header/HeaderSubheader.js b/src/elements/Header/HeaderSubheader.js index 50640a8f91..9faf8365c2 100644 --- a/src/elements/Header/HeaderSubheader.js +++ b/src/elements/Header/HeaderSubheader.js @@ -1,33 +1,43 @@ -import React, { Component, PropTypes } from 'react' -import classNames from 'classnames' +import React, { PropTypes } from 'react' +import cx from 'classnames' import META from '../../utils/Meta' -import { getUnhandledProps } from '../../utils/propUtils' - -export default class HeaderSubheader extends Component { - static propTypes = { - children: PropTypes.node, - className: PropTypes.string, - } - static _meta = { - library: META.library.semanticUI, - name: 'HeaderSubheader', - parent: 'Header', - type: META.type.element, - } - render() { - const classes = classNames( - 'sd-header-subheader', - 'sub', - this.props.className, - 'header', - ) - - const props = getUnhandledProps(HeaderSubheader, this.props) - - return ( -
- {this.props.children} -
- ) - } +import { + getUnhandledProps, +} from '../../utils/propUtils' + +function HeaderSubheader(props) { + const { + children, className, + } = props + + const classes = cx('sd-header-subheader', 'sub', + className, + 'header' + ) + + const SubHeaderComponent = 'div' + const rest = getUnhandledProps(HeaderSubheader, props) + + return ( + + {children} + + ) +} + +HeaderSubheader._meta = { + library: META.library.semanticUI, + name: 'HeaderSubheader', + parent: 'Header', + type: META.type.element, } + +HeaderSubheader.propTypes = { + /** Primary content of the HeaderSubheader */ + children: PropTypes.node, + + /** Classes to add to the subheader className. */ + className: PropTypes.string, +} + +export default HeaderSubheader diff --git a/src/elements/Header/_Header.js b/src/elements/Header/_Header.js index 1236704d80..11e537ea51 100644 --- a/src/elements/Header/_Header.js +++ b/src/elements/Header/_Header.js @@ -1,42 +1,98 @@ import cx from 'classnames' -import React, { createElement, Component, PropTypes } from 'react' - +import React, { PropTypes } from 'react' import META from '../../utils/Meta' +import { + getUnhandledProps, + iconPropRenderer, + imagePropRenderer, + useKeyOnly, +} from '../../utils/propUtils' + +function _Header(props) { + const { + _sdClass, _headerElement, + left, center, right, justified, dividing, block, attached, floating, + icon, image, children, className, + } = props + + const classes = cx( + _sdClass, 'ui', + useKeyOnly(left, 'left aligned'), + useKeyOnly(center, 'center aligned'), + useKeyOnly(right, 'right aligned'), + useKeyOnly(justified, 'justified'), + useKeyOnly(dividing, 'dividing'), + useKeyOnly(block, 'block'), + useKeyOnly(attached, 'attached'), + useKeyOnly(floating, 'floating'), + className, + 'header', + ) + + const _HeaderComponent = _headerElement + const rest = getUnhandledProps(_Header, props) + + return ( + <_HeaderComponent className={classes} {...rest}> + {iconPropRenderer(icon)} + {imagePropRenderer(image)} + {children} + + ) +} -export default class _Header extends Component { - static propTypes = { - _headerElement: PropTypes.string, - _sdClass: PropTypes.string, - children: PropTypes.node, - className: PropTypes.string, - icon: PropTypes.node, - image: PropTypes.node, - } - - static defaultProps = { - _headerElement: 'div', - _sdClass: 'sd-header', - } - - static _meta = { - library: META.library.stardust, - name: '_Header', - type: META.type.element, - } - - render() { - const content = this.props.image || this.props.icon - ?
{this.props.children}
- : this.props.children - - return createElement(this.props._headerElement, { - ...this.props, - className: cx( - this.props._sdClass, - 'ui', - this.props.className, - 'header' - ), - }, content) - } +_Header._meta = { + library: META.library.semanticUI, + name: '_Header', + type: META.type.element, } + +_Header.propTypes = { + _headerElement: PropTypes.string, + _sdClass: PropTypes.string, + className: PropTypes.string, + children: PropTypes.node, + + /** Add an icon by icon className or pass an */ + icon: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.element, + ]), + + /** Add an image by img src or pass an . */ + image: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.element, + ]), + + /** Align header content to left */ + left: PropTypes.bool, + + /** Align header content to center */ + center: PropTypes.bool, + + /** Align header content to right */ + right: PropTypes.bool, + + /** Justify content to available space */ + justified: PropTypes.bool, + + /** Divide header from the content below it */ + dividing: PropTypes.bool, + + /** Format header to appear inside a content block */ + block: PropTypes.bool, + + /** Attach header to other content, like a segment */ + attached: PropTypes.bool, + + /** Header can sit to the left or right of other content */ + floating: PropTypes.bool, +} + +_Header.defaultProps = { + _headerElement: 'div', + _sdClass: 'sd-header', +} + +export default _Header diff --git a/test/specs/elements/Header/Header-test.js b/test/specs/elements/Header/Header-test.js new file mode 100644 index 0000000000..81990eb54c --- /dev/null +++ b/test/specs/elements/Header/Header-test.js @@ -0,0 +1,36 @@ +import React from 'react' +import faker from 'faker' +import Header from 'src/elements/Header/Header' +import Icon from 'src/elements/Icon/Icon' +import Image from 'src/elements/Image/Image' +import H1 from 'src/elements/Header/HeaderH1' +import H2 from 'src/elements/Header/HeaderH2' +import H3 from 'src/elements/Header/HeaderH3' +import H4 from 'src/elements/Header/HeaderH4' +import H5 from 'src/elements/Header/HeaderH5' +import H6 from 'src/elements/Header/HeaderH6' +import Subheader from 'src/elements/Header/HeaderSubheader' +import * as common from 'test/specs/commonTests' + +describe('Header', () => { + common.isConformant(Header) + common.hasSubComponents(Header, [ + H1, H2, H3, H4, H5, H6, Subheader, + ]) + + describe('with icon', () => { + const icon = + const wrapper = mount(
) + it('adds an Icon', () => { + wrapper.should.have.descendants('Icon') + }) + }) + + describe('with image', () => { + const image = + const wrapper = mount(
) + it('adds an image', () => { + wrapper.should.have.descendants('Image') + }) + }) +}) diff --git a/test/specs/elements/Header/HeaderHeadings-test.js b/test/specs/elements/Header/HeaderHeadings-test.js new file mode 100644 index 0000000000..237374c521 --- /dev/null +++ b/test/specs/elements/Header/HeaderHeadings-test.js @@ -0,0 +1,34 @@ +import React from 'react' +import H1 from 'src/elements/Header/HeaderH1' +import H2 from 'src/elements/Header/HeaderH2' +import H3 from 'src/elements/Header/HeaderH3' +import H4 from 'src/elements/Header/HeaderH4' +import H5 from 'src/elements/Header/HeaderH5' +import H6 from 'src/elements/Header/HeaderH6' + +const headers = { + h1: H1, + h2: H2, + h3: H3, + h4: H4, + h5: H5, + h6: H6, +} + +describe('HeaderHeadings', () => { + Object.keys(headers).forEach((key) => { + describe(`Header.${key.toUpperCase()}`, () => { + const sdClass = `sd-header-${key}` + const Component = headers[key] + const wrapper = mount() + + it(`renders a ${key} element`, () => { + wrapper.should.have.tagName(key) + }) + + it(`adds the ${sdClass} class`, () => { + wrapper.should.have.className(sdClass) + }) + }) + }) +}) diff --git a/test/specs/elements/Header/HeaderSubheader-test.js b/test/specs/elements/Header/HeaderSubheader-test.js new file mode 100644 index 0000000000..dbb75259c4 --- /dev/null +++ b/test/specs/elements/Header/HeaderSubheader-test.js @@ -0,0 +1,20 @@ +import React from 'react' +import HeaderSubheader from 'src/elements/Header/HeaderSubheader' +import * as common from 'test/specs/commonTests' + +describe('HeaderSubheader', () => { + common.rendersChildren(HeaderSubheader) + const wrapper = mount() + + it('renders a
element', () => { + wrapper.should.have.tagName('div') + }) + + it('adds the sd-header-subheader class', () => { + wrapper.should.have.className('sd-header-subheader') + }) + + it(`adds the sub class`, () => { + wrapper.should.have.className('sub') + }) +}) diff --git a/test/specs/elements/Header/_Header-test.js b/test/specs/elements/Header/_Header-test.js new file mode 100644 index 0000000000..7a8fb00c2e --- /dev/null +++ b/test/specs/elements/Header/_Header-test.js @@ -0,0 +1,15 @@ +import React from 'react' + +import _Header from 'src/elements/Header/_Header' +import * as common from 'test/specs/commonTests' + +describe('_Header', () => { + common.propKeyOnlyToClassName(_Header, 'left', { className: 'aligned' }) + common.propKeyOnlyToClassName(_Header, 'center', { className: 'aligned' }) + common.propKeyOnlyToClassName(_Header, 'right', { className: 'aligned' }) + common.propKeyOnlyToClassName(_Header, 'justified') + common.propKeyOnlyToClassName(_Header, 'dividing') + common.propKeyOnlyToClassName(_Header, 'block') + common.propKeyOnlyToClassName(_Header, 'attached') + common.propKeyOnlyToClassName(_Header, 'floating') +}) From 4fdc34d1447d39dd1f2fddbd15db65974cd59c61 Mon Sep 17 00:00:00 2001 From: Jamie Hill Date: Fri, 24 Jun 2016 12:46:45 +0100 Subject: [PATCH 02/14] fixes lint errors --- src/elements/Header/HeaderH1.js | 2 +- test/specs/elements/Header/_Header-test.js | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/elements/Header/HeaderH1.js b/src/elements/Header/HeaderH1.js index fdddd70896..1d5e3e0e2a 100644 --- a/src/elements/Header/HeaderH1.js +++ b/src/elements/Header/HeaderH1.js @@ -1,4 +1,4 @@ -import React, { PropTypes } from 'react' +import React from 'react' import META from '../../utils/Meta' import _Header from './_Header' diff --git a/test/specs/elements/Header/_Header-test.js b/test/specs/elements/Header/_Header-test.js index 7a8fb00c2e..3fa4cb4e77 100644 --- a/test/specs/elements/Header/_Header-test.js +++ b/test/specs/elements/Header/_Header-test.js @@ -1,5 +1,3 @@ -import React from 'react' - import _Header from 'src/elements/Header/_Header' import * as common from 'test/specs/commonTests' From 4317290b6fd2e4980cfd74e736287438f69d4c6c Mon Sep 17 00:00:00 2001 From: Jamie Hill Date: Fri, 24 Jun 2016 12:53:04 +0100 Subject: [PATCH 03/14] fixes lint errors --- test/specs/elements/Header/HeaderSubheader-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/specs/elements/Header/HeaderSubheader-test.js b/test/specs/elements/Header/HeaderSubheader-test.js index dbb75259c4..1fa286c8ca 100644 --- a/test/specs/elements/Header/HeaderSubheader-test.js +++ b/test/specs/elements/Header/HeaderSubheader-test.js @@ -14,7 +14,7 @@ describe('HeaderSubheader', () => { wrapper.should.have.className('sd-header-subheader') }) - it(`adds the sub class`, () => { + it('adds the sub class', () => { wrapper.should.have.className('sub') }) }) From bdb958da7328093e9cefb146ab3e9d70faed6dd1 Mon Sep 17 00:00:00 2001 From: Jamie Hill Date: Fri, 24 Jun 2016 17:45:32 +0100 Subject: [PATCH 04/14] Redundant SubheaderComponent element removed in favour of tag inline --- src/elements/Header/HeaderSubheader.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/elements/Header/HeaderSubheader.js b/src/elements/Header/HeaderSubheader.js index 9faf8365c2..02cc8a68ae 100644 --- a/src/elements/Header/HeaderSubheader.js +++ b/src/elements/Header/HeaderSubheader.js @@ -15,13 +15,12 @@ function HeaderSubheader(props) { 'header' ) - const SubHeaderComponent = 'div' const rest = getUnhandledProps(HeaderSubheader, props) return ( - +
{children} - +
) } From d10fcdaa97fedf3d397658818ed983528a139e56 Mon Sep 17 00:00:00 2001 From: Jamie Hill Date: Fri, 24 Jun 2016 17:49:24 +0100 Subject: [PATCH 05/14] Redundant HeaderComponent element removed in favour of tag inline --- src/elements/Header/_Header.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/elements/Header/_Header.js b/src/elements/Header/_Header.js index 11e537ea51..defa9b9eeb 100644 --- a/src/elements/Header/_Header.js +++ b/src/elements/Header/_Header.js @@ -5,6 +5,7 @@ import { getUnhandledProps, iconPropRenderer, imagePropRenderer, + useValueAndKey, useKeyOnly, } from '../../utils/propUtils' @@ -24,7 +25,7 @@ function _Header(props) { useKeyOnly(dividing, 'dividing'), useKeyOnly(block, 'block'), useKeyOnly(attached, 'attached'), - useKeyOnly(floating, 'floating'), + useValueAndKey(floating, 'floating'), className, 'header', ) From a69c39e3cdf99e665018f93caa3f4937b3a78968 Mon Sep 17 00:00:00 2001 From: Jamie Hill Date: Fri, 24 Jun 2016 17:54:23 +0100 Subject: [PATCH 06/14] useKeyOrValueAndKey implemented to allow key or key and value denomination for attached prop --- src/elements/Header/_Header.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/elements/Header/_Header.js b/src/elements/Header/_Header.js index defa9b9eeb..8e8159d4b1 100644 --- a/src/elements/Header/_Header.js +++ b/src/elements/Header/_Header.js @@ -6,6 +6,7 @@ import { iconPropRenderer, imagePropRenderer, useValueAndKey, + useKeyOrValueAndKey, useKeyOnly, } from '../../utils/propUtils' @@ -24,7 +25,7 @@ function _Header(props) { useKeyOnly(justified, 'justified'), useKeyOnly(dividing, 'dividing'), useKeyOnly(block, 'block'), - useKeyOnly(attached, 'attached'), + useKeyOrValueAndKey(attached, 'attached'), useValueAndKey(floating, 'floating'), className, 'header', From 100525cbb27c88921011cb71a3075a6babfce287 Mon Sep 17 00:00:00 2001 From: Jamie Hill Date: Sat, 25 Jun 2016 10:55:21 +0100 Subject: [PATCH 07/14] left|center|right|justified props replaced with aligned prop tests updated to reflect examples updated to reflect --- .../Variations/HeaderTextAlignmentExample.js | 8 +++---- src/elements/Header/_Header.js | 23 ++++++------------- test/specs/elements/Header/_Header-test.js | 12 ++++++---- 3 files changed, 19 insertions(+), 24 deletions(-) diff --git a/docs/app/Examples/elements/Header/Variations/HeaderTextAlignmentExample.js b/docs/app/Examples/elements/Header/Variations/HeaderTextAlignmentExample.js index 80fd5fe3ef..d00e51ed8c 100644 --- a/docs/app/Examples/elements/Header/Variations/HeaderTextAlignmentExample.js +++ b/docs/app/Examples/elements/Header/Variations/HeaderTextAlignmentExample.js @@ -5,16 +5,16 @@ export default class HeaderTextAlignmentExample extends Component { render() { return ( - + Float Right - + Float Left - + This text takes up the full width of the container - + Centered diff --git a/src/elements/Header/_Header.js b/src/elements/Header/_Header.js index 8e8159d4b1..3c658d2a73 100644 --- a/src/elements/Header/_Header.js +++ b/src/elements/Header/_Header.js @@ -13,16 +13,13 @@ import { function _Header(props) { const { _sdClass, _headerElement, - left, center, right, justified, dividing, block, attached, floating, + aligned, dividing, block, attached, floating, icon, image, children, className, } = props const classes = cx( _sdClass, 'ui', - useKeyOnly(left, 'left aligned'), - useKeyOnly(center, 'center aligned'), - useKeyOnly(right, 'right aligned'), - useKeyOnly(justified, 'justified'), + aligned === 'justified' ? 'justified' : useValueAndKey(aligned, 'aligned'), useKeyOnly(dividing, 'dividing'), useKeyOnly(block, 'block'), useKeyOrValueAndKey(attached, 'attached'), @@ -47,6 +44,9 @@ _Header._meta = { library: META.library.semanticUI, name: '_Header', type: META.type.element, + props: { + aligned: ['left', 'center', 'right', 'justified'], + }, } _Header.propTypes = { @@ -67,17 +67,8 @@ _Header.propTypes = { PropTypes.element, ]), - /** Align header content to left */ - left: PropTypes.bool, - - /** Align header content to center */ - center: PropTypes.bool, - - /** Align header content to right */ - right: PropTypes.bool, - - /** Justify content to available space */ - justified: PropTypes.bool, + /** Align header content */ + aligned: PropTypes.oneOf(_Header._meta.props.aligned), /** Divide header from the content below it */ dividing: PropTypes.bool, diff --git a/test/specs/elements/Header/_Header-test.js b/test/specs/elements/Header/_Header-test.js index 3fa4cb4e77..b549be2459 100644 --- a/test/specs/elements/Header/_Header-test.js +++ b/test/specs/elements/Header/_Header-test.js @@ -1,13 +1,17 @@ +import React from 'react' + import _Header from 'src/elements/Header/_Header' import * as common from 'test/specs/commonTests' describe('_Header', () => { - common.propKeyOnlyToClassName(_Header, 'left', { className: 'aligned' }) - common.propKeyOnlyToClassName(_Header, 'center', { className: 'aligned' }) - common.propKeyOnlyToClassName(_Header, 'right', { className: 'aligned' }) - common.propKeyOnlyToClassName(_Header, 'justified') + common.propKeyAndValueToClassName(_Header, 'aligned') common.propKeyOnlyToClassName(_Header, 'dividing') common.propKeyOnlyToClassName(_Header, 'block') common.propKeyOnlyToClassName(_Header, 'attached') common.propKeyOnlyToClassName(_Header, 'floating') + + it('does not have aligned class when justified', () => { + shallow(<_Header aligned='justified' />) + .should.not.have.className('aligned') + }) }) From 6a6d87af1fc4e25460abcecb3c81f23ff88b2620 Mon Sep 17 00:00:00 2001 From: Jamie Hill Date: Sun, 26 Jun 2016 06:56:11 +0100 Subject: [PATCH 08/14] Header Subheader and headings tests simplified to just use isComformant --- test/specs/elements/Header/HeaderHeadings-test.js | 15 +++------------ .../specs/elements/Header/HeaderSubheader-test.js | 15 +-------------- 2 files changed, 4 insertions(+), 26 deletions(-) diff --git a/test/specs/elements/Header/HeaderHeadings-test.js b/test/specs/elements/Header/HeaderHeadings-test.js index 237374c521..fab75ba407 100644 --- a/test/specs/elements/Header/HeaderHeadings-test.js +++ b/test/specs/elements/Header/HeaderHeadings-test.js @@ -1,10 +1,10 @@ -import React from 'react' import H1 from 'src/elements/Header/HeaderH1' import H2 from 'src/elements/Header/HeaderH2' import H3 from 'src/elements/Header/HeaderH3' import H4 from 'src/elements/Header/HeaderH4' import H5 from 'src/elements/Header/HeaderH5' import H6 from 'src/elements/Header/HeaderH6' +import * as common from 'test/specs/commonTests' const headers = { h1: H1, @@ -15,20 +15,11 @@ const headers = { h6: H6, } -describe('HeaderHeadings', () => { +describe.only('HeaderHeadings', () => { Object.keys(headers).forEach((key) => { describe(`Header.${key.toUpperCase()}`, () => { - const sdClass = `sd-header-${key}` const Component = headers[key] - const wrapper = mount() - - it(`renders a ${key} element`, () => { - wrapper.should.have.tagName(key) - }) - - it(`adds the ${sdClass} class`, () => { - wrapper.should.have.className(sdClass) - }) + common.isConformant(Component) }) }) }) diff --git a/test/specs/elements/Header/HeaderSubheader-test.js b/test/specs/elements/Header/HeaderSubheader-test.js index 1fa286c8ca..21313d7553 100644 --- a/test/specs/elements/Header/HeaderSubheader-test.js +++ b/test/specs/elements/Header/HeaderSubheader-test.js @@ -1,20 +1,7 @@ -import React from 'react' import HeaderSubheader from 'src/elements/Header/HeaderSubheader' import * as common from 'test/specs/commonTests' describe('HeaderSubheader', () => { + common.isConformant(HeaderSubheader) common.rendersChildren(HeaderSubheader) - const wrapper = mount() - - it('renders a
element', () => { - wrapper.should.have.tagName('div') - }) - - it('adds the sd-header-subheader class', () => { - wrapper.should.have.className('sd-header-subheader') - }) - - it('adds the sub class', () => { - wrapper.should.have.className('sub') - }) }) From ad810237990638ce44e2101f50dd3e0ada525df2 Mon Sep 17 00:00:00 2001 From: Jamie Hill Date: Fri, 24 Jun 2016 13:15:29 +0100 Subject: [PATCH 09/14] Image Component updated to v1 API --- src/elements/Image/Image.js | 60 +++++++++++++++++++++---------------- 1 file changed, 35 insertions(+), 25 deletions(-) diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js index 375f708d8f..398f03f30a 100644 --- a/src/elements/Image/Image.js +++ b/src/elements/Image/Image.js @@ -1,28 +1,38 @@ -import React, { Component, PropTypes } from 'react' -import classNames from 'classnames' +import React, { PropTypes } from 'react' +import cx from 'classnames' import META from '../../utils/Meta' -export default class Image extends Component { - static propTypes = { - alt: PropTypes.string, - className: PropTypes.string, - src: PropTypes.string, - } - - static _meta = { - library: META.library.semanticUI, - name: 'Image', - type: META.type.element, - } - - render() { - const classes = classNames( - 'sd-image', - 'ui', - this.props.className, - 'image' - ) - - return - } +function Image(props) { + const { + className, + } = props + + const classes = cx( + 'sd-image', 'ui', + className, + 'image' + ) + + return ( + + ) } + +Image._meta = { + library: META.library.semanticUI, + name: 'Image', + type: META.type.element, +} + +Image.propTypes = { + /** Class names for custom styling. */ + className: PropTypes.string, + + /** Alternate text for the image specified */ + alt: PropTypes.string, + + /** Specifies the URL of the image */ + src: PropTypes.string, +} + +export default Image From 6330ca04bcf5207a87f6447f0fc8fa525174e64e Mon Sep 17 00:00:00 2001 From: Jamie Hill Date: Fri, 24 Jun 2016 13:16:06 +0100 Subject: [PATCH 10/14] Image Component updated to v1 API --- src/elements/Image/Image.js | 60 ++++++++++++++++--------------------- 1 file changed, 25 insertions(+), 35 deletions(-) diff --git a/src/elements/Image/Image.js b/src/elements/Image/Image.js index 398f03f30a..375f708d8f 100644 --- a/src/elements/Image/Image.js +++ b/src/elements/Image/Image.js @@ -1,38 +1,28 @@ -import React, { PropTypes } from 'react' -import cx from 'classnames' +import React, { Component, PropTypes } from 'react' +import classNames from 'classnames' import META from '../../utils/Meta' -function Image(props) { - const { - className, - } = props - - const classes = cx( - 'sd-image', 'ui', - className, - 'image' - ) - - return ( - - ) +export default class Image extends Component { + static propTypes = { + alt: PropTypes.string, + className: PropTypes.string, + src: PropTypes.string, + } + + static _meta = { + library: META.library.semanticUI, + name: 'Image', + type: META.type.element, + } + + render() { + const classes = classNames( + 'sd-image', + 'ui', + this.props.className, + 'image' + ) + + return + } } - -Image._meta = { - library: META.library.semanticUI, - name: 'Image', - type: META.type.element, -} - -Image.propTypes = { - /** Class names for custom styling. */ - className: PropTypes.string, - - /** Alternate text for the image specified */ - alt: PropTypes.string, - - /** Specifies the URL of the image */ - src: PropTypes.string, -} - -export default Image From 2508c5f606ddab2204cda630d6d1b1ec2567268d Mon Sep 17 00:00:00 2001 From: Jamie Hill Date: Sun, 26 Jun 2016 08:01:54 +0100 Subject: [PATCH 11/14] Header updated to use _.meta props correctly Docs updated to reflect Tests updated to reflect --- .../Header/States/HeaderDisabledExample.js | 2 +- .../Variations/HeaderAttachedExample.js | 2 +- .../Header/Variations/HeaderBlockExample.js | 2 +- .../Header/Variations/HeaderColoredExample.js | 24 ++++++++-------- .../Variations/HeaderDividingExample.js | 2 +- .../Variations/HeaderFloatingExample.js | 4 +-- .../Variations/HeaderInvertedExample.js | 24 ++++++++-------- src/elements/Header/_Header.js | 28 +++++++++++++++---- test/specs/commonTests.js | 3 ++ test/specs/elements/Header/_Header-test.js | 20 +++++++------ 10 files changed, 68 insertions(+), 43 deletions(-) diff --git a/docs/app/Examples/elements/Header/States/HeaderDisabledExample.js b/docs/app/Examples/elements/Header/States/HeaderDisabledExample.js index 0fcda5e543..d579c2d540 100644 --- a/docs/app/Examples/elements/Header/States/HeaderDisabledExample.js +++ b/docs/app/Examples/elements/Header/States/HeaderDisabledExample.js @@ -4,7 +4,7 @@ import { Header } from 'stardust' export default class HeaderDisabledExample extends Component { render() { return ( - + Disabled Header ) diff --git a/docs/app/Examples/elements/Header/Variations/HeaderAttachedExample.js b/docs/app/Examples/elements/Header/Variations/HeaderAttachedExample.js index a85a4a181a..0941d72fdb 100644 --- a/docs/app/Examples/elements/Header/Variations/HeaderAttachedExample.js +++ b/docs/app/Examples/elements/Header/Variations/HeaderAttachedExample.js @@ -5,7 +5,7 @@ export default class HeaderAttachedExample extends Component { render() { return (
- + Attached Header diff --git a/docs/app/Examples/elements/Header/Variations/HeaderBlockExample.js b/docs/app/Examples/elements/Header/Variations/HeaderBlockExample.js index 43a39f21fc..a7ce7f9178 100644 --- a/docs/app/Examples/elements/Header/Variations/HeaderBlockExample.js +++ b/docs/app/Examples/elements/Header/Variations/HeaderBlockExample.js @@ -4,7 +4,7 @@ import { Header } from 'stardust' export default class HeaderBlockExample extends Component { render() { return ( - + Block Header ) diff --git a/docs/app/Examples/elements/Header/Variations/HeaderColoredExample.js b/docs/app/Examples/elements/Header/Variations/HeaderColoredExample.js index 2421d6eb45..88809dd7c3 100644 --- a/docs/app/Examples/elements/Header/Variations/HeaderColoredExample.js +++ b/docs/app/Examples/elements/Header/Variations/HeaderColoredExample.js @@ -5,18 +5,18 @@ export default class HeaderColoredExample extends Component { render() { return (
- Red - Orange - Yellow - Olive - Green - Teal - Blue - Purple - Violent - Pink - Brown - Grey + Red + Orange + Yellow + Olive + Green + Teal + Blue + Purple + Violent + Pink + Brown + Grey
) } diff --git a/docs/app/Examples/elements/Header/Variations/HeaderDividingExample.js b/docs/app/Examples/elements/Header/Variations/HeaderDividingExample.js index 17eb8a62b8..0a755b0502 100644 --- a/docs/app/Examples/elements/Header/Variations/HeaderDividingExample.js +++ b/docs/app/Examples/elements/Header/Variations/HeaderDividingExample.js @@ -4,7 +4,7 @@ import { Header } from 'stardust' export default class HeaderDividingExample extends Component { render() { return ( - + Dividing Header ) diff --git a/docs/app/Examples/elements/Header/Variations/HeaderFloatingExample.js b/docs/app/Examples/elements/Header/Variations/HeaderFloatingExample.js index 0f400e2350..148a935054 100644 --- a/docs/app/Examples/elements/Header/Variations/HeaderFloatingExample.js +++ b/docs/app/Examples/elements/Header/Variations/HeaderFloatingExample.js @@ -5,10 +5,10 @@ export default class HeaderFloatingExample extends Component { render() { return ( - + Float Right - + Float Left diff --git a/docs/app/Examples/elements/Header/Variations/HeaderInvertedExample.js b/docs/app/Examples/elements/Header/Variations/HeaderInvertedExample.js index dc05b5f88d..001c8552b9 100644 --- a/docs/app/Examples/elements/Header/Variations/HeaderInvertedExample.js +++ b/docs/app/Examples/elements/Header/Variations/HeaderInvertedExample.js @@ -5,18 +5,18 @@ export default class HeaderInvertedExample extends Component { render() { return ( - Red - Orange - Yellow - Olive - Green - Teal - Blue - Purple - Violent - Pink - Brown - Grey + Red + Orange + Yellow + Olive + Green + Teal + Blue + Purple + Violent + Pink + Brown + Grey ) } diff --git a/src/elements/Header/_Header.js b/src/elements/Header/_Header.js index 3c658d2a73..39a7d6011f 100644 --- a/src/elements/Header/_Header.js +++ b/src/elements/Header/_Header.js @@ -1,11 +1,14 @@ import cx from 'classnames' import React, { PropTypes } from 'react' + import META from '../../utils/Meta' +import * as sui from '../../utils/semanticUtils' import { getUnhandledProps, iconPropRenderer, imagePropRenderer, useValueAndKey, + useAlignedProp, useKeyOrValueAndKey, useKeyOnly, } from '../../utils/propUtils' @@ -13,17 +16,20 @@ import { function _Header(props) { const { _sdClass, _headerElement, - aligned, dividing, block, attached, floating, + color, aligned, dividing, block, attached, floated, inverted, disabled, icon, image, children, className, } = props const classes = cx( _sdClass, 'ui', - aligned === 'justified' ? 'justified' : useValueAndKey(aligned, 'aligned'), + color, + useAlignedProp(aligned), useKeyOnly(dividing, 'dividing'), useKeyOnly(block, 'block'), useKeyOrValueAndKey(attached, 'attached'), - useValueAndKey(floating, 'floating'), + useValueAndKey(floated, 'floated'), + useKeyOnly(inverted, 'inverted'), + useKeyOnly(disabled, 'disabled'), className, 'header', ) @@ -46,6 +52,9 @@ _Header._meta = { type: META.type.element, props: { aligned: ['left', 'center', 'right', 'justified'], + floated: ['left', 'right'], + attached: ['top', 'bottom'], + color: sui.colors, }, } @@ -67,6 +76,9 @@ _Header.propTypes = { PropTypes.element, ]), + /** Color of the header. */ + color: PropTypes.oneOf(_Header._meta.props.colors), + /** Align header content */ aligned: PropTypes.oneOf(_Header._meta.props.aligned), @@ -77,10 +89,16 @@ _Header.propTypes = { block: PropTypes.bool, /** Attach header to other content, like a segment */ - attached: PropTypes.bool, + attached: PropTypes.oneOf(_Header._meta.props.attached), /** Header can sit to the left or right of other content */ - floating: PropTypes.bool, + floated: PropTypes.oneOf(_Header._meta.props.floated), + + /** Inverts the color of the header for dark backgrounds */ + inverted: PropTypes.bool, + + /** Show that the header is inactive */ + disabled: PropTypes.bool, } _Header.defaultProps = { diff --git a/test/specs/commonTests.js b/test/specs/commonTests.js index 42ae3ba1cc..891013a4f0 100644 --- a/test/specs/commonTests.js +++ b/test/specs/commonTests.js @@ -385,6 +385,9 @@ export const implementsAlignedProp = (Component, requiredProps = {}) => { it('adds "justified" without "aligned" to className', () => { shallow() .should.have.className('justified') + + shallow() + .should.not.have.className('aligned') }) } else { it(`adds "${propVal} aligned" to className`, () => { diff --git a/test/specs/elements/Header/_Header-test.js b/test/specs/elements/Header/_Header-test.js index b549be2459..ec7762f166 100644 --- a/test/specs/elements/Header/_Header-test.js +++ b/test/specs/elements/Header/_Header-test.js @@ -3,15 +3,19 @@ import React from 'react' import _Header from 'src/elements/Header/_Header' import * as common from 'test/specs/commonTests' -describe('_Header', () => { - common.propKeyAndValueToClassName(_Header, 'aligned') +describe.only('_Header', () => { + common.hasUIClassName(_Header) + common.rendersChildren(_Header) + common.propKeyOnlyToClassName(_Header, 'dividing') common.propKeyOnlyToClassName(_Header, 'block') - common.propKeyOnlyToClassName(_Header, 'attached') - common.propKeyOnlyToClassName(_Header, 'floating') + common.propKeyOnlyToClassName(_Header, 'inverted') + common.propKeyOnlyToClassName(_Header, 'disabled') + + common.propKeyAndValueToClassName(_Header, 'floated') + common.propKeyOrValueToClassName(_Header, 'attached') + + common.propValueOnlyToClassName(_Header, 'color') - it('does not have aligned class when justified', () => { - shallow(<_Header aligned='justified' />) - .should.not.have.className('aligned') - }) + common.implementsAlignedProp(_Header) }) From 2efe6ec7f2febaa20ae42a0caaaa27dc52bbc7d9 Mon Sep 17 00:00:00 2001 From: Jamie Hill Date: Sun, 26 Jun 2016 08:36:59 +0100 Subject: [PATCH 12/14] Updated Icon/Image tests for Header components --- test/specs/elements/Header/Header-test.js | 20 ------- .../elements/Header/HeaderHeadings-test.js | 2 +- test/specs/elements/Header/_Header-test.js | 60 +++++++++++++++++++ 3 files changed, 61 insertions(+), 21 deletions(-) diff --git a/test/specs/elements/Header/Header-test.js b/test/specs/elements/Header/Header-test.js index 81990eb54c..428b548386 100644 --- a/test/specs/elements/Header/Header-test.js +++ b/test/specs/elements/Header/Header-test.js @@ -1,8 +1,4 @@ -import React from 'react' -import faker from 'faker' import Header from 'src/elements/Header/Header' -import Icon from 'src/elements/Icon/Icon' -import Image from 'src/elements/Image/Image' import H1 from 'src/elements/Header/HeaderH1' import H2 from 'src/elements/Header/HeaderH2' import H3 from 'src/elements/Header/HeaderH3' @@ -17,20 +13,4 @@ describe('Header', () => { common.hasSubComponents(Header, [ H1, H2, H3, H4, H5, H6, Subheader, ]) - - describe('with icon', () => { - const icon = - const wrapper = mount(
) - it('adds an Icon', () => { - wrapper.should.have.descendants('Icon') - }) - }) - - describe('with image', () => { - const image = - const wrapper = mount(
) - it('adds an image', () => { - wrapper.should.have.descendants('Image') - }) - }) }) diff --git a/test/specs/elements/Header/HeaderHeadings-test.js b/test/specs/elements/Header/HeaderHeadings-test.js index fab75ba407..f8583051ec 100644 --- a/test/specs/elements/Header/HeaderHeadings-test.js +++ b/test/specs/elements/Header/HeaderHeadings-test.js @@ -15,7 +15,7 @@ const headers = { h6: H6, } -describe.only('HeaderHeadings', () => { +describe('HeaderHeadings', () => { Object.keys(headers).forEach((key) => { describe(`Header.${key.toUpperCase()}`, () => { const Component = headers[key] diff --git a/test/specs/elements/Header/_Header-test.js b/test/specs/elements/Header/_Header-test.js index ec7762f166..9ccc19b1ea 100644 --- a/test/specs/elements/Header/_Header-test.js +++ b/test/specs/elements/Header/_Header-test.js @@ -1,8 +1,12 @@ import React from 'react' +import faker from 'faker' import _Header from 'src/elements/Header/_Header' import * as common from 'test/specs/commonTests' +import Icon from 'src/elements/Icon/Icon' +import Image from 'src/elements/Image/Image' + describe.only('_Header', () => { common.hasUIClassName(_Header) common.rendersChildren(_Header) @@ -18,4 +22,60 @@ describe.only('_Header', () => { common.propValueOnlyToClassName(_Header, 'color') common.implementsAlignedProp(_Header) + + // ------------------------------------ + // Add Icon/Image test to commonTests ? + // ------------------------------------ + + describe('icon', () => { + const icon = faker.hacker.noun() + it('has no i when not defined', () => { + shallow(<_Header />) + .should.not.have.descendants('i') + }) + + it('adds an icon when icon prop is Icon instance', () => { + shallow(<_Header icon={} />) + .childAt(0) + .should.match('i') + }) + + it('adds an icon when icon prop is icon class string', () => { + shallow(<_Header icon={icon} />) + .childAt(0) + .should.match('i') + }) + + it('adds the value to the Icon className', () => { + shallow(<_Header icon={icon} />) + .find('Icon') + .should.have.className(icon) + }) + }) + + describe('image', () => { + const image = faker.internet.avatar() + it('has no img when not defined', () => { + shallow(<_Header />) + .should.not.have.descendants('img') + }) + + it('adds an image when icon prop is Image instance', () => { + shallow(<_Header image={} />) + .childAt(0) + .should.match('img') + }) + + it('adds an image when image prop is image path', () => { + shallow(<_Header image={image} />) + .childAt(0) + .should.match('img') + }) + + it('adds the value to the Image src prop', () => { + shallow(<_Header image={image} />) + .childAt(0) + .should.have.attr('src').equal(image) + }) + }) }) From 7ea6275e74dfa882b8748a90c9cc08b6b62e90e5 Mon Sep 17 00:00:00 2001 From: Jamie Hill Date: Sun, 26 Jun 2016 09:38:22 +0100 Subject: [PATCH 13/14] Adds new commonTest method for Icon/Image assertions --- src/elements/Header/_Header.js | 1 + test/specs/commonTests.js | 69 ++++++++++++++++++++++ test/specs/elements/Header/_Header-test.js | 61 +------------------ 3 files changed, 72 insertions(+), 59 deletions(-) diff --git a/src/elements/Header/_Header.js b/src/elements/Header/_Header.js index 39a7d6011f..05da4269bd 100644 --- a/src/elements/Header/_Header.js +++ b/src/elements/Header/_Header.js @@ -22,6 +22,7 @@ function _Header(props) { const classes = cx( _sdClass, 'ui', + icon && 'icon', color, useAlignedProp(aligned), useKeyOnly(dividing, 'dividing'), diff --git a/test/specs/commonTests.js b/test/specs/commonTests.js index 891013a4f0..0599a850de 100644 --- a/test/specs/commonTests.js +++ b/test/specs/commonTests.js @@ -9,6 +9,9 @@ import * as consoleUtil from 'test/utils/consoleUtil' import sandbox from 'test/utils/Sandbox-util' import * as syntheticEvent from 'test/utils/syntheticEvent' +import Icon from 'src/elements/Icon/Icon' +import Image from 'src/elements/Image/Image' + const componentCtx = require.context('../../src/', true, /(addons|collections|elements|modules|views).*\.js$/) const componentInfo = componentCtx.keys().map(key => { @@ -399,6 +402,72 @@ export const implementsAlignedProp = (Component, requiredProps = {}) => { }) } +export const implementsIconProp = (Component, requiredProps = {}) => { + const iconClass = faker.hacker.noun() + const assertValid = (wrapper) => { + wrapper.should.have.className('icon') + wrapper.should.have.descendants('Icon') + wrapper.find('Icon') + .should.have.className(iconClass) + } + + describe('icon (common)', () => { + _noDefaultClassNameFromProp(Component, 'icon') + + it('has no i when not defined', () => { + shallow() + .should.not.have.descendants('i') + }) + + it('adds a i as first child', () => { + shallow() + .childAt(0) + .should.match('i') + }) + + it('accepts an Icon instance', () => { + const icon = + assertValid(shallow()) + }) + + it('accepts an icon className string', () => { + assertValid(shallow()) + }) + }) +} + +export const implementsImageProp = (Component, requiredProps = {}) => { + const imageSrc = faker.internet.avatar() + const assertValid = (wrapper) => { + wrapper.should.have.descendants('Image') + wrapper.find('Image') + .should.have.prop('src', imageSrc) + } + describe('image (common)', () => { + _noDefaultClassNameFromProp(Component, 'image') + + it('has no img when prop is not defined', () => { + shallow() + .should.not.have.descendants('img') + }) + + it('adds a img as first child', () => { + shallow() + .childAt(0) + .should.match('img') + }) + + it('accepts an Image instance', () => { + const image = + assertValid(shallow()) + }) + + it('accepts an image src string', () => { + assertValid(shallow()) + }) + }) +} + /** * Assert that only a Component prop's name is converted to className. * @param {React.Component|Function} Component The component to test. diff --git a/test/specs/elements/Header/_Header-test.js b/test/specs/elements/Header/_Header-test.js index 9ccc19b1ea..d7d93f55e8 100644 --- a/test/specs/elements/Header/_Header-test.js +++ b/test/specs/elements/Header/_Header-test.js @@ -4,9 +4,6 @@ import faker from 'faker' import _Header from 'src/elements/Header/_Header' import * as common from 'test/specs/commonTests' -import Icon from 'src/elements/Icon/Icon' -import Image from 'src/elements/Image/Image' - describe.only('_Header', () => { common.hasUIClassName(_Header) common.rendersChildren(_Header) @@ -22,60 +19,6 @@ describe.only('_Header', () => { common.propValueOnlyToClassName(_Header, 'color') common.implementsAlignedProp(_Header) - - // ------------------------------------ - // Add Icon/Image test to commonTests ? - // ------------------------------------ - - describe('icon', () => { - const icon = faker.hacker.noun() - it('has no i when not defined', () => { - shallow(<_Header />) - .should.not.have.descendants('i') - }) - - it('adds an icon when icon prop is Icon instance', () => { - shallow(<_Header icon={} />) - .childAt(0) - .should.match('i') - }) - - it('adds an icon when icon prop is icon class string', () => { - shallow(<_Header icon={icon} />) - .childAt(0) - .should.match('i') - }) - - it('adds the value to the Icon className', () => { - shallow(<_Header icon={icon} />) - .find('Icon') - .should.have.className(icon) - }) - }) - - describe('image', () => { - const image = faker.internet.avatar() - it('has no img when not defined', () => { - shallow(<_Header />) - .should.not.have.descendants('img') - }) - - it('adds an image when icon prop is Image instance', () => { - shallow(<_Header image={} />) - .childAt(0) - .should.match('img') - }) - - it('adds an image when image prop is image path', () => { - shallow(<_Header image={image} />) - .childAt(0) - .should.match('img') - }) - - it('adds the value to the Image src prop', () => { - shallow(<_Header image={image} />) - .childAt(0) - .should.have.attr('src').equal(image) - }) - }) + common.implementsIconProp(_Header) + common.implementsImageProp(_Header) }) From 20bf1adfc2d9213331b5ea9aa5dac0cc45ccdd02 Mon Sep 17 00:00:00 2001 From: Jamie Hill Date: Sun, 26 Jun 2016 09:40:37 +0100 Subject: [PATCH 14/14] Fixes lint error --- test/specs/elements/Header/_Header-test.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/test/specs/elements/Header/_Header-test.js b/test/specs/elements/Header/_Header-test.js index d7d93f55e8..09de29eb3a 100644 --- a/test/specs/elements/Header/_Header-test.js +++ b/test/specs/elements/Header/_Header-test.js @@ -1,10 +1,7 @@ -import React from 'react' -import faker from 'faker' - import _Header from 'src/elements/Header/_Header' import * as common from 'test/specs/commonTests' -describe.only('_Header', () => { +describe('_Header', () => { common.hasUIClassName(_Header) common.rendersChildren(_Header)