2 |
3 |
4 |
5 |
Event Manager
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
41 |
42 |
47 |
--------------------------------------------------------------------------------
/stories/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import VueEventManager from 'vue-event-manager';
3 | import DefaultStory from './components/DefaultStory.vue';
4 | import {storiesOf} from '@storybook/vue';
5 | import {action} from '@storybook/addon-actions';
6 |
7 | // load plugin
8 | Vue.use(VueEventManager, {
9 |
10 | // log event action
11 | log({name, params}) {
12 | action(name)(...params);
13 | }
14 |
15 | });
16 |
17 | storiesOf('Event Manager', module)
18 | .add('Default', () => ({extends: DefaultStory}));
19 |
--------------------------------------------------------------------------------
/test/event.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 |
3 | describe('Vue.events', () => {
4 |
5 | it('Trigger Method with one param', () => {
6 | new Vue({
7 | created() {
8 | this.$trigger('someEvent', 'foo');
9 | },
10 | events: {
11 | someEvent(event, param) {
12 | expect(param).toBe('foo');
13 | expect(event.name).toBe('someEvent');
14 | }
15 | }
16 | });
17 | });
18 |
19 | it('Trigger Method with Array', () => {
20 | new Vue({
21 | created() {
22 | this.$trigger('paramArray', ['foo', 'bar']);
23 | },
24 | events: {
25 | paramArray(event, param, param2) {
26 | expect(param).toBe('foo');
27 | expect(param2).toBe('bar');
28 | }
29 | }
30 | });
31 | });
32 |
33 | it('Trigger Method with Object', () => {
34 | new Vue({
35 | created() {
36 | this.$trigger('paramObject', { foo : 'bar' });
37 | },
38 | events: {
39 | paramObject(event, param) {
40 | expect(param.foo).toBe('bar');
41 | }
42 | }
43 | });
44 | });
45 |
46 | it('Trigger Method with Priority', () => {
47 | var vm = new Vue({
48 | data() {
49 | return {
50 | lastPrio : null
51 | }
52 | },
53 | events: {
54 | // event handler (priority 10)
55 | prioHandler: [
56 | {
57 | // handler callback
58 | handler(event, param) {
59 | this.lastPrio = 10;
60 | },
61 | // a higher priority, means earlier execution
62 | priority: 10
63 | },
64 | {
65 | // handler callback
66 | handler(event, param) {
67 | expect(this.lastPrio).toBe(10);
68 | this.lastPrio = -10;
69 | },
70 | // a higher priority, means earlier execution
71 | priority: -10
72 | }
73 | ]
74 | }
75 | });
76 | vm.$trigger('prioHandler');
77 | });
78 |
79 |
80 | it('Trigger Method with Different Instances and Priority', () => {
81 |
82 | var vm1 = new Vue({
83 | data() {
84 | return {
85 | isLoaded : false
86 | }
87 | },
88 | events: {
89 | testEvent(event, param) {
90 | this.isLoaded = true;
91 | expect(this.isLoaded).toBe(true);
92 | }
93 | }
94 | });
95 |
96 | var vm2 = new Vue({
97 | events: {
98 | testEvent:{
99 | handler(event, param) {
100 | expect(param).toBe('foo');
101 | },
102 | priority: 10
103 | }
104 | }
105 | });
106 | vm1.$trigger('testEvent', 'foo');
107 | });
108 |
109 | it('Trigger Method with Cancel Event', () => {
110 |
111 | var vm1 = new Vue({
112 | data() {
113 | return {
114 | isLoaded: false
115 | }
116 | },
117 | events: {
118 | actionCancel(event, param) {
119 | this.isLoaded = true;
120 | return "lastAction";
121 | }
122 | }
123 | });
124 |
125 | var vm2 = new Vue({
126 | events: {
127 | actionCancel:{
128 | handler(event, param) {
129 | expect(param).toBe('foo');
130 | return false;
131 | },
132 | priority: 10
133 | }
134 | }
135 | });
136 |
137 | vm1.$trigger('actionCancel', 'foo');
138 | expect(vm1.isLoaded).toBe(false);
139 |
140 | });
141 |
142 | it('Use string names of methods in event list', () => {
143 | new Vue({
144 | data() {
145 | return {
146 | isRun : false
147 | }
148 | },
149 | created() {
150 | this.$trigger('test');
151 | expect(this.isRun).toBe(true);
152 | },
153 | methods: {
154 | test() {
155 | this.isRun = true;
156 | }
157 | },
158 | events: {
159 | test: 'test'
160 | }
161 | });
162 | });
163 |
164 | });
--------------------------------------------------------------------------------
/test/eventAsync.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 |
3 | describe('Vue.events Async', () => {
4 | it('Trigger Method asynchronous', () => {
5 | new Vue({
6 | data() {
7 | return {
8 | isRun : false
9 | }
10 | },
11 | created() {
12 | this.$trigger('setRun', [], true);
13 | this.$trigger('sendParam', 'foo');
14 | },
15 | events: {
16 | setRun() {
17 | this.isRun = true;
18 | expect(this.isRun).toBe(true);
19 | },
20 | sendParam(event, param) {
21 | expect(this.isRun).toBe(false);
22 | }
23 | }
24 | });
25 | });
26 |
27 | it('Trigger Method asynchronous with Different Instances', (done) => {
28 |
29 | var vm1 = new Vue({
30 | data() {
31 | return {
32 | isLoaded : false
33 | }
34 | },
35 | events: {
36 | testEvent(event, param) {
37 | this.isLoaded = true;
38 | expect(this.isLoaded).toBe(true);
39 | done();
40 | }
41 | }
42 | });
43 |
44 | var vm2 = new Vue({
45 | events: {
46 | testEvent:{
47 | handler(event, param) {
48 | expect(param).toBe('foo');
49 | return new Promise((resolve) => {
50 | setTimeout(resolve, 300);
51 | });
52 | },
53 | priority: 10
54 | }
55 | }
56 | });
57 | vm1.$trigger('testEvent', 'foo', true);
58 | });
59 |
60 | });
--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |