fix(vue): collection vue mixin reactivity on computed value fixed #93

packages/vue/__tests__/Mixin/Collection.test.js

@@ -66,6 +66,9 @@ describe('The Collection mixin', () => {
 
     mixin.mounted.call(mixin);
     expect(mockCollection.load).toHaveBeenCalled();
+
+    mixin.created.call(mixin);
+    expect(mixin.$store.commit).toHaveBeenCalled();
   });
 
   test('that the mixin handles errors on serverPrefetch', () => {

packages/vue/__tests__/Module/createStoreModule.test.js

@@ -135,7 +135,7 @@ describe('The createStoreModule', () => {
     expect(products.load).toHaveBeenCalled();
   });
 
-  test('that it is possible to a resource in the store', () => {
+  test('that it is possible to get a non existing resource in the store', () => {
     const product = Resource.create('1', 'product', { title: 'A great product' });
 
     const mockRepository = {
@@ -150,10 +150,30 @@ describe('The createStoreModule', () => {
     const mockModule = { state: { resources: {} }, commit: jest.fn() };
     return module.actions.LOAD_RESOURCE(mockModule, '1').then(() => {
       expect(mockRepository.findById).toHaveBeenCalledWith('1');
+      expect(mockModule.commit).toHaveBeenCalledTimes(2);
       expect(mockModule.commit).toHaveBeenCalledWith('SET_RESOURCE', product);
     });
   });
 
+  test('that it is possible to an existing resource in the store', () => {
+    const product = Resource.create('1', 'product', { title: 'A great product' });
+
+    const mockRepository = {
+      resourceType: 'product',
+      findById: jest.fn(() => Promise.resolve(product)),
+    };
+
+    const module = createStoreModule(mockRepository, {
+      commit: jest.fn(),
+    });
+
+    const mockModule = { state: { resources: { 1: product.state } }, commit: jest.fn() };
+    return module.actions.LOAD_RESOURCE(mockModule, '1').then(() => {
+      expect(mockRepository.findById).toHaveBeenCalledWith('1');
+      expect(mockModule.commit).toHaveBeenCalledTimes(1);
+      expect(mockModule.commit).toHaveBeenCalledWith('SET_RESOURCE', product);
+    });
+  });
 
   test('that the Vuex store is correctly initialized', () => {
     const product = Resource.create('1', 'product', { title: 'A great product' });

packages/vue/src/Mixin/Collection.js

@@ -1,3 +1,5 @@
+import Collection from '@hyral/core/lib/Resource/Collection';
+
 export default {
   computed: {
     collection() {
@@ -12,6 +14,9 @@ export default {
       return collection;
     },
   },
+  created() {
+    this.initCollection();
+  },
   /**
    * Execute server prefetch actions.
    *
@@ -34,6 +39,9 @@ export default {
     this.loadCollection();
   },
   methods: {
+    initCollection() {
+      this.$store.commit(`hyral_${this.resourceType}/SET_COLLECTION`, Collection.create(this.collectionName));
+    },
     loadCollection() {
       return this.collection.load();
     },