Increase coverage of core part + Small test-driven refactoring

Author: Anton Hinz

src/core/bus.js

@@ -1,6 +1,6 @@
 import { reactive } from 'vue';
 
-const $module = ({ state = {}, actions = {} }) => {
+export const $module = ({ state = {}, actions = {} }) => {
   return {
     state: reactive(state),
     actions,
@@ -14,7 +14,7 @@ export default () => {
   return {
     /* Required to add new module to a bus */
     add(module) {
-      if (!module.name) return;
+      if (!module.name) throw new Error('Module should have a mandatory "name" property');
 
       $modules[module.name] = $module(module);
     },

src/core/bus.spec.js

@@ -0,0 +1,103 @@
+import bus, { $module } from './bus';
+import vue from 'vue';
+
+jest.mock('vue', () => ({
+  reactive: jest.fn(v => v),
+}))
+
+describe('$module', () => {
+  describe('on call should', () => {
+    let result;
+
+    beforeEach(() => {
+      result = $module({ state: 'ABC', actions: { a: 'A', b: 'B' }})
+    });
+
+    it('make state reactive', () => {
+      expect(vue.reactive).toHaveBeenCalledWith('ABC')
+    });
+
+    it('return same data', () => {
+      expect(result).toEqual({ state: 'ABC', actions: { a: 'A', b: 'B' }});
+    });
+  });
+
+  describe('should set defaults', () => {
+    it.each([
+      [undefined, undefined, { state: {}, actions: {} }],
+      ['FOO', undefined, { state: 'FOO', actions: {} }],
+      [undefined, 'BAR', { state: {}, actions: 'BAR' }],
+      ['FOO', 'BAR', { state: 'FOO', actions: 'BAR' }],
+    ])('when state is %j and actions %j should return %j', (state, actions, result) => {
+      expect($module({ state, actions })).toEqual(result);
+    });
+  });
+});
+
+describe('bus', () => {
+  let $bus;
+
+  describe('with incorrect module', () => {
+    it('should throw an error when module has no name', () => {
+      try {
+        $bus = bus();
+        $bus.add({ state: {}, actions: {} });
+      } catch (e) {
+        expect(e.message).toBe('Module should have a mandatory "name" property');
+      }
+    });
+  });
+
+  describe('with correct module', () => {
+    beforeEach(() => {
+      $bus = bus();
+
+      $bus.add({
+        name: 'test',
+
+        state: {
+          foo: 'FOO',
+          bar: 'BAR'
+        },
+
+        actions: {
+          toggle() {
+            this.state.foo = 'BAR';
+            this.state.bar = 'FOO';
+          },
+        },
+      });
+    });
+
+    describe('#watch()', () => {
+      it('should return full state by default', () => {
+        expect($bus.watch('test')).toEqual({ foo: 'FOO', bar: 'BAR' });
+      });
+
+      it('should return full state when property "*" is passed', () => {
+        expect($bus.watch('test', '*')).toEqual({ foo: 'FOO', bar: 'BAR' });
+      });
+
+      it('should return property of state when property is passed', () => {
+        expect($bus.watch('test', 'foo')).toBe('FOO');
+      });
+    });
+
+    describe('#commit()', () => {
+      it('should set value of property', () => {
+        $bus.commit('test', 'foo', 'BAR');
+
+        expect($bus.watch('test', 'foo')).toBe('BAR');
+      });
+    });
+
+    describe('#dispatch()', () => {
+      it('should trigger an action of a module', () => {
+        $bus.dispatch('test', 'toggle');
+
+        expect($bus.watch('test', '*')).toEqual({ foo: 'BAR', bar: 'FOO' });
+      });
+    });
+  });
+});
+

src/core/embed.js

@@ -11,29 +11,9 @@ export default (bus, name, component, customs = []) => {
     constructor() {
       super();
 
-      this.$app = null;
-      this.$subscribers = {};
-      this.$state = reactive(fromKeys(component.$attrs || []));
-
-      // Events emitter decorator
-      this.$emit = (name, detail) => {
-        const event = new CustomEvent(name, {
-          bubbles: true,
-          detail,
-        });
-
-        this.dispatchEvent(event);
-      };
-
-      // Events listener decorator
-      this.$catch = (name, handler) => {
-        this.addEventListener(name, (e) => {
-          // Event should only be handled once in this system
-          e.stopPropagation();
-
-          handler(e.detail);
-        });
-      };
+      this.$app = null
+      this.$subscribers = {}
+      this.$state = reactive(fromKeys(component.$attrs || []))
 
       // Parent allows whitelist of events to subscribe
       if (component?.$publishes?.length > 0) {
@@ -50,6 +30,24 @@ export default (bus, name, component, customs = []) => {
       }
     }
 
+    $catch(name, handler) {
+      this.addEventListener(name, (e) => {
+        // Event should only be handled once in this system
+        e.stopPropagation();
+
+        handler(e.detail);
+      });
+    }
+
+    $emit(name, detail) {
+      const event = new CustomEvent(name, {
+        bubbles: true,
+        detail,
+      });
+
+      this.dispatchEvent(event);
+    }
+
     connectedCallback() {
       /* Pretty much Everything Vue-related is kept here */
       this.$app = createApp(component);
@@ -84,9 +82,7 @@ export default (bus, name, component, customs = []) => {
 
       // Parent listens child
       this.$app.provide('$listen', (name, handler) => {
-        this.$catch(`$dispatch:${name}`, (data) => {
-          handler(data)
-        });
+        this.$catch(`$dispatch:${name}`, handler);
       });
 
       // Initiall attributes set initialization
@@ -102,7 +98,7 @@ export default (bus, name, component, customs = []) => {
 
         this.$app.component('content', {
           template: this.content,
-        })
+        });
       }
 
       // This solution allows to provide styles for custom html container without