@webitel/ui-sdk 23.12.2 → 23.12.5-1

package/src/modules/AuditForm/components/audit-form-question-read-wrapper.vue

@@ -14,13 +14,14 @@
         :class="{
           'audit-form-question-read-text--required': question.required,
         }"
-      >{{ question.question }}</p>
+      >
+        {{ question.question }}
+      </p>
       <wt-icon
-        class="audit-form-question-read__drag-icon"
         v-if="!disableDragging && !first"
+        class="audit-form-question-read__drag-icon"
         icon="move"
-        color="secondary"
-      ></wt-icon>
+      />
     </header>
     <section class="audit-form-question-read-content">
       <component
@@ -29,12 +30,14 @@
         :result="result"
         mode="read"
         @change:result="!readonly && emit('change:result', $event)"
-      ></component>
+      />
       <div
         v-show="isResult"
         class="audit-form-question--clear"
         @click="emit('change:result', {})"
-      >{{ $t('webitelUI.auditForm.clearSelection') }}</div>
+      >
+        {{ $t('webitelUI.auditForm.clearSelection') }}
+      </div>
     </section>
   </article>
 </template>
@@ -96,7 +99,7 @@ const isResult = computed(() => !isEmpty(props.result));
   &:not(.audit-form-question-read--readonly) {
     &:hover,
     &:focus-within {
-      border: 1px solid var(--accent-color);
+      border: 1px solid var(--primary-color);
     }
   }
 
@@ -127,6 +130,6 @@ const isResult = computed(() => !isEmpty(props.result));
 .audit-form-question--clear {
   margin-top: var(--spacing-sm);;
   cursor: pointer;
-  color: var(--link-color);
+  color: var(--text-link-color);
 }
 </style>

package/src/modules/AuditForm/components/audit-form-question-write-wrapper.vue

@@ -6,24 +6,24 @@
         :label="$t('reusable.required')"
         :disabled="first"
         @change="updateQuestion({ path: 'required', value: $event })"
-      ></wt-switcher>
+      />
       <div class="audit-form-question-write-header__actions">
         <wt-tooltip>
-          <template v-slot:activator>
+          <template #activator>
             <wt-icon-btn
               icon="copy"
               @click="emit('copy')"
-            ></wt-icon-btn>
+            />
           </template>
           {{ $t('reusable.copy') }}
         </wt-tooltip>
         <wt-tooltip>
-          <template v-slot:activator>
+          <template #activator>
             <wt-icon-btn
               icon="bucket"
               :disabled="first"
               @click="emit('delete')"
-            ></wt-icon-btn>
+            />
           </template>
           {{ $t('reusable.delete') }}
         </wt-tooltip>
@@ -38,7 +38,7 @@
           required
           prevent-trim
           @input="updateQuestion({ path: 'question', value: $event })"
-        ></wt-input>
+        />
         <wt-select
           :value="prettifiedQuestionType"
           :options="QuestionType"
@@ -46,14 +46,14 @@
           :clearable="false"
           :label="$t('webitelUI.auditForm.answerType')"
           @input="handleQuestionTypeChange($event.value)"
-        ></wt-select>
+        />
       </div>
       <component
         :is="QuestionTypeComponent"
         :question="question"
         mode="write"
         @change:question="emit('change:question', $event)"
-      ></component>
+      />
     </section>
   </article>
 </template>

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

@@ -3,13 +3,13 @@
     :is="component"
     v-clickaway="saveQuestion"
     :class="[
-     `audit-form-question--mode-${mode}`,
-     {
-       'audit-form-question--answered': isResult,
-     },
-     {
-       'audit-form-question--sort-ignore': first && mode === 'fill'
-     }
+      `audit-form-question--mode-${mode}`,
+      {
+        'audit-form-question--answered': isResult,
+      },
+      {
+        'audit-form-question--sort-ignore': first && mode === 'fill'
+      }
     ]"
     :disable-dragging="mode === 'fill'"
     :first="first"
@@ -23,7 +23,7 @@
     @delete="emits('delete')"
     @change:question="emits('update:question', $event)"
     @change:result="emits('update:result', $event)"
-  ></component>
+  />
 </template>
 
 <script setup>

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

@@ -1,9 +1,9 @@
 <template>
   <section class="audit-form">
     <div
-      class="audit-form__sortable-wrapper"
-      ref="sortableWrapper"
       v-if="!reloadSortable"
+      ref="sortableWrapper"
+      class="audit-form__sortable-wrapper"
     >
       <audit-form-question
         v-for="(question, key) of questions"
@@ -18,14 +18,15 @@
         @delete="deleteQuestion({ question, key})"
         @update:question="handleQuestionUpdate({ key, value: $event })"
         @update:result="handleResultUpdate({ key, value: $event })"
-      ></audit-form-question>
+      />
     </div>
     <wt-button
-      class="audit-form__add-button"
       v-if="mode === 'create' && !readonly"
+      class="audit-form__add-button"
       :disabled="isInvalidForm"
       @click="addQuestion"
-    >{{ $t('webitelUI.auditForm.addQuestion') }}
+    >
+      {{ $t('webitelUI.auditForm.addQuestion') }}
     </wt-button>
   </section>
 </template>

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

