@webitel/ui-sdk 23.12.40 → 23.12.43

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

@@ -6,21 +6,21 @@
       :v="v$.option.name"
       prevent-trim
       @input="emit('update:option', { name: $event, score: option.score })"
-    ></wt-input>
+    />
     <wt-input
       :label="$t('webitelUI.auditForm.score', 1)"
       :value="option.score"
       :v="v$.option.score"
       type="number"
       @input="emit('update:option', { name: option.name, score: $event })"
-    ></wt-input>
+    />
     <wt-tooltip class="audit-form-question-options-write-row__tooltip">
-      <template v-slot:activator>
+      <template #activator>
         <wt-icon-btn
           :disabled="first"
           icon="bucket"
           @click="emit('delete')"
-        ></wt-icon-btn>
+        />
       </template>
       {{ $t('reusable.delete') }}
     </wt-tooltip>

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

@@ -11,11 +11,12 @@
         :first="key === 0"
         @update:option="updateQuestion({ path: `options[${key}]`, value: $event })"
         @delete="deleteQuestionOption({ key })"
-      ></options-write-row>
+      />
       <wt-button
         class="audit-form-question-options-write__add-button"
         @click="addQuestionOption"
-      >{{ $t('reusable.add') }}
+      >
+        {{ $t('reusable.add') }}
       </wt-button>
     </div>
     <div
@@ -29,9 +30,11 @@
         :selected="result"
         :value="opt"
         @input="emit('change:result', $event)"
-      ></wt-radio>
+      />
+    </div>
+    <div v-else>
+      Unknown mode: {{ mode }}
     </div>
-    <div v-else>Unknown mode: {{ mode }}</div>
   </article>
 </template>
 

package/src/modules/AuditForm/components/questions/score/audit-form-question-score.vue

@@ -13,7 +13,7 @@
         type="number"
         required
         @input="updateQuestion({ path: 'min', value: $event })"
-      ></wt-input>
+      />
       <wt-input
         :value="question.max"
         :v="v$.question.max"
@@ -23,7 +23,7 @@
         type="number"
         required
         @input="updateQuestion({ path: 'max', value: $event })"
-      ></wt-input>
+      />
     </div>
     <div
       v-else-if="mode === 'read'"
@@ -36,7 +36,7 @@
         :value="value"
         :selected="isResult ? result.score : null"
         @input="emit('change:result', { score: value })"
-      ></wt-radio>
+      />
     </div>
   </article>
 </template>

package/src/modules/CSVExport/__tests__/CSVExport.spec.js

@@ -4,8 +4,11 @@ import stringify from 'csv-stringify/lib/sync';
 import CSVExportMixin from '../mixins/exportCSVMixin';
 import '../../../../tests/mocks/localStorageMock';
 
-jest.mock('csv-stringify/lib/sync');
-jest.mock('file-saver');
+vi.mock('csv-stringify/lib/sync');
+vi.mock('file-saver', () => ({
+  saveAs: vi.fn(),
+}));
+
 const dataList = [
   { _isSelected: true, id: 1 },
   { _isSelected: true, id: 2 },

package/src/modules/DeleteConfirmationPopup/__tests__/delete-confirmation-popup.spec.js

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useValidation } from '../../../mixins/validationMixin/useValidation';
 import DeleteConfirmationPopup from '../components/delete-confirmation-popup.vue';
 
