@webitel/ui-sdk 0.9.64 → 0.9.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "0.9.64",
+  "version": "0.9.65",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -8,8 +8,7 @@
     "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint --fix",
     "build-lib": "vue-cli-service build --target lib --name ui-sdk ./src/install.js",
-    "build-publish-lib": "npm run test:unit && npm run build-lib && npm publish --access public",
-    "build-publish-lib:testless": "npm run build-lib && npm publish --access public"
+    "build-publish-lib": "npm run test:unit && npm run build-lib && npm publish --access public"
   },
   "main": "./dist/@webitel/ui-sdk.common.js",
   "files": [

package/src/modules/QueryFilters/api/__tests__/defaults.spec.js

@@ -0,0 +1,18 @@
+import { listResponseHandler } from '../defaults';
+
+describe('filter api Defaults', () => {
+  it('listResponseHandler returns only lookups from response', () => {
+    const response = {
+      items: [
+        { name: 'jest1', id: 1, myField: '1' },
+        { name: 'jest2', id: 2, obj: [] },
+      ],
+      next: true,
+    };
+    const expectedResult = [
+      { name: 'jest1', id: 1 },
+      { name: 'jest2', id: 2 },
+    ];
+    expect(listResponseHandler(response)).toEqual(expectedResult);
+  });
+});

package/src/modules/QueryFilters/api/defaults.js

@@ -0,0 +1,16 @@
+const PAGE = 1;
+const SIZE = 20;
+const FIELDS = ['id', 'name'];
+
+export const defaultParams = {
+  page: PAGE,
+  size: SIZE,
+  fields: FIELDS,
+};
+
+export const listResponseHandler = (response) => (
+  response.items.map((item) => ({
+    name: item.name,
+    id: item.id,
+  }))
+);

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

@@ -20,9 +20,6 @@ describe('Abstract Enum Filter', () => {
         state: {
           [filterQuery]: filterSchema,
         },
-        getters: {
-          GET_VALUE_FROM_QUERY: () => {},
-        },
       },
     },
   });

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

@@ -1,44 +1,49 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
 import SearchFilter from '../filter-search.vue';
 import BaseFilterSchema from '../../classes/BaseFilterSchema';
 import baseFilterMixin from '../../mixins/baseFilterMixin/baseFilterMixin';
 
-const namespace = 'jest';
-const filterQuery = 'jest';
-const filterSchema = new BaseFilterSchema();
-const searchValue = 'jest-search';
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+const router = new VueRouter();
 
 describe('Search Filter', () => {
-  const setValue = jest.fn();
-  const setValueToQuery = jest.fn();
-  const getValueFromQuery = jest.fn(() => searchValue);
+  const namespace = 'jest';
+  const filterQuery = 'jest';
+  const filterSchema = new BaseFilterSchema();
+  const store = new Vuex.Store({
+    modules: {
+      [namespace]: {
+        namespaced: true,
+        state: {
+          [filterQuery]: filterSchema,
+        },
+      },
+    },
+  });
 
   const mountOptions = {
+    localVue,
+    store,
+    router,
     propsData: {
       namespace,
       filterQuery,
     },
-    computed: {
-      filterSchema() { return filterSchema; },
-    },
   };
-
-  jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementation(setValue);
-  jest.spyOn(baseFilterMixin.methods, 'setValueToQuery').mockImplementation(setValueToQuery);
-  jest.spyOn(baseFilterMixin.methods, 'getValueFromQuery').mockImplementation(getValueFromQuery);
-
-  beforeEach(() => {
-    setValue.mockClear();
-    setValueToQuery.mockClear();
-    getValueFromQuery.mockClear();
-  });
-
   it('renders a component', () => {
     const wrapper = shallowMount(SearchFilter, mountOptions);
     expect(wrapper.exists()).toBe(true);
   });
   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);
     shallowMount(SearchFilter, mountOptions);
-    expect(setValue).toHaveBeenCalledWith({ filter: filterQuery, value: searchValue });
+    expect(setValueMock).toHaveBeenCalledWith({ filter: filterQuery, value: search });
   });
 });

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

