Merge pull request #11 from kyan/take_a_shot_at_some_specs

Working up to that 100% spec coverage

frontend/README.md

@@ -1 +1,9 @@
 ## Kyan Jukebox Client
+
+### Up and running
+
+Run `yarn install`
+
+### Specs
+
+To run the specs `yarn test`

frontend/package.json

@@ -5,7 +5,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "media-progress-timer": "^3.0.0",
-    "react": "^16.0.0",
+    "react": "^16.2.0",
     "react-dnd": "^2.5.4",
     "react-dnd-html5-backend": "^2.5.4",
     "react-dom": "^16.0.0",
@@ -25,7 +25,21 @@
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.0",
     "enzyme-to-json": "^3.2.2",
+    "mock-socket": "^7.1.0",
+    "react-dnd-test-backend": "^2.5.4",
     "react-test-renderer": "^16.1.1",
-    "redux-devtools": "^3.4.0"
+    "redux-devtools": "^3.4.0",
+    "redux-mock-store": "^1.3.0"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}",
+      "!<rootDir>/build/",
+      "!src/index.js",
+      "!src/**/url-drop-area/index.js"
+    ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
   }
 }

frontend/src/App.js

@@ -1,12 +1,22 @@
 import React from 'react'
+import { Provider } from 'react-redux'
+import { createStore, applyMiddleware } from 'redux'
+import jukeboxMiddleware from './containers/jukebox-middleware'
+import jukeboxApp from './reducers'
 import { Container } from 'semantic-ui-react'
 import Dashboard from './containers/dashboard'
 
+const store = createStore(
+  jukeboxApp,
+  applyMiddleware(jukeboxMiddleware)
+)
 
 const App = () => (
-  <Container fluid>
-    <Dashboard/>
-  </Container>
+  <Provider store={store}>
+    <Container fluid>
+      <Dashboard/>
+    </Container>
+  </Provider>
 )
 
 export default App

frontend/src/__snapshots__/app.spec.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App renders without crashing 1`] = `
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(observable): [Function],
+    }
+  }
+>
+  <Container
+    fluid={true}
+  >
+    <Connect(DragDropContext(Dashboard)) />
+  </Container>
+</Provider>
+`;

frontend/src/actions/index.js

@@ -1,26 +1,27 @@
-import Constants from '../constants'
+import MopidyApi from '../constants/mopidy-api'
+import Types from '../constants'
 import { transformUrl } from '../utils/spotify'
 
 export const addNewTrack = url => {
   let uri = transformUrl(url)
 
   return {
-    type: 'SEND',
-    key: Constants.TRACKLIST_ADD_TRACK,
+    type: Types.SEND,
+    key: MopidyApi.TRACKLIST_ADD_TRACK,
     params: { "uri": uri }
   }
 }
 
 export const addCurrentTrack = track => {
   return {
-    type: 'ADD_CURRENT_TRACK',
+    type: Types.ADD_CURRENT_TRACK,
     track
   }
 }
 
 export const addTrackList = list => {
   return {
-    type: 'ADD_TRACKS',
+    type: Types.ADD_TRACKS,
     list
   }
 }
@@ -29,106 +30,105 @@ export const updateProgressTimer = (position, duration) => {
   if (duration === Infinity) { duration = 0 }
 
   return {
-    type: 'UPDATE_PROGRESS_TIMER',
+    type: Types.UPDATE_PROGRESS_TIMER,
     position,
     duration
   }
 }
 
 export const wsConnect = () => {
   return {
-    type: 'CONNECT'
+    type: Types.CONNECT,
   }
 }
 
 export const wsConnecting = () => {
   return {
-    type: 'CONNECTING'
+    type: Types.CONNECTING
   }
 }
 
 export const wsConnected = () => {
   return {
-    type: 'CONNECTED'
+    type: Types.CONNECTED
   }
 }
 
 export const wsDisconnect = () => {
   return {
-    type: 'DISCONNECT'
+    type: Types.DISCONNECT
   }
 }
 
 export const wsDisconnected = () => {
   return {
-    type: 'DISCONNECTED'
+    type: Types.DISCONNECTED
   }
 }
 
 export const getCurrentTrack = () => {
   return {
-    type: 'SEND',
-    key: Constants.PLAYBACK_GET_CURRENT_TRACK
+    type: Types.SEND,
+    key: MopidyApi.PLAYBACK_GET_CURRENT_TRACK
   }
 }
 
 export const getTimePosition = () => {
   return {
-    type: 'SEND',
-    key: Constants.PLAYBACK_GET_TIME_POSITION
+    type: Types.SEND,
+    key: MopidyApi.PLAYBACK_GET_TIME_POSITION
   }
 }
 
-export const getImage = (uri, key) => {
+export const getImage = (uri) => {
   return {
-    type: 'SEND',
-    key: Constants.LIBRARY_GET_IMAGES,
+    type: Types.SEND,
+    key: MopidyApi.LIBRARY_GET_IMAGES,
     params: [[uri]],
     uri: uri
   }
 }
 
 export const newImage = (uri) => {
   return {
-    type: 'NEW_IMAGE',
+    type: Types.NEW_IMAGE,
     uri
   }
 }
 
 export const resolveImage = (data) => {
   return {
-    type: 'RESOLVE_IMAGE',
+    type: Types.RESOLVE_IMAGE,
     data
   }
 }
 
 export const getTrackList = () => {
   return {
-    type: 'SEND',
-    key: Constants.TRACKLIST_GET_TRACKS
+    type: Types.SEND,
+    key: MopidyApi.TRACKLIST_GET_TRACKS
   }
 }
 
 export const startPlaying = () => {
   return {
-    type: 'SEND',
-    key: Constants.PLAYBACK_SET_STATE,
-    params: 'PLAYING'
+    type: Types.SEND,
+    key: MopidyApi.PLAYBACK_SET_STATE,
+    params: MopidyApi.PLAYING
   }
 }
 
 export const pausePlaying = () => {
   return {
-    type: 'SEND',
-    key: Constants.PLAYBACK_SET_STATE,
-    params: 'PAUSED'
+    type: Types.SEND,
+    key: MopidyApi.PLAYBACK_SET_STATE,
+    params: MopidyApi.PAUSED
   }
 }
 
 export const skipPlaying = () => {
   return {
-    type: 'SEND',
-    key: Constants.PLAYBACK_NEXT
+    type: Types.SEND,
+    key: MopidyApi.PLAYBACK_NEXT
   }
 }
-