Skip to content

Instantly share code, notes, and snippets.

@nukeop
Created December 11, 2019 00:03
Show Gist options
  • Save nukeop/276d1beef16f8295ac5e48fe0a7c56ae to your computer and use it in GitHub Desktop.
Save nukeop/276d1beef16f8295ac5e48fe0a7c56ae to your computer and use it in GitHub Desktop.
prop injection
import React from 'react';
import { Provider } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withProps, compose } from 'recompose';
import PlayerReducer from '../../app/reducers/player';
import { resetPlayer } from '../../app/actions/player';
import { QueueMenuMore } from '../../app/components/PlayQueue/QueueMenu/QueueMenuMore';
import Seekbar from '../../app/components/Seekbar';
import { mount } from 'enzyme';
import { describe, it } from 'mocha';
import spies from 'chai-spies';
import chai from 'chai';
chai.use(spies);
const { expect } = chai;
import { createStore, applyMiddleware } from 'redux';
import { connect } from 'react-redux';
import thunk from 'redux-thunk';
import { Dropdown } from 'semantic-ui-react';
describe('Queue and Player Integration', () => {
const createFakeStore = () => {
const initialState = {
playbackProgress: 50
}
const store = createStore(
PlayerReducer,
initialState,
applyMiddleware(thunk)
)
return store;
}
it.only('resets the player if the queue is cleared', () => {
// create store
// mount queue menu
// mount player with 50% fill
// simulate click clear queue
// expect player with 0% fill
const store = createFakeStore();
const ConnectedSeekbar = connect(
state => ({ fill: state.playbackProgress + '%' })
)(Seekbar);
const ConnectedQueueMenuMore = compose(
connect(null, dispatch => bindActionCreators(
{ resetPlayer }, dispatch
)),
withProps({ sendPaused: chai.spy() })
)(QueueMenuMore)
const wrapper = mount(
<Provider store={store}>
<ConnectedQueueMenuMore />
<ConnectedSeekbar />
</Provider>
);
expect(wrapper.find(Seekbar).prop('fill')).to.equal('50%');
const clearQueueAction = wrapper.find(QueueMenuMore).find(Dropdown.Item).at(0);
clearQueueAction.simulate('click');
wrapper.update();
expect(wrapper.find(Seekbar).prop('fill')).to.equal('0%');
})
it('resets the player if the last song is removed', () => {
// create store
// mount queue with songs
// mount player with 50% fill
// click remove song
// expect player with 0% fill
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment