From dbf015ee91af1f110b5f1910a391866f7686861a Mon Sep 17 00:00:00 2001 From: HugoMuller <4454404+HugoMuller@users.noreply.github.com> Date: Wed, 13 Jul 2022 11:38:58 +0200 Subject: [PATCH 1/3] feat(route tracker): call hooks on landing page --- src/add-routes-tracker.js | 36 ++++++++++++++++----------------- test/add-routes-tracker.spec.js | 36 ++++++++++++++++++++++++++------- 2 files changed, 46 insertions(+), 26 deletions(-) diff --git a/src/add-routes-tracker.js b/src/add-routes-tracker.js index 799d603..c36834b 100644 --- a/src/add-routes-tracker.js +++ b/src/add-routes-tracker.js @@ -20,29 +20,27 @@ export default () => { addConfiguration(); - if (isRouteExcluded(currentRoute.value)) { - return; - } - - track(currentRoute.value); + trackRoute(currentRoute.value); }); router.afterEach((to, from) => { - nextTick().then(() => { - if (isRouteExcluded(to)) { - return; - } + nextTick().then(() => trackRoute(to, from)); + }); + }); - if (isFunction(onBeforeTrack)) { - onBeforeTrack(to, from); - } + function trackRoute(to, from) { + if (isRouteExcluded(to)) { + return; + } - track(to, from); + if (isFunction(onBeforeTrack)) { + onBeforeTrack(to, from); + } - if (isFunction(onAfterTrack)) { - onAfterTrack(to, from); - } - }); - }); - }); + track(to, from); + + if (isFunction(onAfterTrack)) { + onAfterTrack(to, from); + } + } }; diff --git a/test/add-routes-tracker.spec.js b/test/add-routes-tracker.spec.js index fde4f57..e6eed1b 100644 --- a/test/add-routes-tracker.spec.js +++ b/test/add-routes-tracker.spec.js @@ -91,7 +91,7 @@ describe("page-tracker", () => { expect(addConfiguration).toHaveBeenCalled(); - expect(track).toHaveBeenCalledWith(router.currentRoute.value); + expect(track).toHaveBeenCalledWith(router.currentRoute.value, undefined); expect(track).toHaveBeenCalledTimes(1); }); @@ -124,7 +124,8 @@ describe("page-tracker", () => { expect.objectContaining({ path: "/", name: "home", - }) + }), + undefined ); expect(track).toHaveBeenNthCalledWith( @@ -177,7 +178,17 @@ describe("page-tracker", () => { router.push("/about"); await flushPromises(); - expect(onBeforeTrackSpy).toHaveBeenCalledWith( + expect(onBeforeTrackSpy).toHaveBeenNthCalledWith( + 1, + expect.objectContaining({ + path: "/", + name: "home", + }), + undefined + ); + + expect(onBeforeTrackSpy).toHaveBeenNthCalledWith( + 2, expect.objectContaining({ path: "/about", name: "about", @@ -188,7 +199,7 @@ describe("page-tracker", () => { }) ); - expect(onBeforeTrackSpy).toHaveBeenCalledTimes(1); + expect(onBeforeTrackSpy).toHaveBeenCalledTimes(2); }); test("fires the onAfterTrack method", async () => { @@ -214,7 +225,17 @@ describe("page-tracker", () => { router.push("/about"); await flushPromises(); - expect(onAfterTrackSpy).toHaveBeenCalledWith( + expect(onAfterTrackSpy).toHaveBeenNthCalledWith( + 1, + expect.objectContaining({ + path: "/", + name: "home", + }), + undefined + ); + + expect(onAfterTrackSpy).toHaveBeenNthCalledWith( + 2, expect.objectContaining({ path: "/about", name: "about", @@ -225,7 +246,7 @@ describe("page-tracker", () => { }) ); - expect(onAfterTrackSpy).toHaveBeenCalledTimes(1); + expect(onAfterTrackSpy).toHaveBeenCalledTimes(2); }); test("remove routes from tracking based on path", async () => { @@ -267,7 +288,8 @@ describe("page-tracker", () => { 1, expect.objectContaining({ path: "/", - }) + }), + undefined ); expect(track).toHaveBeenCalledTimes(1); From 143a479a6a3589c7147e1142be2e1ffa51a6ecdb Mon Sep 17 00:00:00 2001 From: HugoMuller <4454404+HugoMuller@users.noreply.github.com> Date: Wed, 13 Jul 2022 12:15:28 +0200 Subject: [PATCH 2/3] chore: refactor similar tests --- test/add-routes-tracker.spec.js | 101 ++++++++++---------------------- 1 file changed, 31 insertions(+), 70 deletions(-) diff --git a/test/add-routes-tracker.spec.js b/test/add-routes-tracker.spec.js index e6eed1b..ae8ceb5 100644 --- a/test/add-routes-tracker.spec.js +++ b/test/add-routes-tracker.spec.js @@ -156,15 +156,32 @@ describe("page-tracker", () => { }); test("fires the onBeforeTrack method", async () => { + await testHook("onBeforeTrack"); + }); + + test("fires the onAfterTrack method", async () => { + await testHook("onAfterTrack"); + }); + + test("remove routes from tracking based on path", async () => { const app = createApp(); - const onBeforeTrackSpy = jest.fn(); + const onAfterTrackSpy = jest.fn(); + const router = createRouter({ + history: createMemoryHistory(), + routes: [ + { name: "home", path: "/", component: Home }, + { path: "/about", component: About }, + { name: "contacts", path: "/contacts", component: Contact }, + ], + }); app.use(router); app.use( VueGtag, { - onBeforeTrack: onBeforeTrackSpy, + pageTrackerExcludedRoutes: ["/about", "contacts"], + onAfterTrack: onAfterTrackSpy, config: { id: 1, }, @@ -178,40 +195,30 @@ describe("page-tracker", () => { router.push("/about"); await flushPromises(); - expect(onBeforeTrackSpy).toHaveBeenNthCalledWith( + router.push("/contacts"); + await flushPromises(); + + expect(track).toHaveBeenNthCalledWith( 1, expect.objectContaining({ path: "/", - name: "home", }), undefined ); - expect(onBeforeTrackSpy).toHaveBeenNthCalledWith( - 2, - expect.objectContaining({ - path: "/about", - name: "about", - }), - expect.objectContaining({ - path: "/", - name: "home", - }) - ); - - expect(onBeforeTrackSpy).toHaveBeenCalledTimes(2); + expect(track).toHaveBeenCalledTimes(1); }); - test("fires the onAfterTrack method", async () => { + async function testHook(hookName) { const app = createApp(); - const onAfterTrackSpy = jest.fn(); + const hookSpy = jest.fn(); app.use(router); app.use( VueGtag, { - onAfterTrack: onAfterTrackSpy, + [hookName]: hookSpy, config: { id: 1, }, @@ -225,7 +232,7 @@ describe("page-tracker", () => { router.push("/about"); await flushPromises(); - expect(onAfterTrackSpy).toHaveBeenNthCalledWith( + expect(hookSpy).toHaveBeenNthCalledWith( 1, expect.objectContaining({ path: "/", @@ -234,7 +241,7 @@ describe("page-tracker", () => { undefined ); - expect(onAfterTrackSpy).toHaveBeenNthCalledWith( + expect(hookSpy).toHaveBeenNthCalledWith( 2, expect.objectContaining({ path: "/about", @@ -246,52 +253,6 @@ describe("page-tracker", () => { }) ); - expect(onAfterTrackSpy).toHaveBeenCalledTimes(2); - }); - - test("remove routes from tracking based on path", async () => { - const app = createApp(); - const onAfterTrackSpy = jest.fn(); - const router = createRouter({ - history: createMemoryHistory(), - routes: [ - { name: "home", path: "/", component: Home }, - { path: "/about", component: About }, - { name: "contacts", path: "/contacts", component: Contact }, - ], - }); - - app.use(router); - - app.use( - VueGtag, - { - pageTrackerExcludedRoutes: ["/about", "contacts"], - onAfterTrack: onAfterTrackSpy, - config: { - id: 1, - }, - }, - router - ); - - router.push("/"); - await flushPromises(); - - router.push("/about"); - await flushPromises(); - - router.push("/contacts"); - await flushPromises(); - - expect(track).toHaveBeenNthCalledWith( - 1, - expect.objectContaining({ - path: "/", - }), - undefined - ); - - expect(track).toHaveBeenCalledTimes(1); - }); + expect(hookSpy).toHaveBeenCalledTimes(2); + } }); From 0a23c7878ea283f61727b264534226bc18fdc0fc Mon Sep 17 00:00:00 2001 From: HugoMuller <4454404+HugoMuller@users.noreply.github.com> Date: Wed, 13 Jul 2022 12:25:47 +0200 Subject: [PATCH 3/3] chore: reduce number of lines in testHook --- test/add-routes-tracker.spec.js | 30 ++++++++---------------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/test/add-routes-tracker.spec.js b/test/add-routes-tracker.spec.js index ae8ceb5..45eb1ce 100644 --- a/test/add-routes-tracker.spec.js +++ b/test/add-routes-tracker.spec.js @@ -212,19 +212,14 @@ describe("page-tracker", () => { async function testHook(hookName) { const app = createApp(); const hookSpy = jest.fn(); + const options = { + [hookName]: hookSpy, + config: { id: 1 }, + }; app.use(router); - app.use( - VueGtag, - { - [hookName]: hookSpy, - config: { - id: 1, - }, - }, - router - ); + app.use(VueGtag, options, router); router.push("/"); await flushPromises(); @@ -234,23 +229,14 @@ describe("page-tracker", () => { expect(hookSpy).toHaveBeenNthCalledWith( 1, - expect.objectContaining({ - path: "/", - name: "home", - }), + expect.objectContaining({ path: "/", name: "home" }), undefined ); expect(hookSpy).toHaveBeenNthCalledWith( 2, - expect.objectContaining({ - path: "/about", - name: "about", - }), - expect.objectContaining({ - path: "/", - name: "home", - }) + expect.objectContaining({ path: "/about", name: "about" }), + expect.objectContaining({ path: "/", name: "home" }) ); expect(hookSpy).toHaveBeenCalledTimes(2);