From a1efdd4746e60faf1fab11728c20c90d69820ec2 Mon Sep 17 00:00:00 2001
From: rudywaltz <david.barkoczi@gmail.com>
Date: Sat, 25 May 2019 21:26:05 +0200
Subject: [PATCH] fix(playlist): remove multiple song #9

---
 cypress/integration/playlist.js | 8 ++++++++
 src/components/Playlist.svelte  | 8 ++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/cypress/integration/playlist.js b/cypress/integration/playlist.js
index de35c79..478fda3 100644
--- a/cypress/integration/playlist.js
+++ b/cypress/integration/playlist.js
@@ -103,5 +103,13 @@ describe('playlist', () => {
         }]);
       });
     })
+
+    it('removing song button working multiple time', () => {
+      cy.get(':nth-child(1) > .song__clear').click();
+      cy.get(':nth-child(1) > .song__clear').click();
+      cy
+      .get('.playlist')
+      .contains('Choose one song')
+    })
   })
 });
diff --git a/src/components/Playlist.svelte b/src/components/Playlist.svelte
index e036feb..48d3962 100644
--- a/src/components/Playlist.svelte
+++ b/src/components/Playlist.svelte
@@ -6,7 +6,7 @@
     $playlist = [];
   };
 
-  const  removeSong = songUrl => () => {
+  const  removeSong = songUrl => {
     $playlist = $playlist.filter(song => song.url !== songUrl);
   };
 
@@ -40,14 +40,14 @@
 
 <button type="button" class="playlist__clear" on:click="{removeAllSongs}">Clear</button>
 <ul class="playlist">
-{#each $playlist as song}
+  {#each $playlist as song (song.url)}
     <li class="song" draggable="true">
       <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>
+      <button type="button" class="song__clear" on:click="{e => removeSong(song.url)}">Clear</button>
     </li>
   {:else}
     <li>Choose one song</li>
-    {/each}
+  {/each}
 </ul>
 <svelte:window on:beforeunload={setCurrentData}/>