1 files changed, 43 insertions, 6 deletions
diff --git a/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js b/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
index e6673fa78ec..4f2badf869d 100644
--- a/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
+++ b/spec/frontend/frequent_items/components/frequent_items_list_item_spec.js
@@ -1,5 +1,5 @@
-import { GlButton } from '@gitlab/ui';
-import Vue from 'vue';
+import { GlIcon } from '@gitlab/ui';
+import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { trimText } from 'helpers/text_helper';
@@ -12,6 +12,7 @@ import { mockProject } from '../mock_data';
 Vue.use(Vuex);
 
 describe('FrequentItemsListItemComponent', () => {
+  const TEST_VUEX_MODULE = 'frequentProjects';
   let wrapper;
   let trackingSpy;
   let store;
@@ -20,11 +21,18 @@ describe('FrequentItemsListItemComponent', () => {
   const findAvatar = () => wrapper.findComponent(ProjectAvatar);
   const findAllTitles = () => wrapper.findAllByTestId('frequent-items-item-title');
   const findNamespace = () => wrapper.findByTestId('frequent-items-item-namespace');
-  const findAllButtons = () => wrapper.findAllComponents(GlButton);
+  const findAllFrequentItems = () => wrapper.findAllByTestId('frequent-item-link');
   const findAllNamespace = () => wrapper.findAllByTestId('frequent-items-item-namespace');
   const findAllAvatars = () => wrapper.findAllComponents(ProjectAvatar);
   const findAllMetadataContainers = () =>
     wrapper.findAllByTestId('frequent-items-item-metadata-container');
+  const findRemoveButton = () => wrapper.findByTestId('item-remove');
+
+  const toggleItemsListEditablity = async () => {
+    store.dispatch(`${TEST_VUEX_MODULE}/toggleItemsListEditablity`);
+
+    await nextTick();
+  };
 
   const createComponent = (props = {}) => {
     wrapper = shallowMountExtended(frequentItemsListItemComponent, {
@@ -38,7 +46,7 @@ describe('FrequentItemsListItemComponent', () => {
         ...props,
       },
       provide: {
-        vuexModule: 'frequentProjects',
+        vuexModule: TEST_VUEX_MODULE,
       },
     });
   };
@@ -102,7 +110,7 @@ describe('FrequentItemsListItemComponent', () => {
 
     it.each`
       name                    | selector                     | expected
-      ${'button'}             | ${findAllButtons}            | ${1}
+      ${'list item'}          | ${findAllFrequentItems}      | ${1}
       ${'avatar container'}   | ${findAllAvatars}            | ${1}
       ${'metadata container'} | ${findAllMetadataContainers} | ${1}
       ${'title'}              | ${findAllTitles}             | ${1}
@@ -111,8 +119,37 @@ describe('FrequentItemsListItemComponent', () => {
       expect(selector()).toHaveLength(expected);
     });
 
+    it('renders remove button within item when `isItemsListEditable` is true', async () => {
+      await toggleItemsListEditablity();
+
+      const removeButton = findRemoveButton();
+      expect(removeButton.exists()).toBe(true);
+      expect(removeButton.attributes('title')).toBe('Remove');
+      expect(removeButton.findComponent(GlIcon).props('name')).toBe('close');
+    });
+
+    it('dispatches action `removeFrequentItem` when remove button is clicked', async () => {
+      await toggleItemsListEditablity();
+
+      jest.spyOn(store, 'dispatch');
+
+      const removeButton = findRemoveButton();
+      removeButton.vm.$emit(
+        'click',
+        { stopPropagation: jest.fn(), preventDefault: jest.fn() },
+        mockProject.id,
+      );
+
+      await nextTick();
+
+      expect(store.dispatch).toHaveBeenCalledWith(
+        `${TEST_VUEX_MODULE}/removeFrequentItem`,
+        mockProject.id,
+      );
+    });
+
     it('tracks when item link is clicked', () => {
-      const link = wrapper.findComponent(GlButton);
+      const link = wrapper.findByTestId('frequent-item-link');
 
       link.vm.$emit('click');