@webitel/ui-sdk 0.1.2 → 0.1.3-vue3

package/src/modules/FilesExport/scripts/generateMediaURL.js

@@ -0,0 +1,7 @@
+const generateMediaURL = (id) => {
+  const token = localStorage.getItem('access-token');
+  const BASE_URL = process.env.VUE_APP_API_URL;
+  return `${BASE_URL}/storage/recordings/${id}/stream?access_token=${token}`;
+};
+
+export default generateMediaURL;

package/src/modules/Notifications/store/NotificationsStoreModule.js

@@ -0,0 +1,185 @@
+import { ChatActions, CallActions, JobState } from 'webitel-sdk';
+import i18n from '../../../locale/i18n';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+import endChatSound from '../assets/audio/end-chat.wav';
+import newChatSound from '../assets/audio/new-chat.wav';
+import newMessageSound from '../assets/audio/new-message.wav';
+import ringingSound from '../assets/audio/ringing.mp3';
+import notificationIcon from '../assets/img/notification-icon.png';
+
+const NOTIFICATION_VISIBLE_INTERVAL = 2000;
+
+const getNotificationSound = (action) => {
+  switch (action) {
+    case ChatActions.UserInvite:
+    case JobState.Distribute:
+      return new Audio(newChatSound);
+    case ChatActions.Message:
+      return new Audio(newMessageSound);
+    case ChatActions.Close:
+      return new Audio(endChatSound);
+    case CallActions.Ringing:
+      // eslint-disable-next-line no-case-declarations
+      const audio = new Audio(ringingSound);
+      audio.loop = true;
+      return audio;
+    default:
+      return false;
+  }
+};
+
+const getCurrentTabId = () => localStorage.getItem('currentTabId');
+
+const setCurrentTabId = (value) => localStorage.setItem('currentTabId', value);
+
+export default class NotificationsStoreModule extends BaseStoreModule {
+  state = {
+    thisTabId: null, // this tab
+    currentTabId: null, // current tab is localStorage
+    broadcastChannel: null, // in order to reset the tab title with unread number
+    unreadCount: 0,
+    currentlyPlaying: false,
+  };
+
+  getters = {
+    IS_MAIN_TAB: (state) => state.thisTabId === state.currentTabId,
+    IS_SOUND_ALLOWED: (state, getters) => getters.IS_MAIN_TAB && !state.currentlyPlaying,
+  };
+
+  actions = {
+    // private
+    _SUBSCRIBE_TAB_CLOSING: (context) => {
+      window.addEventListener('storage', () => {
+        if (!getCurrentTabId()) {
+          setCurrentTabId(context.state.thisTabId);
+        }
+        context.commit('SET_CURRENT_TAB_ID', getCurrentTabId());
+      });
+    },
+
+    _SETUP_THIS_TAB_ID: (context) => {
+      const thisTabId = Math.random().toString();
+      context.commit('SET_THIS_TAB_ID', thisTabId);
+      setCurrentTabId(thisTabId);
+      context.commit('SET_CURRENT_TAB_ID', thisTabId);
+    },
+
+    _SETUP_UNREAD_COUND_BROADCAST_LISTENING: (context) => {
+      const broadcastChannel = new BroadcastChannel('WtAppNotifications');
+      broadcastChannel.addEventListener('message', ({ data }) => {
+        context.dispatch('_SET_UNREAD_COUNT', data.count);
+      });
+
+      document.documentElement.addEventListener('click', () => {
+        context.dispatch('_RESET_UNREAD_COUNT');
+      });
+      context.commit('SET_BROADCAST_CHANNEL', broadcastChannel);
+    },
+
+    _SET_UNREAD_COUNT: (context, count) => {
+      context.commit('SET_UNREAD_COUNT', count);
+      context.dispatch('_SET_TAB_TITLE');
+    },
+
+    _RESET_UNREAD_COUNT: (context) => {
+      if (context.state.unreadCount === 0) return;
+      const count = 0;
+      context.dispatch('_SET_UNREAD_COUNT', count);
+      context.state.broadcastChannel.postMessage({ count });
+    },
+
+    _SET_TAB_TITLE: (context) => {
+      const count = context.state.unreadCount;
+      const titleText = document.title.replace(/\s*\(.*?\)\s*/g, '');
+      document.title = count ? `(${count}) ${titleText}` : titleText;
+    },
+
+    _REMOVE_CURRENT_TAB_ID: () => {
+      localStorage.removeItem('currentTabId');
+    },
+
+    // public
+    INITIALIZE: (context) => Promise
+      .allSettled([
+                    context.dispatch('_SETUP_THIS_TAB_ID'),
+                    context.dispatch('_SETUP_UNREAD_COUND_BROADCAST_LISTENING'),
+                    context.dispatch('_SUBSCRIBE_TAB_CLOSING'),
+                  ]),
+
+    DESTROY: (context) => Promise
+      .allSettled([
+                    context.dispatch('STOP_SOUND'),
+                    context.dispatch('_REMOVE_CURRENT_TAB_ID'),
+                  ]),
+
+    PLAY_SOUND: (context, {
+      action,
+      sound = getNotificationSound(action),
+    }) => {
+      if (context.getters.IS_SOUND_ALLOWED
+        && !localStorage.getItem('wtIsPlaying')
+      ) {
+        const audio = sound instanceof Audio ? sound : new Audio(sound);
+        audio.addEventListener('ended', () => {
+          context.dispatch('STOP_SOUND');
+        }, { once: true });
+        audio.play();
+        localStorage.setItem('wtIsPlaying', 'true');
+        context.commit('SET_CURRENTLY_PLAYING', audio);
+      }
+    },
+
+    STOP_SOUND: (context) => {
+      const { currentlyPlaying } = context.state;
+      if (currentlyPlaying && currentlyPlaying instanceof Audio) currentlyPlaying.pause();
+      localStorage.removeItem('wtIsPlaying');
+      context.commit('RESET_CURRENTLY_PLAYING');
+    },
+
+    SEND_NOTIFICATION: (context, {
+      locale,
+      text = i18n.t(locale),
+      icon = notificationIcon,
+      interval = NOTIFICATION_VISIBLE_INTERVAL,
+    }) => {
+      const notification = new Notification(text, { icon });
+
+      notification.addEventListener('click', () => {
+        window.focus();
+      }, { once: true });
+
+      setTimeout(() => {
+        notification.close();
+      }, interval);
+    },
+
+    INCREMENT_UNREAD_COUNT: (context) => {
+      const count = context.state.unreadCount + 1;
+      context.dispatch('_SET_UNREAD_COUNT', count);
+      context.state.broadcastChannel.postMessage({ count });
+    },
+  };
+
+  mutations = {
+    SET_THIS_TAB_ID: (state, thisTabId) => {
+      state.thisTabId = thisTabId;
+    },
+
+    SET_CURRENT_TAB_ID: (state, currentTabId) => {
+      state.currentTabId = currentTabId;
+    },
+
+    SET_BROADCAST_CHANNEL: (state, channel) => {
+      state.broadcastChannel = channel;
+    },
+    SET_CURRENTLY_PLAYING: (state, sound) => {
+      state.currentlyPlaying = sound;
+    },
+    RESET_CURRENTLY_PLAYING: (state) => {
+      state.currentlyPlaying = false;
+    },
+    SET_UNREAD_COUNT: (state, count) => {
+      state.unreadCount = count;
+    },
+  };
+}

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

