diff options
author | Yamagishi Kazutoshi <ykzts@desire.sh> | 2017-06-02 00:27:15 +0900 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2017-06-01 17:27:15 +0200 |
commit | 39ea5c0e2e9bdf2c6e3bd0797e6fb422e6117aa2 (patch) | |
tree | 5af615d8559d8f142d6a979ba944d4f6b0cf49b6 /spec/javascript/components/button.test.js | |
parent | 509b0cfafc0857538d63f4b93b26462f035d458b (diff) |
Improve tests for JavaScript (#3496)
- Upgrade dependencies - chai (3.5.0 -> 4.0.1) - chai-enzyme (0.6.1 -> 0.7.1) - sinon (2.2.0 -> 2.3.2) - Change extensions from .jsx to .js - Don't assign `React` to `global` - Check code format using ESLint
Diffstat (limited to 'spec/javascript/components/button.test.js')
-rw-r--r-- | spec/javascript/components/button.test.js | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/spec/javascript/components/button.test.js b/spec/javascript/components/button.test.js new file mode 100644 index 000000000..9cf8b1eed --- /dev/null +++ b/spec/javascript/components/button.test.js @@ -0,0 +1,71 @@ +import { expect } from 'chai'; +import { shallow } from 'enzyme'; +import sinon from 'sinon'; +import React from 'react'; +import Button from '../../../app/javascript/mastodon/components/button'; + +describe('<Button />', () => { + it('renders a button element', () => { + const wrapper = shallow(<Button />); + expect(wrapper).to.match('button'); + }); + + it('renders the given text', () => { + const text = 'foo'; + const wrapper = shallow(<Button text={text} />); + expect(wrapper.find('button')).to.have.text(text); + }); + + it('handles click events using the given handler', () => { + const handler = sinon.spy(); + const wrapper = shallow(<Button onClick={handler} />); + wrapper.find('button').simulate('click'); + expect(handler.calledOnce).to.equal(true); + }); + + it('does not handle click events if props.disabled given', () => { + const handler = sinon.spy(); + const wrapper = shallow(<Button onClick={handler} disabled />); + wrapper.find('button').simulate('click'); + expect(handler.called).to.equal(false); + }); + + it('renders a disabled attribute if props.disabled given', () => { + const wrapper = shallow(<Button disabled />); + expect(wrapper.find('button')).to.be.disabled(); + }); + + it('renders the children', () => { + const children = <p>children</p>; + const wrapper = shallow(<Button>{children}</Button>); + expect(wrapper.find('button')).to.contain(children); + }); + + it('renders the props.text instead of children', () => { + const text = 'foo'; + const children = <p>children</p>; + const wrapper = shallow(<Button text={text}>{children}</Button>); + expect(wrapper.find('button')).to.have.text(text); + expect(wrapper.find('button')).to.not.contain(children); + }); + + it('renders style="display: block; width: 100%;" if props.block given', () => { + const wrapper = shallow(<Button block />); + expect(wrapper.find('button')).to.have.className('button--block'); + }); + + it('renders style="display: inline-block; width: auto;" by default', () => { + const wrapper = shallow(<Button />); + expect(wrapper.find('button')).to.not.have.className('button--block'); + }); + + it('adds class "button-secondary" if props.secondary given', () => { + const wrapper = shallow(<Button secondary />); + expect(wrapper.find('button')).to.have.className('button-secondary'); + }); + + it('does not add class "button-secondary" by default', () => { + const wrapper = shallow(<Button />); + expect(wrapper.find('button')).to.not.have.className('button-secondary'); + }); +}); |