Skip to content

Commit

Permalink
Adds button component tests.
Browse files Browse the repository at this point in the history
Adds basic button component tests.  Covers cases where the tag name or
other properties are conditionally rendered.  Related to progress on
#641.  This PR adds the components directory to the list of entry points
configured for tests by webpack.
  • Loading branch information
BE-Webdesign committed May 29, 2017
1 parent 48ab106 commit 780633d
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 1 deletion.
94 changes: 94 additions & 0 deletions components/button/test/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
/**
* External dependencies
*/
import { expect } from 'chai';
import { shallow } from 'enzyme';

/**
* Internal dependencies
*/
import Button from '../';

describe( 'Button', () => {
describe( 'basic rendering', () => {
it( 'without modifiers', () => {
const button = shallow( <Button /> );
expect( button.hasClass( 'components-button' ) ).to.equal( true );
expect( button.hasClass( 'button' ) ).to.equal( false );
expect( button.hasClass( 'button-large' ) ).to.equal( false );
expect( button.hasClass( 'button-primary' ) ).to.equal( false );
expect( button.hasClass( 'is-toggled' ) ).to.equal( false );
expect( button.hasClass( 'is-borderless' ) ).to.equal( false );
expect( button.prop( 'disabled' ) ).to.equal( undefined );
expect( button.prop( 'type' ) ).to.equal( 'button' );
expect( button.type() ).to.equal( 'button' );
} );

it( 'with isPrimary', () => {
const button = shallow( <Button isPrimary /> );
expect( button.hasClass( 'button' ) ).to.equal( true );
expect( button.hasClass( 'button-large' ) ).to.equal( false );
expect( button.hasClass( 'button-primary' ) ).to.equal( true );
} );

it( 'with isLarge', () => {
const button = shallow( <Button isLarge /> );
expect( button.hasClass( 'button' ) ).to.equal( true );
expect( button.hasClass( 'button-large' ) ).to.equal( true );
expect( button.hasClass( 'button-primary' ) ).to.equal( false );
} );

it( 'with isToggled', () => {
const button = shallow( <Button isToggled /> );
expect( button.hasClass( 'button' ) ).to.equal( false );
expect( button.hasClass( 'is-toggled' ) ).to.equal( true );
} );

it( 'with disabled', () => {
const button = shallow( <Button disabled /> );
expect( button.prop( 'disabled' ) ).to.equal( true );
} );

it( 'does not render target without href present', () => {
const button = shallow( <Button target="_blank" /> );
expect( button.prop( 'target' ) ).to.equal( undefined );
} );
} );

describe( 'with href property', () => {
it( 'renders as a link', () => {
const button = shallow( <Button href="https://wordpress.org/" /> );

expect( button.type() ).to.equal( 'a' );
expect( button.prop( 'href' ) ).to.equal( 'https://wordpress.org/' );
} );

it( 'including target renders', () => {
const button = shallow( <Button href="https://wordpress.org/" target="_blank" /> );

expect( button.prop( 'target' ) ).to.equal( '_blank' );
} );

it( 'will turn it into a button by using disabled property', () => {
const button = shallow( <Button href="https://wordpress.org/" disabled /> );

expect( button.type() ).to.equal( 'button' );
} );
} );

describe( 'with className property', () => {
it( 'renders with an extra className', () => {
const button = shallow( <Button className="gutenberg" /> );

expect( button.hasClass( 'gutenberg' ) ).to.equal( true );
} );
} );

describe( 'with additonal properties', () => {
it( 'renders WordPress property', () => {
const button = <Button WordPress="awesome" />;

expect( button.props.WordPress ).to.equal( 'awesome' );
} );
} );
} );
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"cross-env": "^3.2.4",
"deep-freeze": "0.0.1",
"dirty-chai": "^1.2.2",
"enzyme": "^2.8.2",
"eslint": "^3.17.1",
"eslint-config-wordpress": "^1.1.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
Expand All @@ -50,6 +51,7 @@
"pegjs-loader": "^0.5.1",
"postcss-loader": "^1.3.3",
"raw-loader": "^0.5.1",
"react-test-renderer": "^15.5.4",
"sass-loader": "^6.0.3",
"sinon": "^2.1.0",
"sinon-chai": "^2.9.0",
Expand Down
2 changes: 1 addition & 1 deletion webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ switch ( process.env.NODE_ENV ) {
...config.module.rules,
];
const testFiles = glob.sync(
'./{' + Object.keys( config.entry ).sort() + '}/**/test/*.js'
'./{' + Object.keys( config.entry ).concat( 'components' ).sort() + '}/**/test/*.js'
);
config.entry = [
'./date/index.js',
Expand Down

0 comments on commit 780633d

Please sign in to comment.