msg-switch - npm Package Compare versions

Comparing version 0.5.3 to 0.6.0

tests/unit/integration-old-slot-context.spec.js

+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+
+import CtxStdMessages from './resources-old-slot/CtxStdMessages';
+import CtxOverrideMessages from './resources-old-slot/CtxOverrideMessages';
+import CtxOverrideWildcard from './resources-old-slot/CtxOverrideWildcard';
+import CtxDynMessages from './resources-old-slot/CtxDynMessages';
+import CtxDynOverrideMessages from './resources-old-slot/CtxDynOverrideMessages';
+
+describe('Integration', () => {
+  describe('context', () => {
+
+    describe('CtxStdMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(CtxStdMessages, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default two (deep prop)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (dyn)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown) (other prop)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('CtxOverrideMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(CtxOverrideMessages, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two [deep prop]');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (dyn)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown) (other prop)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('CtxOverrideWildcard', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(CtxOverrideWildcard, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', async () => {
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two @deep prop@');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard |dyn|');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard |unknown|other prop|');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('CtxDynMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(CtxDynMessages, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two @deep prop@');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display dynamic case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('dynamic message -dyn-');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown) (other prop)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('CtxDynOverrideMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(CtxDynOverrideMessages, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two @deep prop@');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display dynamic case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('dynamic message -dyn-');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard |unknown|other prop|');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+  });
+});

tests/unit/integration-old-slot-simple.spec.js

+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+
+import SimpleStdMessages from './resources-old-slot/SimpleStdMessages';
+import SimpleOverrideMessages from './resources-old-slot/SimpleOverrideMessages';
+import SimpleOverrideWildcard from './resources-old-slot/SimpleOverrideWildcard';
+import SimpleDynMessages from './resources-old-slot/SimpleDynMessages';
+import SimpleDynOverrideMessages from './resources-old-slot/SimpleDynOverrideMessages';
+
+describe('Integration', () => {
+  describe('simple', () => {
+
+    describe('SimpleStdMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(SimpleStdMessages, {
+          propsData: { code: 'one' },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display case "two"', async () => {
+        wrapper.setProps({ code: 'two' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default two');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard case for "dyn"', async () => {
+        wrapper.setProps({ code: 'dyn' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (dyn)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard message for "unknown"', async () => {
+        wrapper.setProps({ code: 'unknown' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('SimpleOverrideMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(SimpleOverrideMessages, {
+          propsData: { code: 'one' },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({ code: 'two' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard case for "dyn"', async () => {
+        wrapper.setProps({ code: 'dyn' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (dyn)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard message for "unknown"', async () => {
+        wrapper.setProps({ code: 'unknown' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('SimpleOverrideWildcard', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(SimpleOverrideWildcard, {
+          propsData: { code: 'one' },
+        });
+      });
+
+      test('should display case "one"', async () => {
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({ code: 'two' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard case for "dyn"', async () => {
+        wrapper.setProps({ code: 'dyn' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard [dyn]');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({ code: 'unknown' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard [unknown]');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('SimpleDynMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(SimpleDynMessages, {
+          propsData: { code: 'one' },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({ code: 'two' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display dynamic case for "dyn"', async () => {
+        wrapper.setProps({ code: 'dyn' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('dynamic message');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({ code: 'unknown' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('SimpleDynOverrideMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(SimpleDynOverrideMessages, {
+          propsData: { code: 'one' },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({ code: 'two' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display dynamic case for "dyn"', async () => {
+        wrapper.setProps({ code: 'dyn' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('dynamic message');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({ code: 'unknown' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard [unknown]');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+  });
+});

tests/unit/integration-vslot-context.spec.js

+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+
+import CtxStdMessages from './resources-vslot/CtxStdMessages';
+import CtxOverrideMessages from './resources-vslot/CtxOverrideMessages';
+import CtxOverrideWildcard from './resources-vslot/CtxOverrideWildcard';
+import CtxDynMessages from './resources-vslot/CtxDynMessages';
+import CtxDynOverrideMessages from './resources-vslot/CtxDynOverrideMessages';
+
+describe('Integration', () => {
+  describe('context', () => {
+
+    describe('CtxStdMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(CtxStdMessages, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default two (deep prop)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (dyn)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown) (other prop)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('CtxOverrideMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(CtxOverrideMessages, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two [deep prop]');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (dyn)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown) (other prop)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('CtxOverrideWildcard', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(CtxOverrideWildcard, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', async () => {
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two @deep prop@');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard |dyn|');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard |unknown|other prop|');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('CtxDynMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(CtxDynMessages, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two @deep prop@');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display dynamic case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('dynamic message -dyn-');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown) (other prop)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('CtxDynOverrideMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(CtxDynOverrideMessages, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two @deep prop@');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display dynamic case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('dynamic message -dyn-');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard |unknown|other prop|');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+  });
+});

tests/unit/integration-vslot-parent-scope.spec.js

+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+
+import ParentScopeStdMessages from './resources-vslot/ParentScopeStdMessages';
+import ParentScopeOverrideMessages from './resources-vslot/ParentScopeOverrideMessages';
+import CtxOverrideWildcard from './resources-vslot/CtxOverrideWildcard';
+import ParentScopeDynMessages from './resources-vslot/ParentScopeDynMessages';
+import ParentScopeDynOverrideMessages from './resources-vslot/ParentScopeDynOverrideMessages';
+
+describe('Integration', () => {
+  describe('context', () => {
+
+    describe('ParentScopeStdMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(ParentScopeStdMessages, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default two (deep prop)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (dyn)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown) (other prop)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('ParentScopeOverrideMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(ParentScopeOverrideMessages, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two [deep prop]');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (dyn)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown) (other prop)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('CtxOverrideWildcard', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(CtxOverrideWildcard, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', async () => {
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two @deep prop@');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard |dyn|');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard |unknown|other prop|');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('ParentScopeDynMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(ParentScopeDynMessages, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two @deep prop@');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display dynamic case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('dynamic message -dyn-');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown) (other prop)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('ParentScopeDynOverrideMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(ParentScopeDynOverrideMessages, {
+          propsData: {
+            obj: { code: 1 },
+          },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({
+          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two @deep prop@');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display dynamic case for "dyn"', async () => {
+        wrapper.setProps({
+          obj: { code: 'dyn' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('dynamic message -dyn-');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({
+          obj: { code: 'unknown', other: 'other prop' },
+        });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard |unknown|other prop|');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+  });
+});

tests/unit/integration-vslot-simple.spec.js

+import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+
+import SimpleStdMessages from './resources-vslot/SimpleStdMessages';
+import SimpleOverrideMessages from './resources-vslot/SimpleOverrideMessages';
+import SimpleOverrideWildcard from './resources-vslot/SimpleOverrideWildcard';
+import SimpleDynMessages from './resources-vslot/SimpleDynMessages';
+import SimpleDynOverrideMessages from './resources-vslot/SimpleDynOverrideMessages';
+
+describe('Integration', () => {
+  describe('simple', () => {
+
+    describe('SimpleStdMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(SimpleStdMessages, {
+          propsData: { code: 'one' },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display case "two"', async () => {
+        wrapper.setProps({ code: 'two' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default two');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard case for "dyn"', async () => {
+        wrapper.setProps({ code: 'dyn' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (dyn)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard message for "unknown"', async () => {
+        wrapper.setProps({ code: 'unknown' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('SimpleOverrideMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(SimpleOverrideMessages, {
+          propsData: { code: 'one' },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({ code: 'two' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard case for "dyn"', async () => {
+        wrapper.setProps({ code: 'dyn' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (dyn)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display wildcard message for "unknown"', async () => {
+        wrapper.setProps({ code: 'unknown' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('SimpleOverrideWildcard', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(SimpleOverrideWildcard, {
+          propsData: { code: 'one' },
+        });
+      });
+
+      test('should display case "one"', async () => {
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({ code: 'two' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard case for "dyn"', async () => {
+        wrapper.setProps({ code: 'dyn' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard [dyn]');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({ code: 'unknown' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard [unknown]');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('SimpleDynMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(SimpleDynMessages, {
+          propsData: { code: 'one' },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({ code: 'two' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display dynamic case for "dyn"', async () => {
+        wrapper.setProps({ code: 'dyn' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('dynamic message');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({ code: 'unknown' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('default wildcard (unknown)');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+    describe('SimpleDynOverrideMessages', () => {
+      let wrapper = null;
+
+      beforeAll(() => {
+        wrapper = mount(SimpleDynOverrideMessages, {
+          propsData: { code: 'one' },
+        });
+      });
+
+      test('should display case "one"', () => {
+        expect(wrapper.text()).toEqual('default one');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom case "two"', async () => {
+        wrapper.setProps({ code: 'two' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom two');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display dynamic case for "dyn"', async () => {
+        wrapper.setProps({ code: 'dyn' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('dynamic message');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+
+      test('should display custom wildcard message for "unknown"', async () => {
+        wrapper.setProps({ code: 'unknown' });
+        await Vue.nextTick();
+        expect(wrapper.text()).toEqual('custom wildcard [unknown]');
+        expect(wrapper.html()).toMatchSnapshot();
+      });
+    });
+
+  });
+});

tests/unit/resources-old-slot/CtxDynMessages.vue

+<template>
+  <CtxStdMessages :obj="obj">
+    <MsgCase when="two">
+      <template slot-scope="{ ctx }">
+        custom two @{{ ctx.d.e.e.p }}@
+      </template>
+    </MsgCase>
+    <MsgCase when="dyn">
+      <template slot-scope="{ ctx }">
+        dynamic message -{{ ctx.code }}-
+      </template>
+    </MsgCase>
+  </CtxStdMessages>
+</template>
+
+<script>
+import CtxStdMessages from './CtxStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    CtxStdMessages,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+};
+</script>

tests/unit/resources-old-slot/CtxDynOverrideMessages.vue

+<template>
+  <CtxStdMessages :obj="obj">
+    <MsgCase when="two">
+      <template slot-scope="{ ctx }">
+        custom two @{{ ctx.d.e.e.p }}@
+      </template>
+    </MsgCase>
+    <MsgCase when="dyn">
+      <template slot-scope="{ ctx }">
+        dynamic message -{{ ctx.code }}-
+      </template>
+    </MsgCase>
+    <MsgCase when="*">
+      <template slot-scope="{ ctx, value }">
+        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+        custom wildcard |{{ value }}<span v-if="!!ctx.other">|{{ ctx.other }}</span>|
+      </template>
+    </MsgCase>
+  </CtxStdMessages>
+</template>
+
+<script>
+import CtxStdMessages from './CtxStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    CtxStdMessages,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+};
+</script>

tests/unit/resources-old-slot/CtxOverrideMessages.vue

+<template>
+  <CtxStdMessages :obj="obj">
+    <MsgCase when="two">
+      <template slot-scope="{ ctx }">
+        custom two [{{ ctx.d.e.e.p }}]
+      </template>
+    </MsgCase>
+  </CtxStdMessages>
+</template>
+
+<script>
+import CtxStdMessages from './CtxStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    CtxStdMessages,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+};
+</script>

tests/unit/resources-old-slot/CtxOverrideWildcard.vue

+<template>
+  <CtxStdMessages :obj="obj">
+    <MsgCase when="two">
+      <template slot-scope="{ ctx }">
+        custom two @{{ ctx.d.e.e.p }}@
+      </template>
+    </MsgCase>
+    <MsgCase when="*">
+      <template slot-scope="{ ctx, value }">
+        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+        custom wildcard |{{ value }}<span v-if="!!ctx.other">|{{ ctx.other }}</span>|
+      </template>
+    </MsgCase>
+  </CtxStdMessages>
+</template>
+
+<script>
+import CtxStdMessages from './CtxStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    CtxStdMessages,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+};
+</script>

tests/unit/resources-old-slot/CtxStdMessages.vue

+<template>
+  <MsgSwitch :value="normalizedCode" :ctx="obj">
+    <slot :obj="obj" />
+    <MsgCase when="one">
+      default one
+    </MsgCase>
+    <MsgCase when="two">
+      <template slot-scope="{ ctx }">
+        default two ({{ ctx.d.e.e.p }})
+      </template>
+    </MsgCase>
+    <MsgCase when="*">
+      <template slot-scope="{ ctx, value }">
+        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+        default wildcard ({{ value }}) <span v-if="!!ctx.other">({{ ctx.other }})</span>
+      </template>
+    </MsgCase>
+  </MsgSwitch>
+</template>
+
+<script>
+import { MsgSwitch, MsgCase } from "../../../src";
+
+export default {
+  components: {
+    MsgSwitch,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+  computed: {
+    normalizedCode() {
+      const { obj } = this;
+      switch (obj && obj.code) {
+      case 1: return 'one';
+      case 2: return 'two';
+      default: return obj && obj.code;
+      }
+    },
+  },
+};
+</script>

tests/unit/resources-old-slot/SimpleDynMessages.vue

+<template>
+  <SimpleStdMessages :code="code">
+    <MsgCase when="two">
+      custom two
+    </MsgCase>
+    <MsgCase when="dyn">
+      dynamic message
+    </MsgCase>
+  </SimpleStdMessages>
+</template>
+
+<script>
+import SimpleStdMessages from './SimpleStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    SimpleStdMessages,
+    MsgCase,
+  },
+  props: {
+    code: { type: String, default: '' },
+  },
+};
+</script>

tests/unit/resources-old-slot/SimpleDynOverrideMessages.vue

+<template>
+  <SimpleStdMessages :code="code">
+    <MsgCase when="two">
+      custom two
+    </MsgCase>
+    <MsgCase when="dyn">
+      dynamic message
+    </MsgCase>
+    <MsgCase when="*">
+      <template slot-scope="{ value }">
+        custom wildcard [{{ value }}]
+      </template>
+    </MsgCase>
+  </SimpleStdMessages>
+</template>
+
+<script>
+import SimpleStdMessages from './SimpleStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    SimpleStdMessages,
+    MsgCase,
+  },
+  props: {
+    code: { type: String, default: '' },
+  },
+};
+</script>

tests/unit/resources-old-slot/SimpleOverrideMessages.vue

+<template>
+  <SimpleStdMessages :code="code">
+    <MsgCase when="two">
+      custom two
+    </MsgCase>
+  </SimpleStdMessages>
+</template>
+
+<script>
+import SimpleStdMessages from './SimpleStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    SimpleStdMessages,
+    MsgCase,
+  },
+  props: {
+    code: { type: String, default: '' },
+  },
+};
+</script>

tests/unit/resources-old-slot/SimpleOverrideWildcard.vue

+<template>
+  <SimpleStdMessages :code="code">
+    <MsgCase when="two">
+      custom two
+    </MsgCase>
+    <MsgCase when="*">
+      <template slot-scope="{ value }">
+        custom wildcard [{{ value }}]
+      </template>
+    </MsgCase>
+  </SimpleStdMessages>
+</template>
+
+<script>
+import SimpleStdMessages from './SimpleStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    SimpleStdMessages,
+    MsgCase,
+  },
+  props: {
+    code: { type: String, default: '' },
+  },
+};
+</script>

tests/unit/resources-old-slot/SimpleStdMessages.vue

+<template>
+  <MsgSwitch :value="code">
+    <template slot-scope="{ value }">
+      <slot :value="value" />
+      <MsgCase when="one">
+        default one
+      </MsgCase>
+      <MsgCase when="two">
+        default two
+      </MsgCase>
+      <MsgCase when="*">
+        default wildcard ({{ value }})
+      </MsgCase>
+    </template>
+  </MsgSwitch>
+</template>
+
+<script>
+import { MsgSwitch, MsgCase } from "../../../src";
+
+export default {
+  components: {
+    MsgSwitch,
+    MsgCase,
+  },
+  props: {
+    code: { type: String, default: '' },
+  },
+};
+</script>

tests/unit/resources-vslot/CtxDynMessages.vue

+<template>
+  <CtxStdMessages :obj="obj">
+    <MsgCase when="two">
+      <template #default="{ ctx }">
+        custom two @{{ ctx.d.e.e.p }}@
+      </template>
+    </MsgCase>
+    <MsgCase when="dyn">
+      <template #default="{ ctx }">
+        dynamic message -{{ ctx.code }}-
+      </template>
+    </MsgCase>
+  </CtxStdMessages>
+</template>
+
+<script>
+import CtxStdMessages from './CtxStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    CtxStdMessages,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+};
+</script>

tests/unit/resources-vslot/CtxDynOverrideMessages.vue

+<template>
+  <CtxStdMessages :obj="obj">
+    <MsgCase when="two">
+      <template #default="{ ctx }">
+        custom two @{{ ctx.d.e.e.p }}@
+      </template>
+    </MsgCase>
+    <MsgCase when="dyn">
+      <template #default="{ ctx }">
+        dynamic message -{{ ctx.code }}-
+      </template>
+    </MsgCase>
+    <MsgCase when="*">
+      <template #default="{ ctx, value }">
+        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+        custom wildcard |{{ value }}<span v-if="!!ctx.other">|{{ ctx.other }}</span>|
+      </template>
+    </MsgCase>
+  </CtxStdMessages>
+</template>
+
+<script>
+import CtxStdMessages from './CtxStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    CtxStdMessages,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+};
+</script>

tests/unit/resources-vslot/CtxOverrideMessages.vue

+<template>
+  <CtxStdMessages :obj="obj">
+    <MsgCase when="two">
+      <template #default="{ ctx }">
+        custom two [{{ ctx.d.e.e.p }}]
+      </template>
+    </MsgCase>
+  </CtxStdMessages>
+</template>
+
+<script>
+import CtxStdMessages from './CtxStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    CtxStdMessages,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+};
+</script>

tests/unit/resources-vslot/CtxOverrideWildcard.vue

+<template>
+  <CtxStdMessages :obj="obj">
+    <MsgCase when="two">
+      <template #default="{ ctx }">
+        custom two @{{ ctx.d.e.e.p }}@
+      </template>
+    </MsgCase>
+    <MsgCase when="*">
+      <template #default="{ ctx, value }">
+        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+        custom wildcard |{{ value }}<span v-if="!!ctx.other">|{{ ctx.other }}</span>|
+      </template>
+    </MsgCase>
+  </CtxStdMessages>
+</template>
+
+<script>
+import CtxStdMessages from './CtxStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    CtxStdMessages,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+};
+</script>

tests/unit/resources-vslot/CtxStdMessages.vue

+<template>
+  <MsgSwitch :value="normalizedCode" :ctx="obj">
+    <slot :obj="obj" />
+    <MsgCase when="one">
+      default one
+    </MsgCase>
+    <MsgCase when="two">
+      <template #default="{ ctx }">
+        default two ({{ ctx.d.e.e.p }})
+      </template>
+    </MsgCase>
+    <MsgCase when="*">
+      <template #default="{ ctx, value }">
+        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+        default wildcard ({{ value }}) <span v-if="!!ctx.other">({{ ctx.other }})</span>
+      </template>
+    </MsgCase>
+  </MsgSwitch>
+</template>
+
+<script>
+import { MsgSwitch, MsgCase } from "../../../src";
+
+export default {
+  components: {
+    MsgSwitch,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+  computed: {
+    normalizedCode() {
+      const { obj } = this;
+      switch (obj && obj.code) {
+      case 1: return 'one';
+      case 2: return 'two';
+      default: return obj && obj.code;
+      }
+    },
+  },
+};
+</script>

tests/unit/resources-vslot/ParentScopeDynMessages.vue

+<template>
+  <CtxStdMessages :obj="obj">
+    <MsgCase when="two">
+      <template #default>
+        custom two @{{ obj.d.e.e.p }}@
+      </template>
+    </MsgCase>
+    <MsgCase when="dyn">
+      <template #default>
+        dynamic message -{{ obj.code }}-
+      </template>
+    </MsgCase>
+  </CtxStdMessages>
+</template>
+
+<script>
+import CtxStdMessages from './CtxStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    CtxStdMessages,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+};
+</script>

tests/unit/resourc...slot/ParentScopeDynOverrideMessages.vue

+<template>
+  <CtxStdMessages :obj="obj">
+    <MsgCase when="two">
+      <template #default>
+        custom two @{{ obj.d.e.e.p }}@
+      </template>
+    </MsgCase>
+    <MsgCase when="dyn">
+      <template #default>
+        dynamic message -{{ obj.code }}-
+      </template>
+    </MsgCase>
+    <MsgCase when="*">
+      <template #default="{ value }">
+        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+        custom wildcard |{{ value }}<span v-if="!!obj.other">|{{ obj.other }}</span>|
+      </template>
+    </MsgCase>
+  </CtxStdMessages>
+</template>
+
+<script>
+import CtxStdMessages from './CtxStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    CtxStdMessages,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+};
+</script>

tests/unit/resources-vslot/ParentScopeOverrideMessages.vue

+<template>
+  <CtxStdMessages :obj="obj">
+    <MsgCase when="two">
+      <template #default>
+        custom two [{{ obj.d.e.e.p }}]
+      </template>
+    </MsgCase>
+  </CtxStdMessages>
+</template>
+
+<script>
+import CtxStdMessages from './CtxStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    CtxStdMessages,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+};
+</script>

tests/unit/resources-vslot/ParentScopeOverrideWildcard.vue

+<template>
+  <CtxStdMessages :obj="obj">
+    <MsgCase when="two">
+      <template #default>
+        custom two @{{ obj.d.e.e.p }}@
+      </template>
+    </MsgCase>
+    <MsgCase when="*">
+      <template #default="{ value }">
+        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+        custom wildcard |{{ value }}<span v-if="!!obj.other">|{{ obj.other }}</span>|
+      </template>
+    </MsgCase>
+  </CtxStdMessages>
+</template>
+
+<script>
+import CtxStdMessages from './CtxStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    CtxStdMessages,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+};
+</script>

tests/unit/resources-vslot/ParentScopeStdMessages.vue

+<template>
+  <MsgSwitch :value="normalizedCode">
+    <slot :obj="obj" />
+    <MsgCase when="one">
+      default one
+    </MsgCase>
+    <MsgCase when="two">
+      <template #default>
+        default two ({{ obj.d.e.e.p }})
+      </template>
+    </MsgCase>
+    <MsgCase when="*">
+      <template #default="{ value }">
+        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
+        default wildcard ({{ value }}) <span v-if="!!obj.other">({{ obj.other }})</span>
+      </template>
+    </MsgCase>
+  </MsgSwitch>
+</template>
+
+<script>
+import { MsgSwitch, MsgCase } from "../../../src";
+
+export default {
+  components: {
+    MsgSwitch,
+    MsgCase,
+  },
+  props: {
+    obj: { type: Object, default: null },
+  },
+  computed: {
+    normalizedCode() {
+      const { obj } = this;
+      switch (obj && obj.code) {
+      case 1: return 'one';
+      case 2: return 'two';
+      default: return obj && obj.code;
+      }
+    },
+  },
+};
+</script>

tests/unit/resources-vslot/SimpleDynMessages.vue

+<template>
+  <SimpleStdMessages :code="code">
+    <MsgCase when="two">
+      custom two
+    </MsgCase>
+    <MsgCase when="dyn">
+      dynamic message
+    </MsgCase>
+  </SimpleStdMessages>
+</template>
+
+<script>
+import SimpleStdMessages from './SimpleStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    SimpleStdMessages,
+    MsgCase,
+  },
+  props: {
+    code: { type: String, default: '' },
+  },
+};
+</script>

tests/unit/resources-vslot/SimpleDynOverrideMessages.vue

+<template>
+  <SimpleStdMessages :code="code">
+    <MsgCase when="two">
+      custom two
+    </MsgCase>
+    <MsgCase when="dyn">
+      dynamic message
+    </MsgCase>
+    <MsgCase when="*">
+      <template #default="{ value }">
+        custom wildcard [{{ value }}]
+      </template>
+    </MsgCase>
+  </SimpleStdMessages>
+</template>
+
+<script>
+import SimpleStdMessages from './SimpleStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    SimpleStdMessages,
+    MsgCase,
+  },
+  props: {
+    code: { type: String, default: '' },
+  },
+};
+</script>

tests/unit/resources-vslot/SimpleOverrideMessages.vue

+<template>
+  <SimpleStdMessages :code="code">
+    <MsgCase when="two">
+      custom two
+    </MsgCase>
+  </SimpleStdMessages>
+</template>
+
+<script>
+import SimpleStdMessages from './SimpleStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    SimpleStdMessages,
+    MsgCase,
+  },
+  props: {
+    code: { type: String, default: '' },
+  },
+};
+</script>

tests/unit/resources-vslot/SimpleOverrideWildcard.vue

+<template>
+  <SimpleStdMessages :code="code">
+    <MsgCase when="two">
+      custom two
+    </MsgCase>
+    <MsgCase when="*">
+      <template #default="{ value }">
+        custom wildcard [{{ value }}]
+      </template>
+    </MsgCase>
+  </SimpleStdMessages>
+</template>
+
+<script>
+import SimpleStdMessages from './SimpleStdMessages';
+import { MsgCase } from '../../../src';
+
+export default {
+  components: {
+    SimpleStdMessages,
+    MsgCase,
+  },
+  props: {
+    code: { type: String, default: '' },
+  },
+};
+</script>

tests/unit/resources-vslot/SimpleStdMessages.vue

+<template>
+  <MsgSwitch :value="code">
+    <template #default="{ value }">
+      <slot :value="value" />
+      <MsgCase when="one">
+        default one
+      </MsgCase>
+      <MsgCase when="two">
+        default two
+      </MsgCase>
+      <MsgCase when="*">
+        default wildcard ({{ value }})
+      </MsgCase>
+    </template>
+  </MsgSwitch>
+</template>
+
+<script>
+import { MsgSwitch, MsgCase } from "../../../src";
+
+export default {
+  components: {
+    MsgSwitch,
+    MsgCase,
+  },
+  props: {
+    code: { type: String, default: '' },
+  },
+};
+</script>

package.json

 {
   "name": "msg-switch",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "license": "MIT",
@@ -16,11 +16,11 @@ "homepage": "https://github.com/PlanitarInc/msg-switch",
   "peerDependencies": {
-    "vue": "^2.5.22"
+    "vue": "^2.6.3"
   },
   "devDependencies": {
     "@plntr/eslint-config": "^1.0.0",
-    "@vue/cli-plugin-babel": "^3.3.0",
-    "@vue/cli-plugin-eslint": "^3.3.0",
-    "@vue/cli-plugin-unit-jest": "^3.3.0",
-    "@vue/cli-service": "^3.3.0",
-    "@vue/test-utils": "^1.0.0-beta.20",
+    "@vue/cli-plugin-babel": "^3.4.0",
+    "@vue/cli-plugin-eslint": "^3.4.0",
+    "@vue/cli-plugin-unit-jest": "^3.4.0",
+    "@vue/cli-service": "^3.4.0",
+    "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "7.0.0-bridge.0",
@@ -31,12 +31,12 @@ "babel-eslint": "^10.0.1",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
-    "eslint": "^5.8.0",
+    "eslint": "^5.13.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-airbnb-es5": "^1.2.0",
-    "eslint-plugin-import": "^2.15.0",
-    "eslint-plugin-jsx-a11y": "^6.2.0",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
     "eslint-plugin-vue": "^5.0.0",
-    "vue": "^2.5.22",
-    "vue-template-compiler": "^2.5.21"
+    "vue": "^2.6.3",
+    "vue-template-compiler": "^2.6.3"
   }
 }

README.md

@@ -67,4 +67,69 @@ # msg-switch [![Build Status](https://travis-ci.org/PlanitarInc/msg-switch.svg?branch=master)](https://travis-ci.org/PlanitarInc/msg-switch) [![npm version](https://badge.fury.io/js/msg-switch.svg)](https://badge.fury.io/js/msg-switch) [![](https://img.shields.io/github/license/PlanitarInc/msg-switch.svg)](https://www.npmjs.com/package/msg-switch)
 
+### Access Parent Scope Example
+
+In this example an additional context is passed to `MsgSwitch`. This context is
+treated as an opaque value and is passed as is to `MsgCase` components.
+It can be used inside `MsgCase` components using
+[scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots) as
+show below.
+
+```html
+// StdErrorParentScope.vue
+<MsgSwitch :value="error.code">
+  <!--
+    User-defined custom messages comes first,
+    such that they overwrite the default messages.
+  -->
+  <slot :value="error.code" />
+
+  <!-- Here the standard error messages come -->
+  <MsgCase when="unautheticated">Please log in!</MsgCase>
+  <MsgCase when="not_found">
+    <template #default>
+      Resource {{ error.id }} was not found.
+    </template>
+  </MsgCase>
+  <MsgCase when="forbidden">
+    <template #default>
+      You do not enough permissions to {{ error.method }} {{ error.resourceName }}.
+    </template>
+  </MsgCase>
+  <!-- A standrard wildcard case. -->
+  <MsgCase when="*">
+    <template #default="{ value }">
+      Unknown error (<code>{{value}}</code>): <pre>{{ error }}</pre>.
+    </template>
+  </MsgCase>
+</MsgSwitch>
+```
+
+Than this component is used as follows:
+
+```html
+// App.vue
+<StdErrorParentScope :error="error">
+  <MsgCase when="not_found">
+    <template #default>
+      User {{ error.id }} was not found.
+    </template>
+  </MsgCase>
+  <MsgCase when="dynamic">
+    <template #default>
+      Message for error code missing in StdError:
+      <pre>{{ error.someDebugInfo }}</pre>.
+    </template>
+  </MsgCase>
+</StdErrorWithContext>
+```
+
+
 ### Context Example
 
+**Update 2019-02-08**: Vue 2.6 added support for the new `v-slot` syntax.
+This made the `ctx` prop redundant.
+Checkout [Access Parent Scope Example](#access-parent-scope-example).
+For more details about `v-slot` please refer to
+[Vue 2.6 release blog post](https://medium.com/the-vue-point/vue-2-6-released-66aa6c8e785e)
+and [updated Vue slot docs](https://vuejs.org/v2/guide/components-slots.html).
+
 In this example an additional context is passed to `MsgSwitch`. This context is
@@ -71,0 +136,0 @@ treated as an opaque value and is passed as is to `MsgCase` components.

tests/unit/integration-context.spec.js

-import Vue from 'vue';
-import { mount } from '@vue/test-utils';
-
-import CtxStdMessages from './resources/CtxStdMessages';
-import CtxOverrideMessages from './resources/CtxOverrideMessages';
-import CtxOverrideWildcard from './resources/CtxOverrideWildcard';
-import CtxDynMessages from './resources/CtxDynMessages';
-import CtxDynOverrideMessages from './resources/CtxDynOverrideMessages';
-
-describe('Integration', () => {
-  describe('context', () => {
-
-    describe('CtxStdMessages', () => {
-      let wrapper = null;
-
-      beforeAll(() => {
-        wrapper = mount(CtxStdMessages, {
-          propsData: {
-            obj: { code: 1 },
-          },
-        });
-      });
-
-      test('should display case "one"', () => {
-        expect(wrapper.text()).toEqual('default one');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display case "two"', async () => {
-        wrapper.setProps({
-          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('default two (deep prop)');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display wildcard case for "dyn"', async () => {
-        wrapper.setProps({
-          obj: { code: 'dyn' },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('default wildcard (dyn)');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display wildcard message for "unknown"', async () => {
-        wrapper.setProps({
-          obj: { code: 'unknown', other: 'other prop' },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('default wildcard (unknown) (other prop)');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-    });
-
-    describe('CtxOverrideMessages', () => {
-      let wrapper = null;
-
-      beforeAll(() => {
-        wrapper = mount(CtxOverrideMessages, {
-          propsData: {
-            obj: { code: 1 },
-          },
-        });
-      });
-
-      test('should display case "one"', () => {
-        expect(wrapper.text()).toEqual('default one');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom case "two"', async () => {
-        wrapper.setProps({
-          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('custom two [deep prop]');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display wildcard case for "dyn"', async () => {
-        wrapper.setProps({
-          obj: { code: 'dyn' },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('default wildcard (dyn)');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display wildcard message for "unknown"', async () => {
-        wrapper.setProps({
-          obj: { code: 'unknown', other: 'other prop' },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('default wildcard (unknown) (other prop)');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-    });
-
-    describe('CtxOverrideWildcard', () => {
-      let wrapper = null;
-
-      beforeAll(() => {
-        wrapper = mount(CtxOverrideWildcard, {
-          propsData: {
-            obj: { code: 1 },
-          },
-        });
-      });
-
-      test('should display case "one"', async () => {
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('default one');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom case "two"', async () => {
-        wrapper.setProps({
-          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('custom two @deep prop@');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom wildcard case for "dyn"', async () => {
-        wrapper.setProps({
-          obj: { code: 'dyn' },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('custom wildcard |dyn|');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom wildcard message for "unknown"', async () => {
-        wrapper.setProps({
-          obj: { code: 'unknown', other: 'other prop' },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('custom wildcard |unknown|other prop|');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-    });
-
-    describe('CtxDynMessages', () => {
-      let wrapper = null;
-
-      beforeAll(() => {
-        wrapper = mount(CtxDynMessages, {
-          propsData: {
-            obj: { code: 1 },
-          },
-        });
-      });
-
-      test('should display case "one"', () => {
-        expect(wrapper.text()).toEqual('default one');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom case "two"', async () => {
-        wrapper.setProps({
-          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('custom two @deep prop@');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display dynamic case for "dyn"', async () => {
-        wrapper.setProps({
-          obj: { code: 'dyn' },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('dynamic message -dyn-');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom wildcard message for "unknown"', async () => {
-        wrapper.setProps({
-          obj: { code: 'unknown', other: 'other prop' },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('default wildcard (unknown) (other prop)');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-    });
-
-    describe('CtxDynOverrideMessages', () => {
-      let wrapper = null;
-
-      beforeAll(() => {
-        wrapper = mount(CtxDynOverrideMessages, {
-          propsData: {
-            obj: { code: 1 },
-          },
-        });
-      });
-
-      test('should display case "one"', () => {
-        expect(wrapper.text()).toEqual('default one');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom case "two"', async () => {
-        wrapper.setProps({
-          obj: { code: 2, d: { e: { e: { p: 'deep prop' } } } },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('custom two @deep prop@');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display dynamic case for "dyn"', async () => {
-        wrapper.setProps({
-          obj: { code: 'dyn' },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('dynamic message -dyn-');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom wildcard message for "unknown"', async () => {
-        wrapper.setProps({
-          obj: { code: 'unknown', other: 'other prop' },
-        });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('custom wildcard |unknown|other prop|');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-    });
-
-  });
-});

tests/unit/integration-simple.spec.js

-import Vue from 'vue';
-import { mount } from '@vue/test-utils';
-
-import SimpleStdMessages from './resources/SimpleStdMessages';
-import SimpleOverrideMessages from './resources/SimpleOverrideMessages';
-import SimpleOverrideWildcard from './resources/SimpleOverrideWildcard';
-import SimpleDynMessages from './resources/SimpleDynMessages';
-import SimpleDynOverrideMessages from './resources/SimpleDynOverrideMessages';
-
-describe('Integration', () => {
-  describe('simple', () => {
-
-    describe('SimpleStdMessages', () => {
-      let wrapper = null;
-
-      beforeAll(() => {
-        wrapper = mount(SimpleStdMessages, {
-          propsData: { code: 'one' },
-        });
-      });
-
-      test('should display case "one"', () => {
-        expect(wrapper.text()).toEqual('default one');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display case "two"', async () => {
-        wrapper.setProps({ code: 'two' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('default two');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display wildcard case for "dyn"', async () => {
-        wrapper.setProps({ code: 'dyn' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('default wildcard (dyn)');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display wildcard message for "unknown"', async () => {
-        wrapper.setProps({ code: 'unknown' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('default wildcard (unknown)');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-    });
-
-    describe('SimpleOverrideMessages', () => {
-      let wrapper = null;
-
-      beforeAll(() => {
-        wrapper = mount(SimpleOverrideMessages, {
-          propsData: { code: 'one' },
-        });
-      });
-
-      test('should display case "one"', () => {
-        expect(wrapper.text()).toEqual('default one');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom case "two"', async () => {
-        wrapper.setProps({ code: 'two' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('custom two');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display wildcard case for "dyn"', async () => {
-        wrapper.setProps({ code: 'dyn' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('default wildcard (dyn)');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display wildcard message for "unknown"', async () => {
-        wrapper.setProps({ code: 'unknown' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('default wildcard (unknown)');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-    });
-
-    describe('SimpleOverrideWildcard', () => {
-      let wrapper = null;
-
-      beforeAll(() => {
-        wrapper = mount(SimpleOverrideWildcard, {
-          propsData: { code: 'one' },
-        });
-      });
-
-      test('should display case "one"', async () => {
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('default one');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom case "two"', async () => {
-        wrapper.setProps({ code: 'two' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('custom two');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom wildcard case for "dyn"', async () => {
-        wrapper.setProps({ code: 'dyn' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('custom wildcard [dyn]');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom wildcard message for "unknown"', async () => {
-        wrapper.setProps({ code: 'unknown' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('custom wildcard [unknown]');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-    });
-
-    describe('SimpleDynMessages', () => {
-      let wrapper = null;
-
-      beforeAll(() => {
-        wrapper = mount(SimpleDynMessages, {
-          propsData: { code: 'one' },
-        });
-      });
-
-      test('should display case "one"', () => {
-        expect(wrapper.text()).toEqual('default one');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom case "two"', async () => {
-        wrapper.setProps({ code: 'two' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('custom two');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display dynamic case for "dyn"', async () => {
-        wrapper.setProps({ code: 'dyn' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('dynamic message');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom wildcard message for "unknown"', async () => {
-        wrapper.setProps({ code: 'unknown' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('default wildcard (unknown)');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-    });
-
-    describe('SimpleDynOverrideMessages', () => {
-      let wrapper = null;
-
-      beforeAll(() => {
-        wrapper = mount(SimpleDynOverrideMessages, {
-          propsData: { code: 'one' },
-        });
-      });
-
-      test('should display case "one"', () => {
-        expect(wrapper.text()).toEqual('default one');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom case "two"', async () => {
-        wrapper.setProps({ code: 'two' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('custom two');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display dynamic case for "dyn"', async () => {
-        wrapper.setProps({ code: 'dyn' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('dynamic message');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-
-      test('should display custom wildcard message for "unknown"', async () => {
-        wrapper.setProps({ code: 'unknown' });
-        await Vue.nextTick();
-        expect(wrapper.text()).toEqual('custom wildcard [unknown]');
-        expect(wrapper.html()).toMatchSnapshot();
-      });
-    });
-
-  });
-});

tests/unit/resources/CtxDynMessages.vue

-<template>
-  <CtxStdMessages :obj="obj">
-    <MsgCase when="two">
-      <template slot-scope="{ ctx }">
-        custom two @{{ ctx.d.e.e.p }}@
-      </template>
-    </MsgCase>
-    <MsgCase when="dyn">
-      <template slot-scope="{ ctx }">
-        dynamic message -{{ ctx.code }}-
-      </template>
-    </MsgCase>
-  </CtxStdMessages>
-</template>
-
-<script>
-import CtxStdMessages from './CtxStdMessages';
-import { MsgCase } from '../../../src';
-
-export default {
-  components: {
-    CtxStdMessages,
-    MsgCase,
-  },
-  props: {
-    obj: { type: Object, default: null },
-  },
-};
-</script>

tests/unit/resources/CtxDynOverrideMessages.vue

-<template>
-  <CtxStdMessages :obj="obj">
-    <MsgCase when="two">
-      <template slot-scope="{ ctx }">
-        custom two @{{ ctx.d.e.e.p }}@
-      </template>
-    </MsgCase>
-    <MsgCase when="dyn">
-      <template slot-scope="{ ctx }">
-        dynamic message -{{ ctx.code }}-
-      </template>
-    </MsgCase>
-    <MsgCase when="*">
-      <template slot-scope="{ ctx, value }">
-        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
-        custom wildcard |{{ value }}<span v-if="!!ctx.other">|{{ ctx.other }}</span>|
-      </template>
-    </MsgCase>
-  </CtxStdMessages>
-</template>
-
-<script>
-import CtxStdMessages from './CtxStdMessages';
-import { MsgCase } from '../../../src';
-
-export default {
-  components: {
-    CtxStdMessages,
-    MsgCase,
-  },
-  props: {
-    obj: { type: Object, default: null },
-  },
-};
-</script>

tests/unit/resources/CtxOverrideMessages.vue

-<template>
-  <CtxStdMessages :obj="obj">
-    <MsgCase when="two">
-      <template slot-scope="{ ctx }">
-        custom two [{{ ctx.d.e.e.p }}]
-      </template>
-    </MsgCase>
-  </CtxStdMessages>
-</template>
-
-<script>
-import CtxStdMessages from './CtxStdMessages';
-import { MsgCase } from '../../../src';
-
-export default {
-  components: {
-    CtxStdMessages,
-    MsgCase,
-  },
-  props: {
-    obj: { type: Object, default: null },
-  },
-};
-</script>

tests/unit/resources/CtxOverrideWildcard.vue

-<template>
-  <CtxStdMessages :obj="obj">
-    <MsgCase when="two">
-      <template slot-scope="{ ctx }">
-        custom two @{{ ctx.d.e.e.p }}@
-      </template>
-    </MsgCase>
-    <MsgCase when="*">
-      <template slot-scope="{ ctx, value }">
-        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
-        custom wildcard |{{ value }}<span v-if="!!ctx.other">|{{ ctx.other }}</span>|
-      </template>
-    </MsgCase>
-  </CtxStdMessages>
-</template>
-
-<script>
-import CtxStdMessages from './CtxStdMessages';
-import { MsgCase } from '../../../src';
-
-export default {
-  components: {
-    CtxStdMessages,
-    MsgCase,
-  },
-  props: {
-    obj: { type: Object, default: null },
-  },
-};
-</script>

tests/unit/resources/CtxStdMessages.vue

-<template>
-  <MsgSwitch :value="normalizedCode" :ctx="obj">
-    <slot :obj="obj" />
-    <MsgCase when="one">
-      default one
-    </MsgCase>
-    <MsgCase when="two">
-      <template slot-scope="{ ctx }">
-        default two ({{ ctx.d.e.e.p }})
-      </template>
-    </MsgCase>
-    <MsgCase when="*">
-      <template slot-scope="{ ctx, value }">
-        <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
-        default wildcard ({{ value }}) <span v-if="!!ctx.other">({{ ctx.other }})</span>
-      </template>
-    </MsgCase>
-  </MsgSwitch>
-</template>
-
-<script>
-import { MsgSwitch, MsgCase } from "../../../src";
-
-export default {
-  components: {
-    MsgSwitch,
-    MsgCase,
-  },
-  props: {
-    obj: { type: Object, default: null },
-  },
-  computed: {
-    normalizedCode() {
-      const { obj } = this;
-      switch (obj && obj.code) {
-      case 1: return 'one';
-      case 2: return 'two';
-      default: return obj && obj.code;
-      }
-    },
-  },
-};
-</script>

tests/unit/resources/SimpleDynMessages.vue

-<template>
-  <SimpleStdMessages :code="code">
-    <MsgCase when="two">
-      custom two
-    </MsgCase>
-    <MsgCase when="dyn">
-      dynamic message
-    </MsgCase>
-  </SimpleStdMessages>
-</template>
-
-<script>
-import SimpleStdMessages from './SimpleStdMessages';
-import { MsgCase } from '../../../src';
-
-export default {
-  components: {
-    SimpleStdMessages,
-    MsgCase,
-  },
-  props: {
-    code: { type: String, default: '' },
-  },
-};
-</script>

tests/unit/resources/SimpleDynOverrideMessages.vue

-<template>
-  <SimpleStdMessages :code="code">
-    <MsgCase when="two">
-      custom two
-    </MsgCase>
-    <MsgCase when="dyn">
-      dynamic message
-    </MsgCase>
-    <MsgCase when="*">
-      <template slot-scope="{ value }">
-        custom wildcard [{{ value }}]
-      </template>
-    </MsgCase>
-  </SimpleStdMessages>
-</template>
-
-<script>
-import SimpleStdMessages from './SimpleStdMessages';
-import { MsgCase } from '../../../src';
-
-export default {
-  components: {
-    SimpleStdMessages,
-    MsgCase,
-  },
-  props: {
-    code: { type: String, default: '' },
-  },
-};
-</script>

tests/unit/resources/SimpleOverrideMessages.vue

-<template>
-  <SimpleStdMessages :code="code">
-    <MsgCase when="two">
-      custom two
-    </MsgCase>
-  </SimpleStdMessages>
-</template>
-
-<script>
-import SimpleStdMessages from './SimpleStdMessages';
-import { MsgCase } from '../../../src';
-
-export default {
-  components: {
-    SimpleStdMessages,
-    MsgCase,
-  },
-  props: {
-    code: { type: String, default: '' },
-  },
-};
-</script>

tests/unit/resources/SimpleOverrideWildcard.vue

-<template>
-  <SimpleStdMessages :code="code">
-    <MsgCase when="two">
-      custom two
-    </MsgCase>
-    <MsgCase when="*">
-      <template slot-scope="{ value }">
-        custom wildcard [{{ value }}]
-      </template>
-    </MsgCase>
-  </SimpleStdMessages>
-</template>
-
-<script>
-import SimpleStdMessages from './SimpleStdMessages';
-import { MsgCase } from '../../../src';
-
-export default {
-  components: {
-    SimpleStdMessages,
-    MsgCase,
-  },
-  props: {
-    code: { type: String, default: '' },
-  },
-};
-</script>

tests/unit/resources/SimpleStdMessages.vue

-<template>
-  <MsgSwitch :value="code">
-    <template slot-scope="{ value }">
-      <slot :value="value" />
-      <MsgCase when="one">
-        default one
-      </MsgCase>
-      <MsgCase when="two">
-        default two
-      </MsgCase>
-      <MsgCase when="*">
-        default wildcard ({{ value }})
-      </MsgCase>
-    </template>
-  </MsgSwitch>
-</template>
-
-<script>
-import { MsgSwitch, MsgCase } from "../../../src";
-
-export default {
-  components: {
-    MsgSwitch,
-    MsgCase,
-  },
-  props: {
-    code: { type: String, default: '' },
-  },
-};
-</script>

No alert changes

Improved metrics

Total package byte prevSize

192942

31.76%

Number of package files

73

40.38%

Lines of code

1644

52.5%

Number of lines in readme file

227

40.12%

No dependency changes