Add tests for todo_button.vue

app/assets/javascripts/vue_shared/components/todo_button.vue

@@ -2,9 +2,6 @@
 import { GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 
-const MARK_TEXT = __('Mark as done');
-const TODO_TEXT = __('Add a To-Do');
-
 export default {
   components: {
     GlButton,
@@ -31,11 +28,7 @@ export default {
   },
   computed: {
     buttonLabel() {
-      return this.isTodo ? MARK_TEXT : TODO_TEXT;
-    },
-
-    buttonIcon() {
-      return this.isTodo ? 'todo-done' : 'todo-add';
+      return this.isTodo ? __('Mark as done') : __('Add a To-Do');
     },
   },
   methods: {

spec/frontend/vue_shared/components/todo_button_spec.js

+import { mount } from '@vue/test-utils';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import TodoButton from '~/vue_shared/components/todo_button.vue';
+
+const defaultProps = {
+  issuableId: 1,
+  issuableType: 'epic',
+};
+
+describe('Todo Button', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(TodoButton, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders GlButton', () => {
+    createComponent();
+
+    expect(wrapper.find(GlButton).exists()).toBe(true);
+  });
+
+  it('emits toggleTodo event when clicked', () => {
+    createComponent();
+    wrapper.find(GlButton).trigger('click');
+
+    expect(wrapper.emitted().toggleTodo).toBeTruthy();
+    expect(wrapper.emitted().toggleTodo[0]).toEqual([defaultProps]);
+  });
+
+  it.each`
+    label             | isTodo
+    ${'Mark as done'} | ${true}
+    ${'Add a To-Do'}  | ${false}
+  `('sets correct label when isTodo is $isTodo', ({ label, isTodo }) => {
+    createComponent({ isTodo });
+
+    expect(wrapper.find(GlButton).text()).toBe(label);
+  });
+
+  it('renders loading icon when `isActionActive` is true', () => {
+    createComponent({ isActionActive: true });
+
+    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+  });
+});