1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
import VueRouter from 'vue-router';
import waitForPromises from 'helpers/wait_for_promises';
import { createStore } from '~/ide/stores';
import { syncRouterAndStore } from '~/ide/sync_router_and_store';
const TEST_ROUTE = '/test/lorem/ipsum';
describe('~/ide/sync_router_and_store', () => {
let unsync;
let router;
let store;
let onRouterChange;
const createSync = () => {
unsync = syncRouterAndStore(router, store);
};
const getRouterCurrentPath = () => router.currentRoute.fullPath;
const getStoreCurrentPath = () => store.state.router.fullPath;
const updateRouter = async (path) => {
if (getRouterCurrentPath() === path) {
return;
}
router.push(path);
await waitForPromises();
};
const updateStore = (path) => {
store.dispatch('router/push', path);
return waitForPromises();
};
beforeEach(() => {
router = new VueRouter();
store = createStore();
jest.spyOn(store, 'dispatch');
onRouterChange = jest.fn();
router.beforeEach((to, from, next) => {
onRouterChange(to, from);
next();
});
});
afterEach(() => {
unsync();
unsync = null;
});
it('keeps store and router in sync', async () => {
createSync();
await updateRouter('/test/test');
await updateRouter('/test/test');
await updateStore('123/abc');
await updateRouter('def');
// Even though we pused relative paths, the store and router kept track of the resulting fullPath
expect(getRouterCurrentPath()).toBe('/test/123/def');
expect(getStoreCurrentPath()).toBe('/test/123/def');
});
describe('default', () => {
beforeEach(() => {
createSync();
});
it('store is default', () => {
expect(store.dispatch).not.toHaveBeenCalled();
expect(getStoreCurrentPath()).toBe('');
});
it('router is default', () => {
expect(onRouterChange).not.toHaveBeenCalled();
expect(getRouterCurrentPath()).toBe('/');
});
describe('when store changes', () => {
beforeEach(() => {
updateStore(TEST_ROUTE);
});
it('store is updated', () => {
// let's make sure the action isn't dispatched more than necessary
expect(store.dispatch).toHaveBeenCalledTimes(1);
expect(getStoreCurrentPath()).toBe(TEST_ROUTE);
});
it('router is updated', () => {
expect(onRouterChange).toHaveBeenCalledTimes(1);
expect(getRouterCurrentPath()).toBe(TEST_ROUTE);
});
describe('when store changes again to the same thing', () => {
beforeEach(() => {
onRouterChange.mockClear();
updateStore(TEST_ROUTE);
});
it('doesnt change router again', () => {
expect(onRouterChange).not.toHaveBeenCalled();
});
});
});
describe('when router changes', () => {
beforeEach(() => {
updateRouter(TEST_ROUTE);
});
it('store is updated', () => {
expect(store.dispatch).toHaveBeenCalledTimes(1);
expect(getStoreCurrentPath()).toBe(TEST_ROUTE);
});
it('router is updated', () => {
// let's make sure the router change isn't triggered more than necessary
expect(onRouterChange).toHaveBeenCalledTimes(1);
expect(getRouterCurrentPath()).toBe(TEST_ROUTE);
});
describe('when router changes again to the same thing', () => {
beforeEach(() => {
store.dispatch.mockClear();
updateRouter(TEST_ROUTE);
});
it('doesnt change store again', () => {
expect(store.dispatch).not.toHaveBeenCalled();
});
});
});
describe('when disposed', () => {
beforeEach(() => {
unsync();
});
it('a store change does not trigger a router change', () => {
updateStore(TEST_ROUTE);
expect(getRouterCurrentPath()).toBe('/');
expect(onRouterChange).not.toHaveBeenCalled();
});
it('a router change does not trigger a store change', () => {
updateRouter(TEST_ROUTE);
expect(getStoreCurrentPath()).toBe('');
expect(store.dispatch).not.toHaveBeenCalled();
});
});
});
});
|
