@webitel/ui-sdk 0.1.2 → 0.1.3-vue3

package/src/modules/Userinfo/classes/ApplicationsAccess.js

@@ -0,0 +1,190 @@
+import deepmerge from 'deepmerge';
+import deepCopy from 'deep-copy';
+import WebitelApplications from '../../../enums/WebitelApplications/WebitelApplications.enum';
+import SupervisorSections from '../../../enums/WebitelApplications/SupervisorSections.enum';
+import AdminSections from '../../../enums/WebitelApplications/AdminSections.enum';
+
+const applicationsAccess = (value = true) => ({
+  [WebitelApplications.AGENT]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.AGENT}.name`,
+  },
+  [WebitelApplications.HISTORY]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.HISTORY}.name`,
+  },
+  [WebitelApplications.ANALYTICS]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.ANALYTICS}.name`,
+  },
+  [WebitelApplications.SUPERVISOR]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.SUPERVISOR}.name`,
+    [SupervisorSections.QUEUES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.SUPERVISOR}.sections.${SupervisorSections.QUEUES}`,
+    },
+    [SupervisorSections.AGENTS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.SUPERVISOR}.sections.${SupervisorSections.AGENTS}`,
+    },
+    [SupervisorSections.ACTIVE_CALLS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.SUPERVISOR}.sections.${SupervisorSections.ACTIVE_CALLS}`,
+    },
+  },
+  [WebitelApplications.ADMIN]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.ADMIN}.name`,
+    [AdminSections.LICENSE]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.LICENSE}`,
+    },
+    [AdminSections.USERS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.USERS}`,
+    },
+    [AdminSections.DEVICES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.DEVICES}`,
+    },
+    [AdminSections.FLOW]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.FLOW}`,
+    },
+    [AdminSections.DIALPLAN]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.DIALPLAN}`,
+    },
+    [AdminSections.GATEWAYS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.GATEWAYS}`,
+    },
+    [AdminSections.CHATPLAN]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.CHATPLAN}`,
+    },
+    [AdminSections.CHAT_GATEWAYS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.CHAT_GATEWAYS}`,
+    },
+    [AdminSections.SKILLS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.SKILLS}`,
+    },
+    [AdminSections.BUCKETS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.BUCKETS}`,
+    },
+    [AdminSections.BLACKLIST]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.BLACKLIST}`,
+    },
+    [AdminSections.REGIONS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.REGIONS}`,
+    },
+    [AdminSections.CALENDARS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.CALENDARS}`,
+    },
+    [AdminSections.COMMUNICATIONS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.COMMUNICATIONS}`,
+    },
+    [AdminSections.PAUSE_CAUSE]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.PAUSE_CAUSE}`,
+    },
+    [AdminSections.MEDIA]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.MEDIA}`,
+    },
+    [AdminSections.AGENTS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.AGENTS}`,
+    },
+    [AdminSections.TEAMS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.TEAMS}`,
+    },
+    [AdminSections.RESOURCES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.RESOURCES}`,
+    },
+    [AdminSections.RESOURCE_GROUPS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.RESOURCE_GROUPS}`,
+    },
+    [AdminSections.QUEUES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.QUEUES}`,
+    },
+    [AdminSections.STORAGE]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.STORAGE}`,
+    },
+    [AdminSections.COGNITIVE_PROFILES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.COGNITIVE_PROFILES}`,
+    },
+    [AdminSections.EMAIL_PROFILES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.EMAIL_PROFILES}`,
+    },
+    [AdminSections.IMPORT_CSV]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.IMPORT_CSV}`,
+    },
+    [AdminSections.TRIGGERS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.TRIGGERS}`,
+    },
+    [AdminSections.ROLES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.ROLES}`,
+    },
+    [AdminSections.OBJECTS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.OBJECTS}`,
+    },
+  },
+});
+
+/**
+ */
+export default class ApplicationsAccess {
+  // value param could be passed to set same value for all options
+  constructor({ access, value } = { value: true }) {
+    /* if access, deeply merge with falsy values schema
+     if no access, "not configured => full permissions" */
+    this.access = access ? ApplicationsAccess.restore(access) : applicationsAccess(value);
+  }
+
+  getAccess() {
+    return this.access;
+  }
+
+  // minify schema for API sending
+  static minify(access) {
+    const rmEmptyKeys = (obj) => {
+      Object.keys(obj).forEach((key) => {
+        // eslint-disable-next-line no-param-reassign
+        if (!obj[key] || key === '_locale') delete obj[key];
+        if (typeof obj[key] === 'object') {
+          rmEmptyKeys(obj[key]);
+          // eslint-disable-next-line no-param-reassign
+          if (!Object.keys(obj[key]).length) delete obj[key];
+        }
+      });
+      return obj;
+    };
+    return rmEmptyKeys(deepCopy(access));
+  }
+
+  // restore minified schema from API response
+  static restore(access) {
+    return deepmerge(applicationsAccess(false), access);
+    // return deepmerge(access, applicationsAccess(false));
+  }
+}

