fix bug in bhText formatters

src/bh/components/BhText.vue

@@ -43,7 +43,7 @@ export default {
   data() {
     return {
       className: 'bh-text',
-      val: this.formatters.reduce((c, f) => f(c), this.value || ''),
+      val: this.value,
     };
   },
   computed: {
@@ -56,21 +56,29 @@ export default {
 
       return classes;
     },
+    formattedValue() {
+      return this.formatters.reduce((c, f) => f(c), this.value || '');
+    },
   },
   watch: {
-    value(value) {
-      this.val = value;
+    value() {
+      this.val = this.formattedValue;
     },
     val(value) {
       this.$emit('input', value);
     },
+    formatters() {
+      this.$nextTick();
+      this.val = this.formattedValue;
+    },
   },
   mounted() {
-    const { input } = this.$refs;
+    this.val = this.formattedValue;
 
+    const { input } = this.$refs;
     if (input) {
       input.oninput = async () => {
-        const formattedValue = this.formatters.reduce((c, f) => f(c), input.value);
+        const formattedValue = this.formatters.reduce((c, f) => f(c), input.value || '');
         const { selectionStart } = input;
         if (input.value !== formattedValue) {
           this.val = formattedValue;

test/unit/specs/bh/BhText.spec.js

@@ -7,15 +7,95 @@ import BhText from 'bh/components/BhText';
 const localVue = createLocalVue();
 localVue.use(BH);
 
+const formmater1 = v => v.replace(' ', '_');
+
 describe('BhText.vue', () => {
-  let wrapper;
-  beforeEach(() => {
-    wrapper = shallowMount(BhText, {
-      localVue,
+  describe('without initial formatters', () => {
+    let wrapper;
+    beforeEach(() => {
+      wrapper = shallowMount(BhText, {
+        localVue,
+      });
+    });
+
+    test('renders correctly', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    describe('with formatters', () => {
+      beforeEach(() => {
+        wrapper.setProps({
+          formatters: [
+            formmater1,
+          ],
+        });
+      });
+
+      describe('value is "ok ok"', () => {
+        beforeEach(() => {
+          wrapper.setProps({
+            value: 'ok ok',
+          });
+        });
+
+        test('value is formatted to "ok_ok"', () => {
+          const emitted = wrapper.emitted('input');
+          expect(emitted).toBeDefined();
+          expect(emitted[0][0]).toBe('ok_ok');
+        });
+      });
+    });
+
+    describe('value is "ok ok"', () => {
+      beforeEach(() => {
+        wrapper.setProps({
+          value: 'ok ok',
+        });
+      });
+
+      describe('add formatters', () => {
+        beforeEach(() => {
+          wrapper.setProps({
+            formatters: [
+              formmater1,
+            ],
+          });
+        });
+
+        test('value is formatted to "ok_ok"', () => {
+          const emitted = wrapper.emitted('input');
+          expect(emitted).toBeDefined();
+          expect(emitted[emitted.length - 1][0]).toBe('ok_ok');
+        });
+      });
     });
   });
 
-  test('renders correctly', () => {
-    expect(wrapper).toMatchSnapshot();
+  describe('with initial formatters', () => {
+    let wrapper;
+    beforeEach(() => {
+      wrapper = shallowMount(BhText, {
+        localVue,
+        propsData: {
+          formatters: [
+            formmater1,
+          ],
+        },
+      });
+
+      describe('value is "ok ok"', () => {
+        beforeEach(() => {
+          wrapper.setProps({
+            value: 'ok ok',
+          });
+        });
+
+        test('value is formatted to "ok_ok"', () => {
+          const emitted = wrapper.emitted('input');
+          expect(emitted).toBeDefined();
+          expect(emitted[0][0]).toBe('ok_ok');
+        });
+      });
+    });
   });
 });

test/unit/specs/bh/__snapshots__/BhText.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BhText.vue renders correctly 1`] = `
+exports[`BhText.vue without initial formatters renders correctly 1`] = `
 <bhinput-stub>
   <div class="bh-text">
     <!---->