1 files changed, 43 insertions, 39 deletions

diff --git a/spec/frontend/vue_shared/components/navigation_tabs_spec.js b/spec/frontend/vue_shared/components/navigation_tabs_spec.js
index 561456d614e..b1119bfb150 100644
--- a/spec/frontend/vue_shared/components/navigation_tabs_spec.js
+++ b/spec/frontend/vue_shared/components/navigation_tabs_spec.js
@@ -1,64 +1,68 @@
-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-import navigationTabs from '~/vue_shared/components/navigation_tabs.vue';
+import { mount } from '@vue/test-utils';
+import { GlTab } from '@gitlab/ui';
+import NavigationTabs from '~/vue_shared/components/navigation_tabs.vue';
 
 describe('navigation tabs component', () => {
-  let vm;
-  let Component;
-  let data;
+  let wrapper;
 
-  beforeEach(() => {
-    data = [
-      {
-        name: 'All',
-        scope: 'all',
-        count: 1,
-        isActive: true,
-      },
-      {
-        name: 'Pending',
-        scope: 'pending',
-        count: 0,
-        isActive: false,
-      },
-      {
-        name: 'Running',
-        scope: 'running',
-        isActive: false,
+  const data = [
+    {
+      name: 'All',
+      scope: 'all',
+      count: 1,
+      isActive: true,
+    },
+    {
+      name: 'Pending',
+      scope: 'pending',
+      count: 0,
+      isActive: false,
+    },
+    {
+      name: 'Running',
+      scope: 'running',
+      isActive: false,
+    },
+  ];
+
+  const createComponent = () => {
+    wrapper = mount(NavigationTabs, {
+      propsData: {
+        tabs: data,
+        scope: 'pipelines',
       },
-    ];
+    });
+  };
 
-    Component = Vue.extend(navigationTabs);
-    vm = mountComponent(Component, { tabs: data, scope: 'pipelines' });
+  beforeEach(() => {
+    createComponent();
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
   it('should render tabs', () => {
-    expect(vm.$el.querySelectorAll('li').length).toEqual(data.length);
+    expect(wrapper.findAll(GlTab)).toHaveLength(data.length);
   });
 
   it('should render active tab', () => {
-    expect(vm.$el.querySelector('.active .js-pipelines-tab-all')).toBeDefined();
+    expect(wrapper.find('.js-pipelines-tab-all').classes('active')).toBe(true);
   });
 
   it('should render badge', () => {
-    expect(vm.$el.querySelector('.js-pipelines-tab-all .badge').textContent.trim()).toEqual('1');
-    expect(vm.$el.querySelector('.js-pipelines-tab-pending .badge').textContent.trim()).toEqual(
-      '0',
-    );
+    expect(wrapper.find('.js-pipelines-tab-all').text()).toContain('1');
+    expect(wrapper.find('.js-pipelines-tab-pending').text()).toContain('0');
   });
 
   it('should not render badge', () => {
-    expect(vm.$el.querySelector('.js-pipelines-tab-running .badge')).toEqual(null);
+    expect(wrapper.find('.js-pipelines-tab-running .badge').exists()).toBe(false);
   });
 
-  it('should trigger onTabClick', () => {
-    jest.spyOn(vm, '$emit').mockImplementation(() => {});
-    vm.$el.querySelector('.js-pipelines-tab-pending').click();
+  it('should trigger onTabClick', async () => {
+    await wrapper.find('.js-pipelines-tab-pending').trigger('click');
 
-    expect(vm.$emit).toHaveBeenCalledWith('onChangeTab', 'pending');
+    expect(wrapper.emitted('onChangeTab')).toEqual([['pending']]);
   });
 });