1 files changed, 150 insertions, 0 deletions
diff --git a/spec/frontend/ide/sync_router_and_store_spec.js b/spec/frontend/ide/sync_router_and_store_spec.js
new file mode 100644
index 00000000000..c4ce92b99cc
--- /dev/null
+++ b/spec/frontend/ide/sync_router_and_store_spec.js
@@ -0,0 +1,150 @@
+import VueRouter from 'vue-router';
+import { createStore } from '~/ide/stores';
+import { syncRouterAndStore } from '~/ide/sync_router_and_store';
+import waitForPromises from 'helpers/wait_for_promises';
+
+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 = path => {
+    router.push(path);
+    return 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();
+      });
+    });
+  });
+});