@@ -5,7 +5,7 @@
     @input="setValue({ filter: filterQuery, value: $event })"
     @search="setValueToQuery({ filterQuery, value: $event })"
     :placeholder="$t('reusable.search')"
-  ></wt-search-bar>
+  />
 </template>
 
 <script>

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

@@ -1,48 +1,47 @@
-import { shallowMount } from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
 import ApiFilterSchema from '../../classes/ApiFilterSchema';
 import apiFilterMixin from '../apiFilterMixin';
 
-const filterQuery = 'team';
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
 const team = ['1', '2'];
 const filterSchema = new ApiFilterSchema();
 
 describe('API filter mixin', () => {
   const setValue = jest.fn();
-  const setValueToQuery = jest.fn();
-  const getValueFromQuery = jest.fn(() => team);
-
   const Component = {
     render() {},
     mixins: [apiFilterMixin],
     data: () => ({
-      filterQuery,
+      filterQuery: 'team',
     }),
     computed: {
       filterSchema() { return filterSchema; },
     },
-    methods: {
-      setValue,
-      setValueToQuery,
-      getValueFromQuery,
-    },
+    methods: { setValue },
   };
 
   beforeEach(() => {
     setValue.mockClear();
-    setValueToQuery.mockClear();
-    getValueFromQuery.mockClear();
+    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
   });
 
   it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { team } });
     const wrapper = shallowMount(Component, {
+      localVue,
+      router,
     });
     expect(setValue).toHaveBeenCalledWith({ filter: 'team', value: [{ id: team[0] }, { id: team[1] }] });
   });
 
   it('Sets empty array value if $route query is empty', async () => {
-    getValueFromQuery.mockImplementationOnce(() => []);
     const wrapper = shallowMount(Component, {
-      data: () => ({ filterQuery }),
+      localVue,
+      router,
+      data: () => ({ filterQuery: 'queue' }),
     });
     expect(setValue).not.toHaveBeenCalled();
   });

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

@@ -1,84 +1,69 @@
-import { shallowMount } from '@vue/test-utils';
-import EnumFilterSchema from '../../classes/EnumFilterSchema';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
 import enumFilterMixin from '../enumFilterMixin';
 
-const filterQuery = 'direction';
-const options = [
-  {
+const options = [{
     name: 'Inbound',
     value: 'inbound',
-  }, {
+  },
+  {
     name: 'Outbound',
     value: 'outbound',
-  },
-];
+  }];
 
