fix(filter): prevent crashes for null values, cover filter by tests

Fixes #510

Author: probil

src/__tests__/index.test.js

@@ -1,6 +1,6 @@
 import { createLocalVue, mount } from '@vue/test-utils';
 import createNumberMask from 'text-mask-addons/dist/createNumberMask';
-import VueMask, { VueMaskDirective, VueMaskPlugin } from '../index';
+import VueMask, { VueMaskDirective, VueMaskPlugin, VueMaskFilter } from '../index';
 import { timeRangeMask } from '../utils/timeRangeMask';
 
 describe('plugin/directive registration', () => {
@@ -18,10 +18,20 @@ describe('plugin/directive registration', () => {
     expect(VueMaskPlugin).toEqual(expect.any(Function));
   });
 
+  it('named export `VueMaskFilter` should be a function', () => {
+    expect(VueMaskFilter).toEqual(expect.any(Function));
+  });
+
   it('named export `VueMaskDirective` should be an object', () => {
     expect(VueMaskDirective).toEqual(expect.any(Object));
   });
 
+  it('should register `VMask` filter', () => {
+    expect(Vue.options.filters.VMask).toBeUndefined();
+    Vue.use(VueMask);
+    expect(Vue.options.filters.VMask).toEqual(expect.any(Function));
+  });
+
   it('should register `v-mask` directive', () => {
     expect(Vue.options.directives.mask).toBeUndefined();
     Vue.use(VueMask);
@@ -234,3 +244,43 @@ describe('directive usage', () => {
     expect(wrapper.vm.$el.value).toBe('19:32');
   });
 });
+
+describe('filter usage', () => {
+  let mountWithMask;
+
+  beforeEach(() => {
+    const localVue = createLocalVue();
+    localVue.use(VueMask);
+    mountWithMask = (arg, options) => mount(arg, { ...options, localVue });
+  });
+
+  it('should mask static string', () => {
+    const wrapper = mountWithMask({
+      template: '<span>{{ "9999999999" | VMask("(###) ###-####") }}</span>',
+    });
+    expect(wrapper.text()).toBe('(999) 999-9999');
+  });
+
+  it('should mask static number', () => {
+    const wrapper = mountWithMask({
+      template: '<span>{{ 9999999999 | VMask("(###) ###-####") }}</span>',
+    });
+    expect(wrapper.text()).toBe('(999) 999-9999');
+  });
+
+  it('should mask dynamic value', () => {
+    const wrapper = mountWithMask({
+      data: () => ({ val: '8888888888' }),
+      template: '<span>{{ val | VMask("(###) ###-####") }}</span>',
+    });
+    expect(wrapper.text()).toBe('(888) 888-8888');
+  });
+
+  it.each([null, undefined])('should pass through %p without modification', (val) => {
+    const wrapper = mountWithMask({
+      data: () => ({ val }),
+      template: '<span>{{ val | VMask("(###) ###-####") }}</span>',
+    });
+    expect(wrapper.text()).toBe('');
+  });
+});

src/filter.js

@@ -1,6 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import conformToMask from 'text-mask-core/src/conformToMask';
 import { stringMaskToRegExpMask } from './maskToRegExpMask';
+import { isString } from './utils';
 
 /**
  * Vue filter definition
@@ -9,6 +10,7 @@ import { stringMaskToRegExpMask } from './maskToRegExpMask';
  */
 export default (value, stringMask) => {
   const mask = stringMaskToRegExpMask(stringMask);
-  const { conformedValue } = conformToMask(value, mask, { guide: false });
+  if (!isString(value) && !Number.isFinite(value)) return value;
+  const { conformedValue } = conformToMask(`${value}`, mask, { guide: false });
   return conformedValue;
 };