package/src/modules/Userinfo/components/__tests__/auth.spec.js

@@ -0,0 +1,56 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import JSDOM from 'jsdom';
+import authAPI from '../../api/auth';
+import userinfoAPI from '../../api/userinfo';
+import Auth from '../the-auth.vue';
+import UserinfoStoreModule from '../../store/UserinfoStoreModule';
+
+import '../../../../../tests/mocks/localStorageMock';
+
+localStorage.setItem('access-token', 'jest');
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+
+authAPI.setToken = jest.fn();
+userinfoAPI.getSession = jest.fn(() => ({}));
+userinfoAPI.getApplicationsAccess = jest.fn(() => ({}));
+
+describe('Auth', () => {
+  let store;
+  let wrapper;
+  global.window = new JSDOM.JSDOM().window;
+  const router = new VueRouter();
+  router.replace = jest.fn();
+
+  const userinfo = new UserinfoStoreModule().getModule();
+  beforeEach(() => {
+    store = new Vuex.Store({
+      modules: { userinfo },
+    });
+
+    wrapper = shallowMount(Auth, {
+      localVue,
+      store,
+      router,
+    });
+  });
+
+  it('renders a component', () => {
+    expect(wrapper.classes('auth-wrap')).toBe(true);
+  });
+
+  it('sets token, gets session and opens app after auth token message emit', async () => {
+    const accessToken = 'hello there';
+    window.postMessage({ accessToken }, '*');
+    await setTimeout(() => {
+      expect(authAPI.setToken).toHaveBeenCalledWith(accessToken);
+      expect(userinfoAPI.getSession).toHaveBeenCalled();
+      expect(userinfoAPI.getApplicationsAccess).toHaveBeenCalled();
+      expect(router.replace).toHaveBeenCalled();
+    }, 100);
+  });
+});

