From da1df277991015bd7c48a1fc551244b4288a75f3 Mon Sep 17 00:00:00 2001 From: mattwr18 Date: Mon, 7 Oct 2019 19:15:39 +0200 Subject: [PATCH] Extract logic to EmbedComponent to separate concerns - Co-authored-by: senderfm --- webapp/components/Editor/nodes/Embed.js | 117 +------------- webapp/components/Editor/nodes/Embed.spec.js | 32 ++-- webapp/components/Embed/EmbedComponent.vue | 153 +++++++++++++++++++ 3 files changed, 176 insertions(+), 126 deletions(-) create mode 100644 webapp/components/Embed/EmbedComponent.vue diff --git a/webapp/components/Editor/nodes/Embed.js b/webapp/components/Editor/nodes/Embed.js index 63ae6bfae..0d7a82a18 100644 --- a/webapp/components/Editor/nodes/Embed.js +++ b/webapp/components/Editor/nodes/Embed.js @@ -1,42 +1,11 @@ import { Node } from 'tiptap' import pasteRule from '../commands/pasteRule' import { compileToFunctions } from 'vue-template-compiler' -import { mapGetters, mapMutations } from 'vuex' -import { allowEmbedIframesMutation } from '~/graphql/User.js' +import Vue from 'vue' +import EmbedComponent from '~/components/Embed/EmbedComponent' -const template = ` - {{dataEmbedUrl}} - -
-
- -

{{embedTitle}}

-

{{embedDescription}}

- {{dataEmbedUrl}} -
- - - -` +Vue.component(EmbedComponent) +const template = `` const compiledTemplate = compileToFunctions(template) @@ -95,45 +64,15 @@ export default class Embed extends Node { props: ['node', 'updateAttrs', 'options'], data: () => ({ embedData: {}, - checkedAlwaysAllowEmbeds: false, - showEmbed: false, - showOverlay: false, - showLinkOnly: false, }), async created() { if (this.options) { this.embedData = await this.options.onEmbed({ url: this.dataEmbedUrl }) - this.showEmbed = this.currentUser.allowEmbedIframes - this.checkedAlwaysAllowEmbeds = this.currentUser.allowEmbedIframes } }, computed: { - ...mapGetters({ - currentUser: 'auth/user', - }), - embedHtml() { - const { html = '' } = this.embedData - return html - }, - embedImage() { - const { image = '' } = this.embedData - return image - }, - embedPublisher() { - const { publisher = '' } = this.embedData - return publisher - }, - embedTitle() { - const { title = '' } = this.embedData - return title - }, - embedAuthor() { - const { author = '' } = this.embedData - return author - }, - embedDescription() { - const { description = '' } = this.embedData - return description + componentType() { + return EmbedComponent }, dataEmbedUrl: { get() { @@ -146,50 +85,6 @@ export default class Embed extends Node { }, }, }, - methods: { - ...mapMutations({ - setCurrentUser: 'auth/SET_USER', - }), - openOverlay() { - this.showOverlay = true - }, - closeOverlay() { - this.showOverlay = false - }, - allowEmbed() { - this.showEmbed = true - this.closeOverlay() - - if (this.checkedAlwaysAllowEmbeds !== this.currentUser.allowEmbedIframes) { - this.updateEmbedSettings(this.checkedAlwaysAllowEmbeds) - } - }, - removeEmbed() { - this.showLinkOnly = true - }, - async updateEmbedSettings(allowEmbedIframes) { - try { - await this.$apollo.mutate({ - mutation: allowEmbedIframesMutation(), - variables: { - id: this.currentUser.id, - allowEmbedIframes, - }, - update: (store, { data: { UpdateUser } }) => { - const { allowEmbedIframes } = UpdateUser - this.setCurrentUser({ - ...this.currentUser, - allowEmbedIframes, - }) - }, - }) - this.$toast.success(this.$t('contribution.success')) - this.showEmbed = this.currentUser.allowEmbedIframes - } catch (err) { - this.$toast.error(err.message) - } - }, - }, render(createElement) { return compiledTemplate.render.call(this, createElement) }, diff --git a/webapp/components/Editor/nodes/Embed.spec.js b/webapp/components/Editor/nodes/Embed.spec.js index 8307a9393..a2ae2e7e5 100644 --- a/webapp/components/Editor/nodes/Embed.spec.js +++ b/webapp/components/Editor/nodes/Embed.spec.js @@ -1,31 +1,35 @@ -import { shallowMount } from '@vue/test-utils' +import { shallowMount, createLocalVue } from '@vue/test-utils' +import Vuex from 'vuex' +import Styleguide from '@human-connection/styleguide' import Embed from './Embed' -let Wrapper -let propsData +let Wrapper, propsData, component const someUrl = 'https://www.youtube.com/watch?v=qkdXAtO40Fo' +const localVue = createLocalVue() + +localVue.use(Vuex) +localVue.use(Styleguide) describe('Embed.vue', () => { beforeEach(() => { propsData = {} - const component = new Embed() - Wrapper = ({ mocks, propsData }) => { + component = new Embed() + // computed = { + // currentUser: () => { + // return { id: 'im a user', allowEmbedIframes: false } + // }, + // } + Wrapper = ({ propsData }) => { return shallowMount(component.view, { propsData }) } }) - it('renders ds-container', () => { - propsData = { - node: { attrs: { href: someUrl } }, - } - expect(Wrapper({ propsData }).is('ds-container')).toBe(true) - }) - describe('given a href', () => { describe('onEmbed returned embed data', () => { beforeEach(() => { propsData.options = { onEmbed: () => ({ + __typename: 'Embed', type: 'video', title: 'Baby Loves Cat', author: 'Merkley Family', @@ -49,9 +53,7 @@ describe('Embed.vue', () => { propsData.node = { attrs: { href: 'https://www.youtube.com/watch?v=qkdXAtO40Fo' } } const wrapper = Wrapper({ propsData }) await wrapper.html() - expect(wrapper.find('ds-container img').attributes('src')).toEqual( - 'https://i.ytimg.com/vi/qkdXAtO40Fo/maxresdefault.jpg', - ) + expect(wrapper.contains('embed-component-stub')).toBe(true) }) }) diff --git a/webapp/components/Embed/EmbedComponent.vue b/webapp/components/Embed/EmbedComponent.vue new file mode 100644 index 000000000..d7707d9bb --- /dev/null +++ b/webapp/components/Embed/EmbedComponent.vue @@ -0,0 +1,153 @@ + + +