feat(playlist): remove one song #8

rudywaltz · Mar 4, 2019 · ce131e0 · ce131e0
1 parent 83c493f
commit ce131e0
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/cypress/integration/playlist.js b/cypress/integration/playlist.js
@@ -72,4 +72,35 @@ describe('player', () => {
           expect(playlist).to.be.empty;
         })
   })
+
+  it.only('clear playlist', () => {
+    cy.setStorage('playlist', [{
+      title: 'Jézus és a jelzőrakéta',
+      url: '/jezusesajelzoraketa.mp3',
+      duration: (60 * 60) + (15 * 60) + 13
+    },
+    {
+      title: 'Lorem ipsum',
+      url: '/aaaa.mp3',
+      duration: (2 * 60 * 60) + (4 * 60) + 9
+    }]);
+
+    cy.get(':nth-child(2) > .song__clear')
+      .click();
+
+    cy
+      .get('.playlist')
+      .should('.not.contain', 'Lorem ipsum')
+
+      cy.window()
+        .its('store')
+        .then(store => {
+          const { playlist } = store.get();
+          expect(playlist).to.eq([{
+            title: 'Jézus és a jelzőrakéta',
+            url: '/jezusesajelzoraketa.mp3',
+            duration: (60 * 60) + (15 * 60) + 13
+          }]);
+        })
+  })
 });
diff --git a/src/components/Playlist.html b/src/components/Playlist.html
@@ -1,10 +1,11 @@
 <h2>Playlist</h2>
-<button type="button" class="playlist__clear" on:click="clearStore()">Clear</button>
+<button type="button" class="playlist__clear" on:click="removeSongs()">Clear</button>
 <ul class="playlist">
   {#each $playlist as song}
     <li class="song">
-      <h3 class="song__title">{ song.title }</h3>
+      <h3 class="song__title">{ song.title }</h3> { $song.url }
       <span class="song__duration"> { format(song.duration) }</span>
+      <button type="button" class="song__clear" on:click="removeSong(song.url)">Clear</button>
     </li>
   {:else}
     <li>Choose one song</li>
@@ -20,8 +21,13 @@ <h3 class="song__title">{ song.title }</h3>
     },
 
     methods: {
-      clearStore: function() {
+      removeSongs: function() {
         this.store.set({ playlist: [] });
+      },
+      removeSong: function(songUrl) {
+        const originalPlaylist = this.store.get().playlist;
+        const playlist = originalPlaylist.filter(song => song.url !== songUrl);
+        this.store.set({ playlist });
       }
     }
   }