feat(player)fix(audio): start/stop song #6

rudywaltz · Feb 27, 2019 · 90e8fef · 90e8fef
1 parent c3ee898
commit 90e8fef
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 20 deletions.
diff --git a/cypress/integration/player.js b/cypress/integration/player.js
@@ -1,10 +1,37 @@
 const getStore = () => cy.window().its('store')
 
+const expectPlayingAudio = (elem, assert = true) => {
+  elem.should(el => {
+    const audible = el[0].duration > 0 && !el[0].paused && !el[0].muted;
+    expect(audible).to.eq(assert);
+  })
+
+
 describe('player', () => {
   beforeEach(() => {
     cy.visit('/')
   });
 
+  context('without song', () => {
+    beforeEach(() => {
+      getStore().then(store => {
+        store.set({ song: {} })
+      })
+    })
+
+    it('default title', () => {
+      cy
+        .get('.player__title')
+        .contains('No sound selected')
+    });
+
+    it('default duration', () => {
+      cy
+        .get('#player .player__duration')
+        .contains('--:--:--')
+    });
+  })
+
   it('should be render', () => {
     cy.get('#player');
   });
@@ -25,23 +52,16 @@ describe('player', () => {
       .contains('00:05:46')
   });
 
-  context('without song', () => {
-    beforeEach(() => {
-      getStore().then(store => {
-        store.set({ song: {} })
-      })
-    })
-
-    it('default title', () => {
-      cy
-        .get('.player__title')
-        .contains('No sound selected')
-    });
+  it('play sound', () => {
+    cy.get('#player .player__play')
+      .click()
+    expectPlayingAudio(cy.get('audio'), true);
+  });
 
-    it('default duration', () => {
-      cy
-        .get('#player .player__duration')
-        .contains('--:--:--')
-    });
-  })
+  it('stop sound', () => {
+    cy.get('#player .player__play')
+      .click()
+      .click()
+      expectPlayingAudio(cy.get('audio'), false);
+  });
 });
diff --git a/src/components/Player.html b/src/components/Player.html
@@ -1,7 +1,8 @@
 <div id="player" class="player">
-  <audio src={ $song.url } controls bind:duration=duration></audio>
+  <audio src={ $song.url } controls bind:duration=duration bind:paused></audio>
   <h3 class="player__title">{ $song.url ? $song.url : 'No sound selected' }</h3>
   <div class="player__duration">{ $song.url ? format(duration) : format() }</div>
+  <button type="button" class="player__play" on:click='set({paused: !paused})'>{ paused ? 'Play' : 'Pause' }</button>
 </div>
 
 
@@ -18,7 +19,7 @@ <h3 class="player__title">{ $song.url ? $song.url : 'No sound selected' }</h3>
       }
     },
     data() {
-      return { duration: 0 }
+      return { duration: 0, paused: true }
     }
   };
 </script>