Merge branch 'leipert-jestodus-yet-again' into 'master'

jestodus: move a few Frontend specs

See merge request gitlab-org/gitlab!29796

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_svg.vue

-<script>
-/* This is a re-usable vue component for rendering a user avatar svg (typically
-  for a blank state). It will receive styles comparable to the user avatar,
-  but no image is loaded, it isn't wrapped in a link, and tooltips aren't supported.
-  The svg and avatar size can be configured by props passed to this component.
-
-  Sample configuration:
-
-  <user-avatar-svg
-    :svg="potentialApproverSvg"
-    :size="20"
-  />
-
-*/
-
-export default {
-  props: {
-    svg: {
-      type: String,
-      required: true,
-    },
-    size: {
-      type: Number,
-      required: false,
-      default: 20,
-    },
-  },
-  computed: {
-    avatarSizeClass() {
-      return `s${this.size}`;
-    },
-  },
-};
-</script>
-
-<template>
-  <svg :class="avatarSizeClass" :height="size" :width="size" v-html="svg" />
-</template>

spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js

@@ -2,10 +2,7 @@ import Vue from 'vue';
 import { mount } from '@vue/test-utils';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import RelatedIssuableItem from '~/vue_shared/components/issue/related_issuable_item.vue';
-import {
-  defaultAssignees,
-  defaultMilestone,
-} from '../../../../javascripts/vue_shared/components/issue/related_issuable_mock_data';
+import { defaultAssignees, defaultMilestone } from './related_issuable_mock_data';
 
 describe('RelatedIssuableItem', () => {
   let wrapper;

spec/javascripts/vue_shared/components/markdown/suggestions_spec.js → spec/frontend/vue_shared/components/markdown/suggestions_spec.js

@@ -37,10 +37,10 @@ const MOCK_DATA = {
   noteHtml: `
       <div class="suggestion">
       <div class="line">-oldtest</div>
-    </div>  
+    </div>
     <div class="suggestion">
       <div class="line">+newtest</div>
-    </div>    
+    </div>
   `,
   isApplied: false,
   helpPagePath: 'path_to_docs',
@@ -59,7 +59,7 @@ describe('Suggestion component', () => {
 
     diffTable = vm.generateDiff(0).$mount().$el;
 
-    spyOn(vm, 'renderSuggestions');
+    jest.spyOn(vm, 'renderSuggestions').mockImplementation(() => {});
     vm.renderSuggestions();
     Vue.nextTick(done);
   });
@@ -85,10 +85,6 @@ describe('Suggestion component', () => {
       expect(diffTable.querySelector('.md-suggestion-diff')).not.toBeNull();
     });
 
-    it('generates a diff table that contains contents of `oldLineContent`', () => {
-      expect(diffTable.innerHTML.includes(vm.fromContent)).toBe(true);
-    });
-
     it('generates a diff table that contains contents the suggested lines', () => {
       MOCK_DATA.suggestions[0].diff_lines.forEach(line => {
         const text = line.text.substring(1);

spec/javascripts/vue_shared/components/project_selector/project_selector_spec.js → spec/frontend/vue_shared/components/project_selector/project_selector_spec.js

@@ -3,7 +3,7 @@ import { head } from 'lodash';
 
 import { GlSearchBoxByType, GlInfiniteScroll } from '@gitlab/ui';
 import { mount, createLocalVue } from '@vue/test-utils';
-import { trimText } from 'spec/helpers/text_helper';
+import { trimText } from 'helpers/text_helper';
 import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue';
 import ProjectSelector from '~/vue_shared/components/project_selector/project_selector.vue';
 
@@ -12,7 +12,6 @@ const localVue = createLocalVue();
 describe('ProjectSelector component', () => {
   let wrapper;
   let vm;
-  loadJSONFixtures('static/projects.json');
   const allProjects = getJSONFixture('static/projects.json');
   const searchResults = allProjects.slice(0, 5);
   let selected = [];
@@ -21,9 +20,6 @@ describe('ProjectSelector component', () => {
   const findSearchInput = () => wrapper.find(GlSearchBoxByType).find('input');
 
   beforeEach(() => {
-    jasmine.clock().install();
-    jasmine.clock().mockDate();
-
     wrapper = mount(Vue.extend(ProjectSelector), {
       localVue,
       propsData: {
@@ -41,7 +37,6 @@ describe('ProjectSelector component', () => {
   });
 
   afterEach(() => {
-    jasmine.clock().uninstall();
     vm.$destroy();
   });
 
@@ -49,42 +44,17 @@ describe('ProjectSelector component', () => {
     expect(wrapper.findAll('.js-project-list-item').length).toBe(5);
   });
 
-  it(`triggers a (debounced) search when the search input value changes`, () => {
-    spyOn(vm, '$emit');
+  it(`triggers a search when the search input value changes`, () => {
+    jest.spyOn(vm, '$emit').mockImplementation(() => {});
     const query = 'my test query!';
     const searchInput = findSearchInput();
 
     searchInput.setValue(query);
     searchInput.trigger('input');
 
-    expect(vm.$emit).not.toHaveBeenCalledWith();
-    jasmine.clock().tick(501);
-
     expect(vm.$emit).toHaveBeenCalledWith('searched', query);
   });
 
-  it(`debounces the search input`, () => {
-    spyOn(vm, '$emit');
-    const searchInput = findSearchInput();
-
-    const updateSearchQuery = (count = 0) => {
-      if (count === 10) {
-        jasmine.clock().tick(101);
-
-        expect(vm.$emit).toHaveBeenCalledTimes(1);
-        expect(vm.$emit).toHaveBeenCalledWith('searched', `search query #9`);
-      } else {
-        searchInput.setValue(`search query #${count}`);
-        searchInput.trigger('input');
-
-        jasmine.clock().tick(400);
-        updateSearchQuery(count + 1);
-      }
-    };
-
-    updateSearchQuery();
-  });
-
   it(`includes a placeholder in the search box`, () => {
     const searchInput = findSearchInput();
 
@@ -92,14 +62,14 @@ describe('ProjectSelector component', () => {
   });
 
   it(`triggers a "bottomReached" event when user has scrolled to the bottom of the list`, () => {
-    spyOn(vm, '$emit');
+    jest.spyOn(vm, '$emit').mockImplementation(() => {});
     wrapper.find(GlInfiniteScroll).vm.$emit('bottomReached');
 
     expect(vm.$emit).toHaveBeenCalledWith('bottomReached');
   });
 
   it(`triggers a "projectClicked" event when a project is clicked`, () => {
-    spyOn(vm, '$emit');
+    jest.spyOn(vm, '$emit').mockImplementation(() => {});
     wrapper.find(ProjectListItem).vm.$emit('click', head(searchResults));
 
     expect(vm.$emit).toHaveBeenCalledWith('projectClicked', head(searchResults));

spec/frontend/vue_shared/components/user_avatar/user_avatar_svg_spec.js

-import { shallowMount } from '@vue/test-utils';
-import UserAvatarSvg from '~/vue_shared/components/user_avatar/user_avatar_svg.vue';
-
-describe('User Avatar Svg Component', () => {
-  describe('Initialization', () => {
-    let wrapper;
-
-    beforeEach(() => {
-      wrapper = shallowMount(UserAvatarSvg, {
-        propsData: {
-          size: 99,
-          svg:
-            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M1.707 15.707C1.077z"/></svg>',
-        },
-      });
-    });
-
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
-    it('should have <svg> as a child element', () => {
-      expect(wrapper.element.tagName).toEqual('svg');
-      expect(wrapper.html()).toContain('<path');
-    });
-  });
-});