Unverified Commit 76556858 authored by Iain Maitland's avatar Iain Maitland
Browse files

add tests to voting component

parent db393a00
......@@ -78,11 +78,11 @@ class Voting extends React.Component {
};
this.voteUp = e => {
e.preventDefault();
e && e.preventDefault();
this.voteUpOrDown(true);
};
this.voteDown = e => {
e.preventDefault();
e && e.preventDefault();
this.voteUpOrDown(false);
};
this.voteUpOrDown = up => {
......@@ -126,7 +126,7 @@ class Voting extends React.Component {
this.toggleWeightUpOrDown(true);
};
this.toggleWeightDown = e => {
e.preventDefault();
e && e.preventDefault();
this.toggleWeightUpOrDown(false);
};
this.toggleWeightUpOrDown = up => {
......@@ -182,8 +182,9 @@ class Voting extends React.Component {
post_obj,
price_per_steem,
sbd_print_rate,
username,
} = this.props;
const { username } = this.props;
const { votingUp, votingDown, showWeight, weight, myVote } = this.state;
// console.log('-- Voting.render -->', myVote, votingUp, votingDown);
if (flag && !username) return null;
......@@ -199,6 +200,7 @@ class Voting extends React.Component {
? 'empty'
: myVote < 0 ? 'flag2' : 'flag1'
}
className="flag"
/>
);
const classDown =
......@@ -206,7 +208,6 @@ class Voting extends React.Component {
(myVote < 0 ? ' Voting__button--downvoted' : '') +
(votingDownActive ? ' votingDown' : '');
const flagWeight = post_obj.getIn(['stats', 'flagWeight']);
// myVote === current vote
const dropdown = (
<FoundationDropdown
......@@ -245,7 +246,6 @@ class Voting extends React.Component {
</div>
</FoundationDropdown>
);
const flagClickAction =
myVote === null || myVote === 0
? this.toggleWeightDown
......@@ -261,7 +261,12 @@ class Voting extends React.Component {
{votingDownActive ? (
down
) : (
<a href="#" onClick={flagClickAction} title="Flag">
<a
href="#"
onClick={flagClickAction}
title="Flag"
id="downvote_button"
>
{down}
</a>
)}
......@@ -306,7 +311,10 @@ class Voting extends React.Component {
// Show pending payout amount for declined payment posts
if (max_payout === 0) payout = pending_payout;
const up = (
<Icon name={votingUpActive ? 'empty' : 'chevron-up-circle'} />
<Icon
name={votingUpActive ? 'empty' : 'chevron-up-circle'}
className="upvote"
/>
);
const classUp =
'Voting__button Voting__button-up' +
......@@ -499,6 +507,7 @@ class Voting extends React.Component {
? tt('g.remove_vote')
: tt('g.upvote')
}
id="upvote_button"
>
{up}
</a>
......
......@@ -2,19 +2,259 @@ import React from 'react';
import { IntlProvider } from 'react-intl';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { configure, shallow } from 'enzyme';
import { configure, mount, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import { fromJS } from 'immutable';
import { fromJS, Map } from 'immutable';
import renderer from 'react-test-renderer';
import rootReducer from 'app/redux/RootReducer';
import Voting from './Voting';
import configureMockStore from 'redux-mock-store';
global.window = {};
import localStorage from 'mock-local-storage';
window.localStorage = global.localStorage;
configure({ adapter: new Adapter() });
const store = createStore(rootReducer);
const voteTestObj = fromJS({
stats: {
total_votes: 1,
},
max_accepted_payout: '999999 SBD',
percent_steem_dollars: 0,
pending_payout_value: '10 SBD',
cashout_time: '2018-03-30T10:00:00Z',
});
const mockGlobal = Map({
props: Map({ sbd_print_rate: 99 }),
feed_price: Map({
base: '5 SBD',
quote: '10 STEEM',
}),
content: Map({
test: Map({
author: 'Jane Doe',
permlink: 'zip',
active_votes: Map({}),
stats: {
total_votes: 1,
},
max_accepted_payout: '999999 SBD',
percent_steem_dollars: 0,
pending_payout_value: '10 SBD',
cashout_time: '2018-03-30T10:00:00Z',
pending_payout_sbd: 99,
}),
}),
});
const mockUser = Map({ current: Map({ username: 'Janice' }) });
describe('Voting', () => {
it('should render nothing if flag prop is true and user is not logged in.', () => {
const mockStore = configureMockStore()({
global: Map({}),
market: {},
offchain: {},
user: {},
transaction: {},
discussion: {},
routing: {},
app: {},
});
let wrapped = shallow(
<Voting
post="test"
flag={true}
vote={(w, p) => {}}
post_obj={voteTestObj}
price_per_steem={1}
sbd_print_rate={10000}
store={mockStore}
/>
).dive();
expect(wrapped.isEmptyRender()).toEqual(true);
});
it('should render flag if user is logged in and flag prop is true.', () => {
const mockStore = configureMockStore()({
global: mockGlobal,
market: {},
offchain: {},
user: mockUser,
transaction: {},
discussion: {},
routing: {},
app: {},
});
let wrapped = shallow(
<Voting
post="test"
flag={true}
vote={(w, p) => {}}
post_obj={voteTestObj}
price_per_steem={1}
sbd_print_rate={10000}
store={mockStore}
/>
).dive();
expect(wrapped.find('.Voting').length).toEqual(1);
expect(wrapped.find('.flag').length).toEqual(1);
});
it('should change state.weight and state.showWeight as expected when flag is clicked', () => {
const mockStore = configureMockStore()({
global: mockGlobal,
market: {},
offchain: {},
user: mockUser,
transaction: {},
discussion: {},
routing: {},
app: {},
});
let wrapped = shallow(
<Voting
post="test"
flag={true}
vote={(w, p) => {}}
post_obj={voteTestObj}
price_per_steem={1}
sbd_print_rate={10000}
store={mockStore}
/>
).dive();
wrapped.setState({ weight: 666, showWeight: false });
wrapped.find('#downvote_button').simulate('click');
expect(wrapped.state().weight).toEqual(10000);
expect(wrapped.state().showWeight).toEqual(true);
});
it('should not dispatch an action when flag is clicked and myVote is 0 or less.', () => {
const mockStore = configureMockStore()({
global: mockGlobal,
market: {},
offchain: {},
user: mockUser,
transaction: {},
discussion: {},
routing: {},
app: {},
});
let wrapped = shallow(
<Voting
post="test"
flag={true}
vote={(w, p) => {}}
post_obj={voteTestObj}
price_per_steem={1}
sbd_print_rate={10000}
store={mockStore}
/>
).dive();
wrapped.setState({ myVote: 0 });
wrapped.find('#downvote_button').simulate('click');
expect(mockStore.getActions()).toEqual([]);
});
it('should dispatch an action when flag is clicked and myVote is greater than 0', () => {
const mockStore = configureMockStore()({
global: mockGlobal,
market: {},
offchain: {},
user: mockUser,
transaction: {},
discussion: {},
routing: {},
app: {},
});
let wrapped = shallow(
<Voting
post="test"
flag={true}
vote={(w, p) => {}}
post_obj={voteTestObj}
price_per_steem={1}
sbd_print_rate={10000}
store={mockStore}
/>
).dive();
wrapped.setState({ myVote: 666 });
expect(mockStore.getActions()).toEqual([]);
wrapped.find('#downvote_button').simulate('click');
expect(mockStore.getActions()[0].type).toEqual(
'transaction/BROADCAST_OPERATION'
);
expect(mockStore.getActions()[0].payload.operation.weight).toEqual(
-10000
);
expect(mockStore.getActions()[0].payload.operation.voter).toEqual(
'Janice'
);
});
it('should render upvote and should not render flag if user is logged in and flag prop is false.', () => {
const mockStore = configureMockStore()({
global: mockGlobal,
market: {},
offchain: {},
user: mockUser,
transaction: {},
discussion: {},
routing: {},
app: {},
});
let wrapped = shallow(
<Voting
post="test"
flag={false}
vote={(w, p) => {}}
post_obj={voteTestObj}
price_per_steem={1}
sbd_print_rate={10000}
store={mockStore}
/>
).dive();
expect(wrapped.find('.flag').length).toEqual(0);
expect(wrapped.find('.Voting__inner').length).toEqual(1);
expect(wrapped.find('.upvote').length).toEqual(1);
});
it('should dispatch an action with payload when upvote button is clicked.', () => {
const mockStore = configureMockStore()({
global: mockGlobal,
market: {},
offchain: {},
user: mockUser,
transaction: {},
discussion: {},
routing: {},
app: {},
});
let wrapped = shallow(
<Voting
post="test"
flag={false}
vote={(w, p) => {}}
post_obj={voteTestObj}
price_per_steem={1}
sbd_print_rate={10000}
store={mockStore}
/>
).dive();
wrapped.find('#upvote_button').simulate('click');
expect(mockStore.getActions()[0].type).toEqual(
'transaction/BROADCAST_OPERATION'
);
expect(mockStore.getActions()[0].payload.operation.weight).toEqual(
10000
);
expect(mockStore.getActions()[0].payload.operation.voter).toEqual(
'Janice'
);
});
it('should show all SP if percent_steem_dollars is 0', () => {
const post_obj = fromJS({
stats: {
......@@ -25,6 +265,7 @@ describe('Voting', () => {
pending_payout_value: '10 SBD',
cashout_time: '2018-03-30T10:00:00Z',
});
const store = createStore(rootReducer);
const component = renderer.create(
<Provider store={store}>
<IntlProvider locale="en">
......@@ -44,6 +285,7 @@ describe('Voting', () => {
});
it('should omit liquid steem if print rate is 10000', () => {
const store = createStore(rootReducer);
const post_obj = fromJS({
stats: {
total_votes: 1,
......@@ -81,6 +323,7 @@ describe('Voting', () => {
pending_payout_value: '10 SBD',
cashout_time: '2018-03-30T10:00:00Z',
});
const store = createStore(rootReducer);
const component = renderer.create(
<Provider store={store}>
<IntlProvider locale="en">
......
......@@ -6184,6 +6184,13 @@ mixpanel@0.5.0:
dependencies:
minimist "0.0.8"
mock-local-storage@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/mock-local-storage/-/mock-local-storage-1.0.5.tgz#899ff300027cefed47816e6dc539bb059fcce489"
dependencies:
core-js "^0.8.3"
global "^4.3.2"
moment-timezone@^0.5.4:
version "0.5.14"
resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.14.tgz#4eb38ff9538b80108ba467a458f3ed4268ccfcb1"
......@@ -7916,6 +7923,12 @@ redux-form@5.3.4:
is-promise "^2.1.0"
react-lazy-cache "^3.0.1"
redux-mock-store@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/redux-mock-store/-/redux-mock-store-1.5.1.tgz#fca4335392e66605420b5559fe02fc5b8bb6d63c"
dependencies:
lodash.isplainobject "^4.0.6"
redux-saga@0.9.5:
version "0.9.5"
resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-0.9.5.tgz#f4bde5896e466932f758f86247b2fa6a4694ec2a"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment