fix(playlist): remove multiple song #9

rudywaltz · May 25, 2019 · a1efdd4 · a1efdd4
1 parent fd971a3
commit a1efdd4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git 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
@@ -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}/>