1 files changed, 77 insertions, 0 deletions
diff --git a/spec/frontend/members/components/action_dropdowns/remove_member_dropdown_item_spec.js b/spec/frontend/members/components/action_dropdowns/remove_member_dropdown_item_spec.js
new file mode 100644
index 00000000000..e1c498249d7
--- /dev/null
+++ b/spec/frontend/members/components/action_dropdowns/remove_member_dropdown_item_spec.js
@@ -0,0 +1,77 @@
+import { GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { modalData } from 'jest/members/mock_data';
+import RemoveMemberDropdownItem from '~/members/components/action_dropdowns/remove_member_dropdown_item.vue';
+import { MEMBER_TYPES, MEMBER_MODEL_TYPE_GROUP_MEMBER } from '~/members/constants';
+
+Vue.use(Vuex);
+
+describe('RemoveMemberDropdownItem', () => {
+  let wrapper;
+  const text = 'dummy';
+
+  const actions = {
+    showRemoveMemberModal: jest.fn(),
+  };
+
+  const createStore = (state = {}) => {
+    return new Vuex.Store({
+      modules: {
+        [MEMBER_TYPES.user]: {
+          namespaced: true,
+          state: {
+            memberPath: '/groups/foo-bar/-/group_members/:id',
+            ...state,
+          },
+          actions,
+        },
+      },
+    });
+  };
+
+  const createComponent = (propsData = {}, state) => {
+    wrapper = shallowMount(RemoveMemberDropdownItem, {
+      store: createStore(state),
+      provide: {
+        namespace: MEMBER_TYPES.user,
+      },
+      propsData: {
+        memberId: 1,
+        memberModelType: MEMBER_MODEL_TYPE_GROUP_MEMBER,
+        modalMessage: 'Are you sure you want to remove John Smith?',
+        isAccessRequest: true,
+        isInvite: true,
+        userDeletionObstacles: { name: 'user', obstacles: [] },
+        ...propsData,
+      },
+      slots: {
+        default: text,
+      },
+    });
+  };
+
+  const findDropdownItem = () => wrapper.findComponent(GlDropdownItem);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders a slot with red text', () => {
+    expect(findDropdownItem().html()).toContain(`<span class="gl-text-red-500">${text}</span>`);
+  });
+
+  it('calls Vuex action to show `remove member` modal when clicked', () => {
+    findDropdownItem().vm.$emit('click');
+
+    expect(actions.showRemoveMemberModal).toHaveBeenCalledWith(expect.any(Object), {
+      ...modalData,
+      preventRemoval: false,
+    });
+  });
+});