Move some tests from Karma to Jest

7 files changed, 303 insertions, 0 deletions

diff --git a/spec/frontend/vue_shared/components/callout_spec.js b/spec/frontend/vue_shared/components/callout_spec.js
new file mode 100644
index 00000000000..91208dfb31a
--- /dev/null
+++ b/spec/frontend/vue_shared/components/callout_spec.js
@@ -0,0 +1,66 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import Callout from '~/vue_shared/components/callout.vue';
+
+const TEST_MESSAGE = 'This is a callout message!';
+const TEST_SLOT = '<button>This is a callout slot!</button>';
+
+const localVue = createLocalVue();
+
+describe('Callout Component', () => {
+  let wrapper;
+
+  const factory = options => {
+    wrapper = shallowMount(localVue.extend(Callout), {
+      localVue,
+      ...options,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('should render the appropriate variant of callout', () => {
+    factory({
+      propsData: {
+        category: 'info',
+        message: TEST_MESSAGE,
+      },
+    });
+
+    expect(wrapper.classes()).toEqual(['bs-callout', 'bs-callout-info']);
+
+    expect(wrapper.element.tagName).toEqual('DIV');
+  });
+
+  it('should render accessibility attributes', () => {
+    factory({
+      propsData: {
+        message: TEST_MESSAGE,
+      },
+    });
+
+    expect(wrapper.attributes('role')).toEqual('alert');
+    expect(wrapper.attributes('aria-live')).toEqual('assertive');
+  });
+
+  it('should render the provided message', () => {
+    factory({
+      propsData: {
+        message: TEST_MESSAGE,
+      },
+    });
+
+    expect(wrapper.element.innerHTML.trim()).toEqual(TEST_MESSAGE);
+  });
+
+  it('should render the provided slot', () => {
+    factory({
+      slots: {
+        default: TEST_SLOT,
+      },
+    });
+
+    expect(wrapper.element.innerHTML.trim()).toEqual(TEST_SLOT);
+  });
+});
diff --git a/spec/frontend/vue_shared/components/code_block_spec.js b/spec/frontend/vue_shared/components/code_block_spec.js
new file mode 100644
index 00000000000..6b91a20ff76
--- /dev/null
+++ b/spec/frontend/vue_shared/components/code_block_spec.js
@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import component from '~/vue_shared/components/code_block.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Code Block', () => {
+  const Component = Vue.extend(component);
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders a code block with the provided code', () => {
+    const code =
+      "Failure/Error: is_expected.to eq(3)\n\n  expected: 3\n       got: -1\n\n  (compared using ==)\n./spec/test_spec.rb:12:in `block (4 levels) in \u003ctop (required)\u003e'";
+
+    vm = mountComponent(Component, {
+      code,
+    });
+
+    expect(vm.$el.querySelector('code').textContent).toEqual(code);
+  });
+
+  it('escapes XSS injections', () => {
+    const code = 'CCC&lt;img src=x onerror=alert(document.domain)&gt;';
+
+    vm = mountComponent(Component, {
+      code,
+    });
+
+    expect(vm.$el.querySelector('code').textContent).toEqual(code);
+  });
+});
diff --git a/spec/frontend/vue_shared/components/diff_viewer/viewers/mode_changed_spec.js b/spec/frontend/vue_shared/components/diff_viewer/viewers/mode_changed_spec.js
new file mode 100644
index 00000000000..c4358f0d9cb
--- /dev/null
+++ b/spec/frontend/vue_shared/components/diff_viewer/viewers/mode_changed_spec.js
@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils';
+import ModeChanged from '~/vue_shared/components/diff_viewer/viewers/mode_changed.vue';
+
+describe('Diff viewer mode changed component', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = shallowMount(ModeChanged, {
+      propsData: {
+        aMode: '123',
+        bMode: '321',
+      },
+    });
+  });
+
+  afterEach(() => {
+    vm.destroy();
+  });
+
+  it('renders aMode & bMode', () => {
+    expect(vm.text()).toContain('File mode changed from 123 to 321');
+  });
+});
diff --git a/spec/frontend/vue_shared/components/identicon_spec.js b/spec/frontend/vue_shared/components/identicon_spec.js
new file mode 100644
index 00000000000..0b3dbb61c96
--- /dev/null
+++ b/spec/frontend/vue_shared/components/identicon_spec.js
@@ -0,0 +1,65 @@
+import Vue from 'vue';
+import identiconComponent from '~/vue_shared/components/identicon.vue';
+
+const createComponent = sizeClass => {
+  const Component = Vue.extend(identiconComponent);
+
+  return new Component({
+    propsData: {
+      entityId: 1,
+      entityName: 'entity-name',
+      sizeClass,
+    },
+  }).$mount();
+};
+
+describe('IdenticonComponent', () => {
+  describe('computed', () => {
+    let vm;
+
+    beforeEach(() => {
+      vm = createComponent();
+    });
+
+    afterEach(() => {
+      vm.$destroy();
+    });
+
+    describe('identiconBackgroundClass', () => {
+      it('should return bg class based on entityId', () => {
+        vm.entityId = 4;
+
+        expect(vm.identiconBackgroundClass).toBeDefined();
+        expect(vm.identiconBackgroundClass).toBe('bg5');
+      });
+    });
+
+    describe('identiconTitle', () => {
+      it('should return first letter of entity title in uppercase', () => {
+        vm.entityName = 'dummy-group';
+
+        expect(vm.identiconTitle).toBeDefined();
+        expect(vm.identiconTitle).toBe('D');
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('should render identicon', () => {
+      const vm = createComponent();
+
+      expect(vm.$el.nodeName).toBe('DIV');
+      expect(vm.$el.classList.contains('identicon')).toBeTruthy();
+      expect(vm.$el.classList.contains('s40')).toBeTruthy();
+      expect(vm.$el.classList.contains('bg2')).toBeTruthy();
+      vm.$destroy();
+    });
+
+    it('should render identicon with provided sizing class', () => {
+      const vm = createComponent('s32');
+
+      expect(vm.$el.classList.contains('s32')).toBeTruthy();
+      vm.$destroy();
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/lib/utils/dom_utils_spec.js b/spec/frontend/vue_shared/components/lib/utils/dom_utils_spec.js
new file mode 100644
index 00000000000..2388660b0c2
--- /dev/null
+++ b/spec/frontend/vue_shared/components/lib/utils/dom_utils_spec.js
@@ -0,0 +1,13 @@
+import * as domUtils from '~/vue_shared/components/lib/utils/dom_utils';
+
+describe('domUtils', () => {
+  describe('pixeliseValue', () => {
+    it('should add px to a given Number', () => {
+      expect(domUtils.pixeliseValue(12)).toEqual('12px');
+    });
+
+    it('should not add px to 0', () => {
+      expect(domUtils.pixeliseValue(0)).toEqual('');
+    });
+  });
+});
diff --git a/spec/frontend/vue_shared/components/pagination_links_spec.js b/spec/frontend/vue_shared/components/pagination_links_spec.js
new file mode 100644
index 00000000000..d0cb3731050
--- /dev/null
+++ b/spec/frontend/vue_shared/components/pagination_links_spec.js
@@ -0,0 +1,59 @@
+import Vue from 'vue';
+import PaginationLinks from '~/vue_shared/components/pagination_links.vue';
+import { s__ } from '~/locale';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Pagination links component', () => {
+  const paginationLinksComponent = Vue.extend(PaginationLinks);
+  const change = page => page;
+  const pageInfo = {
+    page: 3,
+    perPage: 5,
+    total: 30,
+  };
+  const translations = {
+    firstText: s__('Pagination|« First'),
+    prevText: s__('Pagination|Prev'),
+    nextText: s__('Pagination|Next'),
+    lastText: s__('Pagination|Last »'),
+  };
+
+  let paginationLinks;
+  let glPagination;
+  let destinationComponent;
+
+  beforeEach(() => {
+    paginationLinks = mountComponent(paginationLinksComponent, {
+      change,
+      pageInfo,
+    });
+    [glPagination] = paginationLinks.$children;
+    [destinationComponent] = glPagination.$children;
+  });
+
+  afterEach(() => {
+    paginationLinks.$destroy();
+  });
+
+  it('should provide translated text to GitLab UI pagination', () => {
+    Object.entries(translations).forEach(entry => {
+      expect(destinationComponent[entry[0]]).toBe(entry[1]);
+    });
+  });
+
+  it('should pass change to GitLab UI pagination', () => {
+    expect(Object.is(glPagination.change, change)).toBe(true);
+  });
+
+  it('should pass page from pageInfo to GitLab UI pagination', () => {
+    expect(destinationComponent.value).toBe(pageInfo.page);
+  });
+
+  it('should pass per page from pageInfo to GitLab UI pagination', () => {
+    expect(destinationComponent.perPage).toBe(pageInfo.perPage);
+  });
+
+  it('should pass total items from pageInfo to GitLab UI pagination', () => {
+    expect(destinationComponent.totalRows).toBe(pageInfo.total);
+  });
+});
diff --git a/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js b/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js
new file mode 100644
index 00000000000..536bb57b946
--- /dev/null
+++ b/spec/frontend/vue_shared/components/time_ago_tooltip_spec.js
@@ -0,0 +1,44 @@
+import Vue from 'vue';
+import timeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import { formatDate, getTimeago } from '~/lib/utils/datetime_utility';
+
+describe('Time ago with tooltip component', () => {
+  let TimeagoTooltip;
+  let vm;
+
+  beforeEach(() => {
+    TimeagoTooltip = Vue.extend(timeagoTooltip);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render timeago with a bootstrap tooltip', () => {
+    vm = new TimeagoTooltip({
+      propsData: {
+        time: '2017-05-08T14:57:39.781Z',
+      },
+    }).$mount();
+
+    expect(vm.$el.tagName).toEqual('TIME');
+    expect(vm.$el.getAttribute('data-original-title')).toEqual(
+      formatDate('2017-05-08T14:57:39.781Z'),
+    );
+
+    const timeago = getTimeago();
+
+    expect(vm.$el.textContent.trim()).toEqual(timeago.format('2017-05-08T14:57:39.781Z'));
+  });
+
+  it('should render provided html class', () => {
+    vm = new TimeagoTooltip({
+      propsData: {
+        time: '2017-05-08T14:57:39.781Z',
+        cssClass: 'foo',
+      },
+    }).$mount();
+
+    expect(vm.$el.classList.contains('foo')).toEqual(true);
+  });
+});