Merge pull request #9 from kyan/1_tracklength_playlist

- Add track length to playlist items
- Plumb specs and create a couple to get the ball rolling

backend/README.md

@@ -0,0 +1 @@
+# Kyan Jukebox API

frontend/package.json

@@ -10,7 +10,7 @@
     "react-dnd-html5-backend": "^2.5.4",
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.6",
-    "react-scripts": "1.0.14",
+    "react-scripts": "1.0.15",
     "redux": "^3.7.2",
     "reselect": "^3.0.1",
     "semantic-ui-react": "^0.75.0"
@@ -22,6 +22,10 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
+    "enzyme": "^3.2.0",
+    "enzyme-adapter-react-16": "^1.1.0",
+    "enzyme-to-json": "^3.2.2",
+    "react-test-renderer": "^16.1.1",
     "redux-devtools": "^3.4.0"
   }
 }

frontend/src/components/current-track/__snapshots__/index.spec.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CurrentTrack render renders the as expected 1`] = `
+<Card>
+  <Image
+    as="img"
+    src="path/to/image"
+    ui={true}
+  />
+  <CardContent>
+    <Progress
+      percent={25}
+      size="tiny"
+    />
+    <CardHeader>
+      My Track Title
+    </CardHeader>
+    <CardMeta>
+      (
+      0:13
+      ) 
+      Artist Name
+    </CardMeta>
+    <CardDescription>
+      Album Name
+       
+    </CardDescription>
+  </CardContent>
+</Card>
+`;

frontend/src/components/current-track/index.js

@@ -29,5 +29,4 @@ CurrentTrack.propTypes = {
   progress: PropTypes.number
 }
 
-
 export default CurrentTrack

frontend/src/components/current-track/index.spec.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { shallowToJson } from 'enzyme-to-json'
+import CurrentTrack from './index'
+
+describe('CurrentTrack', () => {
+  let wrapper
+  let track = {
+    name: 'My Track Title',
+    length: 12999,
+    artist: {
+      name: 'Artist Name'
+    },
+    album: {
+      name: 'Album Name'
+    }
+  }
+  const image = 'path/to/image'
+
+  describe('render', () => {
+    wrapper = shallow(
+      <CurrentTrack
+        track={ track }
+        image={ image }
+        progress={ 25 }
+      />
+    )
+
+    it('renders the as expected', () => {
+      expect(shallowToJson(wrapper)).toMatchSnapshot()
+    })
+  })
+})

frontend/src/components/tracklist/__snapshots__/index.spec.js.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tracklist render renders the as expected 1`] = `
+<List
+  size="large"
+>
+  <ListItem
+    className="track-selected"
+    key="0-track1"
+  >
+    <Image
+      as="img"
+      avatar={true}
+      src="path/to/image"
+      ui={true}
+    />
+    <ListContent>
+      <ListHeader
+        as="a"
+      >
+        Track Title 1
+         
+        <small>
+          (
+          0:13
+          )
+        </small>
+      </ListHeader>
+      <ListDescription>
+        Artist Name 1
+      </ListDescription>
+    </ListContent>
+  </ListItem>
+  <ListItem
+    className=""
+    key="1-track2"
+  >
+    <Image
+      as="img"
+      avatar={true}
+      ui={true}
+    />
+    <ListContent>
+      <ListHeader
+        as="a"
+      >
+        Track Title 2
+         
+        <small>
+          (
+          0:23
+          )
+        </small>
+      </ListHeader>
+      <ListDescription>
+        Artist Name 2
+      </ListDescription>
+    </ListContent>
+  </ListItem>
+</List>
+`;

frontend/src/components/tracklist/index.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { List, Image } from 'semantic-ui-react'
 import classnames from 'classnames'
+import { millisToMinutesAndSeconds } from '../../utils/time';
 import './index.css';
 
 const listItems = (tracks, images, currentTrack) => {
@@ -13,7 +14,7 @@ const listItems = (tracks, images, currentTrack) => {
       >
         <Image avatar src={ images[track.album.uri] } />
         <List.Content>
-          <List.Header as='a'>{track.name}</List.Header>
+          <List.Header as='a'>{track.name} <small>({millisToMinutesAndSeconds(track.length)})</small></List.Header>
           <List.Description>{track.artist.name}</List.Description>
         </List.Content>
       </List.Item>

frontend/src/components/tracklist/index.spec.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { shallowToJson } from 'enzyme-to-json'
+import Tracklist from './index'
+
+describe('Tracklist', () => {
+  let wrapper
+  let tracks = [
+    {
+      uri: 'track1',
+      name: 'Track Title 1',
+      length: 12999,
+      artist: {
+        name: 'Artist Name 1'
+      },
+      album: {
+        uri: 'album1',
+        name: 'Album Name 1'
+      }
+    },
+    {
+      uri: 'track2',
+      name: 'Track Title 2',
+      length: 22999,
+      artist: {
+        name: 'Artist Name 2'
+      },
+      album: {
+        uri: 'album2',
+        name: 'Album Name 2'
+      }
+    }
+  ]
+  const images = {
+    'album1': 'path/to/image'
+  }
+
+  describe('render', () => {
+    wrapper = shallow(
+      <Tracklist
+        tracks={tracks}
+        images={images}
+        currentTrack={tracks[0]}
+      />
+    )
+
+    it('renders the as expected', () => {
+      expect(shallowToJson(wrapper)).toMatchSnapshot()
+    })
+  })
+})

frontend/src/setupTests.js

@@ -0,0 +1,4 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });