Step 10 api html5 native

src/main.js

@@ -4,7 +4,7 @@ import router from './router'
 import store from './store'
 import VueAnalytics from 'vue-analytics'
 import './initialization'
-
+window.env = { experimental: false }
 Vue.config.productionTip = false
 Vue.use(VueAnalytics, { id: 'UA-140034321-1', router })
 new Vue({

src/services/nativeUI.js

@@ -0,0 +1,7 @@
+export default {
+  name: 'nativeUI',
+
+  share: async (title, text, url = window.location.href) => {
+    return navigator.share({ title, text, url })
+  }
+}

src/services/tests/nativeUI.spec.js

@@ -0,0 +1,55 @@
+import context from 'jest-plugin-context'
+import nativeUI from '../nativeUI'
+import { stub } from 'sinon'
+
+describe('#nativeUI', () => {
+  describe('#share', () => {
+    const defaultUrl = 'http://toto'
+    let shareStub
+    beforeEach(() => {
+      shareStub = stub().resolves()
+      global.navigator.share = shareStub
+
+      const url = defaultUrl
+      // DEVNOTE : SIBE : only way founded to stub the location
+      Object.defineProperty(global.window, 'location', {
+        value: {
+          href: url
+        }
+      })
+    })
+    context('#with a given url', () => {
+      it('should call navigator.share once', async () => {
+        const title = 'titre'
+        const text = 'texte'
+        const url = 'http://localhost'
+        await nativeUI.share(title, text, url)
+        expect(shareStub.calledOnce).toBe(true)
+      })
+      it('should call navigator.share with a formed object with url, title and text', async () => {
+        const title = 'titre'
+        const text = 'texte'
+        const url = 'http://localhost'
+        const expectedObject = { text, title, url }
+        await nativeUI.share(title, text, url)
+        expect(shareStub.firstCall.args[0]).toEqual(expectedObject)
+      })
+    })
+    context('#without any given url', () => {
+      it('should call navigator.share once', async () => {
+        const title = 'titre'
+        const text = 'texte'
+        await nativeUI.share(title, text)
+        expect(shareStub.calledOnce).toBe(true)
+      })
+      it('should call navigator.share with a formed object with the window.location.href url, title and text', async () => {
+        const title = 'titre'
+        const text = 'texte'
+        const url = defaultUrl
+        const expectedObject = { text, title, url }
+        await nativeUI.share(title, text)
+        expect(shareStub.firstCall.args[0]).toEqual(expectedObject)
+      })
+    })
+  })
+})

src/views/Video.vue

@@ -1,6 +1,9 @@
 <script>
 import octotvServices from '../services/octotv'
 import VideoLayout from '../components/VideoLayout/index.vue'
+import nativeUI from '../services/nativeUI'
+const SHARE_MESSAGE = 'va voir cette vidéo sur OctoVHS, elle est super'
+
 export default {
   name: 'Video',
   components: {
@@ -69,6 +72,9 @@ export default {
       }
       this.status.fullScreened = !this.status.fullScreened
     },
+    shareVideo () {
+      nativeUI.share(this.title, SHARE_MESSAGE)
+    },
     playOrPauseVideo () {
       if (!this.status.launched) {
         this.$refs.video.play()
@@ -121,6 +127,7 @@ export default {
      @moveTime="moveTimeFromVideo"
      @download="download()"
      @changeScreenSize="changeFullScreenStatus()"
+     @share="shareVideo()"
      ></video-layout>
       <div class="video--container full-screen">
         <video