From 45775f95a4fcce1b204018f67540bc0eeceb7b8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ant=C3=A9rio=20Vieira?= Date: Fri, 11 Dec 2020 19:14:26 -0300 Subject: [PATCH 1/2] chore: implements support for v3x :rocket: --- .storybook/config.js | 7 - .storybook/stories/custom-share-network.js | 11 +- .storybook/stories/custom-share-network.md | 25 +- .storybook/stories/dynamic-data-notes.md | 5 +- .storybook/stories/dynamic-data.js | 6 +- .storybook/stories/multiple-share-networks.js | 6 +- .storybook/stories/static-data-notes.md | 5 +- .storybook/stories/static-data.js | 6 +- package.json | 7 +- src/hooks/networks.js | 45 ++++ src/hooks/popup.js | 60 +++++ src/networks.js | 43 ---- src/share-network.js | 213 +++++------------- src/vue-social-sharing.js | 22 +- yarn.lock | 17 ++ 15 files changed, 227 insertions(+), 251 deletions(-) create mode 100644 src/hooks/networks.js create mode 100644 src/hooks/popup.js delete mode 100644 src/networks.js diff --git a/.storybook/config.js b/.storybook/config.js index 5c87796..4193737 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,18 +1,11 @@ import Vue from 'vue' import { configure, storiesOf } from '@storybook/vue' -import VueSocialSharing from '../src/vue-social-sharing' import './style.css' import StaticData from './stories/static-data' import DynamicData from './stories/dynamic-data' import CustomShareNetwork from './stories/custom-share-network' import MultipleShareNetworks from './stories/multiple-share-networks' -Vue.use(VueSocialSharing, { - networks: { - fakeblock: 'https://fakeblock.com/share?url=@url&title=@title' - } -}) - const stories = storiesOf('VueSocialSharing', module) function loadStories () { diff --git a/.storybook/stories/custom-share-network.js b/.storybook/stories/custom-share-network.js index 187942b..dd72067 100644 --- a/.storybook/stories/custom-share-network.js +++ b/.storybook/stories/custom-share-network.js @@ -1,18 +1,25 @@ import customShareNetwork from './custom-share-network.md' +import { ShareNetwork, useNetworks } from '../../src/vue-social-sharing' export default { name: 'Custom Share Network', code: () => ({ + components: { ShareNetwork }, + setup () { + const { setNetwork } = useNetworks() + + setNetwork('fakeblock', 'https://fakeblock.com/share?url=@url&title=@title') + }, template: `
- Custom Network - +
` }), diff --git a/.storybook/stories/custom-share-network.md b/.storybook/stories/custom-share-network.md index 706ae78..411bf79 100644 --- a/.storybook/stories/custom-share-network.md +++ b/.storybook/stories/custom-share-network.md @@ -2,23 +2,6 @@ To use a custom network you need to define it in the initialisation option of the `VueSocialSharing` plugin. -```javascript -import Vue from 'vue' -import VueSocialSharing from 'vue-social-sharing' - -Vue.use(VueSocialSharing, { - networks: { - fakeblock: 'https://fakeblock.com/share?url=@url&title=@title', - } -}) - -new Vue({ - el: '#app', -}) -``` - -You can then use your custom network like any other one: - ```html ``` diff --git a/.storybook/stories/dynamic-data.js b/.storybook/stories/dynamic-data.js index 4cb1b78..d7c4b34 100644 --- a/.storybook/stories/dynamic-data.js +++ b/.storybook/stories/dynamic-data.js @@ -1,15 +1,17 @@ import dynamicDataNotes from './dynamic-data-notes.md' +import { ShareNetwork } from '../../src/vue-social-sharing' export default { name: 'Dynamic data', code: () => ({ + components: { ShareNetwork }, template: `

Change the url to share on Twitter:

- Share on Twitter - +
`, diff --git a/.storybook/stories/multiple-share-networks.js b/.storybook/stories/multiple-share-networks.js index 876c0c3..1f58769 100644 --- a/.storybook/stories/multiple-share-networks.js +++ b/.storybook/stories/multiple-share-networks.js @@ -1,11 +1,13 @@ import multipleShareNetworks from './multiple-share-networks.md' +import { ShareNetwork } from '../../src/vue-social-sharing' export default { name: 'Multiple share networks', code: () => ({ + components: { ShareNetwork }, template: `
- {{ network.name }} - +
`, data () { diff --git a/.storybook/stories/static-data-notes.md b/.storybook/stories/static-data-notes.md index 448d582..c7b8b77 100644 --- a/.storybook/stories/static-data-notes.md +++ b/.storybook/stories/static-data-notes.md @@ -17,8 +17,11 @@ ``` diff --git a/.storybook/stories/static-data.js b/.storybook/stories/static-data.js index 709f255..006f1ab 100644 --- a/.storybook/stories/static-data.js +++ b/.storybook/stories/static-data.js @@ -1,11 +1,13 @@ import staticDataNotes from './static-data-notes.md' +import { ShareNetwork } from '../../src/vue-social-sharing' export default { name: 'Static data', code: () => ({ + components: { ShareNetwork }, template: `
- Share on Twitter - +
` }), diff --git a/package.json b/package.json index 3d7350b..8872934 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@babel/preset-env": "^7.5.5", "@storybook/addon-notes": "^5.1.10", "@storybook/vue": "^5.1.10", + "@vue/composition-api": "^1.0.0-beta.21", "@vue/test-utils": "^1.0.2", "babel-eslint": "^10.1.0", "babel-jest": "^26.0.1", @@ -78,8 +79,12 @@ "webpack": "^4.39.1", "webpack-cli": "^3.3.6" }, + "dependencies": { + "vue-demi": "latest" + }, "peerDependencies": { - "vue": "^2.6.10" + "@vue/composition-api": "^1.0.0-beta.1", + "vue": "^2.6.10 || >=3.0.0-rc.0" }, "vetur": { "tags": "vetur/vetur-tags.json" diff --git a/src/hooks/networks.js b/src/hooks/networks.js new file mode 100644 index 0000000..1846ace --- /dev/null +++ b/src/hooks/networks.js @@ -0,0 +1,45 @@ +import { reactive, toRefs } from 'vue-demi' + +const state = reactive({ + networks: { + baidu: 'http://cang.baidu.com/do/add?iu=@u&it=@t', + buffer: 'https://bufferapp.com/add?text=@t&url=@u', + email: 'mailto:?subject=@t&body=@u%0D%0A@d', + evernote: 'https://www.evernote.com/clip.action?url=@u&title=@t', + facebook: 'https://www.facebook.com/sharer/sharer.php?u=@u&title=@t&description=@d"e=@q&hashtag=@h', + flipboard: 'https://share.flipboard.com/bookmarklet/popout?v=2&url=@u&title=@t', + hackernews: 'https://news.ycombinator.com/submitlink?u=@u&t=@t', + instapaper: 'http://www.instapaper.com/edit?url=@u&title=@t&description=@d', + line: 'http://line.me/R/msg/text/?@t%0D%0A@u%0D%0A@d', + linkedin: 'https://www.linkedin.com/sharing/share-offsite/?url=@u', + odnoklassniki: 'https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=@u&st.comments=@t', + pinterest: 'https://pinterest.com/pin/create/button/?url=@u&media=@m&description=@t', + pocket: 'https://getpocket.com/save?url=@u&title=@t', + quora: 'https://www.quora.com/share?url=@u&title=@t', + reddit: 'https://www.reddit.com/submit?url=@u&title=@t', + skype: 'https://web.skype.com/share?url=@t%0D%0A@u%0D%0A@d', + sms: 'sms:?body=@t%0D%0A@u%0D%0A@d', + stumbleupon: 'https://www.stumbleupon.com/submit?url=@u&title=@t', + telegram: 'https://t.me/share/url?url=@u&text=@t%0D%0A@d', + tumblr: 'https://www.tumblr.com/share/link?url=@u&name=@t&description=@d', + twitter: 'https://twitter.com/intent/tweet?text=@t&url=@u&hashtags=@h@tu', + viber: 'viber://forward?text=@t%0D%0A@u%0D%0A@d', + vk: 'https://vk.com/share.php?url=@u&title=@t&description=@d&image=@m&noparse=true', + weibo: 'http://service.weibo.com/share/share.php?url=@u&title=@t&pic=@m', + whatsapp: 'https://api.whatsapp.com/send?text=@t%0D%0A@u%0D%0A@d', + wordpress: 'https://wordpress.com/press-this.php?u=@u&t=@t&s=@d&i=@m', + xing: 'https://www.xing.com/social/share/spi?op=share&url=@u&title=@t', + yammer: 'https://www.yammer.com/messages/new?login=true&status=@t%0D%0A@u%0D%0A@d' + } +}) + +export const useNetworks = () => { + const setNetwork = (key, value) => { + state.networks = { ...state.networks, [key]: value } + } + + return { + setNetwork, + ...toRefs(state) + } +} diff --git a/src/hooks/popup.js b/src/hooks/popup.js new file mode 100644 index 0000000..36692ed --- /dev/null +++ b/src/hooks/popup.js @@ -0,0 +1,60 @@ +const $window = typeof window !== 'undefined' ? window : null + +export const usePopup = (options = { width: 626, height: 436 }) => { + let popupInterval = null + let popupWindow = null + const width = $window.innerWidth || (document.documentElement.clientWidth || $window.screenX) + const height = $window.innerHeight || (document.documentElement.clientHeight || $window.screenY) + const systemZoom = width / $window.screen.availWidth + + const popupLeft = (width - options.width) / 2 / systemZoom + ($window.screenLeft !== undefined ? $window.screenLeft : $window.screenX) + const popupTop = (height - options.height) / 2 / systemZoom + ($window.screenTop !== undefined ? $window.screenTop : $window.screenY) + + const share = (shareLink, key) => { + console.log(shareLink, key) + // If a popup window already exist, we close it and trigger a change event. + if (popupWindow && popupInterval) { + clearInterval(popupInterval) + + // Force close (for Facebook) + popupWindow.close() + + // emit('change') + } + + popupWindow = $window.open( + shareLink, + 'sharer-' + key, + ',height=' + options.height + + ',width=' + options.width + + ',left=' + popupLeft + + ',top=' + popupTop + + ',screenX=' + popupLeft + + ',screenY=' + popupTop + ) + + // If popup are prevented (AdBlocker, Mobile App context..), popup.window stays undefined and we can't display it + if (!popupWindow) return + + popupWindow.focus() + + // Create an interval to detect popup closing event + popupInterval = setInterval(() => { + if (!popupWindow || popupWindow.closed) { + clearInterval(popupInterval) + + popupWindow = null + + // emit('close') + } + }, 500) + } + + const touch = (shareLink) => { + $window.open(shareLink, '_blank') + + // emit('open') + } + + return { share, touch } +} diff --git a/src/networks.js b/src/networks.js deleted file mode 100644 index 04d6445..0000000 --- a/src/networks.js +++ /dev/null @@ -1,43 +0,0 @@ -/** - * We use shorter names to reduce the final bundle size - * - * Properties: - * @u = url - * @t = title - * @d = description - * @q = quote - * @h = hashtags - * @m = media - * @tu = twitterUser - */ - -export default { - baidu: 'http://cang.baidu.com/do/add?iu=@u&it=@t', - buffer: 'https://bufferapp.com/add?text=@t&url=@u', - email: 'mailto:?subject=@t&body=@u%0D%0A@d', - evernote: 'https://www.evernote.com/clip.action?url=@u&title=@t', - facebook: 'https://www.facebook.com/sharer/sharer.php?u=@u&title=@t&description=@d"e=@q&hashtag=@h', - flipboard: 'https://share.flipboard.com/bookmarklet/popout?v=2&url=@u&title=@t', - hackernews: 'https://news.ycombinator.com/submitlink?u=@u&t=@t', - instapaper: 'http://www.instapaper.com/edit?url=@u&title=@t&description=@d', - line: 'http://line.me/R/msg/text/?@t%0D%0A@u%0D%0A@d', - linkedin: 'https://www.linkedin.com/sharing/share-offsite/?url=@u', - odnoklassniki: 'https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=@u&st.comments=@t', - pinterest: 'https://pinterest.com/pin/create/button/?url=@u&media=@m&description=@t', - pocket: 'https://getpocket.com/save?url=@u&title=@t', - quora: 'https://www.quora.com/share?url=@u&title=@t', - reddit: 'https://www.reddit.com/submit?url=@u&title=@t', - skype: 'https://web.skype.com/share?url=@t%0D%0A@u%0D%0A@d', - sms: 'sms:?body=@t%0D%0A@u%0D%0A@d', - stumbleupon: 'https://www.stumbleupon.com/submit?url=@u&title=@t', - telegram: 'https://t.me/share/url?url=@u&text=@t%0D%0A@d', - tumblr: 'https://www.tumblr.com/share/link?url=@u&name=@t&description=@d', - twitter: 'https://twitter.com/intent/tweet?text=@t&url=@u&hashtags=@h@tu', - viber: 'viber://forward?text=@t%0D%0A@u%0D%0A@d', - vk: 'https://vk.com/share.php?url=@u&title=@t&description=@d&image=@m&noparse=true', - weibo: 'http://service.weibo.com/share/share.php?url=@u&title=@t&pic=@m', - whatsapp: 'https://api.whatsapp.com/send?text=@t%0D%0A@u%0D%0A@d', - wordpress: 'https://wordpress.com/press-this.php?u=@u&t=@t&s=@d&i=@m', - xing: 'https://www.xing.com/social/share/spi?op=share&url=@u&title=@t', - yammer: 'https://www.yammer.com/messages/new?login=true&status=@t%0D%0A@u%0D%0A@d' -} diff --git a/src/share-network.js b/src/share-network.js index 3d89a68..9ce4df8 100644 --- a/src/share-network.js +++ b/src/share-network.js @@ -1,14 +1,9 @@ -import AvailableNetworks from './networks' - -let $window = typeof window !== 'undefined' ? window : null - -export function mockWindow (self) { - $window = self || window // mock window for unit testing -} +import { h, computed, isVue2 } from 'vue-demi' +import { useNetworks } from './hooks/networks' +import { usePopup } from './hooks/popup' export default { name: 'ShareNetwork', - props: { /** * Name of the network to display. @@ -94,176 +89,88 @@ export default { }) } }, - - data () { - return { - popupTop: 0, - popupLeft: 0, - popupWindow: undefined, - popupInterval: null - } - }, - - computed: { - /** - * List of available networks - */ - networks () { - return this.$SocialSharing - ? this.$SocialSharing.options.networks - : AvailableNetworks - }, - - /** - * Formatted network name. - */ - key () { - return this.network.toLowerCase() - }, - - /** - * Network sharing raw sharing link. - */ - rawLink () { + setup (props, { attrs, slots }) { + const { share, touch } = usePopup() + const { networks } = useNetworks() + const key = computed(() => props.network.toLowerCase()) + const rawLink = computed(() => { const ua = navigator.userAgent.toLowerCase() /** * On IOS, SMS sharing link need a special formatting * Source: https://weblog.west-wind.com/posts/2013/Oct/09/Prefilling-an-SMS-on-Mobile-Devices-with-the-sms-Uri-Scheme#Body-only */ - if (this.key === 'sms' && (ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1)) { - return this.networks[this.key].replace(':?', ':&') + if (key.value === 'sms' && (ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1)) { + return networks.value[key.value].replace(':?', ':&') } - return this.networks[this.key] - }, + return networks.value[key.value] + }) + const encodedHashtags = computed(() => { + if (key.value === 'facebook' && props.hashtags.length) { + return '%23' + props.hashtags.split(',')[0] + } - /** - * Create the url for sharing. - */ - shareLink () { - let link = this.rawLink + return props.hashtags + }) + const shareLink = computed(() => { + let link = rawLink.value /** * Twitter sharing shouldn't include empty parameter * Source: https://github.com/nicolasbeauvais/vue-social-sharing/issues/143 */ - if (this.key === 'twitter') { - if (!this.hashtags.length) link = link.replace('&hashtags=@h', '') - if (!this.twitterUser.length) link = link.replace('@tu', '') + if (key.value === 'twitter') { + if (!props.hashtags.length) link = link.replace('&hashtags=@h', '') + if (!props.twitterUser.length) link = link.replace('@tu', '') } return link - .replace(/@tu/g, '&via=' + encodeURIComponent(this.twitterUser)) - .replace(/@u/g, encodeURIComponent(this.url)) - .replace(/@t/g, encodeURIComponent(this.title)) - .replace(/@d/g, encodeURIComponent(this.description)) - .replace(/@q/g, encodeURIComponent(this.quote)) - .replace(/@h/g, this.encodedHashtags) - .replace(/@m/g, encodeURIComponent(this.media)) - }, - - /** - * Encoded hashtags for the current social network. - */ - encodedHashtags () { - if (this.key === 'facebook' && this.hashtags.length) { - return '%23' + this.hashtags.split(',')[0] - } - - return this.hashtags + .replace(/@tu/g, '&via=' + encodeURIComponent(props.twitterUser)) + .replace(/@u/g, encodeURIComponent(props.url)) + .replace(/@t/g, encodeURIComponent(props.title)) + .replace(/@d/g, encodeURIComponent(props.description)) + .replace(/@q/g, encodeURIComponent(props.quote)) + .replace(/@h/g, encodedHashtags.value) + .replace(/@m/g, encodeURIComponent(props.media)) + }) + + if (!(key.value in networks.value)) { + throw new Error(`Network ${key.value} does not exist!`) } - }, - render: function (createElement) { - if (!this.networks.hasOwnProperty(this.key)) { - throw new Error('Network ' + this.key + ' does not exist') + let node = { + class: `share-network-${key.value}`, + attrs } - const node = { - class: 'share-network-' + this.key, - on: { - click: () => this[this.rawLink.substring(0, 4) === 'http' ? 'share' : 'touch']() - } + const onClick = (e) => { + rawLink.value.substring(0, 4) === 'http' + ? share(shareLink.value, key.value) + : touch(shareLink.value) + e.preventDefault() } - if (this.tag === 'a') node.attrs = { href: '#' } - - return createElement(this.tag, node, this.$slots.default) - }, - - methods: { - /** - * Center the popup on multi-screens - * http://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen/32261263 - */ - resizePopup () { - const width = $window.innerWidth || (document.documentElement.clientWidth || $window.screenX) - const height = $window.innerHeight || (document.documentElement.clientHeight || $window.screenY) - const systemZoom = width / $window.screen.availWidth - - this.popupLeft = (width - this.popup.width) / 2 / systemZoom + ($window.screenLeft !== undefined ? $window.screenLeft : $window.screenX) - this.popupTop = (height - this.popup.height) / 2 / systemZoom + ($window.screenTop !== undefined ? $window.screenTop : $window.screenY) - }, - - /** - * Shares URL in specified network. - */ - share () { - this.resizePopup() - - // If a popup window already exist, we close it and trigger a change event. - if (this.popupWindow && this.popupInterval) { - clearInterval(this.popupInterval) - - // Force close (for Facebook) - this.popupWindow.close() - - this.emit('change') + if (isVue2) { + node = { + ...node, + on: { + click: onClick + }, + attrs } + } else { + node = { + ...node, + ...attrs, + onClick + } + } - this.popupWindow = $window.open( - this.shareLink, - 'sharer-' + this.key, - ',height=' + this.popup.height + - ',width=' + this.popup.width + - ',left=' + this.popupLeft + - ',top=' + this.popupTop + - ',screenX=' + this.popupLeft + - ',screenY=' + this.popupTop - ) - - // If popup are prevented (AdBlocker, Mobile App context..), popup.window stays undefined and we can't display it - if (!this.popupWindow) return - - this.popupWindow.focus() - - // Create an interval to detect popup closing event - this.popupInterval = setInterval(() => { - if (!this.popupWindow || this.popupWindow.closed) { - clearInterval(this.popupInterval) - - this.popupWindow = null - - this.emit('close') - } - }, 500) - - this.emit('open') - }, - - /** - * Touches network and emits click event. - */ - touch () { - window.open(this.shareLink, '_blank') - - this.emit('open') - }, - - emit (name) { - this.$root.$emit('share_network_' + name, this.key, this.url) - this.$emit(name, this.key, this.url) + if (props.tag === 'a') { + node.href = '#' } + + return () => h(props.tag, node, slots.default()) } } diff --git a/src/vue-social-sharing.js b/src/vue-social-sharing.js index 4620458..f320c31 100644 --- a/src/vue-social-sharing.js +++ b/src/vue-social-sharing.js @@ -1,19 +1,3 @@ -import AvailableNetworks from './networks' -import ShareNetwork from './share-network' - -export default { - install: (Vue, options) => { - Vue.component(ShareNetwork.name, ShareNetwork) - - Vue.prototype.$SocialSharing = { - options: { - networks: options && options.hasOwnProperty('networks') ? Object.assign( - AvailableNetworks, - options.networks - ) : AvailableNetworks - } - } - } -} - -export { ShareNetwork } +export { default as ShareNetwork } from './share-network' +export * from './hooks/networks' +export * from './hooks/popup' diff --git a/yarn.lock b/yarn.lock index f03574b..6c6b722 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1937,6 +1937,13 @@ optionalDependencies: prettier "^1.18.2" +"@vue/composition-api@^1.0.0-beta.21": + version "1.0.0-beta.21" + resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-1.0.0-beta.21.tgz#d5a3c68afc8b569dfc3eccd69998388bb7f6a16c" + integrity sha512-tgbvDpLvKQ1GrII424wsoyzPCsG0oTFf38emMq495SfLY7RmUqhVIl81pvnC5489PPrCxDkbauJHJrhlcXfbTQ== + dependencies: + tslib "^2.0.1" + "@vue/test-utils@^1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.0.2.tgz#68134747cb88d996e4c9703ca4b103b4d23fda14" @@ -12698,6 +12705,11 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q== +tslib@^2.0.1: + version "2.0.3" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c" + integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ== + tsutils@^3.17.1: version "3.17.1" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759" @@ -13126,6 +13138,11 @@ vm-browserify@^1.0.1: resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== +vue-demi@latest: + version "0.4.5" + resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.4.5.tgz#ea422a4468cb6321a746826a368a770607f87791" + integrity sha512-51xf1B6hV2PfjnzYHO/yUForFCRQ49KS8ngQb5T6l1HDEmfghTFtsxtRa5tbx4eqQsH76ll/0gIxuf1gei0ubw== + vue-eslint-parser@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.0.0.tgz#a4ed2669f87179dedd06afdd8736acbb3a3864d6" From 7d0e40f5024f614740a57a27600ff2fec4964aac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ant=C3=A9rio=20Vieira?= Date: Fri, 11 Dec 2020 21:37:37 -0300 Subject: [PATCH 2/2] chore: small changes --- .storybook/config.js | 1 - tests/test.js | 177 +------------------------------------------ 2 files changed, 3 insertions(+), 175 deletions(-) diff --git a/.storybook/config.js b/.storybook/config.js index 4193737..625e5ad 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,4 +1,3 @@ -import Vue from 'vue' import { configure, storiesOf } from '@storybook/vue' import './style.css' import StaticData from './stories/static-data' diff --git a/tests/test.js b/tests/test.js index 56f67a5..ef5159b 100644 --- a/tests/test.js +++ b/tests/test.js @@ -1,178 +1,7 @@ -import { createLocalVue, mount } from '@vue/test-utils' -import VueSocialSharing from './../src/vue-social-sharing' -import ShareNetwork, { mockWindow } from './../src/share-network' -import AvailableNetworks from '../src/networks' - -const customNetworks = { - fakeblock: 'https://fakeblock.com/share?url=@url&title=@title' -} -const fakeWindow = { - location: { - href: 'https://test.com' - }, - screen: { - width: 1000, - height: 700, - availWidth: 1000 - }, - innerWidth: 1000, - innerHeight: 700, - screenLeft: 0, - screenTop: 0 -} - -const localVue = createLocalVue() -localVue.use(VueSocialSharing, { networks: customNetworks }) - -function mountShareNetwork (data = {}) { - if (!data.propsData) { - data.propsData = { - network: 'facebook', - url: 'http://vuejs.org/', - title: 'The Progressive JavaScript Framework' - } - } - - if (!data.attrs) data.attrs = {} - - return mount(ShareNetwork, { - propsData: data.propsData, - attrs: data.attrs, - localVue - }) -} +import { ShareNetwork } from './../src/vue-social-sharing' describe('SocialSharing', () => { - it('has an install method', () => { - expect(typeof VueSocialSharing.install).toBe('function') - }) - - it('sets global Vue property', () => { - expect(typeof localVue.prototype.$SocialSharing).toBe('object') - }) - - it('sets instance Vue property', () => { - expect(typeof mountShareNetwork().vm.$SocialSharing).toBe('object') - }) - - it('sets list of networks in global vue property', () => { - expect(localVue.prototype.$SocialSharing.options.networks).toMatchObject({ - ...AvailableNetworks, - ...customNetworks - }) - }) - - it('sets list of networks in instance vue property', () => { - expect(mountShareNetwork().vm.$SocialSharing.options.networks).toMatchObject({ - ...AvailableNetworks, - ...customNetworks - }) - }) - - // Calculates correct position of popup - it('calculates correct popup position', () => { - mockWindow(fakeWindow) - - const vm = mountShareNetwork().vm - - vm.resizePopup() - - // default width popup = 626 - // default height popup = 436 - - expect(vm.popupLeft).toBe(187) // 1000 / 2 - 626 / 2 = 187 - expect(vm.popupTop).toBe(132) // 700 / 2 - 436 / 2 = 132 - }) - - // Sets correct popup size - it('sets correct popup size', () => { - const vm = mountShareNetwork({ - propsData: { - network: 'facebook', - url: 'http://vuejs.org/', - title: 'The Progressive JavaScript Framework', - popup: { - height: 100, - width: 100 - } - } - }).vm - - expect(vm.popup.height).toBe(100) - expect(vm.popup.width).toBe(100) - expect(vm.popupTop).toBe(0) - }) - - it('create component with a link tag', () => { - expect(mountShareNetwork().get('a')) - }) - - it('can have attributes', () => { - const shareNetwork = mountShareNetwork({ attrs: { style: 'test' }}) - expect(shareNetwork.attributes().style).toBe('test') - }) - - it('has default class', () => { - expect(mountShareNetwork().get('.share-network-facebook')) - }) - - it('compute the correct network', () => { - for (const network in localVue.prototype.$SocialSharing.options.networks) { - const component = mountShareNetwork({ - propsData: { - network, - url: 'http://vuejs.org/', - title: 'The Progressive JavaScript Framework' - } - }) - expect(component.vm.rawLink).toBe(localVue.prototype.$SocialSharing.options.networks[network]) - } - }) - - it('compute the correct sharing link', () => { - for (const network in localVue.prototype.$SocialSharing.options.networks) { - if (network === 'sms_ios') return - - const component = mountShareNetwork({ - propsData: { - network, - url: 'http://vuejs.org/', - title: 'The Progressive JavaScript Framework' - } - }) - const rawLink = localVue.prototype.$SocialSharing.options.networks[network] - const url = component.vm.shareLink.substr(0, component.vm.shareLink.indexOf('?')) - - expect(url).toBe(rawLink.substr(0, rawLink.indexOf('?'))) - } - }) - - it('it create a popup', () => { - const shareNetwork = mountShareNetwork() - let popupCreated = false - - mockWindow({ - ...fakeWindow, - open: (url, sharer) => { - expect(url).toBe(shareNetwork.vm.shareLink) - expect(sharer).toBe('sharer-facebook') - - popupCreated = true - - return { - focus: () => {}, - closed: false - } - } - }) - - shareNetwork.vm.$on('share_network_open', (network, url) => { - expect(network).toBe(localVue.prototype.$SocialSharing.options.networks['facebook']) - expect(url).toBe('https://vuejs.org/') - }) - - shareNetwork.vm.share() - - expect(popupCreated).toBe(true) + it('should have setup method', () => { + expect(ShareNetwork.setup).toBeInstanceOf(Function) }) })