Move tests to VTU

Update ide components spec to use @vue/test-utils

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

-import Vue from 'vue';
-import mountCompontent from 'helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
 import router from '~/ide/ide_router';
 import Item from '~/ide/components/branches/item.vue';
-import { getTimeago } from '~/lib/utils/datetime_utility';
+import Icon from '~/vue_shared/components/icon.vue';
+import Timeago from '~/vue_shared/components/time_ago_tooltip.vue';
 import { projectData } from '../../mock_data';
 
 const TEST_BRANCH = {
@@ -12,45 +12,45 @@ const TEST_BRANCH = {
 const TEST_PROJECT_ID = projectData.name_with_namespace;
 
 describe('IDE branch item', () => {
-  const Component = Vue.extend(Item);
-  let vm;
-
-  beforeEach(() => {
-    vm = mountCompontent(Component, {
-      item: { ...TEST_BRANCH },
-      projectId: TEST_PROJECT_ID,
-      isActive: false,
+  let wrapper;
+
+  function createComponent(props = {}) {
+    wrapper = shallowMount(Item, {
+      propsData: {
+        item: { ...TEST_BRANCH },
+        projectId: TEST_PROJECT_ID,
+        isActive: false,
+        ...props,
+      },
     });
-  });
+  }
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  it('renders branch name and timeago', () => {
-    const timeText = getTimeago().format(TEST_BRANCH.committedDate);
-
-    expect(vm.$el.textContent).toContain(TEST_BRANCH.name);
-    expect(vm.$el.querySelector('time')).toHaveText(timeText);
-    expect(vm.$el.querySelector('.ic-mobile-issue-close')).toBe(null);
-  });
+  describe('if not active', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+    it('renders branch name and timeago', () => {
+      expect(wrapper.text()).toContain(TEST_BRANCH.name);
+      expect(wrapper.find(Timeago).props('time')).toBe(TEST_BRANCH.committedDate);
+      expect(wrapper.find(Icon).exists()).toBe(false);
+    });
 
-  it('renders link to branch', () => {
-    const expectedHref = router.resolve(`/project/${TEST_PROJECT_ID}/edit/${TEST_BRANCH.name}`)
-      .href;
+    it('renders link to branch', () => {
+      const expectedHref = router.resolve(`/project/${TEST_PROJECT_ID}/edit/${TEST_BRANCH.name}`)
+        .href;
 
-    expect(vm.$el.textContent).toMatch('a');
-    expect(vm.$el).toHaveAttr('href', expectedHref);
+      expect(wrapper.text()).toMatch('a');
+      expect(wrapper.attributes('href')).toBe(expectedHref);
+    });
   });
 
-  it('renders icon if isActive', done => {
-    vm.isActive = true;
+  it('renders icon if is not active', () => {
+    createComponent({ isActive: true });
 
-    vm.$nextTick()
-      .then(() => {
-        expect(vm.$el.querySelector('.ic-mobile-issue-close')).not.toBe(null);
-      })
-      .then(done)
-      .catch(done.fail);
+    expect(wrapper.find(Icon).exists()).toBe(true);
   });
 });

spec/frontend/ide/components/jobs/detail/scroll_button_spec.js

-import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import Icon from '~/vue_shared/components/icon.vue';
 import ScrollButton from '~/ide/components/jobs/detail/scroll_button.vue';
-import mountComponent from '../../../../helpers/vue_mount_component_helper';
 
 describe('IDE job log scroll button', () => {
-  const Component = Vue.extend(ScrollButton);
-  let vm;
-
-  beforeEach(() => {
-    vm = mountComponent(Component, {
-      direction: 'up',
-      disabled: false,
+  let wrapper;
+
+  const createComponent = props => {
+    wrapper = shallowMount(ScrollButton, {
+      propsData: {
+        direction: 'up',
+        disabled: false,
+        ...props,
+      },
     });
-  });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
-  describe('iconName', () => {
-    ['up', 'down'].forEach(direction => {
-      it(`returns icon name for ${direction}`, () => {
-        vm.direction = direction;
+  describe.each`
+    direction | icon             | title
+    ${'up'}   | ${'scroll_up'}   | ${'Scroll to top'}
+    ${'down'} | ${'scroll_down'} | ${'Scroll to bottom'}
+  `('for $direction direction', ({ direction, icon, title }) => {
+    beforeEach(() => createComponent({ direction }));
 
-        expect(vm.iconName).toBe(`scroll_${direction}`);
-      });
+    it('returns proper icon name', () => {
+      expect(wrapper.find(Icon).props('name')).toBe(icon);
     });
-  });
 
-  describe('tooltipTitle', () => {
-    it('returns title for up', () => {
-      expect(vm.tooltipTitle).toBe('Scroll to top');
-    });
-
-    it('returns title for down', () => {
-      vm.direction = 'down';
-
-      expect(vm.tooltipTitle).toBe('Scroll to bottom');
+    it('returns proper title', () => {
+      expect(wrapper.attributes('data-original-title')).toBe(title);
     });
   });
 
   it('emits click event on click', () => {
-    jest.spyOn(vm, '$emit').mockImplementation(() => {});
-
-    vm.$el.querySelector('.btn-scroll').click();
+    createComponent();
 
-    expect(vm.$emit).toHaveBeenCalledWith('click');
+    wrapper.find('button').trigger('click');
+    expect(wrapper.emitted().click).toBeDefined();
   });
 
-  it('disables button when disabled is true', done => {
-    vm.disabled = true;
+  it('disables button when disabled is true', () => {
+    createComponent({ disabled: true });
 
-    vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.btn-scroll').hasAttribute('disabled')).toBe(true);
-
-      done();
-    });
+    expect(wrapper.find('button').attributes('disabled')).toBe('disabled');
   });
 });

spec/frontend/ide/components/preview/navigator_spec.js

-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
 import { TEST_HOST } from 'helpers/test_constants';
+import { GlLoadingIcon } from '@gitlab/ui';
 import ClientsideNavigator from '~/ide/components/preview/navigator.vue';
+import { listen } from 'codesandbox-api';
+
+jest.mock('codesandbox-api', () => ({
+  listen: jest.fn().mockReturnValue(jest.fn()),
+}));
 
 describe('IDE clientside preview navigator', () => {
-  let vm;
-  let Component;
+  let wrapper;
   let manager;
+  let listenHandler;
 
-  beforeAll(() => {
-    Component = Vue.extend(ClientsideNavigator);
-  });
+  const findBackButton = () => wrapper.findAll('button').at(0);
+  const findForwardButton = () => wrapper.findAll('button').at(1);
+  const findRefreshButton = () => wrapper.findAll('button').at(2);
 
   beforeEach(() => {
+    listen.mockClear();
     manager = { bundlerURL: TEST_HOST, iframe: { src: '' } };
 
-    vm = mountComponent(Component, { manager });
+    wrapper = shallowMount(ClientsideNavigator, { propsData: { manager } });
+    [[listenHandler]] = listen.mock.calls;
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   it('renders readonly URL bar', () => {
-    expect(vm.$el.querySelector('input[readonly]').value).toBe('/');
+    listenHandler({ type: 'urlchange', url: manager.bundlerURL });
+    return wrapper.vm.$nextTick(() => {
+      expect(wrapper.find('input[readonly]').element.value).toBe('/');
+    });
   });
 
-  it('disables back button when navigationStack is empty', () => {
-    expect(vm.$el.querySelector('.ide-navigator-btn')).toHaveAttr('disabled');
-    expect(vm.$el.querySelector('.ide-navigator-btn').classList).toContain('disabled-content');
+  it('renders loading icon by default', () => {
+    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
   });
 
-  it('disables forward button when forwardNavigationStack is empty', () => {
-    vm.forwardNavigationStack = [];
-
-    expect(vm.$el.querySelectorAll('.ide-navigator-btn')[1]).toHaveAttr('disabled');
-    expect(vm.$el.querySelectorAll('.ide-navigator-btn')[1].classList).toContain(
-      'disabled-content',
-    );
+  it('removes loading icon when done event is fired', () => {
+    listenHandler({ type: 'done' });
+    return wrapper.vm.$nextTick(() => {
+      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+    });
   });
 
-  it('calls back method when clicking back button', done => {
-    vm.navigationStack.push('/test');
-    vm.navigationStack.push('/test2');
-    jest.spyOn(vm, 'back').mockReturnValue();
-
-    vm.$nextTick(() => {
-      vm.$el.querySelector('.ide-navigator-btn').click();
-
-      expect(vm.back).toHaveBeenCalled();
-
-      done();
+  it('does not count visiting same url multiple times', () => {
+    listenHandler({ type: 'done' });
+    listenHandler({ type: 'done', url: `${TEST_HOST}/url1` });
+    listenHandler({ type: 'done', url: `${TEST_HOST}/url1` });
+    return wrapper.vm.$nextTick().then(() => {
+      expect(findBackButton().attributes('disabled')).toBe('disabled');
     });
   });
 
-  it('calls forward method when clicking forward button', done => {
-    vm.forwardNavigationStack.push('/test');
-    jest.spyOn(vm, 'forward').mockReturnValue();
+  it('unsubscribes from listen on destroy', () => {
+    const unsubscribeFn = listen();
 
-    vm.$nextTick(() => {
-      vm.$el.querySelectorAll('.ide-navigator-btn')[1].click();
-
-      expect(vm.forward).toHaveBeenCalled();
-
-      done();
-    });
+    wrapper.destroy();
+    expect(unsubscribeFn).toHaveBeenCalled();
   });
 
-  describe('onUrlChange', () => {
-    it('updates the path', () => {
-      vm.onUrlChange({ url: `${TEST_HOST}/url` });
-
-      expect(vm.path).toBe('/url');
+  describe('back button', () => {
+    beforeEach(() => {
+      listenHandler({ type: 'done' });
+      listenHandler({ type: 'urlchange', url: TEST_HOST });
+      return wrapper.vm.$nextTick();
     });
 
-    it('sets currentBrowsingIndex 0 if not already set', () => {
-      vm.onUrlChange({ url: `${TEST_HOST}/url` });
-
-      expect(vm.currentBrowsingIndex).toBe(0);
+    it('is disabled by default', () => {
+      expect(findBackButton().attributes('disabled')).toBe('disabled');
     });
 
-    it('increases currentBrowsingIndex if path doesnt match', () => {
-      vm.onUrlChange({ url: `${TEST_HOST}/url` });
-
-      vm.onUrlChange({ url: `${TEST_HOST}/url2` });
-
-      expect(vm.currentBrowsingIndex).toBe(1);
+    it('is enabled when there is previous entry', () => {
+      listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
+      return wrapper.vm.$nextTick().then(() => {
+        findBackButton().trigger('click');
+        expect(findBackButton().attributes('disabled')).toBeFalsy();
+      });
     });
 
-    it('does not increase currentBrowsingIndex if path matches', () => {
-      vm.onUrlChange({ url: `${TEST_HOST}/url` });
-
-      vm.onUrlChange({ url: `${TEST_HOST}/url` });
-
-      expect(vm.currentBrowsingIndex).toBe(0);
+    it('is disabled when there is no previous entry', () => {
+      listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          findBackButton().trigger('click');
+
+          return wrapper.vm.$nextTick();
+        })
+        .then(() => {
+          expect(findBackButton().attributes('disabled')).toBe('disabled');
+        });
     });
 
-    it('pushes path into navigation stack', () => {
-      vm.onUrlChange({ url: `${TEST_HOST}/url` });
+    it('updates manager iframe src', () => {
+      listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
+      listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url2` });
+      return wrapper.vm.$nextTick().then(() => {
+        findBackButton().trigger('click');
 
-      expect(vm.navigationStack).toEqual(['/url']);
+        expect(manager.iframe.src).toBe(`${TEST_HOST}/url1`);
+      });
     });
   });
 
-  describe('back', () => {
+  describe('forward button', () => {
     beforeEach(() => {
-      vm.path = '/test2';
-      vm.currentBrowsingIndex = 1;
-      vm.navigationStack.push('/test');
-      vm.navigationStack.push('/test2');
-
-      jest.spyOn(vm, 'visitPath').mockReturnValue();
-
-      vm.back();
+      listenHandler({ type: 'done' });
+      listenHandler({ type: 'urlchange', url: TEST_HOST });
+      return wrapper.vm.$nextTick();
     });
 
-    it('visits the last entry in navigationStack', () => {
-      expect(vm.visitPath).toHaveBeenCalledWith('/test');
+    it('is disabled by default', () => {
+      expect(findForwardButton().attributes('disabled')).toBe('disabled');
     });
 
-    it('adds last entry to forwardNavigationStack', () => {
-      expect(vm.forwardNavigationStack).toEqual(['/test2']);
+    it('is enabled when there is next entry', () => {
+      listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          findBackButton().trigger('click');
+          return wrapper.vm.$nextTick();
+        })
+        .then(() => {
+          expect(findForwardButton().attributes('disabled')).toBeFalsy();
+        });
     });
 
-    it('clears navigation stack if currentBrowsingIndex is 1', () => {
-      expect(vm.navigationStack).toEqual([]);
+    it('is disabled when there is no next entry', () => {
+      listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          findBackButton().trigger('click');
+          return wrapper.vm.$nextTick();
+        })
+        .then(() => {
+          findForwardButton().trigger('click');
+          return wrapper.vm.$nextTick();
+        })
+        .then(() => {
+          expect(findForwardButton().attributes('disabled')).toBe('disabled');
+        });
     });
 
-    it('sets currentBrowsingIndex to null is currentBrowsingIndex is 1', () => {
-      expect(vm.currentBrowsingIndex).toBe(null);
-    });
-  });
-
-  describe('forward', () => {
-    it('calls visitPath with first entry in forwardNavigationStack', () => {
-      jest.spyOn(vm, 'visitPath').mockReturnValue();
-
-      vm.forwardNavigationStack.push('/test');
-      vm.forwardNavigationStack.push('/test2');
+    it('updates manager iframe src', () => {
+      listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url1` });
+      listenHandler({ type: 'urlchange', url: `${TEST_HOST}/url2` });
+      return wrapper.vm.$nextTick().then(() => {
+        findBackButton().trigger('click');
 
-      vm.forward();
-
-      expect(vm.visitPath).toHaveBeenCalledWith('/test');
+        expect(manager.iframe.src).toBe(`${TEST_HOST}/url1`);
+      });
     });
   });
 
-  describe('refresh', () => {
-    it('calls refresh with current path', () => {
-      jest.spyOn(vm, 'visitPath').mockReturnValue();
-
-      vm.path = '/test';
-
-      vm.refresh();
-
-      expect(vm.visitPath).toHaveBeenCalledWith('/test');
+  describe('refresh button', () => {
+    const url = `${TEST_HOST}/some_url`;
+    beforeEach(() => {
+      listenHandler({ type: 'done' });
+      listenHandler({ type: 'urlchange', url });
+      return wrapper.vm.$nextTick();
     });
-  });
 
-  describe('visitPath', () => {
-    it('updates iframe src with passed in path', () => {
-      vm.visitPath('/testpath');
+    it('calls refresh with current path', () => {
+      manager.iframe.src = 'something-other';
+      findRefreshButton().trigger('click');
 
-      expect(manager.iframe.src).toBe(`${TEST_HOST}/testpath`);
+      expect(manager.iframe.src).toBe(url);
     });
   });
 });