1 files changed, 15 insertions, 72 deletions

diff --git a/spec/frontend/batch_comments/components/publish_dropdown_spec.js b/spec/frontend/batch_comments/components/publish_dropdown_spec.js
index fb3c532174d..f235867f002 100644
--- a/spec/frontend/batch_comments/components/publish_dropdown_spec.js
+++ b/spec/frontend/batch_comments/components/publish_dropdown_spec.js
@@ -1,96 +1,39 @@
-import Vue from 'vue';
-import { mountComponentWithStore } from 'helpers/vue_mount_component_helper';
+import Vuex from 'vuex';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import PreviewDropdown from '~/batch_comments/components/preview_dropdown.vue';
 import { createStore } from '~/mr_notes/stores';
 import '~/behaviors/markdown/render_gfm';
 import { createDraft } from '../mock_data';
 
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
 describe('Batch comments publish dropdown component', () => {
-  let vm;
-  let Component;
+  let wrapper;
 
-  function createComponent(extendStore = () => {}) {
+  function createComponent() {
     const store = createStore();
     store.state.batchComments.drafts.push(createDraft(), { ...createDraft(), id: 2 });
 
-    extendStore(store);
-
-    vm = mountComponentWithStore(Component, { store });
+    wrapper = shallowMount(PreviewDropdown, {
+      store,
+    });
   }
 
-  beforeAll(() => {
-    Component = Vue.extend(PreviewDropdown);
-  });
-
   afterEach(() => {
-    vm.$destroy();
-  });
-
-  it('toggles dropdown when clicking button', done => {
-    createComponent();
-
-    jest.spyOn(vm.$store, 'dispatch');
-
-    vm.$el.querySelector('.review-preview-dropdown-toggle').click();
-
-    expect(vm.$store.dispatch).toHaveBeenCalledWith(
-      'batchComments/toggleReviewDropdown',
-      expect.anything(),
-    );
-
-    setImmediate(() => {
-      expect(vm.$el.classList).toContain('show');
-
-      done();
-    });
-  });
-
-  it('toggles dropdown when clicking body', () => {
-    createComponent();
-
-    vm.$store.state.batchComments.showPreviewDropdown = true;
-
-    jest.spyOn(vm.$store, 'dispatch').mockImplementation();
-
-    document.body.click();
-
-    expect(vm.$store.dispatch).toHaveBeenCalledWith(
-      'batchComments/toggleReviewDropdown',
-      undefined,
-    );
+    wrapper.destroy();
   });
 
   it('renders list of drafts', () => {
-    createComponent(store => {
-      Object.assign(store.state.notes, {
-        isNotesFetched: true,
-      });
-    });
-
-    expect(vm.$el.querySelectorAll('.dropdown-content li').length).toBe(2);
-  });
-
-  it('adds is-last class to last item', () => {
-    createComponent(store => {
-      Object.assign(store.state.notes, {
-        isNotesFetched: true,
-      });
-    });
-
-    expect(vm.$el.querySelectorAll('.dropdown-content li')[1].querySelector('.is-last')).not.toBe(
-      null,
-    );
-  });
-
-  it('renders draft count in dropdown title', () => {
     createComponent();
 
-    expect(vm.$el.querySelector('.dropdown-title').textContent).toContain('2 pending comments');
+    expect(wrapper.findAll(GlDropdownItem).length).toBe(2);
   });
 
-  it('renders publish button in footer', () => {
+  it('renders draft count in dropdown title', () => {
     createComponent();
 
-    expect(vm.$el.querySelector('.dropdown-footer .js-publish-draft-button')).not.toBe(null);
+    expect(wrapper.find(GlDropdown).props('headerText')).toEqual('2 pending comments');
   });
 });