@@ -0,0 +1,130 @@
+import audio from '../../assets/audio/new-message.wav';
+import NotificationsStoreModule from '../NotificationsStoreModule';
+import '../../../../../tests/mocks/broadcastChannelMock';
+
+const notificationsModule = new NotificationsStoreModule().getModule();
+
+const state = {
+  thisTabId: null,
+  broadcastChannel: new BroadcastChannel('WtAppNotifications'),
+  unreadCount: 0,
+  currentlyPlaying: false,
+  wtIsPlaying: false,
+};
+
+describe('features/notifications store: actions', () => {
+  const context = {
+    dispatch: jest.fn(),
+    commit: jest.fn(),
+    getters: {
+      IS_MAIN_TAB: () => true,
+      IS_SOUND_ALLOWED: () => true,
+    },
+    rootGetters: {
+      'workspace/TASK_ON_WORKSPACE': { channelId: 'id' },
+    },
+  };
+
+  beforeEach(() => {
+    context.state = { ...state };
+    context.dispatch.mockClear();
+    context.commit.mockClear();
+  });
+
+  it('INITIALIZE action dispatches _SETUP_THIS_TAB_ID action', () => {
+    notificationsModule.actions.INITIALIZE(context);
+    expect(context.dispatch.mock.calls[0][0]).toContain('_SETUP_THIS_TAB_ID');
+  });
+
+  it('INITIALIZE action dispatches _SETUP_UNREAD_COUND_BROADCAST_LISTENING action', () => {
+    notificationsModule.actions.INITIALIZE(context);
+    expect(context.dispatch.mock.calls[1][0]).toContain('_SETUP_UNREAD_COUND_BROADCAST_LISTENING');
+  });
+
+  it('INITIALIZE action dispatches _SETUP_THIS_TAB_ID action', () => {
+    notificationsModule.actions.INITIALIZE(context);
+    expect(context.dispatch).toHaveBeenCalledWith('_SETUP_THIS_TAB_ID');
+  });
+
+  it('DESTROY action dispatches STOP_SOUND action', () => {
+    notificationsModule.actions.DESTROY(context);
+    expect(context.dispatch).toHaveBeenCalledWith('STOP_SOUND');
+  });
+
+  it('DESTROY action dispatches _REMOVE_CURRENT_TAB_ID action', () => {
+    notificationsModule.actions.DESTROY(context);
+    expect(context.dispatch).toHaveBeenCalledWith('_REMOVE_CURRENT_TAB_ID');
+  });
+
+  it('INCREMENT_UNREAD_COUNT action dispatches _SET_UNREAD_COUNT and increases unreadCount', () => {
+    notificationsModule.actions.INCREMENT_UNREAD_COUNT(context);
+    expect(context.dispatch).toHaveBeenCalledWith('_SET_UNREAD_COUNT', context.state.unreadCount + 1);
+  });
+
+  it('_SETUP_UNREAD_COUND_BROADCAST_LISTENING action commits SET_BROADCAST_CHANNEL mutation', () => {
+    notificationsModule.actions._SETUP_UNREAD_COUND_BROADCAST_LISTENING(context);
+    expect(context.commit.mock.calls[0][0]).toContain('SET_BROADCAST_CHANNEL');
+  });
+
+  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');
+  });
+
+  it('PLAY_SOUND action commits SET_CURRENTLY_PLAIYNG mutation with sound', async () => {
+    const sound = new Audio(audio);
+    await notificationsModule.actions.PLAY_SOUND(context, { sound });
+    expect(context.commit).toHaveBeenCalledWith('SET_CURRENTLY_PLAYING', sound);
+  });
+
+  it('_SET_UNREAD_COUNT dispatches _SET_TAB_TITLE action', () => {
+    const unreadCount = 5;
+    notificationsModule.actions._SET_UNREAD_COUNT(context, unreadCount);
+    expect(context.dispatch).toHaveBeenCalledWith('_SET_TAB_TITLE');
+  });
+
+  it('_SETUP_THIS_TAB_ID commits SET_THIS_TAB_ID mutation', () => {
+    notificationsModule.actions._SETUP_THIS_TAB_ID(context);
+    expect(context.commit.mock.calls[0][0]).toBe('SET_THIS_TAB_ID');
+  });
+
+  it('_SETUP_THIS_TAB_ID commits SET_CURRENT_TAB_ID mutation', () => {
+    notificationsModule.actions._SETUP_THIS_TAB_ID(context);
+    expect(context.commit.mock.calls[1][0]).toBe('SET_CURRENT_TAB_ID');
+  });
+
+  it('_SET_UNREAD_COUNT action commits _SET_UNREAD_COUNT mutation with count', () => {
+    const unreadCount = 5;
+    notificationsModule.actions._SET_UNREAD_COUNT(context, unreadCount);
+    expect(context.commit).toHaveBeenCalledWith('SET_UNREAD_COUNT', unreadCount);
+  });
+
+  it('_RESET_UNREAD_COUNT action does not dispatch if unread count is 0', () => {
+    notificationsModule.actions._RESET_UNREAD_COUNT(context);
+    expect(context.dispatch).not.toHaveBeenCalledWith('_SET_UNREAD_COUNT');
+  });
+
+  it('_RESET_UNREAD_COUNT action dispatches _SET_UNREAD_COUNT passing unread count equal to 0', () => {
+    context.state.unreadCount = 1;
+    notificationsModule.actions._RESET_UNREAD_COUNT(context);
+    expect(context.dispatch).toHaveBeenCalledWith('_SET_UNREAD_COUNT', 0);
+  });
+
+  it('PLAY_SOUND action sets localStorage wtIsPlaying to true', () => {
+    const sound = new Audio(audio);
+    notificationsModule.actions.PLAY_SOUND(context, { sound });
+    expect(localStorage.getItem('wtIsPlaying')).toBeTruthy();
+  });
+
+  it('STOP_SOUND action commits RESET_CURRENTLY_PLAYING mutation', () => {
+    notificationsModule.actions.STOP_SOUND(context);
+    expect(context.commit).toHaveBeenCalledWith('RESET_CURRENTLY_PLAYING');
+  });
+
+  it('STOP_SOUND action removes localStorage wtIsPlaying', () => {
+    localStorage.setItem('wtIsPlaying', 'true');
+    notificationsModule.actions.STOP_SOUND(context);
+    expect(localStorage.getItem('wtIsPlaying')).toBeFalsy();
+  });
+});

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

