Merge branch 'todo-button-shared' into 'master'

Create shared todo_button.vue component

See merge request gitlab-org/gitlab!39931

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

+<script>
+import { GlButton } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+export default {
+  components: {
+    GlButton,
+  },
+  props: {
+    isTodo: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  computed: {
+    buttonLabel() {
+      return this.isTodo ? __('Mark as done') : __('Add a To-Do');
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-button v-bind="$attrs" :aria-label="buttonLabel" @click="$emit('click', $event)">
+    {{ buttonLabel }}
+  </gl-button>
+</template>

spec/frontend/vue_shared/components/todo_button_spec.js

+import { shallowMount, mount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
+import TodoButton from '~/vue_shared/components/todo_button.vue';
+
+describe('Todo Button', () => {
+  let wrapper;
+
+  const createComponent = (props = {}, mountFn = shallowMount) => {
+    wrapper = mountFn(TodoButton, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders GlButton', () => {
+    createComponent();
+
+    expect(wrapper.find(GlButton).exists()).toBe(true);
+  });
+
+  it('emits click event when clicked', () => {
+    createComponent({}, mount);
+    wrapper.find(GlButton).trigger('click');
+
+    expect(wrapper.emitted().click).toBeTruthy();
+  });
+
+  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('binds additional props to GlButton', () => {
+    createComponent({ loading: true });
+
+    expect(wrapper.find(GlButton).props('loading')).toBe(true);
+  });
+});