@webitel/ui-sdk 3.1.66 → 3.1.68

package/src/components/organisms/wt-notifications-bar/wt-notifications-bar.vue

@@ -6,67 +6,68 @@
         :type="notification.type"
         :key="key+notification.text"
         @close="closeNotification(notification)"
-      >{{notification.text}}
+      >{{ notification.text }}
       </wt-notification>
     </transition-group>
   </aside>
 </template>
 
 <script>
-  export default {
-    name: 'wt-notifications-bar',
-    inject: ['$eventBus'],
-    data: () => ({
-      notificationDuration: 4000,
-      notifications: [],
-    }),
-    created() {
-      try {
-        this.$eventBus.$on('notification', this.showNotification);
-      } catch (err) {
-        console.error('wt-notifications-bar cannot work without globally registered eventBus', err);
-      }
-    },
-    destroyed() {
-      this.$eventBus.$off('notification', this.showNotification);
+export default {
+  name: 'wt-notifications-bar',
+  inject: ['$eventBus'],
+  data: () => ({
+    notificationDuration: 4000,
+    notifications: [],
+  }),
+  created() {
+    try {
+      this.$eventBus.$on('notification', this.showNotification);
+    } catch (err) {
+      console.error('wt-notifications-bar cannot work without globally registered eventBus', err);
+    }
+  },
+  destroyed() {
+    this.$eventBus.$off('notification', this.showNotification);
+  },
+  methods: {
+    showNotification(notification) {
+      this.notifications.unshift(notification);
+      setTimeout(() => this.closeNotification(notification), this.notificationDuration);
     },
-    methods: {
-      showNotification(notification) {
-        this.notifications.unshift(notification);
-        setTimeout(() => this.closeNotification(notification), this.notificationDuration);
-      },
-      closeNotification(notification) {
-        const index = this.notifications.indexOf(notification);
-        this.notifications.splice(index, 1);
-      },
+    closeNotification(notification) {
+      const index = this.notifications.indexOf(notification);
+      this.notifications.splice(index, 1);
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  .wt-notifications-bar {
-    @extend %wt-scrollbar;
+.wt-notifications-bar {
+  @extend %wt-scrollbar;
 
-    position: fixed;
-    top: var(--notifications-bar-corner-margin);
-    right: var(--notifications-bar-corner-margin);
-    max-height: var(--notifications-bar-max-height);
-    overflow-y: auto;
-    overflow-x: hidden;
-    z-index: var(--notifications-bar-z-index);
+  position: fixed;
+  top: var(--notifications-bar-corner-margin);
+  right: var(--notifications-bar-corner-margin);
+  max-height: var(--notifications-bar-max-height);
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: var(--notifications-bar-z-index);
 
-    .wt-notification {
-      margin: var(--notifications-bar-notifications-margin);
-    }
+  .wt-notification {
+    margin: var(--notifications-bar-notifications-margin);
   }
+}
 
-  .wt-notifications-transition-enter-active,
-  .wt-notifications-transition-leave-active {
-    transition: all var(--transition);
-  }
-  .wt-notifications-transition-enter,
-  .wt-notifications-transition-leave-to {
-    opacity: 0;
-    transform: translateX(60px);
-  }
+.wt-notifications-transition-enter-active,
+.wt-notifications-transition-leave-active {
+  transition: all var(--transition);
+}
+
+.wt-notifications-transition-enter,
+.wt-notifications-transition-leave-to {
+  opacity: 0;
+  transform: translateX(60px);
+}
 </style>

package/src/components/organisms/wt-pagination/__tests__/WtPagination.spec.js

@@ -28,7 +28,7 @@ describe('WtPagination', () => {
     const wrapper = mount(WtPagination, {
       props: { isNext: true, page: 2 },
     });
-    const pageControls = wrapper.findAll('.wt-pagination__page-control');
+    const pageControls = wrapper.findAllComponents('.wt-pagination__page-control');
     pageControls.at(0).vm.$emit('click');
     pageControls.at(1).vm.$emit('click');
     expect(wrapper.emitted().prev.length).toBe(1);

package/src/components/organisms/wt-table/__tests__/WtTable.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import WtTable from '../wt-table.vue';
 import WtCheckbox from '../../../molecules/wt-checkbox/wt-checkbox.vue';
 
@@ -87,7 +87,7 @@ describe('WtTable', () => {
         headers,
         data,
       },
-      scopedSlots: {
+      slots: {
         'data-footer': '',
       },
     });
@@ -121,7 +121,7 @@ describe('WtTable', () => {
   });
 
   it('selects all rows at header checkbox click', async () => {
-    const wrapper = shallowMount(WtTable, {
+    const wrapper = mount(WtTable, {
       props: {
         headers,
         data,

package/src/components/organisms/wt-table/wt-table.vue

@@ -149,7 +149,7 @@ export default {
     },
 
     isTableFooter() {
-      return Object.keys(this.$scopedSlots).some((slotName) => slotName.includes('-footer'));
+      return Object.keys(this.$slots).some((slotName) => slotName.includes('-footer'));
     },
   },
 

package/src/mixins/dataFilterMixins/__tests__/apiFilterMixin.spec.js

@@ -2,9 +2,9 @@ import { shallowMount } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
 import apiFilterMixin from '../apiFilterMixin';
 
-const router = new createRouter({
+const router = createRouter({
   history: createWebHistory(),
-  routes: [],
+  routes: [{ path: '/', name: 'jest' }],
 });
 const team = ['1', '2'];
 
@@ -25,7 +25,7 @@ describe('API filter mixin', () => {
   it('Correctly sets value from $route query', async () => {
     await router.replace({ query: { team } });
     wrapper = shallowMount(Component, {
-      plugins: [router],
+      global: { plugins: [router] },
     });
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.value).toEqual(team);
@@ -33,8 +33,7 @@ describe('API filter mixin', () => {
 
   it('Sets empty array value if $route query is empty', async () => {
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
       data: () => ({
         filterQuery: 'queue',
       }),
@@ -45,8 +44,7 @@ describe('API filter mixin', () => {
   it('Resets value after $route query reset', async () => {
     await router.replace({ query: { team } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
     });
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.value).toEqual(team);

package/src/mixins/dataFilterMixins/__tests__/enumFilterMixin.spec.js

@@ -13,7 +13,7 @@ const options = [{
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [],
+  routes: [{ path: '/', name: 'jest' }],
 });
 
 describe('Enum filter mixin', () => {
@@ -29,7 +29,7 @@ describe('Enum filter mixin', () => {
   };
 
   beforeEach(() => {
-    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+    router.replace({ query: null });
   });
 
   it('Correctly sets value from $route query', async () => {
@@ -51,7 +51,7 @@ describe('Enum filter mixin', () => {
       },
     });
     await wrapper.vm.$nextTick();
-    expect(wrapper.vm.value).toEqual(options[0]);
+    expect(wrapper.vm.value).toEqual([options[0]]);
   });
 
   it('Resets value after $route query reset', async () => {

package/src/mixins/dataFilterMixins/__tests__/paginationFilterMixin.spec.js

@@ -1,10 +1,11 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
 import paginationFilterMixin from '../paginationFilterMixin';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
 const page = '2';
 const size = '20';
 
@@ -15,15 +16,14 @@ describe('Pagination filter mixin', () => {
     mixins: [paginationFilterMixin],
   };
 
-  beforeEach(() => {
-    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+  beforeEach(async () => {
+    await router.replace({ path: '/', query: null });
   });
 
   it('Correctly sets value from $route query', async () => {
-    await router.replace({ query: { page, size } });
+    await router.replace({ path: '/', query: { page, size } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
     });
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.page).toEqual(page);
@@ -32,8 +32,7 @@ describe('Pagination filter mixin', () => {
 
   it('Sets initial value if $route query is empty', async () => {
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
       data: () => ({
         filterQuery: 'queue',
       }),
@@ -43,50 +42,43 @@ describe('Pagination filter mixin', () => {
   });
 
   it('Resets value after $route query reset', async () => {
-    await router.replace({ query: { page, size } });
+    await router.replace({ path: '/', query: { page, size } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
     });
-    await wrapper.vm.$router.replace({ query: null });
+    await wrapper.vm.$router.replace({ path: '/', query: null });
     await wrapper.vm.$nextTick();
     expect(wrapper.vm.page).toEqual('1');
     expect(wrapper.vm.size).toEqual('10');
   });
 
   it('At "prev" page, changes query and emits event', async () => {
-    await router.replace({ query: { page, size } });
+    await router.replace({ path: '/', query: { page, size } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
     });
-    wrapper._emitted.input = []; // reset emitted events
-    wrapper.vm.prev();
+    await wrapper.vm.prev();
     expect(wrapper.emitted().input).toBeTruthy();
     expect(wrapper.vm.$route.query.page).toBe(`${page - 1}`);
   });
 
   it('At "next" page, changes query and emits event', async () => {
-    await router.replace({ query: { page, size } });
+    await router.replace({ path: '/', query: { page, size } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
     });
-    wrapper._emitted.input = []; // reset emitted events
-    wrapper.vm.next();
+    await wrapper.vm.next();
     expect(wrapper.emitted().input).toBeTruthy();
     expect(wrapper.vm.$route.query.page).toBe(`${+page + 1}`);
   });
 
   it('At "sizeChange", changes query and emits event', async () => {
     const newSize = '40';
-    await router.replace({ query: { page, size } });
+    await router.replace({ path: '/', query: { page, size } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
     });
-    wrapper._emitted.input = []; // reset emitted events
-    wrapper.vm.sizeChange(newSize);
+    await wrapper.vm.sizeChange(newSize);
     expect(wrapper.emitted().input).toBeTruthy();
     expect(wrapper.vm.$route.query.size).toBe(newSize);
   });

package/src/mixins/dataFilterMixins/__tests__/sortFilterMixin.spec.js

@@ -4,7 +4,7 @@ import sortFilterMixin from '../sortFilterMixin';
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [],
+  routes: [{ path: '/', name: 'jest' }],
 });
 
 const headers = [{
@@ -27,8 +27,8 @@ describe('Sort filter mixin', () => {
     data: () => ({ headers }),
   };
 
-  beforeEach(() => {
-    router.replace('/');
+  beforeEach(async () => {
+    await router.replace('/');
     wrapper = shallowMount(Component, {
       global: { plugins: [router] },
     });
@@ -40,10 +40,10 @@ describe('Sort filter mixin', () => {
     expect(queue.sort).toEqual('asc');
   });
 
-  it('After "sort" trigger, header column sort value changes properly', () => {
+  it('After "sort" trigger, header column sort value changes properly', async () => {
     let queue;
     queue = wrapper.vm.headers.find((header) => header.value === 'queue');
-    wrapper.vm.sort(queue);
+    await wrapper.vm.sort(queue);
     queue = wrapper.vm.headers.find((header) => header.value === 'queue');
     expect(queue.sort).toEqual('asc');
   });
@@ -51,7 +51,7 @@ describe('Sort filter mixin', () => {
   it('After "sort" trigger, url query changes properly', async () => {
     await router.replace({ path: '/', query: { sort: '+queue' } });
     const queue = wrapper.vm.headers.find((header) => header.value === 'queue');
-    wrapper.vm.sort(queue);
+    await wrapper.vm.sort(queue);
     expect(wrapper.vm.$route.query.sort).toEqual('-queue');
   });
 });

package/src/mixins/dataFilterMixins/__tests__/urlControllerMixin.spec.js

@@ -4,7 +4,7 @@ import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
 
 const router = createRouter({
   history: createWebHistory(),
-  routes: [],
+  routes: [{ path: '/', name: 'jest' }],
 });
 
 const filterQuery = 'team';
@@ -27,21 +27,21 @@ describe('URL Controller mixin Set and Get operations', () => {
 
   it('Array of objects', async () => {
     const value = [{ name: 'team 1', id: '1' }, { name: 'team 2', id: '2' }];
-    wrapper.vm.setValueToQuery({ filterQuery, value });
+    await wrapper.vm.setValueToQuery({ filterQuery, value });
     const queryValue = wrapper.vm.getValueFromQuery({ filterQuery });
     expect(queryValue).toEqual(['1', '2']);
   });
 
   it('Array of values', async () => {
     const value = ['hello', '1'];
-    wrapper.vm.setValueToQuery({ filterQuery, value });
+    await wrapper.vm.setValueToQuery({ filterQuery, value });
     const queryValue = wrapper.vm.getValueFromQuery({ filterQuery });
     expect(queryValue).toEqual(value);
   });
 
   it('String value', async () => {
     const value = 'hello there';
-    wrapper.vm.setValueToQuery({ filterQuery, value });
+    await wrapper.vm.setValueToQuery({ filterQuery, value });
     const queryValue = wrapper.vm.getValueFromQuery({ filterQuery });
     expect(queryValue).toEqual(value);
   });

package/src/mixins/dataFilterMixins/_urlControllerMixin/_urlControllerMixin.js

@@ -11,7 +11,7 @@ export default {
       });
     },
 
-    setValueToQuery({ filterQuery, value, storedProp = 'id' }) {
+    async setValueToQuery({ filterQuery, value, storedProp = 'id' }) {
       let newValue = '';
       if (Array.isArray(value)) {
         if (value.length && typeof value[0] !== 'object') {
@@ -23,7 +23,7 @@ export default {
         newValue = value;
       }
       if (!deepEqual(this.$route.query[filterQuery], newValue)) {
-        this.changeRouteQuery({
+        await this.changeRouteQuery({
           value: newValue,
           filterQuery,
         });

package/src/mixins/dataFilterMixins/paginationFilterMixin.js

@@ -52,7 +52,7 @@ export default {
       this.$emit('input');
       const value = `${+this.page + 1}`;
       this.page = value;
-      this.setValueToQuery({
+      return this.setValueToQuery({
         filterQuery: 'page',
         value,
       });
@@ -62,7 +62,7 @@ export default {
       this.$emit('input');
       const value = `${+this.page - 1}`;
       this.page = value;
-      this.setValueToQuery({
+      return this.setValueToQuery({
         filterQuery: 'page',
         value,
       });
@@ -70,7 +70,7 @@ export default {
 
     sizeChange(value) {
       this.$emit('input');
-      this.setValueToQuery({
+      return this.setValueToQuery({
         filterQuery: 'size',
         value,
       });

package/src/mixins/dataFilterMixins/sortFilterMixin.js

@@ -49,7 +49,7 @@ export default {
   methods: {
     sort(column) {
       const order = getNextSortOrder(column.sort);
-      this.setValue({ column, order });
+      return this.setValue({ column, order });
     },
 
     setValue({ column, order }) {
@@ -58,7 +58,7 @@ export default {
         sort: col === column ? order : null,
       }));
       const value = encodeSortQuery({ column, order });
-      this.setValueToQuery({
+      return this.setValueToQuery({
         value,
         filterQuery: this.filterQuery,
       });

package/src/mixins/validationMixin/__tests__/validationMixin.spec.js

@@ -26,7 +26,7 @@ describe('Validation mixin', () => {
       props: {
         v: {
           $error: true,
-          email: false,
+          email: { $invalid: true },
         },
       },
     });
@@ -38,7 +38,7 @@ describe('Validation mixin', () => {
       props: {
         v: {
           $error: true,
-          required: false,
+          required: { $invalid: true },
         },
       },
     });

package/src/modules/AuditForm/components/__tests__/audit-form-question-write-wrapper.spec.js

@@ -53,7 +53,7 @@ describe('AuditFormQuestionWriteWrapper', () => {
       },
     });
     wrapper.find('.audit-form-question-write-content-question')
-    .findComponent({ name: 'wt-select' }).vm.$emit('input', { value: 'options' });
+    .findComponent({ name: 'wt-select' }).vm.$emit('input', { value: EngineAuditQuestionType.Option });
     expect(wrapper.emitted()['change:question'][0][0])
     .toEqual(generateQuestionOptionsSchema());
   });

package/src/modules/AuditForm/components/__tests__/audit-form.spec.js

@@ -29,7 +29,7 @@ describe('AuditForm', () => {
     });
     wrapper.findComponent('.audit-form__add-button').vm.$emit('click');
     expect(wrapper.emitted()['update:questions'][0][0])
-    .toEqual([generateQuestionSchema()]);
+    .toEqual([generateQuestionSchema({ required: true })]);
   });
   it('delete event from child question emits update without passed question', () => {
     const wrapper = shallowMount(AuditForm, {

package/src/modules/AuditForm/components/audit-form.vue

@@ -132,7 +132,7 @@ const { reloadSortable } = useDestroyableSortable(sortableWrapper, {
   },
 });
 
-watch(v$, () => emit('update:validation', { invalid: isInvalidForm, v$ }));
+watch(v$, () => emit('update:validation', { invalid: isInvalidForm.value, v$ }));
 watchEffect(initResult);
 
 onMounted(() => {

package/src/modules/AuditForm/components/questions/options/audit-form-question-options-write-row.vue

@@ -4,6 +4,7 @@
       :label="$t('webitelUI.auditForm.option', 1)"
       :value="option.name"
       :v="v$.option.name"
+      prevent-trim
       @input="emit('update:option', { name: $event, score: option.score })"
     ></wt-input>
     <wt-input

package/src/modules/QueryFilters/components/__tests__/abstract-api-filter.spec.js

@@ -1,13 +1,13 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import { createRouter, createWebHistory } from 'vue-router';
 import AbstractApiFilter from '../abstract-api-filter.vue';
 import ApiFilterSchema from '../../classes/ApiFilterSchema';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [],
+});
 
 describe('Abstract Api Filter', () => {
   const namespace = 'jest';
@@ -17,7 +17,7 @@ describe('Abstract Api Filter', () => {
   const fetchSelectedMock = jest.fn(() => ({ items: [] }));
   jest.spyOn(filterSchema, 'search').mockImplementation(searchMock);
   jest.spyOn(filterSchema, 'fetchSelected').mockImplementation(fetchSelectedMock);
-  const store = new Vuex.Store({
+  const store = createStore({
     modules: {
       [namespace]: {
         namespaced: true,
@@ -29,9 +29,7 @@ describe('Abstract Api Filter', () => {
   });
 
   const mountOptions = {
-    localVue,
-    store,
-    router,
+    global: { plugins: [store, router] },
     props: {
       namespace,
       filterQuery,

package/src/modules/QueryFilters/components/__tests__/abstract-enum-filter.spec.js

@@ -1,19 +1,19 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import { createRouter, createWebHistory } from 'vue-router';
 import AbstractEnumFilter from '../abstract-enum-filter.vue';
 import EnumFilterSchema from '../../classes/EnumFilterSchema';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [],
+});
 
 describe('Abstract Enum Filter', () => {
   const namespace = 'jest';
   const filterQuery = 'jest';
   const filterSchema = new EnumFilterSchema({ locale: {} });
-  const store = new Vuex.Store({
+  const store = createStore({
     modules: {
       [namespace]: {
         namespaced: true,
@@ -25,9 +25,7 @@ describe('Abstract Enum Filter', () => {
   });
 
   const mountOptions = {
-    localVue,
-    store,
-    router,
+    global: { plugins: [store, router] },
     props: {
       namespace,
       filterQuery,

package/src/modules/QueryFilters/components/__tests__/filter-datetime.spec.js

@@ -1,20 +1,20 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import { createRouter, createWebHistory } from 'vue-router';
 import DatetimeFilter from '../filter-datetime.vue';
 import BaseFilterSchema from '../../classes/BaseFilterSchema';
 import baseFilterMixin from '../../mixins/baseFilterMixin/baseFilterMixin';
 
-const localVue = createLocalVue();
-localVue.use(Vuex);
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
 
 describe('DatetimeFilter Filter', () => {
   const namespace = 'jest';
   const filterQuery = 'jest';
   const filterSchema = new BaseFilterSchema();
-  const store = new Vuex.Store({
+  const store = createStore({
     modules: {
       [namespace]: {
         namespaced: true,
@@ -26,9 +26,9 @@ describe('DatetimeFilter Filter', () => {
   });
 
   const mountOptions = {
-    localVue,
-    store,
-    router,
+    global: {
+      plugins: [router, store],
+    },
     props: {
       namespace,
       filterQuery,