-const queryValue = options[0].value;
-
-const filterSchema = new EnumFilterSchema({
-  options,
-  storedProp: 'value',
-});
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
 
 describe('Enum filter mixin', () => {
   const setValue = jest.fn();
-  const setValueToQuery = jest.fn();
-  const getValueFromQuery = jest.fn(() => queryValue);
-
   const Component = {
     render() {
     },
     mixins: [enumFilterMixin],
     data: () => ({
-      filterQuery,
+      filterQuery: 'direction',
+      storedProp: 'value',
+      options,
     }),
-    computed: {
-      filterSchema() { return filterSchema; },
-    },
-    methods: {
-      setValue,
-      setValueToQuery,
-      getValueFromQuery,
-    },
+    methods: { setValue },
   };
 
   beforeEach(() => {
     setValue.mockClear();
-    setValueToQuery.mockClear();
-    getValueFromQuery.mockClear();
+    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
   });
 
   it('Correctly sets value from $route query', async () => {
-    const wrapper = shallowMount(Component, {});
-    expect(setValue)
-      .toHaveBeenCalledWith({ filter: filterQuery, value: options[0] });
+    await router.replace({ query: { direction: options[0].value } });
+    const wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$nextTick();
+    expect(setValue).toHaveBeenCalledWith({ filter: 'direction', value: options[0] });
   });
 
   it('Sets empty array value if $route query is empty', async () => {
-    getValueFromQuery.mockImplementationOnce(() => []);
-
-    shallowMount(Component, {});
+    shallowMount(Component, {
+      localVue,
+      router,
+    });
     expect(setValue).not.toHaveBeenCalled();
   });
 
   it('Attaches locales to options, if they have "locale" key', async () => {
-    const options = [
-      {
-        locale: 'jest.locale',
-      },
-    ];
-    const expectedOptions = [
-      {
-        locale: options[0].locale,
-        name: options[0].locale,
-      },
-    ];
+    const options = [{
+      locale: 'jest.locale',
+    }];
+    const expectedOptions = [{
+      locale: options[0].locale,
+      name: options[0].locale,
+    }];
     const wrapper = shallowMount(Component, {
-      computed: {
-        options() {
-          return options;
-        },
-      },
+      localVue,
+      router,
+      data: () => ({ options }),
     });
     expect(wrapper.vm.localizedOptions).toEqual(expectedOptions);
   });

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

@@ -0,0 +1,86 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import paginationFilterMixin from '../paginationFilterMixin';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+const page = 2;
+const size = 20;
+
+describe('Pagination filter mixin', () => {
+  const setPage = jest.fn();
+  const setSize = jest.fn();
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [paginationFilterMixin],
+    data: () => ({ page, size }),
+    methods: { setPage, setSize },
+  };
+
+  beforeEach(() => {
+    setPage.mockClear();
+    setSize.mockClear();
+    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    expect(setPage).toHaveBeenCalledWith(page);
+    expect(setSize).toHaveBeenCalledWith(size);
+  });
+
+  it('At "prev" page, changes query and emits event', async () => {
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    wrapper._emitted.input = []; // reset emitted events
+    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 } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    wrapper._emitted.input = []; // reset emitted events
+    wrapper.vm.next();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.page).toBe(`${page + 1}`);
+  });
+
+  it('At "restPage" method, changes query and emits event', async () => {
+    await router.replace({ query: { page: 100, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    wrapper._emitted.input = []; // reset emitted events
+    wrapper.vm.resetPage();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.page).toBe('1');
+  });
+
+  it('At "sizeChange", changes query and emits event', async () => {
+    const newSize = 40;
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    wrapper._emitted.input = []; // reset emitted events
+    wrapper.vm.sizeChange(newSize);
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.size).toBe(`${newSize}`);
+  });
+});

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

