Basic enzyme test setup

Author: nukeop

.babelrc

@@ -2,5 +2,9 @@
   "presets": [
     "env",
     "react"
-  ]
+  ],
+  "plugins": [
+    'transform-class-properties',
+    'transform-object-rest-spread'
+    ]
 }

app/components/AlbumCover/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import styles from './styles.css';
 
@@ -39,4 +40,12 @@ class AlbumCover extends React.Component {
   }
 }
 
+AlbumCover.propTypes = {
+  nameOnly: PropTypes.bool,
+  cover: PropTypes.string,
+  artist: PropTypes.string,
+  title: PropTypes.string,
+  handlePlay: PropTypes.func
+};
+
 export default AlbumCover;

app/components/AlbumList/index.js

@@ -22,12 +22,13 @@ class AlbumList extends React.Component {
             ? <div className={styles.album_list_cards}>
               {
                 this.props.albums.map((el, i) => {
-                  return  <Card
+                  return  (
+                   <Card
                     key={i}
                     header={el.title}
                     image={el.thumb}
                     onClick={() => this.albumInfoSearch(el.id)}
-                          />;
+                   />);
                 })
               }
             </div>

app/components/PlaylistView/index.js

@@ -20,12 +20,12 @@ class PlaylistView extends React.Component {
   renderOptions(trigger, playlist) {
     return (
       <ContextPopup
-	trigger={trigger}
-	artist={null}
-	title={playlist.name}
-	thumb={playlist.tracks[0].thumbnail}
-	>
-        <div></div>
+	      trigger={trigger}
+	      artist={null}
+	      title={playlist.name}
+	      thumb={playlist.tracks[0].thumbnail}
+	    >
+        <div />
       </ContextPopup>
     );
   }
@@ -44,46 +44,46 @@ class PlaylistView extends React.Component {
     return (
       <div className={styles.playlist_view_container}>
         <div className={styles.playlist}>
-	  <div className={styles.playlist_info}>
-	    <div>
-	      <img 
+	        <div className={styles.playlist_info}>
+	          <div>
+	            <img 
                 className={styles.playlist_thumbnail} 
                 src={playlist.tracks[0].thumbnail} 
-		/>
-	    </div>
+		            />
+	          </div>
             <div className={styles.playlist_header}>
-	      <div className={styles.playlist_name}>
-		{playlist.name}
-	      </div>
-	      <Spacer />
+	            <div className={styles.playlist_name}>
+		            {playlist.name}
+	            </div>
+	            <Spacer />
               <div className={styles.playlist_buttons}>
                 <a href="#" className={styles.play_button} onClick={() => this.addPlaylistToQueue(musicSources, playlist, addTracks, selectSong, startPlayback)}><FontAwesome name="play" /> Play</a>
-		{this.renderOptions(popupTrigger, playlist)}
-	      </div>
-	    </div>
-	    
+		            {this.renderOptions(popupTrigger, playlist)}
+	            </div>
+	          </div>
+	          
 
-	  </div>
+	        </div>
 
-	  <div className={styles.playlist_tracks}>
-	    
-	    {
-	      playlist.tracks.map(track => {
-		return (
-		  <div className={styles.playlist_track}>
-		    <img className={styles.track_thumbnail} src={track.thumbnail} />
-		    <div className={styles.track_info}>
-		      <div className={styles.track_artist}>{track.artist}</div>
-		      <div className={styles.track_name}>{track.name}</div>
-		    </div>
-		  </div>
-		);
-	      })
-	  }
+	        <div className={styles.playlist_tracks}>
+	          
+	          {
+	            playlist.tracks.map(track => {
+		            return (
+		              <div className={styles.playlist_track}>
+		                <img className={styles.track_thumbnail} src={track.thumbnail} />
+		                <div className={styles.track_info}>
+		                  <div className={styles.track_artist}>{track.artist}</div>
+		                  <div className={styles.track_name}>{track.name}</div>
+		                </div>
+		              </div>
+		            );
+	            })
+	          }
 
       </div>
-	</div>
-	</div>
+	      </div>
+	      </div>
     );
   }
 }

index.prod.html

@@ -15,7 +15,6 @@
   </script>
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
-  <link href="fonts.css" rel="stylesheet">
   <link href="loader.css" rel="stylesheet">
 </head>
 <body>