Permalink
Browse files

Improve test component variable naming

  • Loading branch information...
sindresorhus committed Jan 11, 2019
1 parent 1911edc commit b5a394866de84366db7c9a1836a52c98daf74615
@@ -16,17 +16,17 @@ const Avatar = proxyquire.noCallThru()('../../../app/renderer/components/Avatar'
}).default;

test('render `img`', t => {
const m = shallow(<Avatar/>);
t.is(m.type(), 'img');
const component = shallow(<Avatar/>);
t.is(component.type(), 'img');
});

test('set `src` prop', t => {
const m = shallow(<Avatar/>);
t.is(m.prop('src'), avatar(id));
const component = shallow(<Avatar/>);
t.is(component.prop('src'), avatar(id));
});

test('pass `props`', t => {
const foo = 'foo';
const m = shallow(<Avatar foo={foo}/>);
t.is(m.prop('foo'), foo);
const component = shallow(<Avatar foo={foo}/>);
t.is(component.prop('foo'), foo);
});
@@ -4,28 +4,28 @@ import {shallow} from 'enzyme';
import BackButton from '../../../app/renderer/components/BackButton';

test('render `button`', t => {
const m = shallow(<BackButton/>);
t.is(m.type(), 'button');
const component = shallow(<BackButton/>);
t.is(component.type(), 'button');
});

test('set `type` prop', t => {
const m = shallow(<BackButton/>);
t.is(m.prop('type'), 'button');
const component = shallow(<BackButton/>);
t.is(component.prop('type'), 'button');
});

test('set `className` prop', t => {
const m = shallow(<BackButton/>);
t.true(m.prop('className').includes('BackButton'));
const component = shallow(<BackButton/>);
t.true(component.prop('className').includes('BackButton'));
});

test('pass `props`', t => {
const foo = 'foo';
const m = shallow(<BackButton foo={foo}/>);
t.is(m.prop('foo'), foo);
const component = shallow(<BackButton foo={foo}/>);
t.is(component.prop('foo'), foo);
});

test('has `className` prop', t => {
const className = 'foo';
const m = shallow(<BackButton className={className}/>);
t.true(m.prop('className').includes(className));
const component = shallow(<BackButton className={className}/>);
t.true(component.prop('className').includes(className));
});
@@ -4,49 +4,49 @@ import {shallow} from 'enzyme';
import Button from '../../../app/renderer/components/Button';

test('render `button`', t => {
const m = shallow(<Button/>);
t.is(m.type(), 'button');
const component = shallow(<Button/>);
t.is(component.type(), 'button');
});

test('set `type` prop', t => {
const m = shallow(<Button/>);
t.is(m.prop('type'), 'button');
const component = shallow(<Button/>);
t.is(component.prop('type'), 'button');
});

test('set `className` prop', t => {
const m = shallow(<Button/>);
t.true(m.prop('className').includes('Button'));
const component = shallow(<Button/>);
t.true(component.prop('className').includes('Button'));
});

test('pass `props`', t => {
const foo = 'foo';
const m = shallow(<Button foo={foo}/>);
t.is(m.prop('foo'), foo);
const component = shallow(<Button foo={foo}/>);
t.is(component.prop('foo'), foo);
});

test('has `className` prop', t => {
const className = 'foo';
const m = shallow(<Button className={className}/>);
t.true(m.prop('className').includes(className));
const component = shallow(<Button className={className}/>);
t.true(component.prop('className').includes(className));
});

test('has `primary` prop', t => {
const m = shallow(<Button primary/>);
t.true(m.prop('className').includes('Button--primary'));
const component = shallow(<Button primary/>);
t.true(component.prop('className').includes('Button--primary'));
});

test('has `fullwidth` prop', t => {
const m = shallow(<Button fullwidth/>);
t.true(m.prop('className').includes('Button--fullwidth'));
const component = shallow(<Button fullwidth/>);
t.true(component.prop('className').includes('Button--fullwidth'));
});

test('has `color` prop', t => {
const color = 'foo';
const m = shallow(<Button color={color}/>);
t.true(m.prop('className').includes(`Button--${color}`));
const component = shallow(<Button color={color}/>);
t.true(component.prop('className').includes(`Button--${color}`));
});