@@ -0,0 +1,49 @@
+import NotificationsStoreModule from '../NotificationsStoreModule';
+import '../../../../../tests/mocks/broadcastChannelMock';
+
+const notificationsModule = new NotificationsStoreModule().getModule();
+
+const state = {
+  thisTabId: null,
+  broadcastChannel: new BroadcastChannel('WtAppNotifications'),
+  unreadCount: 0,
+  currentlyPlaying: false,
+  wtIsPlaying: false,
+};
+
+describe('features/notifications store: mutations', () => {
+  it('SET_THIS_TAB_ID sets thisTabId to state', () => {
+    const thisTabId = 'thisTabId';
+    notificationsModule.mutations.SET_THIS_TAB_ID(state, thisTabId);
+    expect(state.thisTabId).toBe(thisTabId);
+  });
+  it('SET_CURRENT_TAB_ID sets currentTabId to state', () => {
+    const currentTabId = 'currentTabId';
+    notificationsModule.mutations.SET_CURRENT_TAB_ID(state, currentTabId);
+    expect(state.currentTabId).toBe(currentTabId);
+  });
+
+  it('SET_BROADCAST_CHANNEL sets broadcastChannel to state', () => {
+    const state = { broadcastChannel: null };
+    const channel = new BroadcastChannel('test channel');
+    notificationsModule.mutations.SET_BROADCAST_CHANNEL(state, channel);
+    expect(state.broadcastChannel).toEqual(channel);
+  });
+
+  it('SET_CURRENTLY_PLAIYNG mutation sets currentlyPlaying to state', () => {
+    const wtIsPlaying = true;
+    notificationsModule.mutations.SET_CURRENTLY_PLAYING(state, wtIsPlaying);
+    expect(state.currentlyPlaying).toBe(true);
+  });
+
+  it('RESET_CURRENTLY_PLAYING mutation sets currentlyPlaying to false in state', () => {
+    notificationsModule.mutations.RESET_CURRENTLY_PLAYING(state);
+    expect(state.currentlyPlaying).toBe(false);
+  });
+
+  it('_SET_UNREAD_COUNT mutation sets unreadCount to state', () => {
+    const unreadCount = 15;
+    notificationsModule.mutations.SET_UNREAD_COUNT(state, unreadCount);
+    expect(state.unreadCount).toEqual(unreadCount);
+  });
+});

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/classes/ApiFilterSchema.js

