@webitel/ui-sdk 3.1.66 → 3.1.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.1.66",
+  "version": "3.1.68",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/components/molecules/wt-button-select/__tests__/WtButtonSelect.spec.js

@@ -9,7 +9,7 @@ describe('WtSelectButton', () => {
 
   it('renders a button content via default slot', () => {
     const content = 'button content';
-    const wrapper = shallowMount(WtSelectButton, {
+    const wrapper = mount(WtSelectButton, {
       slots: {
         default: content,
       },

package/src/components/molecules/wt-checkbox/__tests__/WtCheckbox.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import WtCheckbox from '../wt-checkbox.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
@@ -16,7 +16,7 @@ describe('WtCheckbox', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtCheckbox, {
+    const wrapper = mount(WtCheckbox, {
       stubs: {
         WtLabel,
         WtIcon,
@@ -28,7 +28,7 @@ describe('WtCheckbox', () => {
 
   it('toggles passed value at click', () => {
     const selected = true;
-    const wrapper = shallowMount(WtCheckbox, {
+    const wrapper = mount(WtCheckbox, {
       stubs: {
         WtLabel,
         WtIcon,

package/src/components/molecules/wt-datepicker/__tests__/WtDatepicker.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import WtDatepicker from '../wt-datepicker.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
@@ -16,7 +16,7 @@ describe('WtDatepicker', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtDatepicker, {
+    const wrapper = mount(WtDatepicker, {
       stubs: {
         WtLabel,
         WtIcon,

package/src/components/molecules/wt-input/__tests__/WtInput.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import WtInput from '../wt-input.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 
@@ -14,7 +14,7 @@ describe('WtInput', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtInput, {
+    const wrapper = mount(WtInput, {
       stubs: {
         WtLabel,
       },

package/src/components/molecules/wt-radio/__tests__/WtRadio.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import WtRadio from '../wt-radio.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 import WtIcon from '../../../atoms/wt-icon/wt-icon.vue';
@@ -16,7 +16,7 @@ describe('WtRadio', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtRadio, {
+    const wrapper = mount(WtRadio, {
       stubs: {
         WtLabel,
         WtIcon,
@@ -29,7 +29,7 @@ describe('WtRadio', () => {
   it('toggles passed value at click', () => {
     const selected = '';
     const value = 'jest';
-    const wrapper = shallowMount(WtRadio, {
+    const wrapper = mount(WtRadio, {
       stubs: {
         WtLabel,
         WtIcon,

package/src/components/molecules/wt-select/__tests__/WtSelect.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import WtSelect from '../wt-select.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 
@@ -15,7 +15,7 @@ describe('WtSelect', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtSelect, {
+    const wrapper = mount(WtSelect, {
       stubs: {
         WtLabel,
         WtIcon: true,

package/src/components/molecules/wt-select/mixins/__tests__/multiselectMixin.spec.js

@@ -17,7 +17,7 @@ describe('MultiselectMixin', () => {
     const wrapper = shallowMount(Component, {
       props: { options },
     });
-    expect(wrapper.vm.selectOptions).toBe(options);
+    expect(wrapper.vm.selectOptions).toEqual(options);
   });
 
   it('Correctly computes internal search options: search case', async () => {
@@ -27,6 +27,6 @@ describe('MultiselectMixin', () => {
       props: { options, searchMethod: () => ({ items: searchOptions }) },
     });
     await wrapper.vm.$nextTick();
-    expect(wrapper.vm.selectOptions).toBe(searchOptions);
+    expect(wrapper.vm.selectOptions).toEqual(searchOptions);
   });
 });

package/src/components/molecules/wt-switcher/__tests__/WtSwitcher.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import WtSwitcher from '../wt-switcher.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 
@@ -12,7 +12,7 @@ describe('WtSwitcher', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtSwitcher, {
+    const wrapper = mount(WtSwitcher, {
       stubs: { WtLabel },
       props: { label },
     });
@@ -21,7 +21,7 @@ describe('WtSwitcher', () => {
 
   it('toggles passed value at click', () => {
     const value = true;
-    const wrapper = shallowMount(WtSwitcher, {
+    const wrapper = mount(WtSwitcher, {
       stubs: { WtLabel },
       props: { value },
     });

package/src/components/molecules/wt-tags-input/__tests__/WtTagsInput.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import WtTagsInput from '../wt-tags-input.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 
@@ -10,7 +10,7 @@ describe('WtTagsInput', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtTagsInput, {
+    const wrapper = mount(WtTagsInput, {
       stubs: { WtLabel },
       props: { label },
     });
@@ -19,7 +19,7 @@ describe('WtTagsInput', () => {
 
   it('by default emits "input" event at native "tag" event', () => {
     const tag = '123';
-    const wrapper = shallowMount(WtTagsInput, {
+    const wrapper = mount(WtTagsInput, {
       props: {
         value: [],
       },
@@ -30,7 +30,7 @@ describe('WtTagsInput', () => {
 
   it('in manual mode doesnt emit "input" event at native "tag" event', () => {
     const tag = '123';
-    const wrapper = shallowMount(WtTagsInput, {
+    const wrapper = mount(WtTagsInput, {
       props: {
         value: [],
         manualTagging: true,

package/src/components/molecules/wt-textarea/__tests__/WtTextarea.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import WtTextarea from '../wt-textarea.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 
@@ -14,7 +14,7 @@ describe('WtTextarea', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtTextarea, {
+    const wrapper = mount(WtTextarea, {
       stubs: {
         WtLabel,
       },

package/src/components/molecules/wt-time-input/__tests__/WtTimeInput.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import WtTimeInput from '../wt-time-input.vue';
 import WtLabel from '../../wt-label/wt-label.vue';
 
@@ -14,7 +14,7 @@ describe('WtTimeInput', () => {
 
   it('renders label text when passed', () => {
     const label = 'Hello there';
-    const wrapper = shallowMount(WtTimeInput, {
+    const wrapper = mount(WtTimeInput, {
       stubs: {
         WtLabel,
       },

package/src/components/molecules/wt-time-input/wt-time-input.vue

@@ -27,7 +27,7 @@
         :max="maxValue"
         :disabled="disabled"
         type="number"
-        v-on="listeners"
+        @input="$emit('input', $event.target.value)"
       >
     </div>
     <wt-input-info
@@ -41,150 +41,144 @@
 <script>
 import validationMixin from '../../../mixins/validationMixin/validationMixin';
 
-  export default {
-    name: 'wt-time-input',
-    mixins: [validationMixin],
-    props: {
-      /**
-       * Current input value (`v-model`)
-       */
-      value: {
-        type: Number,
-        default: 0,
-      },
-      /**
-       * Form input label
-       */
-      label: {
-        type: String,
-        default: '',
-      },
-      /**
-       * Form input name
-       */
-      name: {
-        type: String,
-        default: '',
-      },
-      /**
-       * Time type: day, minute, second
-       */
-      maxValue: {
-        type: Number,
-      },
-      /**
-       * Native input required attribute
-       */
-      required: {
-        type: Boolean,
-        default: false,
-        description: 'Native input required attribute',
-      },
-      /**
-       * Native input disabled attribute
-       */
-      disabled: {
-        type: Boolean,
-        default: false,
-        description: 'Native input disabled attribute',
-      },
-
-      outline: {
-        type: Boolean,
-        default: false,
-      },
-
-      labelProps: {
-        type: Object,
-        description: 'Object with props, passed down to wt-label as props',
-      },
-
-      hideInputInfo: {
-        type: Boolean,
-        default: false,
-      },
+export default {
+  name: 'wt-time-input',
+  mixins: [validationMixin],
+  props: {
+    /**
+     * Current input value (`v-model`)
+     */
+    value: {
+      type: Number,
+      default: 0,
     },
-    computed: {
-      hasLabel() {
-        return !!(this.label || this.$slots.label);
-      },
-      listeners() {
-        return {
-          ...this.$listeners,
-          input: (event) => this.$emit('input', event.target.value),
-        };
-      },
-      showInfo() {
-        return this.isValidation && !this.hideInputInfo;
-      },
+    /**
+     * Form input label
+     */
+    label: {
+      type: String,
+      default: '',
     },
-  };
+    /**
+     * Form input name
+     */
+    name: {
+      type: String,
+      default: '',
+    },
+    /**
+     * Time type: day, minute, second
+     */
+    maxValue: {
+      type: Number,
+    },
+    /**
+     * Native input required attribute
+     */
+    required: {
+      type: Boolean,
+      default: false,
+      description: 'Native input required attribute',
+    },
+    /**
+     * Native input disabled attribute
+     */
+    disabled: {
+      type: Boolean,
+      default: false,
+      description: 'Native input disabled attribute',
+    },
+
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+
+    labelProps: {
+      type: Object,
+      description: 'Object with props, passed down to wt-label as props',
+    },
+
+    hideInputInfo: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    hasLabel() {
+      return !!(this.label || this.$slots.label);
+    },
+    showInfo() {
+      return this.isValidation && !this.hideInputInfo;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .wt-time-input {
-    display: inline-block;
-    cursor: text;
+.wt-time-input {
+  display: inline-block;
+  cursor: text;
 
-    &--disabled {
-      pointer-events: none;
-    }
+  &--disabled {
+    pointer-events: none;
   }
+}
+
+.wt-time-input__wrapper {
+  position: relative;
+}
 
-  .wt-time-input__wrapper {
-    position: relative;
+.wt-label {
+  text-align: center;
+
+  .wt-time-input:hover &,
+  .wt-time-input:focus-within & {
+    color: var(--form-label--hover-color);
   }
 
-  .wt-label {
-    text-align: center;
+  .wt-time-input--invalid:hover &,
+  .wt-time-input--invalid:focus-within & {
+    color: var(--label--invalid-color);
+  }
+}
+
+.wt-time-input__input {
+  @extend %typo-body-1;
+
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--input-padding);
+  color: var(--form-input-color);
+  border: var(--input-border);
+  border-color: var(--form-border-color);
+  border-radius: var(--border-radius);
+  transition: var(--transition);
+
+  .wt-time-input:hover &,
+  &:focus {
+    border-color: var(--form-border--hover-color);
+  }
+
+  .wt-time-input--outline & {
+    border-color: var(--form-outline-border-color);
+  }
 
-    .wt-time-input:hover &,
-    .wt-time-input:focus-within & {
-      color: var(--form-label--hover-color);
-    }
+  .wt-time-input--outline:hover &,
+  .wt-time-input--outline &:focus {
+    border-color: var(--form-outline-border--hover-color);
+  }
 
-    .wt-time-input--invalid:hover &,
-    .wt-time-input--invalid:focus-within & {
-      color: var(--label--invalid-color);
-    }
+  .wt-time-input--disabled & {
+    background: var(--form-border--disabled-color);
+    border-color: var(--form-border--disabled-color);
   }
 
-  .wt-time-input__input {
-    @extend %typo-body-1;
-
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    padding: var(--input-padding);
-    color: var(--form-input-color);
-    border: var(--input-border);
-    border-color: var(--form-border-color);
-    border-radius: var(--border-radius);
-    transition: var(--transition);
-
-    .wt-time-input:hover &,
-    &:focus {
-      border-color: var(--form-border--hover-color);
-    }
-
-    .wt-time-input--outline & {
-      border-color: var(--form-outline-border-color);
-    }
-
-    .wt-time-input--outline:hover &,
-    .wt-time-input--outline &:focus {
-      border-color: var(--form-outline-border--hover-color);
-    }
-
-    .wt-time-input--disabled & {
-      background: var(--form-border--disabled-color);
-      border-color: var(--form-border--disabled-color);
-    }
-
-    .wt-time-input--invalid &,
-    .wt-time-input--invalid:hover & {
-      border-color: var(--false-color);
-      outline: none; // prevent outline overlapping false color
-    }
+  .wt-time-input--invalid &,
+  .wt-time-input--invalid:hover & {
+    border-color: var(--false-color);
+    outline: none; // prevent outline overlapping false color
   }
+}
 </style>

package/src/components/molecules/wt-timepicker/__tests__/WtTimepicker.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import WtTimepicker from '../wt-timepicker.vue';
 import WtTimeInput from '../../wt-time-input/wt-time-input.vue';
 
@@ -13,7 +13,7 @@ describe('WtTimepicker', () => {
   });
 
   it('renders only specified by format time inputs', () => {
-    const wrapper = shallowMount(WtTimepicker, {
+    const wrapper = mount(WtTimepicker, {
       stubs: {
         WtTimeInput,
       },
@@ -22,12 +22,12 @@ describe('WtTimepicker', () => {
     expect(wrapper.findAllComponents(WtTimeInput).length).toBe(1);
   });
 
-  it('Correctly converts value from MIN time-input to output', () => {
+  it('Correctly converts value from MIN time-input to output', async () => {
     const value = 0;
-    const wrapper = shallowMount(WtTimepicker, {
-      stubs: {
-        WtTimeInput,
-      },
+    const wrapper = mount(WtTimepicker, {
+      // stubs: {
+      //   WtTimeInput,
+      // },
       props: { value },
     });
     wrapper.findAllComponents(WtTimeInput).at(0).vm.$emit('input', 21);
@@ -36,7 +36,7 @@ describe('WtTimepicker', () => {
 
   it('Correctly converts value from HOUR time-input to output', () => {
     const value = 0;
-    const wrapper = shallowMount(WtTimepicker, {
+    const wrapper = mount(WtTimepicker, {
       stubs: {
         WtTimeInput,
       },
@@ -48,7 +48,7 @@ describe('WtTimepicker', () => {
 
   it('Correctly converts value from SEC time-input to output', () => {
     const value = 0;
-    const wrapper = shallowMount(WtTimepicker, {
+    const wrapper = mount(WtTimepicker, {
       stubs: {
         WtTimeInput,
       },

package/src/components/molecules/wt-timepicker/wt-timepicker.vue

@@ -10,30 +10,33 @@
     <div class="wt-timepicker__wrapper">
       <wt-time-input
         v-if="isHour"
-        v-model="hour"
+        :value="hour"
         :v="v"
         :label="label ? null : $t('webitelUI.timepicker.hour') "
         :maxValue="dateMode ? null : 23"
         :disabled="disabled"
         hide-input-info
+        @input="hour = $event"
       ></wt-time-input>
       <wt-time-input
         v-if="isMin"
-        v-model="min"
+        :value="min"
         :v="v"
         :label="label ? null : $t('webitelUI.timepicker.min')"
         :maxValue="59"
         :disabled="disabled"
         hide-input-info
+        @input="min = $event"
       ></wt-time-input>
       <wt-time-input
         v-if="isSec"
-        v-model="sec"
+        :value="sec"
         :v="v"
         :label="label ? null :  $t('webitelUI.timepicker.sec')"
         :maxValue="59"
         :disabled="disabled"
         hide-input-info
+        @input="sec = $event"
       ></wt-time-input>
     </div>
     <wt-input-info
@@ -50,7 +53,7 @@ import validationMixin from '../../../mixins/validationMixin/validationMixin';
 const SEC_IN_HOUR = 60 * 60;
 const SEC_IN_MIN = 60;
 
-export default {
+export default  {
   name: 'wt-timepicker',
   mixins: [validationMixin],
   props: {

package/src/components/organisms/wt-navigation-bar/__tests__/WtNavigationBar.spec.js

@@ -60,9 +60,9 @@ describe('WtNavigationBar', () => {
       },
       props: { nav },
     });
-    wrapper.find('.wt-navigation-bar__nav-expansion').trigger('click');
+    await wrapper.find('.wt-navigation-bar__nav-expansion').trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('.wt-navigation-bar__nav-item-link--subnav').attributes('to'))
+    expect(wrapper.findComponent('.wt-navigation-bar__nav-item-link--subnav').attributes('href'))
       .toBe('/2/3');
   });
 });

package/src/components/organisms/wt-notifications-bar/__tests__/WtNotificationsBar.spec.js

@@ -6,14 +6,14 @@ import eventBus from '../../../../scripts/eventBus';
 describe('WtNotificationsBar', () => {
   it('renders a component', () => {
     const wrapper = shallowMount(WtNotificationsBar, {
-      mocks: { $eventBus: eventBus },
+      global: { provide: { $eventBus: eventBus } },
     });
     expect(wrapper.classes('wt-notifications-bar')).toBe(true);
   });
 
   it('shows notification at event bus event', async () => {
     const wrapper = shallowMount(WtNotificationsBar, {
-      mocks: { $eventBus: eventBus },
+      global: { provide: { $eventBus: eventBus } },
     });
     wrapper.vm.$eventBus.$emit('notification', {
       type: 'error', text: 'error',
@@ -24,7 +24,7 @@ describe('WtNotificationsBar', () => {
 
   it('closes notification manually', async () => {
     const wrapper = shallowMount(WtNotificationsBar, {
-      mocks: { $eventBus: eventBus },
+      global: { provide: { $eventBus: eventBus } },
     });
     wrapper.vm.$eventBus.$emit('notification', {
       type: 'error', text: 'error',
@@ -37,7 +37,7 @@ describe('WtNotificationsBar', () => {
 
   it('closes notification automatically', async () => {
     const wrapper = shallowMount(WtNotificationsBar, {
-      mocks: { $eventBus: eventBus },
+      global: { provide: { $eventBus: eventBus } },
       data: () => ({ notificationDuration: 100 }),
     });
     wrapper.vm.$eventBus.$emit('notification', {