Unit tests & fixes

.storybook/preview.js

@@ -45,6 +45,7 @@ export const decorators = [
   (args, { globals: { locale } }) => ({
     i18n,
     beforeCreate: function() {
+      this.$Q.locale = locale;
       i18n.locale = locale;
       this.$root._i18n = i18n;
     },

jest.config.js

@@ -1,14 +1,22 @@
 module.exports = {
   moduleFileExtensions: ['js', 'vue', 'json'],
   transform: {
+    '^.+\\.vue$': 'vue-jest',
     '^.+\\.js$': 'babel-jest',
-    '.*\\.(vue)$': 'vue-jest',
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
       'jest-transform-stub'
   },
-  collectCoverage: true,
-  collectCoverageFrom: ['<rootDir>/tests/unit/*.vue'],
-  setupFiles: ['<rootDir>/tests/unit/setup.js'],
   transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\](?!lodash-es/).+\\.js$'],
-  coverageReporters: ['text-summary', 'html', 'lcov', 'clover']
+  setupFiles: ['<rootDir>/tests/unit/setup.js'],
+  testMatch: ['<rootDir>/src/**/*.test.(ts|tsx|js)'],
+  testURL: 'http://localhost/',
+  coverageReporters: ['text-summary', 'html', 'lcov', 'clover'],
+  coverageDirectory: '<rootDir>/tests/unit/coverage',
+  coverageThreshold: {
+    global: {
+      branches: 7,
+      functions: 14,
+      lines: 17
+    }
+  }
 };

package.json

@@ -92,7 +92,7 @@
   "homepage": "https://github.com/Qvant-lab/qui#readme",
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "lint-staged && yarn test:unit --coverage"
     }
   },
   "keywords": [

src/qComponents/QBreadcrumbs/QBreadcrumbs.test.js

@@ -0,0 +1,45 @@
+import Component from './src/QBreadcrumbs';
+
+describe('QBreadcrumbs', () => {
+  let instance;
+  let options;
+
+  beforeEach(() => {
+    options = {
+      mocks: {
+        $route: { matched: [{ meta: 'one' }] }
+      }
+    };
+
+    instance = shallowMount(Component, options);
+  });
+
+  it('should match snapshot', () => {
+    expect(instance.element).toMatchSnapshot();
+  });
+
+  describe('computed', () => {
+    it('lastCrumb should return custom last crumb if it has been passed', () => {
+      const expected = 'one';
+      instance.setProps({
+        last: expected
+      });
+
+      expect(instance.vm.lastCrumb).toEqual(expected);
+    });
+  });
+
+  describe('pushTo', () => {
+    it(`should return the router's 'name' if it has been passed`, () => {
+      const route = { name: 'R_MAIN', path: '/main' };
+      const expected = { name: route.name };
+      expect(instance.vm.pushTo(route)).toEqual(expected);
+    });
+
+    it(`should return the router's 'path' if the 'name' hasn't been passed`, () => {
+      const route = { path: '/main' };
+      const expected = route.path;
+      expect(instance.vm.pushTo(route)).toEqual(expected);
+    });
+  });
+});

src/qComponents/QBreadcrumbs/__snapshots__/QBreadcrumbs.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QBreadcrumbs should match snapshot 1`] = `
+<div
+  class="q-breadcrumbs"
+>
+
+  <div
+    class="q-breadcrumbs__crumb q-breadcrumbs__crumb_last"
+  >
+
+
+
+  </div>
+</div>
+`;

src/qComponents/QBreadcrumbs/src/QBreadcrumbs.vue

@@ -3,7 +3,7 @@
     <template v-for="crumb in breadcrumbs">
       <router-link
         :key="crumb.name || crumb.path"
-        :to="routerTo(crumb)"
+        :to="pushTo(crumb)"
         active-class="q-breadcrumbs__crumb_active"
         exact-active-class="q-breadcrumbs__crumb_exact-active"
         class="q-breadcrumbs__crumb"
@@ -20,13 +20,6 @@
     <div class="q-breadcrumbs__crumb q-breadcrumbs__crumb_last">
       {{ lastCrumb }}
     </div>
-
-    <div
-      v-if="postfix"
-      class="q-breadcrumbs__postfix"
-    >
-      {{ postfix }}
-    </div>
   </div>
 </template>
 
@@ -35,6 +28,9 @@ export default {
   name: 'QBreadcrumbs',
   componentName: 'QBreadcrumbs',
 
+  /**
+   * if you have vue router, QBreadcrumbs will get crumbs from this.$route.matched
+   */
   props: {
     /**
      * custom last crumb
@@ -43,13 +39,6 @@ export default {
       type: String,
       default: null
     },
-    /**
-     * custom postfix after last crumb
-     */
-    postfix: {
-      type: String,
-      default: null
-    },
     /**
      * Array of Objects, object must contain required fields: `path` - uses as route path, `name` - route name, `meta` - must contain `breadcrumb` - visible title
      */
@@ -80,7 +69,7 @@ export default {
   },
 
   methods: {
-    routerTo({ name, path }) {
+    pushTo({ name, path }) {
       return name ? { name } : path;
     }
   }

src/qComponents/QBreadcrumbs/src/q-breadcrumbs.scss

@@ -13,14 +13,6 @@
     color: rgba(var(--color-rgb-gray), 0.32);
   }
 
-  &__postfix {
-    margin-left: 4px;
-    font-weight: var(--font-weight-bold);
-    font-size: 16px;
-    line-height: var(--line-height-base);
-    color: var(--color-primary-black);
-  }
-
   &__crumb {
     overflow: hidden;
     font-weight: 800;
@@ -30,16 +22,13 @@
     white-space: nowrap;
     text-overflow: ellipsis;
 
-    &_last:first-child {
-      color: var(--color-primary-black);
-    }
-
     &_exact-active:not(:first-child),
     &_last:not(:first-child) {
       font-weight: var(--font-weight-bold);
       font-size: 16px;
       line-height: var(--line-height-base);
       color: var(--color-primary-black);
+      text-overflow: initial;
       cursor: default;
     }
   }

src/qComponents/QButton/QButton.test.js

@@ -0,0 +1,34 @@
+import Component from './src/QButton';
+
+describe('QButton', () => {
+  it('should match snapshot', () => {
+    const { element } = shallowMount(Component);
+    expect(element).toMatchSnapshot();
+  });
+
+  it(`should have class 'q-button_type_icon' if type is icon`, () => {
+    const instance = shallowMount(Component);
+    const expected = 'q-button_type_icon';
+    instance.setProps({
+      type: 'icon'
+    });
+    expect(instance.vm.classes).toContain(expected);
+  });
+
+  it(`should have class 'q-button_theme_link' if theme is link`, () => {
+    const instance = shallowMount(Component);
+    const expected = 'q-button_theme_link';
+    instance.setProps({
+      theme: 'link'
+    });
+    expect(instance.vm.classes).toContain(expected);
+  });
+
+  describe('handleClick', () => {
+    it('should emit click', () => {
+      const instance = shallowMount(Component);
+      instance.vm.handleClick();
+      expect(instance.emitted()).toBeTruthy();
+    });
+  });
+});

src/qComponents/QButton/__snapshots__/QButton.test.js.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QButton should match snapshot 1`] = `
+<button
+  class="q-button q-button_theme_primary q-button_type_default q-button_size_medium"
+  type="button"
+>
+  <!---->
+
+  <!---->
+
+  <!---->
+</button>
+`;

