fix: support for deep nested watchers on 'QueryRenderer' (#207)

* support for deep nested watchers on 'QueryRenderer'

* missing on queries as well

* add test script replacing test:unit

Author: richipargo

packages/cubejs-vue/package.json

@@ -7,6 +7,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
+    "test": "vue-cli-service test:unit",
     "test:unit": "vue-cli-service test:unit",
     "test:unit:watch": "vue-cli-service test:unit --watch --require tests/setup.js"
   },
@@ -17,7 +18,7 @@
     "src"
   ],
   "dependencies": {
-    "core-js": "^2.6.5",
+    "core-js": "^2.6.9",
     "ramda": "^0.26.1"
   },
   "devDependencies": {

packages/cubejs-vue/src/QueryRenderer.js

@@ -36,7 +36,7 @@ export default {
     const { query, queries } = this;
 
     if (query) {
-      await this.load(query);
+      await this.load();
     }
 
     if (queries) {
@@ -58,7 +58,7 @@ export default {
       const slotProps = {
         resultSet,
         sqlQuery,
-        query: this.builderProps.query,
+        query: this.builderProps.query || this.query,
       };
 
       if (onlyDefault) {
@@ -84,7 +84,8 @@ export default {
     );
   },
   methods: {
-    async load(query) {
+    async load() {
+      const { query } = this;
       try {
         this.loading = true;
         this.error = undefined;
@@ -107,7 +108,8 @@ export default {
         this.loading = false;
       }
     },
-    async loadQueries(queries) {
+    async loadQueries() {
+      const { queries } = this;
       try {
         this.error = undefined;
         this.loading = true;
@@ -126,15 +128,21 @@ export default {
     },
   },
   watch: {
-    query(val) {
-      if (val) {
-        this.load(val);
-      }
+    query: {
+      handler(val) {
+        if (val) {
+          this.load();
+        }
+      },
+      deep: true,
     },
-    queries(val) {
-      if (val) {
-        this.loadQueries(val);
-      }
+    queries: {
+      handler(val) {
+        if (val) {
+          this.loadQueries();
+        }
+      },
+      deep: true,
     },
   },
 };

packages/cubejs-vue/tests/unit/QueryRenderer.spec.js

@@ -1,8 +1,8 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import CubejsApi from '@cubejs-client/core';
 import flushPromises from 'flush-promises';
 import QueryRenderer from '../../src/QueryRenderer';
-import fetchMock, { load } from './__mocks__/responses';
+import fetchMock, { load, single } from './__mocks__/responses';
 
 describe('QueryRenderer.vue', () => {
   describe('Loads single query from api', () => {
@@ -67,5 +67,58 @@ describe('QueryRenderer.vue', () => {
       expect(wrapper.text()).toContain('Result set is loaded');
       expect(cube.request.mock.calls.length).toBe(1);
     });
+
+    it('Rerender on query nested property change', async () => {
+      const cube = CubejsApi('token');
+      jest.spyOn(cube, 'request').mockImplementation(fetchMock(single));
+
+      const parent = mount({
+        components: {
+          QueryRenderer,
+        },
+        template: `
+          <div>
+            <query-renderer :cubejs-api="cubejsApi" :query="query" v-slot="{ query }">
+              <span class="query">{{query}}</span>
+            </query-renderer>
+          </div>
+        `,
+        data() {
+          return {
+            cubejsApi: cube ,
+            query: {
+              measures: ['Stories.count'],
+              dimensions: [],
+              filters: [],
+              segments: [],
+              timeDimensions: [],
+            },
+          };
+        },
+      });
+
+      await flushPromises();
+
+      expect(cube.request.mock.calls.length).toBe(1);
+      expect(parent.find('.query').element.textContent).toContain('Stories.count');
+
+      parent.vm.query.measures = ['Users.count'];
+      await flushPromises();
+
+      expect(cube.request.mock.calls.length).toBe(2);
+      expect(parent.find('.query').element.textContent).toContain('Users.count');
+
+      parent.vm.query.measures.push('Users.count');
+      await flushPromises();
+
+      expect(cube.request.mock.calls.length).toBe(3);
+      expect(parent.find('.query').element.textContent).toContain('Users.count');
+
+      parent.vm.query.timeDimensions.push({ dimension: 'Users.count', dateRange: 'last 6 days', granularity: 'week' });
+      await flushPromises();
+
+      expect(cube.request.mock.calls.length).toBe(4);
+      expect(parent.find('.query').element.textContent).toContain('week');
+    });
   });
 });

packages/cubejs-vue/tests/unit/__mocks__/responses.js

@@ -697,6 +697,39 @@ export const load = {
   }
 };
 
+export const single = {
+  "query": {
+    "measures": [
+      "Users.count"
+    ],
+    "dimensions": [],
+    "timezone": "UTC",
+    "timeDimensions": []
+  },
+  "data": [
+    {
+      "Users.city": "Mülheim",
+      "Users.count": "4"
+    },
+    {
+      "Users.city": "Metairie",
+      "Users.count": "4"
+    },
+  ],
+  "annotation": {
+    "measures": {
+      "Users.count": {
+        "title": "Users Count",
+        "shortTitle": "Count",
+        "type": "number"
+      }
+    },
+    "dimensions": {},
+    "segments": {},
+    "timeDimensions": {}
+  }
+};
+
 export const sql = {};
 
 export default (body = {}, status = 200) => () => Promise.resolve({