@itfin/components 1.2.18 → 1.2.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.18",
+  "version": "1.2.21",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -47,7 +47,7 @@
     "@storybook/vue": "=6.3.8",
     "@vue/cli-plugin-babel": "^4.5.8",
     "@vue/cli-plugin-eslint": "^4.5.8",
-    "@vue/cli-plugin-unit-jest": "^4.5.8",
+    "@vue/cli-plugin-unit-jest": "^4.5.19",
     "@vue/eslint-config-airbnb": "^5.1.0",
     "@vue/test-utils": "^1.1.1",
     "babel-eslint": "^10.1.0",
@@ -92,7 +92,20 @@
     "not dead"
   ],
   "jest": {
-    "preset": "@vue/cli-plugin-unit-jest"
+    "preset": "@vue/cli-plugin-unit-jest",
+    "testMatch": [
+      "**/src/**/*.spec.js"
+    ],
+    "testPathIgnorePatterns": [
+      "dist/"
+    ],
+    "modulePathIgnorePatterns": [
+      "dist/"
+    ],
+    "collectCoverage": true,
+    "coverageReporters": [
+      "html"
+    ]
   },
   "license": "ISC"
 }

package/src/components/datepicker/PeriodPicker.vue

@@ -207,10 +207,10 @@ class itfPeriodPicker extends Vue {
 
   get quarters() {
     return [
-      { Name: `${this.$t('quarter')} 1`, Months: [1, 2, 3], Number: 1 },
-      { Name: `${this.$t('quarter')} 2`, Months: [4, 5, 6], Number: 2 },
-      { Name: `${this.$t('quarter')} 3`, Months: [7, 8, 9], Number: 3 },
-      { Name: `${this.$t('quarter')} 4`, Months: [10, 11, 12], Number: 4 },
+      { Name: `${this.$t('components.quarter')} 1`, Months: [1, 2, 3], Number: 1 },
+      { Name: `${this.$t('components.quarter')} 2`, Months: [4, 5, 6], Number: 2 },
+      { Name: `${this.$t('components.quarter')} 3`, Months: [7, 8, 9], Number: 3 },
+      { Name: `${this.$t('components.quarter')} 4`, Months: [10, 11, 12], Number: 4 },
     ];
   }
 

package/src/components/popover/ConfirmPopover.vue

@@ -37,13 +37,13 @@ export default @Component({
 })
 class itfConfirmPopover extends Vue {
   @PropSync('visible') value;
-  @Prop({ type: String, default: function() { this.$t('areYouSureToDeleteThis'); } }) title;
+  @Prop({ type: String, default: function() { return this.$t('components.areYouSureToDeleteThis'); } }) title;
   @Prop({ type: String, default: '' }) message;
   @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top'].includes(value) }) placement;
   @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;
 
-  @Prop({ type: String, default: function() { this.$t('noKeepIt'); } }) cancelCaption;
-  @Prop({ type: String, default: function() { this.$t('yesDelete'); } }) confirmCaption;
+  @Prop({ type: String, default: function() { return this.$t('components.noKeepIt'); } }) cancelCaption;
+  @Prop({ type: String, default: function() { return this.$t('components.yesDelete'); } }) confirmCaption;
   @Prop({ type: String, default: '' }) cancelClass;
   @Prop({ type: String, default: 'text-danger' }) confirmClass;
 

package/src/helpers/validators.js

@@ -15,6 +15,10 @@ const HEX_REGEXP = /[0-9A-Fa-f]{6}/;
 
 export const MEDIUM_TEXT_LENGTH = 16777215;
 
+function isEmpty(v) {
+  return v === '' || typeof v === 'undefined' || v === null;
+}
+
 export function differentValidation (value, message) {
   return (v, $t) => !v || !(v === value) || (message || $t('components.theValueMustBeDifferent'));
 }
@@ -48,7 +52,7 @@ export function passMatchValidation (password, message) {
 }
 
 export function emptyValidation (message) {
-  return (v, $t) => (v !== '' && typeof v !== 'undefined' && v !== null) || (message || $t('components.thisFieldIsRequired'));
+  return (v, $t) => !isEmpty(v) || (message || $t('components.thisFieldIsRequired'));
 }
 
 export function emptyArrayValidation (message) {
@@ -64,11 +68,11 @@ export function minMaxValidation (min = 0, max = 100, message) {
 }
 
 export function minValidation (min = 0, message) {
-  return (v, $t) => !v || (v >= min) || (message || $t('components.theValueMustBeGreaterThanOrEqualToMin', {min}));
+  return (v, $t) => (!isEmpty(v) && (Number(v) >= min)) || (message || $t('components.theValueMustBeGreaterThanOrEqualToMin', {min}));
 }
 
 export function maxValidation (max, message) {
-  return (v, $t) => (v <= max) || (message || $t('components.mustBeLessThanMax'));
+  return (v, $t) => (!isEmpty(v) && (Number(v) <= max)) || (message || $t('components.mustBeLessThanMax'));
 }
 
 export function preventStuffingValidation (message) {

package/src/helpers/validators.spec.js

@@ -0,0 +1,28 @@
+import {emptyValidation, minValidation, maxValidation} from './validators';
+
+describe('Validators', () => {
+  const $t = (str) => str;
+
+  test('emptyValidation', () => {
+    expect(emptyValidation()('', $t)).toEqual('components.thisFieldIsRequired');
+    expect(emptyValidation()(null, $t)).toEqual('components.thisFieldIsRequired');
+    expect(emptyValidation()(undefined, $t)).toEqual('components.thisFieldIsRequired');
+    expect(emptyValidation()('1', $t)).toEqual(true);
+  });
+
+  test('minValidation', () => {
+    expect(minValidation()(0, $t)).toEqual(true);
+    expect(minValidation()(null, $t)).toEqual('components.theValueMustBeGreaterThanOrEqualToMin');
+    expect(minValidation()(undefined, $t)).toEqual('components.theValueMustBeGreaterThanOrEqualToMin');
+    expect(minValidation(1)(0, $t)).toEqual('components.theValueMustBeGreaterThanOrEqualToMin');
+    expect(minValidation(1)('0', $t)).toEqual('components.theValueMustBeGreaterThanOrEqualToMin');
+  });
+
+  test('maxValidation', () => {
+    expect(maxValidation(1)(0, $t)).toEqual(true);
+    expect(maxValidation()(null, $t)).toEqual('components.mustBeLessThanMax');
+    expect(maxValidation()(undefined, $t)).toEqual('components.mustBeLessThanMax');
+    expect(maxValidation(1)(0, $t)).toEqual(true);
+    expect(maxValidation(1)('0', $t)).toEqual(true);
+  });
+});