@@ -0,0 +1,32 @@
+import BaseFilterSchema from './BaseFilterSchema';
+
+export default class ApiFilterSchema extends BaseFilterSchema {
+  constructor(params = {}) {
+    const {
+      value = [],
+      defaultValue = [],
+    } = params;
+    super({ value, defaultValue });
+    const {
+      locale = { label: 'filter' },
+      storedProp = 'id',
+      multiple = true,
+      closeOnSelect = false,
+      API,
+    } = params;
+    this.locale = locale;
+    this.storedProp = storedProp;
+    this.multiple = multiple;
+    this.closeOnSelect = closeOnSelect;
+    this.API = API;
+  }
+
+  search(params) {
+    return this.API(params);
+  }
+
+  fetchSelected(idsList) {
+    const params = { size: idsList.length, id: idsList };
+    return this.API(params);
+  }
+}

package/src/modules/QueryFilters/classes/BaseFilterSchema.js

@@ -0,0 +1,6 @@
+export default class BaseFilterSchema {
+  constructor({ value = '', defaultValue = '' } = {}) {
+    this.value = value;
+    this.defaultValue = defaultValue;
+  }
+}

package/src/modules/QueryFilters/classes/EnumFilterSchema.js

@@ -0,0 +1,23 @@
+import BaseFilterSchema from './BaseFilterSchema';
+
+export default class EnumFilterSchema extends BaseFilterSchema {
+  constructor(params = {}) {
+    const {
+      value = [],
+      defaultValue = [],
+    } = params;
+    super({ value, defaultValue });
+    const {
+      locale = { label: 'filter' },
+      storedProp = 'value',
+      multiple = true,
+      closeOnSelect = false,
+      options = [],
+    } = params;
+    this.locale = locale;
+    this.storedProp = storedProp;
+    this.multiple = multiple;
+    this.closeOnSelect = closeOnSelect;
+    this.options = options;
+  }
+}

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

