Add tests for design sidebar To-Do button

Including updating feature flag check to a computed prop

app/assets/javascripts/design_management/components/design_sidebar.vue

@@ -61,8 +61,8 @@ export default {
     resolvedCommentsToggleIcon() {
       return this.resolvedDiscussionsExpanded ? 'chevron-down' : 'chevron-right';
     },
-    hasPendingTodo() {
-      return Boolean(this.design.pendingTodo);
+    showTodoButton() {
+      return gon.features?.designManagementTodoButton;
     },
   },
   watch: {
@@ -99,29 +99,20 @@ export default {
     updateDiscussionWithOpenForm(id) {
       this.discussionWithOpenForm = id;
     },
-    toggleTodo() {
-      // TODO implement
   },
-  },
-  showTodoButton: gon.features?.designManagementTodoButton,
   resolveCommentsToggleText: s__('DesignManagement|Resolved Comments'),
   cookieKey: 'hide_design_resolved_comments_popover',
 };
 </script>
 
 <template>
-  <div class="image-notes" @click="handleSidebarClick">
+  <div class="image-notes" :class="{ 'gl-pt-0': showTodoButton }" @click="handleSidebarClick">
     <div
-      v-if="$options.showTodoButton"
-      class="gl-display-flex gl-justify-content-space-between gl-border-b-1 gl-border-b-gray-100"
+      v-if="showTodoButton"
+      class="gl-py-4 gl-mb-4 gl-display-flex gl-justify-content-space-between gl-align-items-center gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
     >
       <span>{{ __('To-Do') }}</span>
-      <todo-button
-        issuable-type="design"
-        :issuable-id="design.iid"
-        :is-todo="hasPendingTodo"
-        @click="toggleTodo"
-      />
+      <todo-button issuable-type="design" :issuable-id="design.iid" />
     </div>
     <h2 class="gl-font-weight-bold gl-mt-0">
       {{ issue.title }}

spec/frontend/design_management/components/design_sidebar_spec.js

@@ -6,6 +6,7 @@ import Participants from '~/sidebar/components/participants/participants.vue';
 import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue';
 import design from '../mock_data/design';
 import updateActiveDiscussionMutation from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql';
+import TodoButton from '~/vue_shared/components/todo_button.vue';
 
 const scrollIntoViewMock = jest.fn();
 HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
@@ -241,4 +242,28 @@ describe('Design management design sidebar component', () => {
       expect(Cookies.set).toHaveBeenCalledWith(cookieKey, 'true', { expires: 365 * 10 });
     });
   });
+
+  it('does not render To-Do button by default', () => {
+    createComponent();
+    expect(wrapper.find(TodoButton).exists()).toBe(false);
+  });
+
+  describe('when `design_management_todo_button` feature flag is enabled', () => {
+    beforeEach(() => {
+      window.gon = {
+        features: {
+          designManagementTodoButton: true,
+        },
+      };
+      createComponent();
+    });
+
+    it('renders sidebar root element with no top padding', () => {
+      expect(wrapper.classes()).toContain('gl-pt-0');
+    });
+
+    it('renders todo_button component', () => {
+      expect(wrapper.find(TodoButton).exists()).toBe(true);
+    });
+  });
 });

spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap

@@ -32,6 +32,8 @@ exports[`Design management design index page renders design index 1`] = `
   <div
     class="image-notes"
   >
+    <!---->
+     
     <h2
       class="gl-font-weight-bold gl-mt-0"
     >
@@ -179,6 +181,8 @@ exports[`Design management design index page with error GlAlert is rendered in c
   <div
     class="image-notes"
   >
+    <!---->
+     
     <h2
       class="gl-font-weight-bold gl-mt-0"
     >