msg-switch - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

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>

package.json

 {
   "name": "msg-switch",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/PlanitarInc/msg-switch",

README.md

@@ -12,6 +12,16 @@ # 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)
 
-The component is used to display an error message based on an error code.
-Basically, it behaves as a huge switch statement: chooses the right message to
-be displayed. But unlike a switch statement it should be able 
+The requirements are as follows:
+- Define lists of messages.
+- Re-use these lists.
+- Override message in these lists on a per-case basis.
+- Extend these lists.
 
+## Examples
+
+### Basic Example
+
+In this basic example the components are used to display an error message based
+on an error code. Basically, it behaves as a huge switch statement: chooses the
+right message to be displayed. But unlike a switch statement it should be able 
+
 ```html
@@ -27,8 +37,10 @@ // StdError.vue
   <!-- Here the standard error messages come -->
+  <MsgCase when="unautheticated">Please log in!</MsgCase>
   <MsgCase when="not_found">Not found.</MsgCase>
-  <MsgCase when="unautheticated">Please log in!</MsgCase>
   <MsgCase when="forbidden">You do not enough permissions.</MsgCase>
   <!-- A standrard wildcard case. -->
-  <MsgCase when="*" :slot-scope="{ value }">
-    Unknown error: <pre>{{value}}</pre>.
+  <MsgCase when="*">
+    <template slot-scope="{ value }">
+      Unknown error: <pre>{{value}}</pre>.
+    </template>
   </MsgCase>
@@ -57,8 +69,52 @@ </MsgSwitch>
 
-The requirements are as follows:
-- Define lists of messages.
-- Re-use these lists.
-- Override message in these lists on a per-case basis.
-- Extend these lists.
+### Context 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
+// StdErrorWithContext.vue
+<MsgSwitch :value="code" :ctx="someObject">
+  <!--
+    User-defined custom messages comes first,
+    such that they overwrite the default messages.
+  -->
+  <slot :value="value" />
+
+  <!-- Here the standard error messages come -->
+  <MsgCase when="unautheticated">Please log in!</MsgCase>
+  <MsgCase when="not_found">
+    <template slot-scope="{ ctx }">
+      User {{ ctx.email }} was not found.
+    </template>
+  </MsgCase>
+  <MsgCase when="forbidden">
+    <template slot-scope="{ ctx }">
+      You do not enough permissions to {{ ctx.method }} {{ ctx.resourceName }}.
+    </template>
+  </MsgCase>
+  <!-- A standrard wildcard case. -->
+  <MsgCase when="*">
+    <template slot-scope="{ ctx, value }">
+      Unknown error (<code>{{value}}</code>): <pre>{{ ctx }}</pre>.
+    </template>
+  </MsgCase>
+</MsgSwitch>
+```
+
+Than this component is used as follows:
+
+```html
+// App.vue
+<StdError :value="error.code">
+  <MsgCase when="not_found">The document was not found.</MsgCase>
+  <MsgCase when="forbidden">You are not allowed to edit the document.</MsgCase>
+  <MsgCase when="dynamic">Message for error code missing in StdError.</MsgCase>
+</StdError>
+```
+
+
 ## TODO
@@ -65,0 +121,0 @@

src/components/MsgCase.vue

 <template>
-  <span v-if="shown" class="msg-case">
-    <slot :value="currentValue" />
+  <span v-if="isShown" class="msg-case">
+    <slot :value="currentValue" :ctx="currentCtx" />
   </span>
@@ -19,7 +19,15 @@ </template>
       currentValue: '',
-      shown: false,
+      currentCtx: null,
+      shownAt: 0,
+      hiddenAt: 0,
     };
   },
 