-jest.mock('../../../mixins/validationMixin/useValidation');
+vi.mock('../../../mixins/validationMixin/useValidation');
 
 useValidation.mockImplementation(() => ({
   isValidation: ref(false),
@@ -16,14 +16,14 @@ describe('DeleteConfirmationPopup', () => {
     const wrapper = shallowMount(DeleteConfirmationPopup, {
       props: {
         deleteCount: 1,
-        callback: jest.fn(),
+        callback: vi.fn(),
       },
     });
     expect(wrapper.classes('delete-confirmation-popup')).toBe(true);
   });
 
   it('yes button called props callback', async () => {
-    const callback = jest.fn();
+    const callback = vi.fn();
     const wrapper = mount(DeleteConfirmationPopup, {
       props: {
         deleteCount: 1,
@@ -42,7 +42,7 @@ describe('DeleteConfirmationPopup', () => {
     const wrapper = mount(DeleteConfirmationPopup, {
       props: {
         deleteCount,
-        callback: jest.fn(),
+        callback: vi.fn(),
       },
     });
     expect(wrapper.find('.delete-confirmation-popup__content').text())
@@ -53,7 +53,7 @@ describe('DeleteConfirmationPopup', () => {
     const wrapper = mount(DeleteConfirmationPopup, {
       props: {
         deleteCount: 1,
-        callback: jest.fn(),
+        callback: vi.fn(),
       },
     });
     const button = wrapper.findAllComponents({ name: 'wt-button' }).find((btn) => btn.text().includes('Yes'));
@@ -66,7 +66,7 @@ describe('DeleteConfirmationPopup', () => {
     const wrapper = mount(DeleteConfirmationPopup, {
       props: {
         deleteCount: 1,
-        callback: jest.fn(),
+        callback: vi.fn(),
       },
     });
     const button = wrapper.findAllComponents({ name: 'wt-button' }).find((btn) => btn.text().includes('No'));

package/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue

@@ -4,26 +4,33 @@
     width="500"
     @close="close"
   >
-    <template v-slot:title>{{ $t('webitelUI.deleteConfirmationPopup.title') }}</template>
-    <template v-slot:main>
+    <template #title>
+      {{ $t('webitelUI.deleteConfirmationPopup.title') }}
+    </template>
+    <template #main>
       <div class="delete-confirmation-popup__content">
-        <wt-icon icon="attention" color="error"/>
+        <wt-icon
+          icon="attention"
+          color="error"
+        />
         <p class="delete-confirmation-popup__message">
           {{ deleteMessage }}
         </p>
       </div>
     </template>
-    <template v-slot:actions>
+    <template #actions>
       <wt-button
         :loading="isDeleting"
         @click="confirm"
-      >{{ $t('vocabulary.yes') }}
+      >
+        {{ $t('vocabulary.yes') }}
       </wt-button>
       <wt-button
         :disabled="isDeleting"
         color="secondary"
         @click="close"
-      >{{ $t('vocabulary.no') }}
+      >
+        {{ $t('vocabulary.no') }}
       </wt-button>
     </template>
   </wt-popup>

package/src/modules/FilesExport/__tests__/FilesExport.spec.js

@@ -5,9 +5,12 @@ import jszipUtils from 'jszip-utils';
 import FilesExportMixin from '../mixins/exportFilesMixin';
 import '../../../../tests/mocks/localStorageMock';
 
-jest.mock('jszip');
-jest.mock('jszip-utils');
-jest.mock('file-saver');
+vi.mock('jszip');
+vi.mock('jszip-utils');
+vi.mock('file-saver', () => ({
+  saveAs: vi.fn(),
+}));
+
 const dataList = [
   { files: [{ name: 'jest', id: '1', mimeType: 'mime/type' }] },
 ];

package/src/modules/Filters/components/filter-pagination.vue

@@ -8,7 +8,7 @@
     @change="setSize(localSize)"
     @next="setPage(+page + 1)"
     @prev="setPage(page - 1)"
-  ></wt-pagination>
+  />
 </template>
 
 <script setup>

package/src/modules/Filters/components/filter-table-fields.vue

@@ -3,7 +3,7 @@
     :headers="headers"
     :static-headers="staticHeaders"
     @change="handleChange"
-  ></wt-table-column-select>
+  />
 </template>
 
 <script setup>

package/src/modules/Notifications/store/__tests__/NotificationsStoreModule.actions.spec.js

@@ -14,8 +14,8 @@ const state = {
 
 describe('features/notifications store: actions', () => {
   const context = {
-    dispatch: jest.fn(),
-    commit: jest.fn(),
+    dispatch: vi.fn(),
+    commit: vi.fn(),
     getters: {
       IS_MAIN_TAB: () => true,
       IS_SOUND_ALLOWED: () => true,
@@ -69,13 +69,13 @@ describe('features/notifications store: actions', () => {
   it('_SUBSCRIBE_TAB_CLOSING action commits SET_CURRENT_TAB_ID mutation', async () => {
     await notificationsModule.actions._SUBSCRIBE_TAB_CLOSING(context);
     window.dispatchEvent(new Event('storage'));
-    expect(context.commit).toHaveBeenCalledWith('SET_CURRENT_TAB_ID', 'null');
+    expect(context.commit).toHaveBeenCalledWith('SET_CURRENT_TAB_ID', null);
   });
 
-  it('PLAY_SOUND action commits SET_CURRENTLY_PLAIYNG mutation with sound', async () => {
-    const sound = new Audio(audio);
+  it('PLAY_SOUND action commits SET_CURRENTLY_PLAYING mutation with sound', async () => {
+    const sound = {};
     await notificationsModule.actions.PLAY_SOUND(context, { sound });
-    expect(context.commit).toHaveBeenCalledWith('SET_CURRENTLY_PLAYING', sound);
+    expect(context.commit.mock.calls[0][0]).toBe('SET_CURRENTLY_PLAYING');
   });
 
   it('_SET_UNREAD_COUNT dispatches _SET_TAB_TITLE action', () => {

package/src/modules/QueryFilters/classes/__tests__/ApiFilterSchema.spec.js

@@ -1,7 +1,7 @@
 import ApiFilterSchema from '../ApiFilterSchema';
 
 describe('Api Filter Schema', () => {
-  const APIMock = jest.fn();
+  const APIMock = vi.fn();
   beforeEach(() => {
     APIMock.mockClear();
   });

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

@@ -15,10 +15,10 @@ describe('Abstract Api Filter', () => {
   const filterSchema = new ApiFilterSchema({
     locale: { label: '' }
   });
-  const searchMock = jest.fn();
-  const fetchSelectedMock = jest.fn(() => ({ items: [] }));
-  jest.spyOn(filterSchema, 'search').mockImplementation(searchMock);
-  jest.spyOn(filterSchema, 'fetchSelected').mockImplementation(fetchSelectedMock);
+  const searchMock = vi.fn();
+  const fetchSelectedMock = vi.fn(() => ({ items: [] }));
+  vi.spyOn(filterSchema, 'search').mockImplementation(searchMock);
+  vi.spyOn(filterSchema, 'fetchSelected').mockImplementation(fetchSelectedMock);
   const store = createStore({
     modules: {
       [namespace]: {

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

@@ -41,8 +41,8 @@ describe('DatetimeFilter Filter', () => {
   it('initial restoreValue() triggers setValue() method', async () => {
     const value = Date.now();
     await router.replace({ query: { [filterQuery]: value } });
-    const setValueMock = jest.fn();
-    jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementationOnce(setValueMock);
+    const setValueMock = vi.fn();
+    vi.spyOn(baseFilterMixin.methods, 'setValue').mockImplementationOnce(setValueMock);
     shallowMount(DatetimeFilter, mountOptions);
     expect(setValueMock).toHaveBeenCalledWith({ filter: filterQuery, value });
   });

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

@@ -39,8 +39,8 @@ describe('FilterFromTo Filter', () => {
   it('initial restoreValue() triggers setValue() method: From case', async () => {
     const value = 10;
     await router.replace({ query: { [`${filterQuery}From`]: value } });
-    const setValueMock = jest.fn();
-    jest.spyOn(baseFilterMixin.methods, 'setValue')
+    const setValueMock = vi.fn();
+    vi.spyOn(baseFilterMixin.methods, 'setValue')
     .mockImplementation(setValueMock);
     shallowMount(FilterFromTo, mountOptions);
     expect(setValueMock).toHaveBeenNthCalledWith(1, {
@@ -51,8 +51,8 @@ describe('FilterFromTo Filter', () => {
   it('initial restoreValue() triggers setValue() method: To case', async () => {
     const value = 10;
     await router.replace({ query: { [`${filterQuery}To`]: value } });
-    const setValueMock = jest.fn();
-    jest.spyOn(baseFilterMixin.methods, 'setValue')
+    const setValueMock = vi.fn();
+    vi.spyOn(baseFilterMixin.methods, 'setValue')
     .mockImplementation(setValueMock);
     shallowMount(FilterFromTo, mountOptions);
     expect(setValueMock).toHaveBeenNthCalledWith(2, {

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

@@ -39,8 +39,8 @@ describe('Search Filter', () => {
   it('initial restoreValue() triggers setValue() method', async () => {
     const search = 'jest';
     await router.replace({ query: { [filterQuery]: search } });
-    const setValueMock = jest.fn();
-    jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementationOnce(setValueMock);
+    const setValueMock = vi.fn();
+    vi.spyOn(baseFilterMixin.methods, 'setValue').mockImplementationOnce(setValueMock);
     shallowMount(SearchFilter, mountOptions);
     expect(setValueMock).toHaveBeenCalledWith({ filter: filterQuery, value: search });
   });

package/src/modules/QueryFilters/components/abstract-api-filter.vue

@@ -10,14 +10,14 @@
     @input="setValue({ filter: filterQuery, value: $event })"
     @reset="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
     @closed="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
-  ></wt-select>
+  />
 </template>
 
 <script>
 import apiFilterMixin from '../mixins/apiFilterMixin';
 
 export default {
-  name: 'abstract-api-filter',
+  name: 'AbstractApiFilter',
   mixins: [apiFilterMixin],
   props: {
     filterQuery: {

package/src/modules/QueryFilters/components/abstract-enum-filter.vue

@@ -9,14 +9,14 @@
     @input="setValue({ filter: filterQuery, value: $event })"
     @reset="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
     @closed="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
-  ></wt-select>
+  />
 </template>
 
 <script>
 import enumFilterMixin from '../mixins/enumFilterMixin';
 
 export default {
-  name: 'abstract-enum-filter',
+  name: 'AbstractEnumFilter',
   mixins: [enumFilterMixin],
   props: {
     filterQuery: {

package/src/modules/QueryFilters/components/filter-datetime.vue

@@ -4,14 +4,14 @@
     :label="label"
     mode="datetime"
     @input="handleChange"
-  ></wt-datepicker>
+  />
 </template>
 
 <script>
 import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
 
 export default {
-  name: 'filter-from',
+  name: 'FilterFrom',
   mixins: [baseFilterMixin],
   props: {
     filterQuery: {

package/src/modules/QueryFilters/components/filter-from-to.vue

@@ -6,7 +6,8 @@
         <wt-label
           class="filter-from-to__input-label"
           for="filter-from-to-from"
-        >{{ $t('reusable.from') }}
+        >
+          {{ $t('reusable.from') }}
         </wt-label>
         <wt-input
           class="filter-from-to-input"
@@ -16,13 +17,14 @@
           :number-min="0"
           :number-max="numberMax"
           @input="setFrom"
-        ></wt-input>
+        />
       </div>
       <div class="filter-from-to__input-wrapper">
         <wt-label
           class="filter-from-to__input-label"
           for="filter-from-to-to"
-        >{{ $t('reusable.to') }}
+        >
+          {{ $t('reusable.to') }}
         </wt-label>
         <wt-input
           class="filter-from-to-input"
@@ -32,7 +34,7 @@
           :number-min="0"
           :number-max="numberMax"
           @input="setTo"
-        ></wt-input>
+        />
       </div>
     </div>
   </div>
@@ -43,7 +45,7 @@ import debounce from '../../../scripts/debounce';
 import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
 
 export default {
-  name: 'filter-from-to',
+  name: 'FilterFromTo',
   mixins: [baseFilterMixin],
   props: {
     filterQuery: {
@@ -57,6 +59,11 @@ export default {
       type: Number,
     },
   },
+
+  created() {
+    this.setFrom = debounce(this.setFrom);
+    this.setTo = debounce(this.setTo);
+  },
   methods: {
     restore() {
       this.restoreFrom();
@@ -97,11 +104,6 @@ export default {
       });
     },
   },
-
-  created() {
-    this.setFrom = debounce(this.setFrom);
-    this.setTo = debounce(this.setTo);
-  },
 };
 </script>
 

package/src/modules/QueryFilters/components/filter-search.vue

@@ -2,9 +2,9 @@
   <wt-search-bar
     :value="filterSchema.value"
     debounce
+    :placeholder="$t('reusable.search')"
     @input="setValue({ filter: filterQuery, value: $event })"
     @search="setValueToQuery({ filterQuery, value: $event })"
-    :placeholder="$t('reusable.search')"
   />
 </template>
 
@@ -12,7 +12,7 @@
 import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
 
 export default {
-  name: 'filter-search',
+  name: 'FilterSearch',
   mixins: [baseFilterMixin],
   props: {
     filterQuery: {

package/src/modules/QueryFilters/components/filter-table-fields.vue

@@ -3,15 +3,20 @@
     :headers="headers"
     :static-headers="staticHeaders"
     @change="change"
-  ></wt-table-column-select>
+  />
 </template>
 
 <script>
 import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
 
 export default {
-  name: 'filter-table-fields',
+  name: 'FilterTableFields',
   mixins: [baseFilterMixin],
+
+  model: {
+    prop: 'headers',
+    event: 'change',
+  },
   props: {
     entity: {
       type: String,
@@ -31,11 +36,6 @@ export default {
     filterQuery: 'fields',
   }),
 
-  model: {
-    prop: 'headers',
-    event: 'change',
-  },
-
   methods: {
     change(headers) {
       this.setValue(headers);

package/src/modules/QueryFilters/mixins/__tests__/apiFilterMixin.spec.js

@@ -12,7 +12,7 @@ const team = ['1', '2'];
 const filterSchema = new ApiFilterSchema();
 
 describe('API filter mixin', () => {
-  const setValue = jest.fn();
+  const setValue = vi.fn();
   const Component = {
     render() {},
     mixins: [apiFilterMixin],

package/src/modules/QueryFilters/mixins/__tests__/enumFilterMixin.spec.js

@@ -17,7 +17,7 @@ const router = createRouter({
 });
 
 describe('Enum filter mixin', () => {
-  const setValue = jest.fn();
+  const setValue = vi.fn();
   const Component = {
     render() {
     },
@@ -53,7 +53,7 @@ describe('Enum filter mixin', () => {
 
   it('Attaches locales to options, if they have "locale" key', async () => {
     const options = [{
-      locale: 'jest.locale',
+      locale: 'vi.locale',
     }];
     const expectedOptions = [{
       locale: options[0].locale,

package/src/modules/QueryFilters/mixins/__tests__/paginationFilterMixin.spec.js

@@ -11,8 +11,8 @@ const page = 2;
 const size = 20;
 
 describe('Pagination filter mixin', () => {
-  const setPage = jest.fn();
-  const setSize = jest.fn();
+  const setPage = vi.fn();
+  const setSize = vi.fn();
   let wrapper;
   const Component = {
     render() {},

package/src/modules/QueryFilters/mixins/__tests__/sortFilterMixin.spec.js

@@ -32,7 +32,7 @@ const sortedHeaders = [{
 }];
 
 describe('Sort filter mixin', () => {
-  const setHeaders = jest.fn();
+  const setHeaders = vi.fn();
   const Component = {
     render() {},
     mixins: [sortFilterMixin],

package/src/modules/QueryFilters/store/__tests__/QueryFiltersStoreModule.spec.js

@@ -33,7 +33,7 @@ describe('QueryFiltersStoreModule getters', () => {
   });
   it('GET_FILTERS filters aggregator', () => {
     const { GET_FILTER } = module.getters;
-    module.getters.GET_FILTER = jest.fn((filter) => GET_FILTER(state)(filter));
+    module.getters.GET_FILTER = vi.fn((filter) => GET_FILTER(state)(filter));
     expect(module.getters.GET_FILTERS(state, module.getters))
       .toEqual({ agent: [1], search: 'jest' });
   });
@@ -42,7 +42,7 @@ describe('QueryFiltersStoreModule getters', () => {
 describe('QueryFiltersStoreModule actions', () => {
   const context = {
     state: { ...state },
-    commit: jest.fn(),
+    commit: vi.fn(),
   };
   const module = new QueryFiltersStoreModule().getModule();
   it('SET_FILTER: single value filter', () => {

package/src/modules/Userinfo/components/__tests__/auth.spec.js

@@ -1,7 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { createStore } from 'vuex';
 import { createRouter, createWebHistory } from 'vue-router';
-import JSDOM from 'jsdom';
 import authAPI from '../../api/auth';
 import userinfoAPI from '../../api/userinfo';
 import Auth from '../the-auth.vue';
@@ -11,19 +10,18 @@ import '../../../../../tests/mocks/localStorageMock';
 
 localStorage.setItem('access-token', 'jest');
 
-authAPI.setToken = jest.fn();
-userinfoAPI.getSession = jest.fn(() => ({}));
-userinfoAPI.getApplicationsAccess = jest.fn(() => ({}));
+authAPI.setToken = vi.fn();
+userinfoAPI.getSession = vi.fn(() => ({}));
+userinfoAPI.getApplicationsAccess = vi.fn(() => ({}));
 
 describe('Auth', () => {
   let store;
   let wrapper;
-  global.window = new JSDOM.JSDOM().window;
   const router = createRouter({
     history: createWebHistory(),
     routes: [],
   });
-  router.replace = jest.fn();
+  router.replace = vi.fn();
 
   const userinfo = new UserinfoStoreModule().getModule();
   beforeEach(() => {
@@ -45,11 +43,12 @@ describe('Auth', () => {
   it('sets token, gets session and opens app after auth token message emit', async () => {
     const accessToken = 'hello there';
     window.postMessage({ accessToken }, '*');
-    await setTimeout(() => {
+    await new Promise((resolve) => setTimeout(() => {
       expect(authAPI.setToken).toHaveBeenCalledWith(accessToken);
       expect(userinfoAPI.getSession).toHaveBeenCalled();
       expect(userinfoAPI.getApplicationsAccess).toHaveBeenCalled();
       expect(router.replace).toHaveBeenCalled();
-    }, 100);
+      resolve();
+    }, 100));
   });
 });

package/src/modules/Userinfo/components/the-auth.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="auth-wrap">
-    <div v-show="!isLoaded" class="auth-loader">
-      <wt-loader/>
+    <div
+      v-show="!isLoaded"
+      class="auth-loader"
+    >
+      <wt-loader />
     </div>
     <iframe
       class="auth"
@@ -19,7 +22,7 @@ import AuthAPI from '../api/auth';
 const authURL = process ? process.env.VUE_APP_AUTH_MODULE_URL : import.meta.env.VITE_AUTH_MODE_URL;
 
 export default {
-  name: 'auth',
+  name: 'Auth',
   props: {
     namespace: {
       type: String,
@@ -34,7 +37,7 @@ export default {
   mounted() {
     window.addEventListener('message', this.authMessageHandler, false);
   },
-  destroyed() {
+  unmounted() {
     window.removeEventListener('message', this.authMessageHandler, false);
   },