@@ -0,0 +1,25 @@
+import ApiFilterSchema from '../ApiFilterSchema';
+
+describe('Api Filter Schema', () => {
+  const APIMock = jest.fn();
+  beforeEach(() => {
+    APIMock.mockClear();
+  });
+  it('creates default class without passed params', () => {
+    const filter = new ApiFilterSchema();
+    expect(filter).toBeTruthy();
+  });
+  it('calls API getList() method at search()', () => {
+    const params = { page: 1 };
+    const filter = new ApiFilterSchema({ API: APIMock });
+    filter.search(params);
+    expect(APIMock).toHaveBeenCalledWith(params);
+  });
+  it('calls API getList() method at fetchSelected()', () => {
+    const idsList = [1];
+    const expectedParams = { size: 1, id: [1] };
+    const filter = new ApiFilterSchema({ API: APIMock });
+    filter.fetchSelected(idsList);
+    expect(APIMock).toHaveBeenCalledWith(expectedParams);
+  });
+});

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

@@ -0,0 +1,54 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import AbstractApiFilter from '../abstract-api-filter.vue';
+import ApiFilterSchema from '../../classes/ApiFilterSchema';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+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 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(AbstractApiFilter, mountOptions);
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('calls filter schema API search()', () => {
+    const wrapper = shallowMount(AbstractApiFilter, mountOptions);
+    wrapper.vm.search();
+    expect(searchMock).toHaveBeenCalled();
+  });
+  it(' filter schema API fetchSelected()', () => {
+    const wrapper = shallowMount(AbstractApiFilter, mountOptions);
+    wrapper.vm.fetchSelected();
+    expect(fetchSelectedMock).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,40 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import AbstractEnumFilter from '../abstract-enum-filter.vue';
+import EnumFilterSchema from '../../classes/EnumFilterSchema';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+describe('Abstract Enum Filter', () => {
+  const namespace = 'jest';
+  const filterQuery = 'jest';
+  const filterSchema = new EnumFilterSchema({ locale: {} });
+  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(AbstractEnumFilter, mountOptions);
+    expect(wrapper.exists()).toBe(true);
+  });
+});

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

@@ -0,0 +1,49 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import DatetimeFilter from '../filter-datetime.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('DatetimeFilter 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(DatetimeFilter, mountOptions);
+    expect(wrapper.exists()).toBe(true);
+  });
+  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);
+    shallowMount(DatetimeFilter, mountOptions);
+    expect(setValueMock).toHaveBeenCalledWith({ filter: filterQuery, value });
+  });
+});