-  mounted() {
+  computed: {
+    isShown() {
+      return this.shownAt > this.hiddenAt;
+    },
+  },
+
+  created() {
     this.registerMsgCase(this.when, this);
@@ -29,8 +37,15 @@ },
   methods: {
-    show(currentValue) {
+    show(epoch, currentValue, currentCtx) {
       this.currentValue = currentValue;
-      this.shown = true;
+      this.currentCtx = currentCtx;
+      // We update `shownAt` on the next tick in order to ensure that
+      // when v-if renders the slot the ctx is up-to-date.
+      this.$nextTick(() => {
+        if (this.shownAt < epoch) {
+          this.shownAt = epoch;
+        }
+      });
     },
-    hide() {
-      this.shown = false;
+    hide(epoch) {
+      this.hiddenAt = epoch;
     },
@@ -37,0 +52,0 @@ },

src/components/MsgSwitch.vue

 <template>
   <span class="msg-switch">
     <!-- list of overridings and dynamic messages -->
-    <slot :value="value" />
+    <slot :value="value" :ctx="ctx" />
   </span>
@@ -12,6 +12,7 @@ </template>
     value: { type: String, default: '' },
+    ctx: { type: Object, default: null },
   },
 
   data() {
-    return { cases: {} };
+    return { cases: {}, epoch: 0 };
   },
@@ -27,18 +28,29 @@
     value() {
-      this.updateDisplayedCase();
+      this.updateDisplayedCase(true);
     },
+    ctx() {
+      this.updateDisplayedCase(true);
+    },
   },
 
   methods: {
-    registerMsgCase(matchingValue, child) {
+    registerMsgCase(matchingValue, caseComponent) {
       // First matching case is displayed.
-      this.cases[matchingValue] = this.cases[matchingValue] || child;
-      this.updateDisplayedCase();
+      if (this.cases[matchingValue]) {
+        return;
+      }
+
+      this.cases[matchingValue] = caseComponent;
+      this.updateDisplayedCase(false);
     },
 
-    updateDisplayedCase() {
+    updateDisplayedCase(forceUpdate) {
       const oldCase = this.displayedCase;
       const newCase = this.cases[this.value] || this.cases['*'];
 
+      this.epoch++;
       if (oldCase === newCase) {
+        if (forceUpdate && oldCase) {
+          oldCase.show(this.epoch, this.value, this.ctx);
+        }
         return;
@@ -49,6 +61,6 @@ }
       if (oldCase) {
-        oldCase.hide(this.value);
+        oldCase.hide(this.epoch);
       }
       if (newCase) {
-        newCase.show(this.value);
+        newCase.show(this.epoch, this.value, this.ctx);
       }
@@ -55,0 +67,0 @@ },

tests/unit/integration.spec.js

-import { mount } from '@vue/test-utils';
-import { MsgSwitch } from '../../src';
-import {
-  StdMessages,
-  OverriddenMessage,
-  OverriddenWildcard,
-  DynamicMessage,
-  DynamicOverriddenWildcard,
-} from './resources';
-
-describe('Integration', () => {
-
-  describe('StdMessages', () => {
-    let wrapper = null;
-
-    beforeAll(() => {
-      wrapper = mount(StdMessages, {
-        propsData: { value: 'one' },
-      });
-    });
-
-    test('should display case "one"', () => {
-      expect(wrapper.text()).toEqual('default one');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display case "two"', () => {
-      wrapper.setProps({ value: 'two' });
-      expect(wrapper.text()).toEqual('default two');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display wildcard case for "dyn"', () => {
-      wrapper.setProps({ value: 'dyn' });
-      expect(wrapper.text()).toEqual('default wildcard (dyn)');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display wildcard message for "unknown"', () => {
-      wrapper.setProps({ value: 'unknown' });
-      expect(wrapper.text()).toEqual('default wildcard (unknown)');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-  });
-
-  describe('OverriddenMessage', () => {
-    let wrapper = null;
-
-    beforeAll(() => {
-      wrapper = mount(OverriddenMessage, {
-        propsData: { value: 'one' },
-      });
-    });
-
-    test('should display case "one"', () => {
-      expect(wrapper.text()).toEqual('default one');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display custom case "two"', () => {
-      wrapper.setProps({ value: 'two' });
-      expect(wrapper.text()).toEqual('custom two');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display wildcard case for "dyn"', () => {
-      wrapper.setProps({ value: 'dyn' });
-      expect(wrapper.text()).toEqual('default wildcard (dyn)');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display wildcard message for "unknown"', () => {
-      wrapper.setProps({ value: 'unknown' });
-      expect(wrapper.text()).toEqual('default wildcard (unknown)');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-  });
-
-  describe('OverriddenWildcard', () => {
-    let wrapper = null;
-
-    beforeAll(() => {
-      wrapper = mount(OverriddenWildcard, {
-        propsData: { value: 'one' },
-      });
-    });
-
-    test('should display case "one"', () => {
-      expect(wrapper.text()).toEqual('default one');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display custom case "two"', () => {
-      wrapper.setProps({ value: 'two' });
-      expect(wrapper.text()).toEqual('custom two');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display custom wildcard case for "dyn"', () => {
-      wrapper.setProps({ value: 'dyn' });
-      expect(wrapper.text()).toEqual('custom wildcard [dyn]');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display custom wildcard message for "unknown"', () => {
-      wrapper.setProps({ value: 'unknown' });
-      expect(wrapper.text()).toEqual('custom wildcard [unknown]');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-  });
-
-  describe('DynamicMessage', () => {
-    let wrapper = null;
-
-    beforeAll(() => {
-      wrapper = mount(DynamicMessage, {
-        propsData: { value: 'one' },
-      });
-    });
-
-    test('should display case "one"', () => {
-      expect(wrapper.text()).toEqual('default one');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display custom case "two"', () => {
-      wrapper.setProps({ value: 'two' });
-      expect(wrapper.text()).toEqual('custom two');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display dynamic case for "dyn"', () => {
-      wrapper.setProps({ value: 'dyn' });
-      expect(wrapper.text()).toEqual('dynamic message');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display custom wildcard message for "unknown"', () => {
-      wrapper.setProps({ value: 'unknown' });
-      expect(wrapper.text()).toEqual('default wildcard (unknown)');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-  });
-
-  describe('DynamicOverriddenWildcard', () => {
-    let wrapper = null;
-
-    beforeAll(() => {
-      wrapper = mount(DynamicOverriddenWildcard, {
-        propsData: { value: 'one' },
-      });
-    });
-
-    test('should display case "one"', () => {
-      expect(wrapper.text()).toEqual('default one');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display custom case "two"', () => {
-      wrapper.setProps({ value: 'two' });
-      expect(wrapper.text()).toEqual('custom two');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display dynamic case for "dyn"', () => {
-      wrapper.setProps({ value: 'dyn' });
-      expect(wrapper.text()).toEqual('dynamic message');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-
-    test('should display custom wildcard message for "unknown"', () => {
-      wrapper.setProps({ value: 'unknown' });
-      expect(wrapper.text()).toEqual('custom wildcard [unknown]');
-      expect(wrapper.html()).toMatchSnapshot();
-    });
-  });
-
-});

tests/unit/resources/DynamicMessage.vue

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

tests/unit/resources/DynamicOverriddenWildcard.vue

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

tests/unit/resources/index.js

-import StdMessages from './StdMessages';
-import OverriddenMessage from './OverriddenMessage';
-import OverriddenWildcard from './OverriddenWildcard';
-import DynamicMessage from './DynamicMessage';
-import DynamicOverriddenWildcard from './DynamicOverriddenWildcard';
-
-export {
-  StdMessages,
-  OverriddenMessage,
-  OverriddenWildcard,
-  DynamicMessage,
-  DynamicOverriddenWildcard,
-};

tests/unit/resources/OverriddenMessage.vue

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

tests/unit/resources/OverriddenWildcard.vue

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

tests/unit/resources/StdMessages.vue

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

No alert changes

Improved metrics

Total package byte prevSize

146299

14.21%

Number of package files

52

13.04%

Lines of code

1078

23.62%

Number of lines in readme file

154

57.14%

No dependency changes