1 files changed, 66 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/members/action_buttons/remove_member_button_spec.js b/spec/frontend/vue_shared/components/members/action_buttons/remove_member_button_spec.js
new file mode 100644
index 00000000000..7aa30494234
--- /dev/null
+++ b/spec/frontend/vue_shared/components/members/action_buttons/remove_member_button_spec.js
@@ -0,0 +1,66 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import RemoveMemberButton from '~/vue_shared/components/members/action_buttons/remove_member_button.vue';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('RemoveMemberButton', () => {
+  let wrapper;
+
+  const createStore = (state = {}) => {
+    return new Vuex.Store({
+      state: {
+        memberPath: '/groups/foo-bar/-/group_members/:id',
+        ...state,
+      },
+    });
+  };
+
+  const createComponent = (propsData = {}, state) => {
+    wrapper = shallowMount(RemoveMemberButton, {
+      localVue,
+      store: createStore(state),
+      propsData: {
+        memberId: 1,
+        message: 'Are you sure you want to remove John Smith?',
+        title: 'Remove member',
+        isAccessRequest: true,
+        ...propsData,
+      },
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('sets attributes on button', () => {
+    createComponent();
+
+    expect(wrapper.attributes()).toMatchObject({
+      'data-member-path': '/groups/foo-bar/-/group_members/1',
+      'data-message': 'Are you sure you want to remove John Smith?',
+      'data-is-access-request': 'true',
+      'aria-label': 'Remove member',
+      title: 'Remove member',
+      icon: 'remove',
+    });
+  });
+
+  it('displays `title` prop as a tooltip', () => {
+    createComponent();
+
+    expect(getBinding(wrapper.element, 'gl-tooltip')).not.toBeUndefined();
+  });
+
+  it('has CSS class used by `remove_member_modal.vue`', () => {
+    createComponent();
+
+    expect(wrapper.classes()).toContain('js-remove-member-button');
+  });
+});