@webitel/ui-sdk 0.1.2 → 0.1.3-vue3

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

@@ -0,0 +1,65 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import Vuex from 'vuex';
+import BaseFilterSchema from '../../classes/BaseFilterSchema';
+import baseFilterMixin from '../../mixins/baseFilterMixin/baseFilterMixin';
+import FilterFromTo from '../filter-from-to.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+describe('FilterFromTo Filter', () => {
+  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,
+    },
+  };
+  it('renders a component', () => {
+    const wrapper = shallowMount(FilterFromTo, mountOptions);
+    expect(wrapper.exists()).toBe(true);
+  });
+  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')
+    .mockImplementation(setValueMock);
+    shallowMount(FilterFromTo, mountOptions);
+    expect(setValueMock).toHaveBeenNthCalledWith(1, {
+      filter: filterQuery,
+      value: { to: undefined, from: value },
+    });
+  });
+  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')
+    .mockImplementation(setValueMock);
+    shallowMount(FilterFromTo, mountOptions);
+    expect(setValueMock).toHaveBeenNthCalledWith(2, {
+      filter: filterQuery,
+      value: { to: value, from: undefined },
+    });
+  });
+});

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

@@ -0,0 +1,49 @@
+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 localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+describe('Search Filter', () => {
+  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,
+    },
+  };
+  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(setValueMock).toHaveBeenCalledWith({ filter: filterQuery, value: search });
+  });
+});

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

