Move frequent items list component to jest

As a part of our efforts to move from Karma to jest
this MR moves another component in frequent items

app/assets/javascripts/frequent_items/components/frequent_items_list.vue

@@ -58,7 +58,7 @@ export default {
 
 <template>
   <div class="frequent-items-list-container">
-    <ul class="list-unstyled">
+    <ul ref="frequentItemsList" class="list-unstyled">
       <li v-if="isListEmpty" :class="{ 'section-failure': isFetchFailed }" class="section-empty">
         {{ listEmptyMessage }}
       </li>

spec/frontend/frequent_items/components/frequent_items_list_item_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { trimText } from 'helpers/text_helper';
 import frequentItemsListItemComponent from '~/frequent_items/components/frequent_items_list_item.vue';
-import mockData from '../mock_data'; // can also use 'mockGroup', but not useful to test here
-
-const mockProject = mockData();
+import { mockProject } from '../mock_data'; // can also use 'mockGroup', but not useful to test here
 
 describe('FrequentItemsListItemComponent', () => {
   let wrapper;

spec/javascripts/frequent_items/components/frequent_items_list_spec.js → spec/frontend/frequent_items/components/frequent_items_list_spec.js

-import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { mount } from '@vue/test-utils';
 import frequentItemsListComponent from '~/frequent_items/components/frequent_items_list.vue';
+import frequentItemsListItemComponent from '~/frequent_items/components/frequent_items_list_item.vue';
 import { mockFrequentProjects } from '../mock_data';
 
-const createComponent = (namespace = 'projects') => {
-  const Component = Vue.extend(frequentItemsListComponent);
-
-  return mountComponent(Component, {
-    namespace,
-    items: mockFrequentProjects,
-    isFetchFailed: false,
-    hasSearchQuery: false,
-    matcher: 'lab',
-  });
-};
-
 describe('FrequentItemsListComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(frequentItemsListComponent, {
+      propsData: {
+        namespace: 'projects',
+        items: mockFrequentProjects,
+        isFetchFailed: false,
+        hasSearchQuery: false,
+        matcher: 'lab',
+        ...props,
+      },
+    });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   describe('computed', () => {
     describe('isListEmpty', () => {
       it('should return `true` or `false` representing whether if `items` is empty or not with projects', () => {
-        vm.items = [];
+        createComponent({
+          items: [],
+        });
 
-        expect(vm.isListEmpty).toBe(true);
+        expect(wrapper.vm.isListEmpty).toBe(true);
 
-        vm.items = mockFrequentProjects;
+        wrapper.setProps({
+          items: mockFrequentProjects,
+        });
 
-        expect(vm.isListEmpty).toBe(false);
+        expect(wrapper.vm.isListEmpty).toBe(false);
       });
     });
 
     describe('fetched item messages', () => {
       it('should return appropriate empty list message based on value of `localStorageFailed` prop with projects', () => {
-        vm.isFetchFailed = true;
+        createComponent({
+          isFetchFailed: true,
+        });
 
-        expect(vm.listEmptyMessage).toBe('This feature requires browser localStorage support');
+        expect(wrapper.vm.listEmptyMessage).toBe(
+          'This feature requires browser localStorage support',
+        );
 
-        vm.isFetchFailed = false;
+        wrapper.setProps({
+          isFetchFailed: false,
+        });
 
-        expect(vm.listEmptyMessage).toBe('Projects you visit often will appear here');
+        expect(wrapper.vm.listEmptyMessage).toBe('Projects you visit often will appear here');
       });
     });
 
     describe('searched item messages', () => {
       it('should return appropriate empty list message based on value of `searchFailed` prop with projects', () => {
-        vm.hasSearchQuery = true;
-        vm.isFetchFailed = true;
+        createComponent({
+          hasSearchQuery: true,
+          isFetchFailed: true,
+        });
 
-        expect(vm.listEmptyMessage).toBe('Something went wrong on our end.');
+        expect(wrapper.vm.listEmptyMessage).toBe('Something went wrong on our end.');
 
-        vm.isFetchFailed = false;
+        wrapper.setProps({
+          isFetchFailed: false,
+        });
 
-        expect(vm.listEmptyMessage).toBe('Sorry, no projects matched your search');
+        expect(wrapper.vm.listEmptyMessage).toBe('Sorry, no projects matched your search');
       });
     });
   });
 
   describe('template', () => {
-    it('should render component element with list of projects', done => {
-      vm.items = mockFrequentProjects;
-
-      Vue.nextTick(() => {
-        expect(vm.$el.classList.contains('frequent-items-list-container')).toBe(true);
-        expect(vm.$el.querySelectorAll('ul.list-unstyled').length).toBe(1);
-        expect(vm.$el.querySelectorAll('li.frequent-items-list-item-container').length).toBe(5);
-        done();
+    it('should render component element with list of projects', () => {
+      createComponent();
+
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.classes('frequent-items-list-container')).toBe(true);
+        expect(wrapper.findAll({ ref: 'frequentItemsList' })).toHaveLength(1);
+        expect(wrapper.findAll(frequentItemsListItemComponent)).toHaveLength(5);
       });
     });
 
-    it('should render component element with empty message', done => {
-      vm.items = [];
+    it('should render component element with empty message', () => {
+      createComponent({
+        items: [],
+      });
 
-      Vue.nextTick(() => {
-        expect(vm.$el.querySelectorAll('li.section-empty').length).toBe(1);
-        expect(vm.$el.querySelectorAll('li.frequent-items-list-item-container').length).toBe(0);
-        done();
+      return wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.$el.querySelectorAll('li.section-empty')).toHaveLength(1);
+        expect(wrapper.findAll(frequentItemsListItemComponent)).toHaveLength(0);
       });
     });
   });

spec/frontend/frequent_items/mock_data.js

 import { TEST_HOST } from 'helpers/test_constants';
 
-export default () => ({
+export const mockFrequentProjects = [
+  {
+    id: 1,
+    name: 'GitLab Community Edition',
+    namespace: 'gitlab-org / gitlab-ce',
+    webUrl: `${TEST_HOST}/gitlab-org/gitlab-foss`,
+    avatarUrl: null,
+    frequency: 1,
+    lastAccessedOn: Date.now(),
+  },
+  {
+    id: 2,
+    name: 'GitLab CI',
+    namespace: 'gitlab-org / gitlab-ci',
+    webUrl: `${TEST_HOST}/gitlab-org/gitlab-ci`,
+    avatarUrl: null,
+    frequency: 9,
+    lastAccessedOn: Date.now(),
+  },
+  {
+    id: 3,
+    name: 'Typeahead.Js',
+    namespace: 'twitter / typeahead-js',
+    webUrl: `${TEST_HOST}/twitter/typeahead-js`,
+    avatarUrl: '/uploads/-/system/project/avatar/7/TWBS.png',
+    frequency: 2,
+    lastAccessedOn: Date.now(),
+  },
+  {
+    id: 4,
+    name: 'Intel',
+    namespace: 'platform / hardware / bsp / intel',
+    webUrl: `${TEST_HOST}/platform/hardware/bsp/intel`,
+    avatarUrl: null,
+    frequency: 3,
+    lastAccessedOn: Date.now(),
+  },
+  {
+    id: 5,
+    name: 'v4.4',
+    namespace: 'platform / hardware / bsp / kernel / common / v4.4',
+    webUrl: `${TEST_HOST}/platform/hardware/bsp/kernel/common/v4.4`,
+    avatarUrl: null,
+    frequency: 8,
+    lastAccessedOn: Date.now(),
+  },
+];
+
+export const mockProject = {
   id: 1,
   name: 'GitLab Community Edition',
   namespace: 'gitlab-org / gitlab-ce',
   webUrl: `${TEST_HOST}/gitlab-org/gitlab-foss`,
   avatarUrl: null,
-});
+};