@@ -1,6 +1,11 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router';
 import sortFilterMixin from '../sortFilterMixin';
 
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+
 const headers = [{
   value: 'queue',
   show: true,
@@ -25,37 +30,27 @@ const sortedHeaders = [{
   field: 'online',
 }];
 
-const queryValue = '+queue';
-
 describe('Sort filter mixin', () => {
   const setHeaders = jest.fn();
-  const setValueToQuery = jest.fn();
-  const getValueFromQuery = jest.fn(() => queryValue);
-
   const Component = {
     render() {},
     mixins: [sortFilterMixin],
     data: () => ({ headers }),
-    methods: {
-      setHeaders,
-      setValueToQuery,
-      getValueFromQuery,
-    },
+    methods: { setHeaders },
   };
 
   beforeEach(() => {
-    setHeaders.mockClear();
-    setValueToQuery.mockClear();
-    getValueFromQuery.mockClear();
+    router.replace('/');
   });
 
   it('Correctly sets value from $route query', async () => {
-    const wrapper = shallowMount(Component);
+    await router.replace({ path: '/', query: { sort: '+queue' } });
+    const wrapper = shallowMount(Component, { localVue, router });
     expect(setHeaders).toHaveBeenCalledWith(sortedHeaders);
   });
 
   it('After "sort" trigger, header column sort value changes properly', () => {
-    const wrapper = shallowMount(Component);
+    const wrapper = shallowMount(Component, { localVue, router });
     const queue = wrapper.vm.headers.find((header) => header.value === 'queue');
     wrapper.vm.sort(queue);
     expect(setHeaders).toHaveBeenCalledWith(sortedHeaders);

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

@@ -0,0 +1,48 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+const $t = () => {};
+const filterQuery = 'team';
+
+describe('URL Controller mixin Set and Get operations', () => {
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [_urlControllerMixin],
+  };
+
+  beforeEach(() => {
+    router.replace('/');
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+      mocks: { $t },
+    });
+  });
+
+  it('Array of objects', async () => {
+    const value = [{ name: 'team 1', id: '1' }, { name: 'team 2', id: '2' }];
+    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 });
+    const queryValue = wrapper.vm.getValueFromQuery({ filterQuery });
+    expect(queryValue).toEqual(value);
+  });
+
+  it('String value', async () => {
+    const value = 'hello there';
+    wrapper.vm.setValueToQuery({ filterQuery, value });
+    const queryValue = wrapper.vm.getValueFromQuery({ filterQuery });
+    expect(queryValue).toEqual(value);
+  });
+});

package/src/modules/QueryFilters/mixins/_urlControllerMixin/_urlControllerMixin.js

@@ -0,0 +1,39 @@
+import deepEqual from 'deep-equal';
+
+export default {
+  methods: {
+    changeRouteQuery({ filterQuery, value }) {
+      const query = { ...this.$route.query };
+      query[filterQuery] = value;
+      return this.$router.replace({
+        name: this.$router.currentRoute.name,
+        query,
+      });
+    },
+
+    setValueToQuery({ filterQuery, value, storedProp = 'id' }) {
+      let newValue = '';
+      if (Array.isArray(value)) {
+        if (value.length && typeof value[0] !== 'object') {
+          newValue = value;
+        } else {
+          newValue = value.map((item) => item[storedProp]);
+        }
+      } else if (typeof value === 'object' && value !== null) {
+        newValue = value[storedProp];
+      } else {
+        newValue = value;
+      }
+      if (!deepEqual(this.$route.query[filterQuery], newValue)) {
+        this.changeRouteQuery({
+          value: newValue,
+          filterQuery,
+        });
+      }
+    },
+
+    getValueFromQuery({ filterQuery }) {
+      return this.$route.query[filterQuery];
+    },
+  },
+};

package/src/modules/QueryFilters/mixins/baseFilterMixin/baseFilterMixin.js

@@ -1,6 +1,8 @@
+import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
 import getNamespacedState from '../../../../store/helpers/getNamespacedState';
 
 export default {
+  mixins: [_urlControllerMixin],
   props: {
     namespace: {
       type: String,
@@ -28,13 +30,5 @@ export default {
       if (!this.$store) throw new Error('Vuex is required for default setValue() baseFilterMixin method');
       return this.$store.dispatch(`${this.namespace}/SET_FILTER`, payload);
     },
-    setValueToQuery(payload) {
-      if (!this.$store) throw new Error('Vuex is required for default setValueToQuery() baseFilterMixin method');
-      return this.$store.dispatch(`${this.namespace}/SET_VALUE_TO_QUERY`, payload);
-    },
-    getValueFromQuery({ filterQuery }) {
-      if (!this.$store) throw new Error('Vuex is required for default getValueFromQuery() baseFilterMixin method');
-      return this.$route.query[filterQuery];
-    },
   },
 };

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

@@ -31,18 +31,16 @@ export default {
   },
   methods: {
     restoreValue(value) {
-      if (value && value.length) {
-        let newValue;
-        if (Array.isArray(value)) {
-          newValue = this.localizedOptions
-                         .filter((option) => value
-                           .some((value) => value === option[this.storedProp]));
-        } else {
-          newValue = this.localizedOptions
-                         .find((option) => value === option[this.storedProp]);
-        }
-        this.setValue({ filter: this.filterQuery, value: newValue });
+      let newValue;
+      if (Array.isArray(value)) {
+        newValue = this.localizedOptions
+          .filter((option) => value
+            .some((value) => value === option[this.storedProp]));
+      } else {
+        newValue = this.localizedOptions
+          .find((option) => value === option[this.storedProp]);
       }
+      this.setValue({ filter: this.filterQuery, value: newValue });
     },
   },
 };