@webitel/ui-sdk 0.1.2-vue3 → 0.1.3-vite

package/package.json

@@ -1,54 +1,69 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "0.1.2-vue3",
+  "version": "0.1.3-vite",
   "private": false,
   "scripts": {
-    "serve-lib": "vue-cli-service serve",
     "build": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",
-    "build:app": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint --fix",
+    "build:app": "vue-cli-service build",
+    "prepare": "husky install",
     "publish-lib": "npm run test:unit && npm run build && npm publish --access public",
     "publish-lib:testless": "npm run build && npm publish --access public",
-    "prepare": "husky install"
+    "serve-lib": "vue-cli-service serve",
+    "styleguide": "vue-cli-service styleguidist",
+    "styleguide:build": "vue-cli-service styleguidist:build"
   },
   "main": "./dist/@webitel/ui-sdk.common.js",
   "files": [
     "dist/*",
+    "src/api/*",
     "src/locale/*",
+    "src/composables/*",
     "src/css/*",
     "src/components/*",
+    "src/directives/*",
     "src/enums/*",
     "src/mixins/*",
     "src/scripts/*",
+    "src/validators/*",
     "src/modules/*",
     "src/plugins/*",
     "src/store/*",
     "CHANGELOG.md"
   ],
   "dependencies": {
+    "@floating-ui/vue": "^1.0.1",
     "@vue/compat": "^3.2.47",
+    "@vuelidate/core": "^2.0.0",
+    "@vuelidate/validators": "^2.0.0",
+    "@vuepic/vue-datepicker": "^4.4.0",
+    "@vueuse/components": "^10.5.0",
     "clipboard-copy": "^4.0.1",
     "core-js": "^3.6.5",
     "csv-stringify": "^5.5.3",
     "deep-copy": "^1.4.2",
     "deep-equal": "^2.0.3",
     "file-saver": "^2.0.2",
-    "floating-vue": "^2.0.0-beta.20",
+    "is-valid-domain": "^0.1.6",
     "jszip": "^3.5.0",
     "jszip-utils": "^0.1.0",
+    "lodash": "^4.17.21",
     "node-polyfill-webpack-plugin": "^1.1.4",
     "plyr": "3.6.2",
+    "query-string": "^8.1.0",
+    "sortablejs": "^1.15.0",
+    "tiny-emitter": "^2.1.0",
     "vue": "^3.2.47",
     "vue-i18n": "^9.2.2",
     "vue-multiselect": "^3.0.0-beta.1",
-    "vue-observe-visibility": "^1.0.0",
+    "vue-observe-visibility": "^2.0.0-alpha.1",
     "vue-router": "^4.1.6",
-    "vuejs-datepicker": "^1.6.2",
-    "webitel-sdk": "^0.1.157"
+    "webitel-sdk": "^23.7.5"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.17.0",
+    "@babel/preset-react": "^7.22.15",
     "@testing-library/jest-dom": "^5.16.2",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
@@ -68,6 +83,7 @@
     "sass": "^1.51.0",
     "sass-loader": "^12.6.0",
     "svg-sprite-loader": "^6.0.11",
+    "vue-cli-plugin-styleguidist": "~4.72.4",
     "vuex": "^4.1.0"
   },
   "overrides": {

package/src/api/axios/generateInstance.js

@@ -0,0 +1,25 @@
+import axios from 'axios';
+
+// 'X-Webitel-Access' ~ 'X-Access-Token'
+const generateInstance = ({ interceptors } = {}) => {
+  const instance = axios.create({
+    baseURL: process?.env?.VUE_APP_API_URL || import.meta.env.VITE_API_URL,
+    headers: {
+      'X-Webitel-Access': localStorage.getItem('access-token') || '',
+    },
+  });
+
+  if (interceptors) {
+    const { request, response } = interceptors;
+    if (request) {
+      request.forEach((interceptor) => instance.interceptors.request.use(...interceptor));
+    }
+    if (response) {
+      response.forEach((interceptor) => instance.interceptors.response.use(...interceptor));
+    }
+  }
+
+  return instance;
+};
+
+export default generateInstance;

package/src/api/defaults/getDefaultGetListResponse/getDefaultGetListResponse.js

@@ -0,0 +1,6 @@
+const getDefaultGetListResponse = ({} = {}) => ({
+  items: [],
+  next: false,
+});
+
+export default getDefaultGetListResponse;

package/src/api/defaults/getDefaultGetParams/getDefaultGetParams.js

@@ -0,0 +1,9 @@
+const getDefaultGetParams = ({
+  page = 1,
+  size = 10,
+                             } = {}) => ({
+  page,
+  size,
+});
+
+export default getDefaultGetParams;

package/src/api/defaults/index.js

@@ -0,0 +1,7 @@
+import getDefaultGetParams from './getDefaultGetParams/getDefaultGetParams';
+import getDefaultGetListResponse from './getDefaultGetListResponse/getDefaultGetListResponse';
+
+export {
+  getDefaultGetParams,
+  getDefaultGetListResponse,
+};

package/src/api/interceptors/request/updateToken.interceptor.js

@@ -0,0 +1,10 @@
+const updateTokenInterceptor = [
+  (config) => {
+    config.headers['X-Webitel-Access'] = localStorage.getItem('access-token')
+      || '';
+    return config;
+  },
+  (error) => Promise.reject(error),
+];
+
+export default updateTokenInterceptor;

package/src/api/interceptors/response/handleUnauthorized.interceptor.js

@@ -0,0 +1,12 @@
+const handleUnauthorizedInterceptor = [
+  (response) => response,
+  (error) => {
+    if (error.response && error.response.status === 401) {
+      console.warn('intercepted 401');
+      localStorage.removeItem('access-token');
+    }
+    return Promise.reject(error);
+  },
+];
+
+export default handleUnauthorizedInterceptor;

package/src/api/transformers/applyTransform.js

@@ -0,0 +1,8 @@
+const applyTransform = (target, transformers, { debug = false } = {}) => {
+  return transformers.reduce((result, transformer, index) => {
+    if (debug) console.info(`applyTransform debug on step ${index}`, result);
+    return transformer(result);
+  }, target);
+};
+
+export default applyTransform;

package/src/api/transformers/camelToSnake/camelToSnake.transformer.js

@@ -0,0 +1,4 @@
+import { objCamelToSnake } from '../../../scripts/caseConverters';
+
+const camelToSnakeTransformer = (skipKeys) => (obj) => objCamelToSnake(obj, skipKeys);
+export default camelToSnakeTransformer;

package/src/api/transformers/generateUrl/generateUrl.transformer.js

@@ -0,0 +1,13 @@
+import qs from 'query-string';
+
+const generateUrlTransformer = (baseUrl) => (params) => {
+  const stringifyOptions = {
+    skipEmptyString: true,
+    skipNull: true,
+  };
+
+  const url = `${baseUrl}?${qs.stringify(params, stringifyOptions)}`;
+  return url;
+};
+
+export default generateUrlTransformer;

package/src/api/transformers/index.js

@@ -0,0 +1,23 @@
+import applyTransform from './applyTransform';
+import log from './log/log.transformer';
+import merge from './merge/merge.transformer';
+import starToSearch from './starToSearch/starToSearch.transformer';
+import camelToSnake from './camelToSnake/camelToSnake.transformer';
+import snakeToCamel from './snakeToCamel/snakeToCamel.transformer';
+import notify from './notify/notify.transformer';
+import sanitize from './sanitize/sanitize.transformer';
+import generateUrl from './generateUrl/generateUrl.transformer';
+import mergeEach from './mergeEach/mergeEach.transformer';
+
+export default applyTransform;
+export {
+  log,
+  merge,
+  notify,
+  starToSearch,
+  camelToSnake,
+  snakeToCamel,
+  sanitize,
+  generateUrl,
+  mergeEach,
+};

package/src/api/transformers/log/log.transformer.js

@@ -0,0 +1,6 @@
+const logTransformer = (arg) => {
+  console.log(arg);
+  return arg;
+};
+
+export default logTransformer;

package/src/api/transformers/merge/merge.transformer.js

@@ -0,0 +1,5 @@
+import merge from 'deepmerge';
+
+const mergeTransformer = (...args) => (main) => merge.all([...args, main]);
+
+export default mergeTransformer;

package/src/api/transformers/mergeEach/mergeEach.transformer.js

@@ -0,0 +1,8 @@
+import merge from 'deepmerge';
+
+const mergeEachTransformer = (...args) => (main) => main.map((item) => merge.all([
+  ...args,
+  item,
+]));
+
+export default mergeEachTransformer;

package/src/api/transformers/notify/notify.transformer.js

@@ -0,0 +1,32 @@
+import eventBus from '../../../scripts/eventBus';
+
+const notifyTransformer = (notificationObject) => {
+  /*
+  if passed arg is function, then this notification - static content,
+  predefined before actual transformer is called in applyTransform flow
+   */
+  if (typeof notificationObject === 'function') {
+    /*
+    so, create a callback which will send notification with params, passed to it
+     */
+    const callback = ({ type, text }) => eventBus.$emit('notification', { type, text });
+
+    /*
+    and, then, return a function, which will be called in main applyTransform flow,
+    calling passed arg function with callback, and returning actual notify payload
+     */
+    return (payload) => {
+      notificationObject({ callback });
+      return payload;
+    };
+  }
+  if (notificationObject instanceof Error) {
+    eventBus.$emit('notification', {
+      type: 'error',
+      text: notificationObject.response?.data?.detail || notificationObject.response?.data?.message || notificationObject,
+    });
+  }
+  return notificationObject;
+};
+
+export default notifyTransformer;

package/src/api/transformers/sanitize/sanitize.transformer.js

@@ -0,0 +1,12 @@
+const sanitizeTransformer = (fieldsToSend) => (item) => {
+  return Object.keys(item).reduce((sanitizedItem, key) => {
+    if (fieldsToSend.indexOf(key) === -1) return sanitizedItem;
+
+    return {
+      ...sanitizedItem,
+      [key]: item[key],
+    };
+  }, {});
+};
+
+export default sanitizeTransformer;

package/src/api/transformers/snakeToCamel/snakeToCamel.transformer.js

@@ -0,0 +1,4 @@
+import { objSnakeToCamel } from '../../../scripts/caseConverters';
+
+const snakeToCamelTransformer = (skipKeys) => (obj) => objSnakeToCamel(obj, skipKeys);
+export default snakeToCamelTransformer;

package/src/api/transformers/starToSearch/starToSearch.transformer.js

@@ -0,0 +1,12 @@
+import deepcopy from 'deep-copy';
+import get from 'lodash/get';
+import updateObject from '../../../scripts/updateObject';
+
+const starToSearchTransformer = (path = 'search') => (params) => {
+  const copy = deepcopy(params);
+  const value = get(copy, path);
+  if (!value || value.slice(-1) === '*') return copy;
+  return updateObject({ obj: copy, path, value: `${value}*` });
+};
+
+export default starToSearchTransformer;

package/src/components/index.js

@@ -1,57 +1,60 @@
-import Vue from 'vue';
-import WtAvatar from './atoms/wt-avatar/wt-avatar.vue';
-import WtBadge from './atoms/wt-badge/wt-badge.vue';
-import WtIcon from './atoms/wt-icon/wt-icon.vue';
-import WtIndicator from './atoms/wt-indicator/wt-indicator.vue';
-import WtInputInfo from './atoms/wt-input-info/wt-input-info.vue';
-import WtButton from './atoms/wt-button/wt-button.vue';
-import WtChip from './atoms/wt-chip/wt-chip.vue';
-import WtDivider from './atoms/wt-divider/wt-divider.vue';
-import WtTooltip from './atoms/wt-tooltip/wt-tooltip.vue';
-import WtRoundedAction from './atoms/wt-rounded-action/wt-rounded-action.vue';
-import WtLoader from './atoms/wt-loader/wt-loader.vue';
-import WtContextMenu from './atoms/wt-context-menu/wt-context-menu.vue';
-
-import WtCheckbox from './molecules/wt-checkbox/wt-checkbox.vue';
-import WtDatepicker from './molecules/wt-datepicker/wt-datepicker.vue';
-import WtDatetimepicker from './molecules/wt-datetimepicker/wt-datetimepicker.vue';
-import WtIconBtn from './molecules/wt-icon-btn/wt-icon-btn.vue';
-import WtInput from './molecules/wt-input/wt-input.vue';
-import WtNotification from './molecules/wt-notification/wt-notification.vue';
-import WtPopup from './molecules/wt-popup/wt-popup.vue';
-import WtProgressBar from './molecules/wt-progress-bar/wt-progress-bar.vue';
-import WtRadio from './molecules/wt-radio/wt-radio.vue';
-import WtSearchBar from './molecules/wt-search-bar/wt-search-bar.vue';
-import WtSelect from './molecules/wt-select/wt-select.vue';
-import WtSlider from './molecules/wt-slider/wt-slider.vue';
-import WtSwitcher from './molecules/wt-switcher/wt-switcher.vue';
-import WtTabs from './molecules/wt-tabs/wt-tabs.vue';
-import WtTagsInput from './molecules/wt-tags-input/wt-tags-input.vue';
-import WtTimeInput from './molecules/wt-time-input/wt-time-input.vue';
-import WtTextarea from './molecules/wt-textarea/wt-textarea.vue';
-import WtTimepicker from './molecules/wt-timepicker/wt-timepicker.vue';
-import WtLabel from './molecules/wt-label/wt-label.vue';
-import WtButtonSelect from './molecules/wt-button-select/wt-button-select.vue';
-import WtHint from './molecules/wt-hint/wt-hint.vue';
-import WtCopyAction from './molecules/wt-copy-action/wt-copy-action.vue';
-import WtLoadBar from './molecules/wt-load-bar/wt-load-bar.vue';
-
-import WtAppHeader from './organisms/wt-app-header/wt-app-header.vue';
-import WtAppNavigator from './organisms/wt-app-header/wt-app-navigator.vue';
-import WtFiltersPanelWrapper from './organisms/wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue';
-import WtHeaderActions from './organisms/wt-app-header/wt-header-actions.vue';
-import WtErrorPage from './organisms/wt-error-page/wt-error-page.vue';
-import WtHeadline from './organisms/wt-headline/wt-headline.vue';
-import WtHeadlineNav from './organisms/wt-headline-nav/wt-headline-nav.vue';
-import WtNavigationBar from './organisms/wt-navigation-bar/wt-navigation-bar.vue';
-import WtNotificationsBar from './organisms/wt-notifications-bar/wt-notifications-bar.vue';
-import WtPageWrapper from './organisms/wt-page-wrapper/wt-page-wrapper.vue';
-import WtPagination from './organisms/wt-pagination/wt-pagination.vue';
-import WtPlayer from './organisms/wt-player/wt-player.vue';
-import WtStatusSelect from './organisms/wt-status-select/wt-status-select.vue';
-import WtTable from './organisms/wt-table/wt-table.vue';
-import WtTableActions from './organisms/wt-table-actions/wt-table-actions.vue';
-import WtTableColumnSelect from './organisms/wt-table-column-select/wt-table-column-select.vue';
+import WtAvatar from './wt-avatar/wt-avatar.vue';
+import WtBadge from './wt-badge/wt-badge.vue';
+import WtIcon from './wt-icon/wt-icon.vue';
+import WtIndicator from './wt-indicator/wt-indicator.vue';
+import WtInputInfo from './wt-input-info/wt-input-info.vue';
+import WtButton from './wt-button/wt-button.vue';
+import WtChip from './wt-chip/wt-chip.vue';
+import WtDivider from './wt-divider/wt-divider.vue';
+import WtTooltip from './wt-tooltip/wt-tooltip.vue';
+import WtRoundedAction from './wt-rounded-action/wt-rounded-action.vue';
+import WtLoader from './wt-loader/wt-loader.vue';
+import WtContextMenu from './wt-context-menu/wt-context-menu.vue';
+import WtCheckbox from './wt-checkbox/wt-checkbox.vue';
+import WtDatepicker from './wt-datepicker/wt-datepicker.vue';
+import WtIconBtn from './wt-icon-btn/wt-icon-btn.vue';
+import WtInput from './wt-input/wt-input.vue';
+import WtNotification from './wt-notification/wt-notification.vue';
+import WtPopup from './wt-popup/wt-popup.vue';
+import WtProgressBar from './wt-progress-bar/wt-progress-bar.vue';
+import WtRadio from './wt-radio/wt-radio.vue';
+import WtSearchBar from './wt-search-bar/wt-search-bar.vue';
+import WtSelect from './wt-select/wt-select.vue';
+import WtSlider from './wt-slider/wt-slider.vue';
+import WtSwitcher from './wt-switcher/wt-switcher.vue';
+import WtTabs from './wt-tabs/wt-tabs.vue';
+import WtTagsInput from './wt-tags-input/wt-tags-input.vue';
+import WtTimeInput from './wt-time-input/wt-time-input.vue';
+import WtTextarea from './wt-textarea/wt-textarea.vue';
+import WtTimepicker from './wt-timepicker/wt-timepicker.vue';
+import WtLabel from './wt-label/wt-label.vue';
+import WtButtonSelect from './wt-button-select/wt-button-select.vue';
+import WtHint from './wt-hint/wt-hint.vue';
+import WtCopyAction from './wt-copy-action/wt-copy-action.vue';
+import WtLoadBar from './wt-load-bar/wt-load-bar.vue';
+import WtItemLink from './wt-item-link/wt-item-link.vue';
+import WtDummy from './wt-dummy/wt-dummy.vue';
+import WtAppHeader from './wt-app-header/wt-app-header.vue';
+import WtAppNavigator from './wt-app-header/wt-app-navigator.vue';
+import WtFiltersPanelWrapper from './wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue';
+import WtHeaderActions from './wt-app-header/wt-header-actions.vue';
+import WtErrorPage from './wt-error-page/wt-error-page.vue';
+import WtHeadline from './wt-headline/wt-headline.vue';
+import WtHeadlineNav from './wt-headline-nav/wt-headline-nav.vue';
+import WtNavigationBar from './wt-navigation-bar/wt-navigation-bar.vue';
+import WtNotificationsBar from './wt-notifications-bar/wt-notifications-bar.vue';
+import WtPageWrapper from './wt-page-wrapper/wt-page-wrapper.vue';
+import WtPagination from './wt-pagination/wt-pagination.vue';
+import WtPlayer from './wt-player/wt-player.vue';
+import WtStatusSelect from './wt-status-select/wt-status-select.vue';
+import WtTable from './wt-table/wt-table.vue';
+import WtTableActions from './wt-table-actions/wt-table-actions.vue';
+import WtTableColumnSelect from './wt-table-column-select/wt-table-column-select.vue';
+import WtIconAction from './wt-icon-action/wt-icon-action.vue';
+import WtPageHeader from './wt-page-header/wt-page-header.vue';
+import WtStepper from './wt-stepper/wt-stepper.vue';
+import WtExpansionPanel
+  from './wt-expansion-panel/wt-expansion-panel.vue';
 
 const Components = {
   WtAvatar,
@@ -68,7 +71,6 @@ const Components = {
   WtRoundedAction,
   WtCheckbox,
   WtDatepicker,
-  WtDatetimepicker,
   WtIconBtn,
   WtInput,
   WtHint,
@@ -105,6 +107,12 @@ const Components = {
   WtContextMenu,
   WtCopyAction,
   WtLoadBar,
+  WtIconAction,
+  WtPageHeader,
+  WtItemLink,
+  WtDummy,
+  WtStepper,
+  WtExpansionPanel,
 };
 
 export default Components;

package/src/components/on-demand/wt-cc-agent-status-timers/__tests__/wt-cc-agent-status-timers.spec.js

@@ -0,0 +1,25 @@
+import { shallowMount } from '@vue/test-utils';
+import WtCcAgentStatusTimers from '../wt-cc-agent-status-timers.vue';
+
+describe('WtCcAgentStatusTimers', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtCcAgentStatusTimers, {
+      props: {
+        status: {
+          online: 123,
+          pause: 123,
+          offline: 123,
+        },
+      },
+    });
+    expect(wrapper.exists())
+      .toBe(true);
+  });
+  it('renders component with empty status prop', () => {
+    const wrapper = shallowMount(WtCcAgentStatusTimers, {
+      props: { status: {} },
+    });
+    expect(wrapper.exists())
+      .toBe(true);
+  });
+});

package/src/components/on-demand/wt-cc-agent-status-timers/wt-cc-agent-status-timers.vue

@@ -0,0 +1,48 @@
+<template>
+  <article class="wt-cc-agent-status-timers">
+    <wt-indicator
+      color="disabled"
+      :text="status.offline"
+      :size="size"
+    ></wt-indicator>
+    <wt-indicator
+      color="success"
+      :text="status.online"
+      :size="size"
+    ></wt-indicator>
+    <wt-indicator
+      color="primary"
+      :text="status.pause"
+      :size="size"
+    ></wt-indicator>
+  </article>
+</template>
+
+<script setup>
+const props = defineProps({
+  /**
+   * @description Status object
+   * @type {Object}
+   * @property {String} offline
+   * @property {String} online
+   * @property {String} pause
+   */
+  status: {
+    type: Object,
+    required: true,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    options: ['sm', 'md'],
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.wt-cc-agent-status-timers {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+</style>

package/src/components/transitions/wt-expand-transition.vue

@@ -1,51 +1,53 @@
+<template>
+  <transition
+    name="expand"
+    @after-enter="afterEnter"
+    @enter="enter"
+    @leave="leave"
+  >
+    <slot></slot>
+  </transition>
+</template>
+
 <script>
 /* eslint-disable no-param-reassign */
 // https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/
 export default {
   name: 'wt-expand-transition',
-  functional: true,
-  render(createElement, context) {
-    const data = {
-      props: {
-        name: 'expand',
-      },
-      on: {
-        afterEnter(element) {
-          element.style.height = 'auto';
-        },
-        enter(element) {
-          const { width } = getComputedStyle(element);
-          element.style.width = width;
-          element.style.position = 'absolute';
-          element.style.visibility = 'hidden';
-          element.style.height = 'auto';
+  methods: {
+    afterEnter(element) {
+      element.style.height = 'auto';
+    },
+    enter(element) {
+      const { width } = getComputedStyle(element);
+      element.style.width = width;
+      element.style.position = 'absolute';
+      element.style.visibility = 'hidden';
+      element.style.height = 'auto';
 
-          const { height } = getComputedStyle(element);
-          element.style.width = null;
-          element.style.position = null;
-          element.style.visibility = null;
-          element.style.height = 0;
+      const { height } = getComputedStyle(element);
+      element.style.width = null;
+      element.style.position = null;
+      element.style.visibility = null;
+      element.style.height = 0;
 
-          // Force repaint to make sure the
-          // animation is triggered correctly.
-          // eslint-disable-next-line no-unused-expressions
-          getComputedStyle(element).height;
+      // Force repaint to make sure the
+      // animation is triggered correctly.
+      // eslint-disable-next-line no-unused-expressions
+      getComputedStyle(element).height;
 
-          // eslint-disable-next-line no-return-assign
-          requestAnimationFrame(() => element.style.height = height);
-        },
-        leave(element) {
-          const { height } = getComputedStyle(element);
-          element.style.height = height;
-          // eslint-disable-next-line no-unused-expressions
-          getComputedStyle(element).height;
+      // eslint-disable-next-line no-return-assign
+      requestAnimationFrame(() => element.style.height = height);
+    },
+    leave(element) {
+      const { height } = getComputedStyle(element);
+      element.style.height = height;
+      // eslint-disable-next-line no-unused-expressions
+      getComputedStyle(element).height;
 
-          // eslint-disable-next-line no-return-assign
-          requestAnimationFrame(() => element.style.height = 0);
-        },
-      },
-    };
-    return createElement('transition', data, context.children);
+      // eslint-disable-next-line no-return-assign
+      requestAnimationFrame(() => element.style.height = 0);
+    },
   },
 };
 </script>

package/src/components/{organisms/wt-app-header → wt-app-header}/__tests__/WtAppNavigator.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import WebitelApplications from '../../../../enums/WebitelApplications/WebitelApplications.enum';
+import WebitelApplications from '../../../enums/WebitelApplications/WebitelApplications.enum';
 import WtAppNavigator from '../wt-app-navigator.vue';
 
 const apps = [
@@ -14,7 +14,7 @@ describe('WtAppNavigator', () => {
   });
   it('renders specified app cards', () => {
     const wrapper = shallowMount(WtAppNavigator, {
-      propsData: {
+      props: {
         apps,
       },
     });

package/src/components/{organisms/wt-app-header → wt-app-header}/__tests__/WtHeaderActions.spec.js

@@ -13,7 +13,7 @@ describe('WtHeaderActions', () => {
       account: 'acc@ou.nt',
     };
     const wrapper = shallowMount(WtHeaderActions, {
-      propsData: { user },
+      props: { user },
     });
     expect(wrapper.find('.wt-header-actions__name').text()).toBe(user.name);
     expect(wrapper.find('.wt-header-actions__account').text()).toBe(user.account);