package/src/modules/Userinfo/components/the-auth.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="auth-wrap">
+    <div v-show="!isLoaded" class="auth-loader">
+      <wt-loader/>
+    </div>
+    <iframe
+      class="auth"
+      :src="authURL"
+      @load="isLoaded = true"
+    >
+      <p>Your browser does not support iframes.</p>
+    </iframe>
+  </div>
+</template>
+
+<script>
+import AuthAPI from '../api/auth';
+
+const authURL = process.env.VUE_APP_AUTH_MODULE_URL;
+
+export default {
+  name: 'auth',
+  props: {
+    namespace: {
+      type: String,
+      default: 'userinfo',
+    },
+  },
+  data: () => ({
+    authURL,
+    isLoaded: false,
+  }),
+
+  mounted() {
+    window.addEventListener('message', this.authMessageHandler, false);
+  },
+  destroyed() {
+    window.removeEventListener('message', this.authMessageHandler, false);
+  },
+
+  methods: {
+    openSession(payload) {
+      return this.$store.dispatch(`${this.namespace}/OPEN_SESSION`, payload);
+    },
+    async authMessageHandler(event) {
+      if (event.data.accessToken) {
+        // eslint-disable-next-line import/no-named-as-default-member
+        await AuthAPI.setToken(event.data.accessToken);
+        await this.openSession();
+        await this.$router.replace('/');
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.auth-wrap {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+
+  .wt-loader {
+    position: absolute;
+    top: 50%;
+    right: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .auth {
+    height: 100%;
+    width: 100%;
+  }
+}
+</style>

package/src/modules/Userinfo/store/UserinfoStoreModule.js

@@ -0,0 +1,113 @@
+import userinfo from '../api/userinfo';
+import ApplicationsAccess from '../classes/ApplicationsAccess';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+
+const defaultState = () => ({
+  isLoading: true,
+  domainId: 0,
+  name: '',
+  username: '',
+  account: '',
+  preferredUsername: '',
+  userId: 0,
+  scope: {},
+  permissions: {},
+  roles: [],
+  license: [],
+  access: {},
+  language: localStorage.getItem('lang'),
+});
+
+export default class UserinfoStoreModule extends BaseStoreModule {
+  state = {
+    ...defaultState(),
+  }
+
+  getters = {
+    THIS_APP: (state) => state.thisApp,
+    // if no access[app] => accessed by default
+    CHECK_APP_ACCESS: (state) => (app) => !state.access[app] || state.access[app]?._enabled,
+    CHECK_OBJECT_ACCESS: (state, getters) => ({ name, route }) => {
+      if (!state.access[getters.THIS_APP] || !state.access[getters.THIS_APP]._enabled) return false;
+      if (route) return getters.CHECK_OBJECT_ACCESS_BY_ROUTE(route);
+      return getters.CHECK_OBJECT_ACCESS_BY_NAME(name);
+    },
+    CHECK_OBJECT_ACCESS_BY_NAME: (state, getters) => (name) => (
+      state.access[getters.THIS_APP][name]?._enabled
+    ),
+    CHECK_OBJECT_ACCESS_BY_ROUTE: (state, getters) => (route) => {
+      const accessKey = Object.keys(state.access[getters.THIS_APP]).find((object) => route.name.includes(object));
+      return state.access[getters.THIS_APP][accessKey]?._enabled;
+    },
+  }
+
+  actions = {
+    BEFORE_OPEN_SESSION_HOOK: () => {},
+    AFTER_OPEN_SESSION_HOOK: () => {},
+    CONVERT_USER_SCOPE: (context, scope) => scope,
+    CONVERT_USER_PERMISSIONS: (context, permissions) => permissions,
+
+    OPEN_SESSION: async (context) => {
+      await context.dispatch('BEFORE_OPEN_SESSION_HOOK');
+      // !!! it should be checked in router.js beforeEach hook
+      // if (!localStorage.getItem('access-token')) {
+      //   context.dispatch('REDIRECT_TO_AUTH');
+      //   throw new Error('No access-token in localStorage');
+      // }
+      const session = await userinfo.getSession();
+      await context.dispatch('SET_SESSION', session);
+      const access = await userinfo.getApplicationsAccess();
+      await context.dispatch('SET_APPLICATIONS_ACCESS', new ApplicationsAccess({ access }).getAccess());
+      await context.dispatch('AFTER_OPEN_SESSION_HOOK');
+    },
+    SET_SESSION: async (context, _session) => {
+      const defaultSession = {
+        domainId: 0,
+        username: '',
+        userId: 0,
+        scope: [],
+        roles: [],
+        license: [],
+      };
+
+      try {
+        await context.dispatch('RESET_STATE');
+        const session = { ...defaultSession, ..._session };
+        const scope = await context.dispatch('CONVERT_USER_SCOPE', session.scope);
+        const permissions = await context.dispatch('CONVERT_USER_PERMISSIONS', session.permissions);
+        context.commit('SET_SESSION', { ...session, scope, permissions });
+        await context.dispatch('SET_LOADING', false);
+      } catch (err) {
+        throw err;
+      }
+    },
+
+    SET_APPLICATIONS_ACCESS: (context, access) => context.commit('SET_APPLICATIONS_ACCESS', access),
+
+    SET_LOADING: (context, isLoading) => {
+      context.commit('SET_LOADING', isLoading);
+    },
+
+    RESET_STATE: (context) => {
+      context.commit('RESET_STATE');
+    },
+  }
+
+  mutations = {
+    SET_SESSION: (state, session) => {
+      Object.assign(state, session);
+    },
+
+    SET_APPLICATIONS_ACCESS: (state, access) => {
+      state.access = access;
+    },
+
+    SET_LOADING: (state, isLoading) => {
+      state.isLoading = isLoading;
+    },
+
+    RESET_STATE: (state) => {
+      Object.assign(state, defaultState());
+    },
+  }
+}

package/src/plugins/breakpoint/breakpoint.plugin.js

@@ -0,0 +1,136 @@
+import debounce from '../../scripts/debounce';
+
+// https://stackoverflow.com/questions/41791193/vuejs-reactive-binding-for-a-plugin-how-to/41801107#41801107
+// https://stackoverflow.com/questions/50111231/vue-prototype-not-reactive-when-data-changes
+
+// https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/services/breakpoint/index.ts
+
+const breakpoint = {
+  // Breakpoints
+  xs: false,
+  sm: false,
+  md: false,
+  lg: false,
+  xl: false,
+
+  // Conditionals
+  xsOnly: false,
+  smOnly: false,
+  smAndDown: false,
+  smAndUp: false,
+  mdOnly: false,
+  mdAndDown: false,
+  mdAndUp: false,
+  lgOnly: false,
+  lgAndDown: false,
+  lgAndUp: false,
+  xlOnly: false,
+
+  // true if screen width < mobileBreakpoint
+  mobile: true,
+
+  // Current breakpoint name (e.g. 'md')
+  name: 'xs',
+  // Dimensions
+  height: 0,
+  width: 0,
+};
+
+const getClientWidth = () => Math.max(
+  document.documentElement.clientWidth,
+  window.innerWidth || 0,
+);
+
+const getClientHeight = () => Math.max(
+  document.documentElement.clientHeight,
+  window.innerHeight || 0,
+);
+
+const thresholds = {
+  xs: 600,
+  sm: 960,
+  md: 1264,
+  lg: 1904,
+};
+const mobileBreakpoint = 'sm';
+const scrollBarWidth = 16;
+
+const onResize = () => {
+  const height = getClientHeight();
+  const width = getClientWidth();
+
+  const xs = width < thresholds.xs;
+  const sm = width < thresholds.sm && !xs;
+  const md = width < (thresholds.md - scrollBarWidth) && !(sm || xs);
+  const lg = width < (thresholds.lg - scrollBarWidth) && !(md || sm || xs);
+  const xl = width >= (thresholds.lg - scrollBarWidth);
+
+  breakpoint.height = height;
+  breakpoint.width = width;
+
+  breakpoint.xs = xs;
+  breakpoint.sm = sm;
+  breakpoint.md = md;
+  breakpoint.lg = lg;
+  breakpoint.xl = xl;
+
+  breakpoint.xsOnly = xs;
+  breakpoint.smOnly = sm;
+  breakpoint.smAndDown = (xs || sm) && !(md || lg || xl);
+  breakpoint.smAndUp = !xs && (sm || md || lg || xl);
+  breakpoint.mdOnly = md;
+  breakpoint.mdAndDown = (xs || sm || md) && !(lg || xl);
+  breakpoint.mdAndUp = !(xs || sm) && (md || lg || xl);
+  breakpoint.lgOnly = lg;
+  breakpoint.lgAndDown = (xs || sm || md || lg) && !xl;
+  breakpoint.lgAndUp = !(xs || sm || md) && (lg || xl);
+  breakpoint.xlOnly = xl;
+
+  switch (true) {
+    case (xs):
+      breakpoint.name = 'xs';
+      break;
+    case (sm):
+      breakpoint.name = 'sm';
+      break;
+    case (md):
+      breakpoint.name = 'md';
+      break;
+    case (lg):
+      breakpoint.name = 'lg';
+      break;
+    default:
+      breakpoint.name = 'xl';
+      break;
+  }
+
+  if (typeof mobileBreakpoint === 'number') {
+    breakpoint.mobile = width < parseInt(mobileBreakpoint, 10);
+
+    return;
+  }
+
+  const breakpoints = {
+    xs: 0,
+    sm: 1,
+    md: 2,
+    lg: 3,
+    xl: 4,
+  };
+
+  const current = breakpoints[breakpoint.name];
+  const max = breakpoints[mobileBreakpoint];
+
+  breakpoint.mobile = current <= max;
+};
+
+const install = (Vue) => {
+  window.addEventListener('resize', debounce(onResize), { passive: true });
+
+  onResize();
+
+  // eslint-disable-next-line no-param-reassign
+  Vue.prototype.$breakpoint = Vue.observable(breakpoint);
+};
+
+export { install };

package/src/scripts/__tests__/caseConverters.spec.js

@@ -0,0 +1,81 @@
+import {
+  camelToKebab,
+  camelToSnake,
+  kebabToCamel,
+  snakeToKebab,
+  kebabToSnake,
+  objCamelToSnake,
+  objSnakeToCamel,
+  snakeToCamel,
+} from '../caseConverters';
+
+describe('Case converters', () => {
+  it('Camel-Kebab', () => {
+    const camelStr = 'camelToKebab';
+    const kebabStr = 'camel-to-kebab';
+    expect(camelToKebab(camelStr)).toBe(kebabStr);
+    expect(kebabToCamel(kebabStr)).toBe(camelStr);
+  });
+
+  it('Snake-Kebab', () => {
+    const snakeStr = 'snake_to_kebab';
+    const kebabStr = 'snake-to-kebab';
+    expect(snakeToKebab(snakeStr)).toBe(kebabStr);
+    expect(kebabToSnake(kebabStr)).toBe(snakeStr);
+  });
+
+  it('Camel-Snake', () => {
+    const camelStr = 'camelToSnake';
+    const snakeStr = 'camel_to_snake';
+    expect(camelToSnake(camelStr)).toBe(snakeStr);
+    expect(snakeToCamel(snakeStr)).toBe(camelStr);
+  });
+
+  it('Camel-Snake, test case 1: do not convert 1st uppercase letter', () => {
+    const camelStr = 'Timer';
+    const snakeStr = 'Timer';
+    expect(camelToSnake(camelStr)).toBe(snakeStr);
+    expect(snakeToCamel(snakeStr)).toBe(camelStr);
+  });
+
+  it('Camel <- Snake skips first char "_"', () => {
+    const camelStr = '_camelToSnake';
+    const snakeStr = '_camel_to_snake';
+    expect(snakeToCamel(snakeStr)).toBe(camelStr);
+  });
+
+  it('Camel-Snake Objects', () => {
+    const camelObj = { camelToSnake: { camelToSnake: null, arr: [10] } };
+    const snakeObj = { camel_to_snake: { camel_to_snake: null, arr: [10] } };
+    expect(objCamelToSnake(camelObj)).toEqual(snakeObj);
+    expect(objSnakeToCamel(snakeObj)).toEqual(camelObj);
+  });
+
+  it('Camel-Snake Objects: NULL VALUES', () => {
+    const camelObj = null;
+    const snakeObj = null;
+    expect(objCamelToSnake(camelObj)).toEqual(snakeObj);
+    expect(objSnakeToCamel(snakeObj)).toEqual(camelObj);
+  });
+
+  it('Camel-Snake Arrays', () => {
+    const camelArr = ['camelToSnake', { camelToSnake: { camelToSnake: null } }];
+    const snakeArr = ['camel_to_snake', { camel_to_snake: { camel_to_snake: null } }];
+    expect(objCamelToSnake(camelArr)).toEqual(snakeArr);
+    expect(objSnakeToCamel(snakeArr)).toEqual(camelArr);
+  });
+
+  it('Camel-to-Snake Object skips passed keys', () => {
+    const skippedKeys = ['skippedKey'];
+    const camelArr = { camelToSnake: null, skippedKey: null };
+    const snakeArr = { camel_to_snake: null, skippedKey: null };
+    expect(objCamelToSnake(camelArr, skippedKeys)).toEqual(snakeArr);
+  });
+
+  it('Snake-to-Camel Object skips passed keys', () => {
+    const skippedKeys = ['skipped_key'];
+    const camelArr = { camelToSnake: null, skipped_key: null };
+    const snakeArr = { camel_to_snake: null, skipped_key: null };
+    expect(objSnakeToCamel(snakeArr, skippedKeys)).toEqual(camelArr);
+  });
+});

package/src/scripts/__tests__/convertDuration.spec.js

@@ -0,0 +1,21 @@
+import convertDuration from '../convertDuration';
+
+describe('Case converters', () => {
+  it('duration from sec value', () => {
+    const time = 111;
+    const duration = '00:01:51';
+    expect(convertDuration(time)).toBe(duration);
+  });
+
+  it('duration from sec string value', () => {
+    const time = '61';
+    const duration = '00:01:01';
+    expect(convertDuration(time)).toBe(duration);
+  });
+
+  it('duration from false value', () => {
+    const time = null;
+    const duration = '00:00:00';
+    expect(convertDuration(time)).toBe(duration);
+  });
+});

package/src/scripts/__tests__/debounce.spec.js

@@ -0,0 +1,14 @@
+import debounce from '../debounce';
+
+describe('debounce', () => {
+  it('debounces call', async () => {
+    let isFnCalled = false;
+    let fn = () => { isFnCalled = true; };
+    fn = debounce(fn, 50);
+    fn();
+    expect(isFnCalled).toBeFalsy();
+    await setTimeout(() => {
+      expect(isFnCalled).toBeTruthy();
+    }, 100);
+  });
+});

package/src/scripts/__tests__/editProxy.spec.js

@@ -0,0 +1,9 @@
+import editProxy from '../editProxy';
+
+describe('editProxy', () => {
+  it('correctly updates _dirty prop at object property change', () => {
+    const object = editProxy({ value: 'jest', _dirty: false });
+    object.value = 'upd jest';
+    expect(object._dirty).toBe(true);
+  });
+});