test('has `disabled` prop', t => {
const m = shallow(<Button disabled/>);
t.true(m.prop('className').includes('Button--disabled'));
const component = shallow(<Button disabled/>);
t.true(component.prop('className').includes('Button--disabled'));
});
@@ -5,73 +5,73 @@ import {shallow} from 'enzyme';
import Checkbox from '../../../app/renderer/components/Checkbox';

test('render `div`', t => {
const m = shallow(<Checkbox label="x" value="x"/>);
t.is(m.dive().type(), 'div');
const component = shallow(<Checkbox label="x" value="x"/>);
t.is(component.dive().type(), 'div');
});

test('forwards `ref`', t => {
const ref = React.createRef();
const m = shallow(<Checkbox ref={ref} label="x" value="x"/>);
t.is(m.prop('forwardedRef'), ref);
const component = shallow(<Checkbox ref={ref} label="x" value="x"/>);
t.is(component.prop('forwardedRef'), ref);
});

test('pass `props` to `input`', t => {
const foo = 'foo';
const m = shallow(<Checkbox foo={foo} label="x" value="x"/>).dive();
t.is(m.find('input').prop('foo'), foo);
const component = shallow(<Checkbox foo={foo} label="x" value="x"/>).dive();
t.is(component.find('input').prop('foo'), foo);
});

test('set `className` prop', t => {
const m = shallow(<Checkbox label="x" value="x"/>).dive();
t.true(m.prop('className').includes('Checkbox'));
const component = shallow(<Checkbox label="x" value="x"/>).dive();
t.true(component.prop('className').includes('Checkbox'));
});

test('set `type` prop on `input`', t => {
const m = shallow(<Checkbox label="x" value="x"/>).dive();
t.is(m.find('input').prop('type'), 'checkbox');
const component = shallow(<Checkbox label="x" value="x"/>).dive();
t.is(component.find('input').prop('type'), 'checkbox');
});

test('has `className` prop', t => {
const className = 'foo';
const m = shallow(<Checkbox className={className} label="x" value="x"/>).dive();
t.true(m.prop('className').includes(className));
const component = shallow(<Checkbox className={className} label="x" value="x"/>).dive();
t.true(component.prop('className').includes(className));
});

test('has `checked` prop', t => {
const m = shallow(<Checkbox checked label="x" value="x"/>).dive();
t.true(m.prop('className').includes('Checkbox--checked'));
const component = shallow(<Checkbox checked label="x" value="x"/>).dive();
t.true(component.prop('className').includes('Checkbox--checked'));
});

test('has `disabled` prop', t => {
const m = shallow(<Checkbox disabled label="x" value="x"/>).dive();
t.true(m.prop('className').includes('Checkbox--disabled'));
t.true(m.find('input').prop('disabled'));
const component = shallow(<Checkbox disabled label="x" value="x"/>).dive();
t.true(component.prop('className').includes('Checkbox--disabled'));
t.true(component.find('input').prop('disabled'));
});

test('has `value` prop', t => {
const value = 'foo';
const m = shallow(<Checkbox label="x" value={value}/>).dive();
t.is(m.find('input').prop('value'), value);
const component = shallow(<Checkbox label="x" value={value}/>).dive();
t.is(component.find('input').prop('value'), value);
});

test('has `onChange` prop', t => {
const event = {};
const onChange = spy();
const m = shallow(<Checkbox label="x" value="x" onChange={onChange}/>).dive();
const checked = m.state('checked');
m.find('input').simulate('change', event);
const component = shallow(<Checkbox label="x" value="x" onChange={onChange}/>).dive();
const checked = component.state('checked');
component.find('input').simulate('change', event);
t.true(onChange.calledWith(!checked, event));
t.is(m.state('checked'), !checked);
t.is(component.state('checked'), !checked);
});

test('has `label` prop', t => {
const label = 'foo';
const m = shallow(<Checkbox label={label} value="x"/>).dive();
t.is(m.find('.Checkbox__label').text(), label);
const component = shallow(<Checkbox label={label} value="x"/>).dive();
t.is(component.find('.Checkbox__label').text(), label);
});

test('show checkmark icon when `checked` prop is `true`', t => {
const m = shallow(<Checkbox label="x" value="x"/>).dive();
m.find('input').simulate('change');
t.is(m.find('.checkmark-icon').length, 1);
const component = shallow(<Checkbox label="x" value="x"/>).dive();
component.find('input').simulate('change');
t.is(component.find('.checkmark-icon').length, 1);
});
@@ -14,38 +14,38 @@ const CopyButton = proxyquire.noCallThru()('../../../app/renderer/components/Cop
}).default;

test('render `button`', t => {
const m = shallow(<CopyButton value="x"/>);
t.is(m.type(), 'button');
const component = shallow(<CopyButton value="x"/>);
t.is(component.type(), 'button');
});

test('set `type` prop', t => {
const m = shallow(<CopyButton value="x"/>);
t.is(m.prop('type'), 'button');
const component = shallow(<CopyButton value="x"/>);
t.is(component.prop('type'), 'button');
});

test('set `className` prop', t => {
const m = shallow(<CopyButton value="x"/>);
t.true(m.prop('className').includes('CopyButton'));
const component = shallow(<CopyButton value="x"/>);
t.true(component.prop('className').includes('CopyButton'));
});

test('pass `props`', t => {
const foo = 'foo';
const m = shallow(<CopyButton value="x" foo={foo}/>);
t.is(m.prop('foo'), foo);
const component = shallow(<CopyButton value="x" foo={foo}/>);
t.is(component.prop('foo'), foo);
});

test('has `className` prop', t => {
const className = 'foo';
const m = shallow(<CopyButton className={className} value="x"/>);
t.true(m.prop('className').includes(className));
const component = shallow(<CopyButton className={className} value="x"/>);
t.true(component.prop('className').includes(className));
});

test('has `onClick` prop', t => {
const event = {};
const value = 'foo';
const onClick = spy();
const m = shallow(<CopyButton value={value} onClick={onClick}/>);
m.simulate('click', event);
const component = shallow(<CopyButton value={value} onClick={onClick}/>);
component.simulate('click', event);
t.true(onClick.calledWith(event));
t.true(writeText.calledWith(value));
});
@@ -4,33 +4,33 @@ import {shallow} from 'enzyme';
import TabButton from 'components/TabButton';

test('render `span`', t => {
const tabButton = shallow(<TabButton isActive onClick={() => {}}>0</TabButton>);
t.is(tabButton.type(), 'span');
const component = shallow(<TabButton isActive onClick={() => {}}>0</TabButton>);
t.is(component.type(), 'span');
});

test('set `role` prop', t => {
const tabButton = shallow(<TabButton isActive onClick={() => {}}>0</TabButton>);
t.is(tabButton.prop('role'), 'button');
const component = shallow(<TabButton isActive onClick={() => {}}>0</TabButton>);
t.is(component.prop('role'), 'button');
});

test('set `className` prop', t => {
const tabButton = shallow(<TabButton isActive onClick={() => {}}>0</TabButton>);
t.true(tabButton.prop('className').includes('TabButton'));
const component = shallow(<TabButton isActive onClick={() => {}}>0</TabButton>);
t.true(component.prop('className').includes('TabButton'));
});

test('pass `props`', t => {
const foo = 'foo';
const tabButton = shallow(<TabButton isActive foo={foo} onClick={() => {}}>0</TabButton>);
t.is(tabButton.prop('foo'), foo);
const component = shallow(<TabButton isActive foo={foo} onClick={() => {}}>0</TabButton>);
t.is(component.prop('foo'), foo);
});

test('has `isActive` prop', t => {
const tabButton = shallow(<TabButton isActive onClick={() => {}}>0</TabButton>);
t.true(tabButton.prop('className').includes('active'));
const component = shallow(<TabButton isActive onClick={() => {}}>0</TabButton>);
t.true(component.prop('className').includes('active'));
});

test('has `className` prop', t => {
const className = 'foo';
const tabButton = shallow(<TabButton isActive className={className} onClick={() => {}}>0</TabButton>);
t.true(tabButton.prop('className').includes(className));
const component = shallow(<TabButton isActive className={className} onClick={() => {}}>0</TabButton>);
t.true(component.prop('className').includes(className));
});

0 comments on commit b5a3948

Please sign in to comment.