src/qComponents/QCascader/QCascader.test.js

@@ -0,0 +1,73 @@
+import Component from './src/QCascader';
+
+describe('QCascader', () => {
+  let instance;
+  let options;
+
+  beforeEach(() => {
+    options = {
+      mocks: {
+        $t: () => {}
+      },
+      propsData: {
+        value: 'resource',
+        placeholder: 'placeholder',
+        options: [
+          {
+            value: 'guide',
+            label: 'Guide',
+            children: [
+              {
+                value: 'child',
+                label: 'Child',
+                children: [{ value: 'next child', label: 'Next child' }]
+              }
+            ]
+          },
+          {
+            value: 'resource',
+            label: 'Resource'
+          }
+        ]
+      }
+    };
+
+    instance = mount(Component, options);
+  });
+
+  it('should match snapshot', () => {
+    expect(instance.element).toMatchSnapshot();
+  });
+
+  describe('computed', () => {
+    describe('model', () => {
+      it('should set inputValue if has been changed', () => {
+        const expected = 'guide';
+        instance.vm.model = expected;
+
+        expect(instance.vm.inputValue).toEqual(expected);
+      });
+    });
+    describe('clearBtnVisible', () => {
+      it('should return false if showClose is false', () => {
+        expect(instance.vm.clearBtnVisible).toBeFalsy();
+      });
+      it('should return true if showClose is true', () => {
+        instance.vm.showClose = true;
+        expect(instance.vm.clearBtnVisible).toBeTruthy();
+      });
+    });
+  });
+
+  describe('watch', () => {
+    describe('value', () => {
+      it('should set checkedValues if value is array', async () => {
+        const expected = ['guide', 'child'];
+        await instance.setProps({
+          value: expected
+        });
+        expect(instance.vm.checkedValues).toEqual(expected);
+      });
+    });
+  });
+});