Merge branch 'refactor-search-list-spec-to-jest' into 'master'

Refactor search_list_spec to Jest

Closes #31630

See merge request gitlab-org/gitlab!16905

spec/frontend/ide/components/branches/search_list_spec.js

+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { __ } from '~/locale';
+import List from '~/ide/components/branches/search_list.vue';
+import Item from '~/ide/components/branches/item.vue';
+import { GlLoadingIcon } from '@gitlab/ui';
+import { branches } from '../../mock_data';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('IDE branches search list', () => {
+  let wrapper;
+  const fetchBranchesMock = jest.fn();
+
+  const createComponent = (state, currentBranchId = 'branch') => {
+    const fakeStore = new Vuex.Store({
+      state: {
+        currentBranchId,
+        currentProjectId: 'project',
+      },
+      modules: {
+        branches: {
+          namespaced: true,
+          state: { isLoading: false, branches: [], ...state },
+          actions: {
+            fetchBranches: fetchBranchesMock,
+          },
+        },
+      },
+    });
+
+    wrapper = shallowMount(List, {
+      localVue,
+      store: fakeStore,
+      sync: false,
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('calls fetch on mounted', () => {
+    createComponent();
+    expect(fetchBranchesMock).toHaveBeenCalled();
+  });
+
+  it('renders loading icon when `isLoading` is true', () => {
+    createComponent({ isLoading: true });
+    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+  });
+
+  it('renders branches not found when search is not empty and branches list is empty', () => {
+    createComponent({ branches: [] });
+    wrapper.find('input[type="search"]').setValue('something');
+
+    return wrapper.vm.$nextTick().then(() => {
+      expect(wrapper.text()).toContain(__('No branches found'));
+    });
+  });
+
+  describe('with branches', () => {
+    it('renders list', () => {
+      createComponent({ branches });
+      const items = wrapper.findAll(Item);
+
+      expect(items.length).toBe(branches.length);
+    });
+
+    it('renders check next to active branch', () => {
+      const activeBranch = 'regular';
+      createComponent({ branches }, activeBranch);
+      const items = wrapper.findAll(Item).filter(w => w.props('isActive'));
+
+      expect(items.length).toBe(1);
+      expect(items.at(0).props('item').name).toBe(activeBranch);
+    });
+  });
+});

spec/frontend/ide/mock_data.js

+import { TEST_HOST } from 'spec/test_constants';
+
+export const projectData = {
+  id: 1,
+  name: 'abcproject',
+  web_url: '',
+  avatar_url: '',
+  path: '',
+  name_with_namespace: 'namespace/abcproject',
+  branches: {
+    master: {
+      treeId: 'abcproject/master',
+      can_push: true,
+      commit: {
+        id: '123',
+      },
+    },
+  },
+  mergeRequests: {},
+  merge_requests_enabled: true,
+  default_branch: 'master',
+};
+
+export const pipelines = [
+  {
+    id: 1,
+    ref: 'master',
+    sha: '123',
+    details: {
+      status: {
+        icon: 'status_failed',
+        group: 'failed',
+        text: 'Failed',
+      },
+    },
+    commit: { id: '123' },
+  },
+  {
+    id: 2,
+    ref: 'master',
+    sha: '213',
+    details: {
+      status: {
+        icon: 'status_failed',
+        group: 'failed',
+        text: 'Failed',
+      },
+    },
+    commit: { id: '213' },
+  },
+];
+
+export const stages = [
+  {
+    dropdown_path: `${TEST_HOST}/testing`,
+    name: 'build',
+    status: {
+      icon: 'status_failed',
+      group: 'failed',
+      text: 'failed',
+    },
+  },
+  {
+    dropdown_path: 'testing',
+    name: 'test',
+    status: {
+      icon: 'status_failed',
+      group: 'failed',
+      text: 'failed',
+    },
+  },
+];
+
+export const jobs = [
+  {
+    id: 1,
+    name: 'test',
+    path: 'testing',
+    status: {
+      icon: 'status_success',
+      text: 'passed',
+    },
+    stage: 'test',
+    duration: 1,
+    started: new Date(),
+  },
+  {
+    id: 2,
+    name: 'test 2',
+    path: 'testing2',
+    status: {
+      icon: 'status_success',
+      text: 'passed',
+    },
+    stage: 'test',
+    duration: 1,
+    started: new Date(),
+  },
+  {
+    id: 3,
+    name: 'test 3',
+    path: 'testing3',
+    status: {
+      icon: 'status_success',
+      text: 'passed',
+    },
+    stage: 'test',
+    duration: 1,
+    started: new Date(),
+  },
+  {
+    id: 4,
+    name: 'test 4',
+    path: 'testing4',
+    status: {
+      icon: 'status_failed',
+      text: 'failed',
+    },
+    stage: 'build',
+    duration: 1,
+    started: new Date(),
+  },
+];
+
+export const fullPipelinesResponse = {
+  data: {
+    count: {
+      all: 2,
+    },
+    pipelines: [
+      {
+        id: '51',
+        path: 'test',
+        commit: {
+          id: '123',
+        },
+        details: {
+          status: {
+            icon: 'status_failed',
+            text: 'failed',
+          },
+          stages: [...stages],
+        },
+      },
+      {
+        id: '50',
+        commit: {
+          id: 'abc123def456ghi789jkl',
+        },
+        details: {
+          status: {
+            icon: 'status_success',
+            text: 'passed',
+          },
+          stages: [...stages],
+        },
+      },
+    ],
+  },
+};
+
+export const mergeRequests = [
+  {
+    id: 1,
+    iid: 1,
+    title: 'Test merge request',
+    project_id: 1,
+    web_url: `${TEST_HOST}/namespace/project-path/merge_requests/1`,
+  },
+];
+
+export const branches = [
+  {
+    id: 1,
+    name: 'master',
+    commit: {
+      message: 'Update master branch',
+      committed_date: '2018-08-01T00:20:05Z',
+    },
+    can_push: true,
+    protected: true,
+    default: true,
+  },
+  {
+    id: 2,
+    name: 'protected/no-access',
+    commit: {
+      message: 'Update some stuff',
+      committed_date: '2018-08-02T00:00:05Z',
+    },
+    can_push: false,
+    protected: true,
+    default: false,
+  },
+  {
+    id: 3,
+    name: 'protected/access',
+    commit: {
+      message: 'Update some stuff',
+      committed_date: '2018-08-02T00:00:05Z',
+    },
+    can_push: true,
+    protected: true,
+    default: false,
+  },
+  {
+    id: 4,
+    name: 'regular',
+    commit: {
+      message: 'Update some more stuff',
+      committed_date: '2018-06-30T00:20:05Z',
+    },
+    can_push: true,
+    protected: false,
+    default: false,
+  },
+  {
+    id: 5,
+    name: 'regular/no-access',
+    commit: {
+      message: 'Update some more stuff',
+      committed_date: '2018-06-30T00:20:05Z',
+    },
+    can_push: false,
+    protected: false,
+    default: false,
+  },
+];

spec/javascripts/ide/components/branches/search_list_spec.js

-import Vue from 'vue';
-import store from '~/ide/stores';
-import * as types from '~/ide/stores/modules/branches/mutation_types';
-import List from '~/ide/components/branches/search_list.vue';
-import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
-import { branches as testBranches } from '../../mock_data';
-import { resetStore } from '../../helpers';
-
-describe('IDE branches search list', () => {
-  const Component = Vue.extend(List);
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponentWithStore(Component, store, {});
-
-    spyOn(vm, 'fetchBranches');
-
-    vm.$mount();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-
-    resetStore(store);
-  });
-
-  it('calls fetch on mounted', () => {
-    expect(vm.fetchBranches).toHaveBeenCalledWith({
-      search: '',
-    });
-  });
-
-  it('renders loading icon', done => {
-    vm.$store.state.branches.isLoading = true;
-
-    vm.$nextTick()
-      .then(() => {
-        expect(vm.$el).toContainElement('.loading-container');
-      })
-      .then(done)
-      .catch(done.fail);
-  });
-
-  it('renders branches not found when search is not empty', done => {
-    vm.search = 'testing';
-
-    vm.$nextTick(() => {
-      expect(vm.$el).toContainText('No branches found');
-
-      done();
-    });
-  });
-
-  describe('with branches', () => {
-    const currentBranch = testBranches[1];
-
-    beforeEach(done => {
-      vm.$store.state.currentBranchId = currentBranch.name;
-      vm.$store.commit(`branches/${types.RECEIVE_BRANCHES_SUCCESS}`, testBranches);
-
-      vm.$nextTick(done);
-    });
-
-    it('renders list', () => {
-      const elementText = Array.from(vm.$el.querySelectorAll('li strong')).map(x =>
-        x.textContent.trim(),
-      );
-
-      expect(elementText).toEqual(testBranches.map(x => x.name));
-    });
-
-    it('renders check next to active branch', () => {
-      const checkedText = Array.from(vm.$el.querySelectorAll('li'))
-        .filter(x => x.querySelector('.ide-search-list-current-icon svg'))
-        .map(x => x.querySelector('strong').textContent.trim());
-
-      expect(checkedText).toEqual([currentBranch.name]);
-    });
-  });
-});

spec/javascripts/ide/mock_data.js

-import { TEST_HOST } from '../test_constants';
-
-export const projectData = {
-  id: 1,
-  name: 'abcproject',
-  web_url: '',
-  avatar_url: '',
-  path: '',
-  name_with_namespace: 'namespace/abcproject',
-  branches: {
-    master: {
-      treeId: 'abcproject/master',
-      can_push: true,
-      commit: {
-        id: '123',
-      },
-    },
-  },
-  mergeRequests: {},
-  merge_requests_enabled: true,
-  default_branch: 'master',
-};
-
-export const pipelines = [
-  {
-    id: 1,
-    ref: 'master',
-    sha: '123',
-    details: {
-      status: {
-        icon: 'status_failed',
-        group: 'failed',
-        text: 'Failed',
-      },
-    },
-    commit: { id: '123' },
-  },
-  {
-    id: 2,
-    ref: 'master',
-    sha: '213',
-    details: {
-      status: {
-        icon: 'status_failed',
-        group: 'failed',
-        text: 'Failed',
-      },
-    },
-    commit: { id: '213' },
-  },
-];
-
-export const stages = [
-  {
-    dropdown_path: `${TEST_HOST}/testing`,
-    name: 'build',
-    status: {
-      icon: 'status_failed',
-      group: 'failed',
-      text: 'failed',
-    },
-  },
-  {
-    dropdown_path: 'testing',
-    name: 'test',
-    status: {
-      icon: 'status_failed',
-      group: 'failed',
-      text: 'failed',
-    },
-  },
-];
-
-export const jobs = [
-  {
-    id: 1,
-    name: 'test',
-    path: 'testing',
-    status: {
-      icon: 'status_success',
-      text: 'passed',
-    },
-    stage: 'test',
-    duration: 1,
-    started: new Date(),
-  },
-  {
-    id: 2,
-    name: 'test 2',
-    path: 'testing2',
-    status: {
-      icon: 'status_success',
-      text: 'passed',
-    },
-    stage: 'test',
-    duration: 1,
-    started: new Date(),
-  },
-  {
-    id: 3,
-    name: 'test 3',
-    path: 'testing3',
-    status: {
-      icon: 'status_success',
-      text: 'passed',
-    },
-    stage: 'test',
-    duration: 1,
-    started: new Date(),
-  },
-  {
-    id: 4,
-    name: 'test 4',
-    path: 'testing4',
-    status: {
-      icon: 'status_failed',
-      text: 'failed',
-    },
-    stage: 'build',
-    duration: 1,
-    started: new Date(),
-  },
-];
-
-export const fullPipelinesResponse = {
-  data: {
-    count: {
-      all: 2,
-    },
-    pipelines: [
-      {
-        id: '51',
-        path: 'test',
-        commit: {
-          id: '123',
-        },
-        details: {
-          status: {
-            icon: 'status_failed',
-            text: 'failed',
-          },
-          stages: [...stages],
-        },
-      },
-      {
-        id: '50',
-        commit: {
-          id: 'abc123def456ghi789jkl',
-        },
-        details: {
-          status: {
-            icon: 'status_success',
-            text: 'passed',
-          },
-          stages: [...stages],
-        },
-      },
-    ],
-  },
-};
-
-export const mergeRequests = [
-  {
-    id: 1,
-    iid: 1,
-    title: 'Test merge request',
-    project_id: 1,
-    web_url: `${TEST_HOST}/namespace/project-path/merge_requests/1`,
-  },
-];
-
-export const branches = [
-  {
-    id: 1,
-    name: 'master',
-    commit: {
-      message: 'Update master branch',
-      committed_date: '2018-08-01T00:20:05Z',
-    },
-    can_push: true,
-    protected: true,
-    default: true,
-  },
-  {
-    id: 2,
-    name: 'protected/no-access',
-    commit: {
-      message: 'Update some stuff',
-      committed_date: '2018-08-02T00:00:05Z',
-    },
-    can_push: false,
-    protected: true,
-    default: false,
-  },
-  {
-    id: 3,
-    name: 'protected/access',
-    commit: {
-      message: 'Update some stuff',
-      committed_date: '2018-08-02T00:00:05Z',
-    },
-    can_push: true,
-    protected: true,
-    default: false,
-  },
-  {
-    id: 4,
-    name: 'regular',
-    commit: {
-      message: 'Update some more stuff',
-      committed_date: '2018-06-30T00:20:05Z',
-    },
-    can_push: true,
-    protected: false,
-    default: false,
-  },
-  {
-    id: 5,
-    name: 'regular/no-access',
-    commit: {
-      message: 'Update some more stuff',
-      committed_date: '2018-06-30T00:20:05Z',
-    },
-    can_push: false,
-    protected: false,
-    default: false,
-  },
-];
+export * from '../../frontend/ide/mock_data';