@@ -0,0 +1,42 @@
+<template>
+  <wt-select
+    :value="filterSchema.value"
+    :label="label"
+    :track-by="filterSchema.storedProp"
+    :multiple="filterSchema.multiple"
+    :search-method="search"
+    :close-on-select="filterSchema.closeOnSelect"
+    v-bind="$attrs"
+    @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',
+  mixins: [apiFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    search(params) {
+      return this.filterSchema.search(params);
+    },
+    async fetchSelected(...args) {
+      const { items = [] } = await this.filterSchema.fetchSelected(...args);
+      return items;
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,32 @@
+<template>
+  <wt-select
+    :value="value"
+    :options="localizedOptions"
+    :label="label"
+    :track-by="filterSchema.storedProp"
+    :multiple="filterSchema.multiple"
+    v-bind="$attrs"
+    @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',
+  mixins: [enumFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,39 @@
+<template>
+  <wt-datetimepicker
+    :value="filterSchema.value"
+    :label="label"
+    @change="handleChange"
+  ></wt-datetimepicker>
+</template>
+
+<script>
+import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
+
+export default {
+  name: 'filter-from',
+  mixins: [baseFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+    },
+  },
+
+  methods: {
+    handleChange(value) {
+      this.setValue({ filter: this.filterQuery, value });
+      this.setValueToQuery({ filterQuery: this.filterQuery, value });
+    },
+    restoreValue(value) {
+      this.setValue({ filter: this.filterQuery, value: +value });
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,136 @@
+<template>
+  <div class="filter-from-to">
+    <wt-label>{{ label }}</wt-label>
+    <div class="filter-from-to__inputs-wrapper">
+      <div class="filter-from-to__input-wrapper">
+        <wt-label
+          class="filter-from-to__input-label"
+          for="filter-from-to-from"
+        >{{ $t('reusable.from') }}
+        </wt-label>
+        <wt-input
+          class="filter-from-to-input"
+          name="filter-from-to-from"
+          :value="filterSchema.value.from"
+          type="number"
+          :number-min="0"
+          @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') }}
+        </wt-label>
+        <wt-input
+          class="filter-from-to-input"
+          name="filter-from-to-to"
+          :value="filterSchema.value.to"
+          type="number"
+          :number-min="0"
+          @input="setTo"
+        ></wt-input>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import debounce from '../../../scripts/debounce';
+import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
+
+export default {
+  name: 'filter-from-to',
+  mixins: [baseFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+    },
+  },
+  methods: {
+    restore() {
+      this.restoreFrom();
+      this.restoreTo();
+    },
+
+    restoreFrom() {
+      const from = 0;
+      const queryValue = this.$route.query[`${this.filterQuery}From`];
+      // this.value.from = +queryValue || from;
+      const value = { from: +queryValue || from, to: this.value.to };
+      this.setValue({ filter: this.filterQuery, value });
+    },
+
+    restoreTo() {
+      const to = null;
+      const queryValue = this.$route.query[`${this.filterQuery}To`];
+      // this.value.to = +queryValue || to;
+      const value = { from: this.value.from, to: +queryValue || to };
+      this.setValue({ filter: this.filterQuery, value });
+    },
+
+    setFrom(value) {
+      this.setValueToQuery({
+        filterQuery: `${this.filterQuery}From`,
+        value,
+      });
+      this.restoreFrom();
+    },
+
+    setTo(value) {
+      this.setValueToQuery({
+        filterQuery: `${this.filterQuery}To`,
+        value,
+      });
+      this.restoreTo();
+    },
+  },
+
+  created() {
+    this.setFrom = debounce(this.setFrom);
+    this.setTo = debounce(this.setTo);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.filter-from-to {
+  &:hover > .wt-label {
+    color: var(--form-label--hover-color);
+  }
+
+  &:focus-within > .wt-label {
+    color: var(--form-label--active-color);
+  }
+}
+
+.filter-from-to__inputs-wrapper,
+.filter-from-to__input-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.filter-from-to__input-label {
+  @extend %typo-subtitle-1;
+  margin-right: 5px;
+}
+
+.filter-from-to__input-wrapper {
+  &:focus-within .wt-label {
+    color: var(--form-label--active-color)
+  }
+
+  .filter-from-to-input {
+    width: 70px;
+  }
+
+  &:first-child {
+    margin-right: 10px;
+  }
+}
+</style>

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

@@ -0,0 +1,33 @@
+<template>
+  <wt-search-bar
+    :value="filterSchema.value"
+    debounce
+    @input="setValue({ filter: filterQuery, value: $event })"
+    @search="setValueToQuery({ filterQuery, value: $event })"
+    :placeholder="$t('reusable.search')"
+  />
+</template>
+
+<script>
+import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
+
+export default {
+  name: 'filter-search',
+  mixins: [baseFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      default: 'search',
+    },
+  },
+  methods: {
+    restoreValue(value) {
+      this.setValue({ filter: this.filterQuery, value });
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,48 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import ApiFilterSchema from '../../classes/ApiFilterSchema';
+import apiFilterMixin from '../apiFilterMixin';
+
+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 Component = {
+    render() {},
+    mixins: [apiFilterMixin],
+    data: () => ({
+      filterQuery: 'team',
+    }),
+    computed: {
+      filterSchema() { return filterSchema; },
+    },
+    methods: { setValue },
+  };
+
+  beforeEach(() => {
+    setValue.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 () => {
+    const wrapper = shallowMount(Component, {
+      localVue,
+      router,
+      data: () => ({ filterQuery: 'queue' }),
+    });
+    expect(setValue).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,70 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import enumFilterMixin from '../enumFilterMixin';
+
+const options = [{
+    name: 'Inbound',
+    value: 'inbound',
+  },
+  {
+    name: 'Outbound',
+    value: 'outbound',
+  }];
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+describe('Enum filter mixin', () => {
+  const setValue = jest.fn();
+  const Component = {
+    render() {
+    },
+    mixins: [enumFilterMixin],
+    data: () => ({
+      filterQuery: 'direction',
+      storedProp: 'value',
+      options,
+    }),
+    methods: { setValue },
+  };
+
+  beforeEach(() => {
+    setValue.mockClear();
+    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    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 () => {
+    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 wrapper = shallowMount(Component, {
+      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

@@ -0,0 +1,58 @@
+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,
+  sort: null,
+  field: 'queue',
+}, {
+  value: 'agents',
+  show: true,
+  sort: null,
+  field: 'online',
+}];
+
+const sortedHeaders = [{
+  value: 'queue',
+  show: true,
+  sort: 'asc',
+  field: 'queue',
+}, {
+  value: 'agents',
+  show: true,
+  sort: null,
+  field: 'online',
+}];
+
+describe('Sort filter mixin', () => {
+  const setHeaders = jest.fn();
+  const Component = {
+    render() {},
+    mixins: [sortFilterMixin],
+    data: () => ({ headers }),
+    methods: { setHeaders },
+  };
+
+  beforeEach(() => {
+    router.replace('/');
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    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, { localVue, router });
+    const queue = wrapper.vm.headers.find((header) => header.value === 'queue');
+    wrapper.vm.sort(queue);
+    expect(setHeaders).toHaveBeenCalledWith(sortedHeaders);
+  });
+});