Merge branch 'Allow_embedded_code_in_posts_permanent_memory' of github.com:Human-Connection/Human-Connection into Allow_embedded_code_in_posts_permanent_memory

webapp/components/Editor/nodes/Embed.spec.js

@@ -14,11 +14,6 @@ describe('Embed.vue', () => {
   beforeEach(() => {
     propsData = {}
     component = new Embed()
-    // computed = {
-    //   currentUser: () => {
-    //     return { id: 'im a user', allowEmbedIframes: false }
-    //   },
-    // }
     Wrapper = ({ propsData }) => {
       return shallowMount(component.view, { propsData })
     }

webapp/components/Embed/EmbedComponent.spec.js

@@ -0,0 +1,151 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import Vuex from 'vuex'
+import Styleguide from '@human-connection/styleguide'
+import EmbedComponent from './EmbedComponent'
+
+let Wrapper, wrapper, propsData, getters, mocks
+const someUrl = 'https://www.youtube.com/watch?v=qkdXAtO40Fo'
+const localVue = createLocalVue()
+
+localVue.use(Vuex)
+localVue.use(Styleguide)
+
+describe('EmbedComponent.vue', () => {
+  beforeEach(() => {
+    mocks = {
+      $t: a => a,
+    }
+    propsData = {}
+    getters = {
+      'auth/user': () => {
+        return { id: 'u5', allowEmbedIframes: false }
+      },
+    }
+    Wrapper = ({ propsData }) => {
+      const store = new Vuex.Store({
+        getters,
+      })
+      return mount(EmbedComponent, { propsData, localVue, store, mocks })
+    }
+  })
+
+  describe('given a href only for a link ', () => {
+    beforeEach(() => {
+      propsData.embedData = {
+        __typename: 'Embed',
+        type: 'link',
+        title: '👻 ✉️ Bruno... le ciel sur répondeur ! 🔮 🧠 - Clément FREZE',
+        author: null,
+        publisher: 'PeerTube.social',
+        date: null,
+        description:
+          'Salut tout le monde ! Aujourd’hui, une vidéo sur le scepticisme, nous allons parler médiumnité avec le cas de Bruno CHARVET : « Bruno, un nouveau message ». Merci de rester respectueux dans les commentaires : SOURCES : Les sources des vi...',
+        url: 'https://peertube.social/videos/watch/f3cb1945-a8f7-481f-a465-946c6f884e50',
+        image: 'https://peertube.social/static/thumbnails/f3cb1945-a8f7-481f-a465-946c6f884e50.jpg',
+        audio: null,
+        video: null,
+        lang: 'fr',
+        sources: ['resource', 'oembed'],
+        html: null,
+      }
+      wrapper = Wrapper({ propsData })
+    })
+
+    it.only('show the title', () => {
+      expect(wrapper.find('h4').text()).toBe(
+        '👻 ✉️ Bruno... le ciel sur répondeur ! 🔮 🧠 - Clément FREZE',
+      )
+    })
+
+    it.only('show the desciption', () => {
+      expect(wrapper.find('.embed-content p').text()).toBe(
+        'Salut tout le monde ! Aujourd’hui, une vidéo sur le scepticisme, nous allons parler médiumnité avec le cas de Bruno CHARVET : « Bruno, un nouveau message ». Merci de rester respectueux dans les commentaires : SOURCES : Les sources des vi...',
+      )
+    })
+
+    it.only('show preview Images for link', () => {
+      expect(wrapper.find('.embed-preview-image--clickable')).toEqual({
+        selector: '.embed-preview-image--clickable',
+      })
+    })
+  })
+
+  describe('given a href wite embed html', () => {
+    describe('onEmbed returned title and description', () => {
+      beforeEach(() => {
+        propsData.embedData = {
+          __typename: 'Embed',
+          title: 'Baby Loves Cat',
+          description:
+            'She’s incapable of controlling her limbs when her kitty is around. The obsession grows every day. Ps. That’s a sleep sack she’s in. Not a starfish outfit. Al...',
+        }
+        wrapper = Wrapper({ propsData })
+      })
+
+      it.only('show the title', () => {
+        expect(wrapper.find('h4').text()).toBe('Baby Loves Cat')
+      })
+
+      it.only('show the desciption', () => {
+        expect(wrapper.find('.embed-content p').text()).toBe(
+          'She’s incapable of controlling her limbs when her kitty is around. The obsession grows every day. Ps. That’s a sleep sack she’s in. Not a starfish outfit. Al...',
+        )
+      })
+    })
+
+    describe('onEmbed returned embed data with html', () => {
+      beforeEach(() => {
+        propsData.embedData = {
+          __typename: 'Embed',
+          type: 'video',
+          title: 'Baby Loves Cat',
+          author: 'Merkley Family',
+          publisher: 'YouTube',
+          date: '2015-08-16T00:00:00.000Z',
+          description:
+            'She’s incapable of controlling her limbs when her kitty is around. The obsession grows every day. Ps. That’s a sleep sack she’s in. Not a starfish outfit. Al...',
+          url: someUrl,
+          image: 'https://i.ytimg.com/vi/qkdXAtO40Fo/maxresdefault.jpg',
+          audio: null,
+          video: null,
+          lang: 'de',
+          sources: ['resource', 'oembed'],
+          html:
+            '<iframe width="480" height="270" src="https://www.youtube.com/embed/qkdXAtO40Fo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
+        }
+        wrapper = Wrapper({ propsData })
+      })
+
+      it('shows a simple link when a user closes the embed preview', () => {
+        wrapper.find('.embed-close-button').trigger('click')
+        expect(wrapper.vm.showLinkOnly).toBe(true)
+      })
+
+      it.only('opens the data privacy overlay when a user clicks on the preview image', () => {
+        wrapper.find('.embed-preview-image--clickable').trigger('click')
+        expect(wrapper.vm.showOverlay).toBe(true)
+      })
+
+      it.only('click show iframe and change NOT setting permanetly', () => {
+        wrapper.setData({ showOverlay: true })
+        wrapper.find('.ds-button-primary').trigger('click')
+        expect(wrapper.vm.showEmbed).toBe(true)
+        expect(wrapper.vm.checkedAlwaysAllowEmbeds).toBe(false)
+      })
+
+      it.only('click show iframe and change setting permanetly', () => {
+        wrapper.setData({ showOverlay: true })
+        wrapper.find('input[type=checkbox]').trigger('click')
+        wrapper.find('.ds-button-primary').trigger('click')
+        expect(wrapper.vm.showEmbed).toBe(true)
+        expect(wrapper.vm.checkedAlwaysAllowEmbeds).toBe(true)
+      })
+
+      it.only('show only iframe if allowEmbedIframes true', () => {
+        wrapper.setData({ allowEmbedIframes: true })
+        expect(wrapper.find('.embed-html')).toEqual({ selector: '.embed-html' })
+        expect(wrapper.find('.embed-preview-image--clickable')).toEqual({})
+      })
+    })
+  })
+})

webapp/components/Embed/EmbedComponent.vue

@@ -71,7 +71,7 @@ export default {
     }
   },
   created() {
-    if (this.embedData.options) {
+    if (this.currentUser.allowEmbedIframes) {
       this.showEmbed = this.currentUser.allowEmbedIframes
       this.checkedAlwaysAllowEmbeds = this.currentUser.allowEmbedIframes
     }