@@ -0,0 +1,77 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import { ref } from 'vue';
+import { useValidation } from '../../../mixins/validationMixin/useValidation';
+import DeleteConfirmationPopup from '../components/delete-confirmation-popup.vue';
+
+vi.mock('../../../mixins/validationMixin/useValidation');
+
+useValidation.mockImplementation(() => ({
+  isValidation: ref(false),
+  invalid: ref(false),
+  validationText: ref(''),
+}));
+
+describe('DeleteConfirmationPopup', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(DeleteConfirmationPopup, {
+      props: {
+        deleteCount: 1,
+        callback: vi.fn(),
+      },
+    });
+    expect(wrapper.classes('delete-confirmation-popup')).toBe(true);
+  });
+
+  it('yes button called props callback', async () => {
+    const callback = vi.fn();
+    const wrapper = mount(DeleteConfirmationPopup, {
+      props: {
+        deleteCount: 1,
+        callback,
+      },
+    });
+    const button = wrapper.findAllComponents({ name: 'wt-button' }).find((btn) => btn.text().includes('Yes'));
+    expect(button.text()).toContain('Yes');
+    await button.trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('popup message block have delete count', () => {
+    const deleteCount = 123;
+    const wrapper = mount(DeleteConfirmationPopup, {
+      props: {
+        deleteCount,
+        callback: vi.fn(),
+      },
+    });
+    expect(wrapper.find('.delete-confirmation-popup__content').text())
+      .toContain(deleteCount.toString());
+  });
+
+  it('yes button emitted close', async () => {
+    const wrapper = mount(DeleteConfirmationPopup, {
+      props: {
+        deleteCount: 1,
+        callback: vi.fn(),
+      },
+    });
+    const button = wrapper.findAllComponents({ name: 'wt-button' }).find((btn) => btn.text().includes('Yes'));
+    await button.vm.$emit('close');
+    await wrapper.vm.$nextTick();
+    expect(button.emitted('close')).toBeTruthy();
+  });
+
+  it('no button emitted close', async () => {
+    const wrapper = mount(DeleteConfirmationPopup, {
+      props: {
+        deleteCount: 1,
+        callback: vi.fn(),
+      },
+    });
+    const button = wrapper.findAllComponents({ name: 'wt-button' }).find((btn) => btn.text().includes('No'));
+    await button.vm.$emit('close');
+    await wrapper.vm.$nextTick();
+    expect(button.emitted('close')).toBeTruthy();
+  });
+});

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

@@ -1,28 +1,36 @@
 <template>
   <wt-popup
     class="delete-confirmation-popup"
-    min-width="480"
+    width="500"
     @close="close"
   >
-    <template v-slot:title>{{ $t('webitelUI.deleteConfirmationPopup.title') }}</template>
-    <template v-slot:main>
-      <p>
-        {{ deleteMessage }}
-        {{ $t('webitelUI.deleteConfirmationPopup.undoneActionAlert') }}
-      </p>
+    <template #title>
+      {{ $t('webitelUI.deleteConfirmationPopup.title') }}
     </template>
-    <template v-slot:actions>
-      <wt-button
-        color="secondary"
-        :disabled="isDeleting"
-        @click="close"
-      >{{ $t('reusable.cancel') }}
-      </wt-button>
+    <template #main>
+      <div class="delete-confirmation-popup__content">
+        <wt-icon
+          icon="attention"
+          color="error"
+        />
+        <p class="delete-confirmation-popup__message">
+          {{ deleteMessage }}
+        </p>
+      </div>
+    </template>
+    <template #actions>
       <wt-button
-        color="danger"
         :loading="isDeleting"
         @click="confirm"
-      >{{ $t('reusable.delete') }}
+      >
+        {{ $t('vocabulary.yes') }}
+      </wt-button>
+      <wt-button
+        :disabled="isDeleting"
+        color="secondary"
+        @click="close"
+      >
+        {{ $t('vocabulary.no') }}
       </wt-button>
     </template>
   </wt-popup>
@@ -44,7 +52,7 @@ const props = defineProps({
 });
 
 const emit = defineEmits([
-  'close',
+ 'close',
 ]);
 
 const { t } = useI18n();
@@ -83,5 +91,15 @@ async function confirm() {
 </script>
 
 <style scoped>
+.delete-confirmation-popup__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.delete-confirmation-popup__message {
+  text-align: center;
+}
 
 </style>

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/FilesExport/scripts/generateMediaURL.js

@@ -1,6 +1,6 @@
 const generateMediaURL = (id) => {
   const token = localStorage.getItem('access-token');
-  const BASE_URL = process.env.VUE_APP_API_URL;
+  const BASE_URL = process ? process.env.VUE_APP_API_URL : import.meta.env.VITE_API_URL;
   return `${BASE_URL}/storage/recordings/${id}/stream?access_token=${token}`;
 };
 

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

@@ -12,11 +12,13 @@ const router = createRouter({
 describe('Abstract Api Filter', () => {
   const namespace = 'jest';
   const filterQuery = 'jest';
-  const filterSchema = new ApiFilterSchema({ locale: {} });
-  const searchMock = jest.fn();
-  const fetchSelectedMock = jest.fn(() => ({ items: [] }));
-  jest.spyOn(filterSchema, 'search').mockImplementation(searchMock);
-  jest.spyOn(filterSchema, 'fetchSelected').mockImplementation(fetchSelectedMock);
+  const filterSchema = new ApiFilterSchema({
+    locale: { label: '' }
+  });
+  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__/abstract-enum-filter.spec.js

@@ -12,7 +12,9 @@ const router = createRouter({
 describe('Abstract Enum Filter', () => {
   const namespace = 'jest';
   const filterQuery = 'jest';
-  const filterSchema = new EnumFilterSchema({ locale: {} });
+  const filterSchema = new EnumFilterSchema({
+    locale: { label: ''}
+  });
   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: {