├── .babelrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── README └── images │ └── demo.gif ├── bili.config.js ├── dev ├── App.vue ├── index.html └── main.js ├── dist ├── vue-tabevents.cjs.js ├── vue-tabevents.es.js ├── vue-tabevents.js ├── vue-tabevents.min.js └── vue-tabevents.min.js.map ├── jest.config.js ├── package-lock.json ├── package.json ├── src └── index.js └── test └── unit ├── App.vue └── app.spec.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [["env", { "modules": false }]], 3 | "env": { 4 | "test": { 5 | "presets": [["env", { "targets": { "node": "current" } }]] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .babelrc 2 | .travis.yml 3 | .jest.config.js 4 | .editorconfig 5 | .eslintrc.js 6 | .eslintignore 7 | .gitignore 8 | .postcssrc.js 9 | .DS_Store 10 | node_modules/ 11 | *.log 12 | build 13 | config 14 | dev 15 | test -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 'lts/*' 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-tabevents 2 | 3 | [![npm](https://img.shields.io/npm/dm/vue-tabevents.svg?style=flat-square)](https://www.npmjs.com/package/vue-tabevents) 4 | [![npm](https://img.shields.io/github/package-json/v/almoullim/vue-tabevents.svg?style=flat-square)](https://github.com/almoullim/vue-tabevents/releases) 5 | [![npm](https://img.shields.io/github/license/almoullim/vue-tabevents.svg?style=flat-square)](https://github.com/almoullim/vue-tabevents/blob/master/LICENSE) 6 | [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-tabevents/badge)](https://www.jsdelivr.com/package/npm/vue-tabevents) 7 | [![travisci](https://img.shields.io/travis/Almoullim/vue-tabevents/master.svg?style=flat-square)](https://travis-ci.org/Almoullim/vue-tabevents) 8 | 9 | Easy communication between tabs for Vue 2.x 10 | 11 | ![Basic Screenshot](README/images/demo.gif) 12 | 13 | ## Getting Started 14 | 15 | ### Installing 16 | 17 | Install with npm: 18 | 19 | ```bash 20 | npm install --save vue-tabevents 21 | ``` 22 | 23 | import into project: 24 | 25 | ```js 26 | import Vue from 'vue'; 27 | import vueTabevents from 'vue-tabevents'; 28 | 29 | Vue.use(vueTabevents); 30 | ``` 31 | 32 | ## Usage 33 | 34 | To an emit event to other tabs 35 | 36 | ``` 37 | this.$tabEvent.emit('eventName'); 38 | 39 | const data = { 40 | name: 'Ali' 41 | phone: 123 42 | } 43 | 44 | this.$tabEvent.emit('eventName', data); 45 | ``` 46 | 47 | To listen for events emitted by other types 48 | 49 | ``` 50 | this.$tabEvent.on('eventName', callback); 51 | 52 | this.$tabEvent.on('eventName', (data) => console.log(data)); 53 | ``` 54 | 55 | To stop listening to an event 56 | 57 | ``` 58 | this.$tabEvent.off('eventName'); 59 | ``` 60 | 61 | ## Authors 62 | 63 | - **Ali Almoullim** - [almoullim](https://github.com/almoullim) 64 | 65 | ## License 66 | 67 | This project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details 68 | -------------------------------------------------------------------------------- /README/images/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Almoullim/vue-tabevents/2a7ef25f2e51809e81071f950e233a57ca190cb4/README/images/demo.gif -------------------------------------------------------------------------------- /bili.config.js: -------------------------------------------------------------------------------- 1 | const { version } = require('./package') 2 | 3 | const banner = `/** 4 | * vue-tabevents v${version} 5 | * https://github.com/almoullim/vue-tabevents 6 | * Released under the MIT License. 7 | */ 8 | ` 9 | 10 | module.exports = { 11 | banner, 12 | format: ['cjs', 'es', 'umd', 'umd-min'], 13 | compress: 'umd', 14 | plugins: ['vue'], 15 | vue: { 16 | css: true 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /dev/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /dev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-tabevents 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /dev/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | import vueTabevents from '../dist/vue-tabevents.min.js' 4 | 5 | Vue.use(vueTabevents) 6 | 7 | Vue.config.productionTip = false 8 | 9 | /* eslint-disable no-new */ 10 | new Vue({ 11 | el: '#app', 12 | render: h => h(App) 13 | }) 14 | -------------------------------------------------------------------------------- /dist/vue-tabevents.cjs.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-tabevents v1.2.0 3 | * https://github.com/almoullim/vue-tabevents 4 | * Released under the MIT License. 5 | */ 6 | 7 | 'use strict'; 8 | 9 | var vueTabEvents = { 10 | install: function (Vue) { 11 | Vue.prototype.$IsJsonString = function IsJsonString(str) { 12 | try { 13 | JSON.parse(str); 14 | } catch (e) { 15 | return false; 16 | } 17 | return true; 18 | }; 19 | 20 | Vue.prototype.$tabEvent = { 21 | emit: function emit(event, data) { 22 | if (!data) { 23 | localStorage.setItem('event', event); 24 | } 25 | if (data) { 26 | if (typeof data !== 'string') { localStorage.setItem('eventWithData', (event + "!@#$%" + (JSON.stringify(data)))); }else { localStorage.setItem('eventWithData', (event + "!@#$%" + data)); } 27 | } 28 | localStorage.removeItem('event'); 29 | localStorage.removeItem('eventWithData'); 30 | }, 31 | 32 | on: function on(event, callback) { 33 | function listner(e) { 34 | if (e.newValue == null) { return; }else if (e.key == 'event') { 35 | if (e.newValue === event) { return callback(); } 36 | } else if (e.key == 'eventWithData') { 37 | var ev = e.newValue.split('!@#$%'); 38 | if (ev[0] === event) { 39 | if (Vue.IsJsonString(ev[1])) { return callback(JSON.parse(ev[1])); }else { return callback(ev[1]); } 40 | } 41 | } 42 | } 43 | 44 | window.addEventListener('storage', listner); 45 | 46 | window.addEventListener('offanEvent', function (r) { 47 | if (r.detail.eventToOff === event) { window.removeEventListener('storage', listner); } 48 | }); 49 | }, 50 | 51 | off: function off(event) { 52 | var ev = new CustomEvent('offanEvent', { detail: { eventToOff: event } }); 53 | window.dispatchEvent(ev); 54 | } 55 | }; 56 | } 57 | }; 58 | 59 | if (typeof window !== 'undefined' && window.Vue) { 60 | window.Vue.use(vueTabEvents); 61 | } 62 | 63 | module.exports = vueTabEvents; 64 | -------------------------------------------------------------------------------- /dist/vue-tabevents.es.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-tabevents v1.2.0 3 | * https://github.com/almoullim/vue-tabevents 4 | * Released under the MIT License. 5 | */ 6 | 7 | var vueTabEvents = { 8 | install: function (Vue) { 9 | Vue.prototype.$IsJsonString = function IsJsonString(str) { 10 | try { 11 | JSON.parse(str); 12 | } catch (e) { 13 | return false; 14 | } 15 | return true; 16 | }; 17 | 18 | Vue.prototype.$tabEvent = { 19 | emit: function emit(event, data) { 20 | if (!data) { 21 | localStorage.setItem('event', event); 22 | } 23 | if (data) { 24 | if (typeof data !== 'string') { localStorage.setItem('eventWithData', (event + "!@#$%" + (JSON.stringify(data)))); }else { localStorage.setItem('eventWithData', (event + "!@#$%" + data)); } 25 | } 26 | localStorage.removeItem('event'); 27 | localStorage.removeItem('eventWithData'); 28 | }, 29 | 30 | on: function on(event, callback) { 31 | function listner(e) { 32 | if (e.newValue == null) { return; }else if (e.key == 'event') { 33 | if (e.newValue === event) { return callback(); } 34 | } else if (e.key == 'eventWithData') { 35 | var ev = e.newValue.split('!@#$%'); 36 | if (ev[0] === event) { 37 | if (Vue.IsJsonString(ev[1])) { return callback(JSON.parse(ev[1])); }else { return callback(ev[1]); } 38 | } 39 | } 40 | } 41 | 42 | window.addEventListener('storage', listner); 43 | 44 | window.addEventListener('offanEvent', function (r) { 45 | if (r.detail.eventToOff === event) { window.removeEventListener('storage', listner); } 46 | }); 47 | }, 48 | 49 | off: function off(event) { 50 | var ev = new CustomEvent('offanEvent', { detail: { eventToOff: event } }); 51 | window.dispatchEvent(ev); 52 | } 53 | }; 54 | } 55 | }; 56 | 57 | if (typeof window !== 'undefined' && window.Vue) { 58 | window.Vue.use(vueTabEvents); 59 | } 60 | 61 | export default vueTabEvents; 62 | -------------------------------------------------------------------------------- /dist/vue-tabevents.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-tabevents v1.2.0 3 | * https://github.com/almoullim/vue-tabevents 4 | * Released under the MIT License. 5 | */ 6 | 7 | (function (global, factory) { 8 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 9 | typeof define === 'function' && define.amd ? define(factory) : 10 | (global.vueTabevents = factory()); 11 | }(this, (function () { 'use strict'; 12 | 13 | var vueTabEvents = { 14 | install: function (Vue) { 15 | Vue.prototype.$IsJsonString = function IsJsonString(str) { 16 | try { 17 | JSON.parse(str); 18 | } catch (e) { 19 | return false; 20 | } 21 | return true; 22 | }; 23 | 24 | Vue.prototype.$tabEvent = { 25 | emit: function emit(event, data) { 26 | if (!data) { 27 | localStorage.setItem('event', event); 28 | } 29 | if (data) { 30 | if (typeof data !== 'string') { localStorage.setItem('eventWithData', (event + "!@#$%" + (JSON.stringify(data)))); }else { localStorage.setItem('eventWithData', (event + "!@#$%" + data)); } 31 | } 32 | localStorage.removeItem('event'); 33 | localStorage.removeItem('eventWithData'); 34 | }, 35 | 36 | on: function on(event, callback) { 37 | function listner(e) { 38 | if (e.newValue == null) { return; }else if (e.key == 'event') { 39 | if (e.newValue === event) { return callback(); } 40 | } else if (e.key == 'eventWithData') { 41 | var ev = e.newValue.split('!@#$%'); 42 | if (ev[0] === event) { 43 | if (Vue.IsJsonString(ev[1])) { return callback(JSON.parse(ev[1])); }else { return callback(ev[1]); } 44 | } 45 | } 46 | } 47 | 48 | window.addEventListener('storage', listner); 49 | 50 | window.addEventListener('offanEvent', function (r) { 51 | if (r.detail.eventToOff === event) { window.removeEventListener('storage', listner); } 52 | }); 53 | }, 54 | 55 | off: function off(event) { 56 | var ev = new CustomEvent('offanEvent', { detail: { eventToOff: event } }); 57 | window.dispatchEvent(ev); 58 | } 59 | }; 60 | } 61 | }; 62 | 63 | if (typeof window !== 'undefined' && window.Vue) { 64 | window.Vue.use(vueTabEvents); 65 | } 66 | 67 | return vueTabEvents; 68 | 69 | }))); 70 | -------------------------------------------------------------------------------- /dist/vue-tabevents.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-tabevents v1.2.0 3 | * https://github.com/almoullim/vue-tabevents 4 | * Released under the MIT License. 5 | */ 6 | 7 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.vueTabevents=t()}(this,function(){"use strict";var e={install:function(e){e.prototype.$IsJsonString=function(e){try{JSON.parse(e)}catch(e){return!1}return!0},e.prototype.$tabEvent={emit:function(e,t){t||localStorage.setItem("event",e),t&&("string"!=typeof t?localStorage.setItem("eventWithData",e+"!@#$%"+JSON.stringify(t)):localStorage.setItem("eventWithData",e+"!@#$%"+t)),localStorage.removeItem("event"),localStorage.removeItem("eventWithData")},on:function(t,n){function o(o){if(null!=o.newValue)if("event"==o.key){if(o.newValue===t)return n()}else if("eventWithData"==o.key){var i=o.newValue.split("!@#$%");if(i[0]===t)return e.IsJsonString(i[1])?n(JSON.parse(i[1])):n(i[1])}}window.addEventListener("storage",o),window.addEventListener("offanEvent",function(e){e.detail.eventToOff===t&&window.removeEventListener("storage",o)})},off:function(e){var t=new CustomEvent("offanEvent",{detail:{eventToOff:e}});window.dispatchEvent(t)}}}};return"undefined"!=typeof window&&window.Vue&&window.Vue.use(e),e}); 8 | //# sourceMappingURL=vue-tabevents.min.js.map 9 | -------------------------------------------------------------------------------- /dist/vue-tabevents.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vue-tabevents.min.js","sources":["../src/index.js"],"sourcesContent":["const vueTabEvents = {\n install: function (Vue) {\n Vue.prototype.$IsJsonString = function IsJsonString (str) {\n try {\n JSON.parse(str)\n } catch (e) {\n return false\n }\n return true\n }\n\n Vue.prototype.$tabEvent = {\n emit: function emit (event, data) {\n if (!data) {\n localStorage.setItem('event', event)\n }\n if (data) {\n if (typeof data !== 'string') localStorage.setItem('eventWithData', `${event}!@#$%${JSON.stringify(data)}`)\n else localStorage.setItem('eventWithData', `${event}!@#$%${data}`)\n }\n localStorage.removeItem('event')\n localStorage.removeItem('eventWithData')\n },\n\n on: function on (event, callback) {\n function listner (e) {\n if (e.newValue == null) return\n else if (e.key == 'event') {\n if (e.newValue === event) return callback()\n } else if (e.key == 'eventWithData') {\n const ev = e.newValue.split('!@#$%')\n if (ev[0] === event) {\n if (Vue.IsJsonString(ev[1])) return callback(JSON.parse(ev[1]))\n else return callback(ev[1])\n }\n }\n }\n\n window.addEventListener('storage', listner)\n\n window.addEventListener('offanEvent', r => {\n if (r.detail.eventToOff === event) window.removeEventListener('storage', listner)\n })\n },\n\n off: function off (event) {\n const ev = new CustomEvent('offanEvent', { detail: { eventToOff: event } })\n window.dispatchEvent(ev)\n }\n }\n }\n}\n\nexport default vueTabEvents\n\nif (typeof window !== 'undefined' && window.Vue) {\n window.Vue.use(vueTabEvents)\n}\n"],"names":["const","vueTabEvents","Vue","prototype","$IsJsonString","str","parse","e","$tabEvent","event","data","setItem","localStorage","JSON","stringify","removeItem","callback","listner","newValue","key","ev","split","IsJsonString","addEventListener","r","detail","eventToOff","window","removeEventListener","CustomEvent","dispatchEvent","use"],"mappings":";;;;;;wLAAAA,IAAMC,WACK,SAAUC,KACbC,UAAUC,cAAgB,SAAuBC,YAE5CC,MAAMD,GACX,MAAOE,UACA,SAEF,KAGLJ,UAAUK,gBACN,SAAeC,EAAOC,GACrBA,gBACUC,QAAQ,QAASF,GAE5BC,IACkB,iBAATA,EAAmBE,aAAaD,QAAQ,gBAAoBF,UAAaI,KAAKC,UAAUJ,IAC9FE,aAAaD,QAAQ,gBAAoBF,UAAaC,iBAEhDK,WAAW,sBACXA,WAAW,qBAGtB,SAAaN,EAAOO,YACbC,EAASV,MACE,MAAdA,EAAEW,SACD,GAAa,SAATX,EAAEY,QACLZ,EAAEW,WAAaT,EAAO,OAAOO,SAC5B,GAAa,iBAATT,EAAEY,IAAwB,KAC7BC,EAAKb,EAAEW,SAASG,MAAM,YACxBD,EAAG,KAAOX,SACRP,EAAIoB,aAAaF,EAAG,IAAYJ,EAASH,KAAKP,MAAMc,EAAG,KAC/CJ,EAASI,EAAG,YAKvBG,iBAAiB,UAAWN,UAE5BM,iBAAiB,sBAAcC,GAChCA,EAAEC,OAAOC,aAAejB,GAAOkB,OAAOC,oBAAoB,UAAWX,UAIxE,SAAcR,OACXW,EAAK,IAAIS,YAAY,cAAgBJ,QAAUC,WAAYjB,YAC1DqB,cAAcV,aAQP,oBAAXO,QAA0BA,OAAOzB,YACnCA,IAAI6B,IAAI9B"} -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: ['js', 'json', 'vue'], 3 | transform: { 4 | '.*\\.(vue)$': 'vue-jest', 5 | '^.+\\.js$': 'babel-jest' 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-tabevents", 3 | "version": "1.2.0", 4 | "description": "Easy communication between tabs for Vue 2.x", 5 | "main": "dist/vue-tabevents.cjs.js", 6 | "module": "dist/vue-tabevents.es.js", 7 | "files": [ 8 | "dist", 9 | "src" 10 | ], 11 | "scripts": { 12 | "bundle": "bili", 13 | "dev": "poi", 14 | "test": "jest ./test" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/almoullim/vue-tabevents" 19 | }, 20 | "keywords": [ 21 | "VueJS", 22 | "events", 23 | "plugin", 24 | "tabs", 25 | "vue" 26 | ], 27 | "author": { 28 | "name": "Ali Almoullim", 29 | "email": "Ali@Almoullim.com" 30 | }, 31 | "license": "MIT", 32 | "poi": { 33 | "entry": "dev/main.js", 34 | "dist": "dev/dist", 35 | "homepage": "./", 36 | "html": { 37 | "template": "dev/index.html" 38 | } 39 | }, 40 | "devDependencies": { 41 | "@vue/test-utils": "^1.0.0-beta.25", 42 | "babel-jest": "^23.6.0", 43 | "bili": "^2.2.7", 44 | "jest": "^23.6.0", 45 | "poi": "^9.6.13", 46 | "rollup-plugin-vue": "^3.0.0", 47 | "vue-jest": "^3.0.0" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const vueTabEvents = { 2 | install: function (Vue) { 3 | Vue.prototype.$IsJsonString = function IsJsonString (str) { 4 | try { 5 | JSON.parse(str) 6 | } catch (e) { 7 | return false 8 | } 9 | return true 10 | } 11 | 12 | Vue.prototype.$tabEvent = { 13 | emit: function emit (event, data) { 14 | if (!data) { 15 | localStorage.setItem('event', event) 16 | } 17 | if (data) { 18 | if (typeof data !== 'string') localStorage.setItem('eventWithData', `${event}!@#$%${JSON.stringify(data)}`) 19 | else localStorage.setItem('eventWithData', `${event}!@#$%${data}`) 20 | } 21 | localStorage.removeItem('event') 22 | localStorage.removeItem('eventWithData') 23 | }, 24 | 25 | on: function on (event, callback) { 26 | function listner (e) { 27 | if (e.newValue == null) return 28 | else if (e.key == 'event') { 29 | if (e.newValue === event) return callback() 30 | } else if (e.key == 'eventWithData') { 31 | const ev = e.newValue.split('!@#$%') 32 | if (ev[0] === event) { 33 | if (Vue.prototype.$IsJsonString(ev[1])) return callback(JSON.parse(ev[1])) 34 | else return callback(ev[1]) 35 | } 36 | } 37 | } 38 | 39 | window.addEventListener('storage', listner) 40 | 41 | window.addEventListener('offanEvent', r => { 42 | if (r.detail.eventToOff === event) window.removeEventListener('storage', listner) 43 | }) 44 | }, 45 | 46 | off: function off (event) { 47 | const ev = new CustomEvent('offanEvent', { detail: { eventToOff: event } }) 48 | window.dispatchEvent(ev) 49 | } 50 | } 51 | } 52 | } 53 | 54 | export default vueTabEvents 55 | 56 | if (typeof window !== 'undefined' && window.Vue) { 57 | window.Vue.use(vueTabEvents) 58 | } 59 | -------------------------------------------------------------------------------- /test/unit/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /test/unit/app.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount, createLocalVue } from '@vue/test-utils' 2 | import App from './App.vue' 3 | 4 | import vueTabevents from '../../src/index' 5 | import { doesNotThrow } from 'assert' 6 | 7 | const localVue = createLocalVue() 8 | localVue.use(vueTabevents) 9 | 10 | describe('App', () => { 11 | let wrapper 12 | beforeEach(() => { 13 | wrapper = shallowMount(App, { localVue }) 14 | }) 15 | 16 | it('is a Vue instance', () => { 17 | expect(wrapper.isVueInstance()).toBeTruthy() 18 | }) 19 | 20 | it('it have a BUTTON and an H1', () => { 21 | expect(wrapper.find('button').exists()).toBe(true) 22 | expect(wrapper.find('h1').exists()).toBe(true) 23 | }) 24 | 25 | it('H1 to be hidden when BUTTON is clicked', () => { 26 | expect(wrapper.find('h1').exists()).toBe(true) 27 | const button = wrapper.find('button') 28 | button.trigger('click') 29 | expect(wrapper.find('h1').exists()).toBe(false) 30 | }) 31 | 32 | it('it catches storage events', () => { 33 | expect(wrapper.vm.show).toBe(true) 34 | window.dispatchEvent( 35 | new StorageEvent('storage', { 36 | key: 'event', 37 | newValue: 'hide/show' 38 | }) 39 | ) 40 | expect(wrapper.vm.show).toBe(false) 41 | }) 42 | }) 43 | --------------------------------------------------------------------------------