Add proper null check for task item rendering

If description is empty, this.$el was still non-null, but
it was just an HTML comment as a string. So the call to
querySelectorAll failed

app/assets/javascripts/issues/show/components/description.vue

@@ -95,7 +95,7 @@ export default {
     this.renderGFM();
     this.updateTaskStatusText();
 
-    if (this.workItemsEnabled && this.$el) {
+    if (this.workItemsEnabled) {
       this.renderTaskActions();
     }
   },
@@ -157,7 +157,12 @@ export default {
       }
     },
     renderTaskActions() {
+      if (!this.$el?.querySelectorAll) {
+        return;
+      }
+
       const taskListFields = this.$el.querySelectorAll('.task-list-item');
+
       taskListFields.forEach((item, index) => {
         const button = document.createElement('button');
         button.classList.add(

spec/frontend/issues/show/components/description_spec.js

@@ -209,57 +209,79 @@ describe('Description component', () => {
   });
 
   describe('with work items feature flag is enabled', () => {
-    beforeEach(async () => {
-      createComponent({
-        props: {
-          descriptionHtml: descriptionHtmlWithCheckboxes,
-        },
-        provide: {
-          glFeatures: {
-            workItems: true,
+    describe('empty description', () => {
+      beforeEach(async () => {
+        createComponent({
+          props: {
+            descriptionHtml: '',
           },
-        },
+          provide: {
+            glFeatures: {
+              workItems: true,
+            },
+          },
+        });
+        await nextTick();
       });
-      await nextTick();
-    });
 
-    it('renders a list of hidden buttons corresponding to checkboxes in description HTML', () => {
-      expect(findTaskActionButtons()).toHaveLength(3);
+      it('renders without error', () => {
+        expect(findTaskActionButtons()).toHaveLength(0);
+      });
     });
 
-    it('renders a list of popovers corresponding to checkboxes in description HTML', () => {
-      expect(findPopovers()).toHaveLength(3);
-      expect(findPopovers().at(0).props('target')).toBe(
-        findTaskActionButtons().at(0).attributes('id'),
-      );
-    });
+    describe('description with checkboxes', () => {
+      beforeEach(async () => {
+        createComponent({
+          props: {
+            descriptionHtml: descriptionHtmlWithCheckboxes,
+          },
+          provide: {
+            glFeatures: {
+              workItems: true,
+            },
+          },
+        });
+        await nextTick();
+      });
 
-    it('does not show a modal by default', () => {
-      expect(findModal().props('visible')).toBe(false);
-    });
+      it('renders a list of hidden buttons corresponding to checkboxes in description HTML', () => {
+        expect(findTaskActionButtons()).toHaveLength(3);
+      });
 
-    it('opens a modal when a button on popover is clicked and displays correct title', async () => {
-      findConvertToTaskButton().vm.$emit('click');
-      expect(showModal).toHaveBeenCalled();
-      await nextTick();
-      expect(findCreateWorkItem().props('initialTitle').trim()).toBe('todo 1');
-    });
+      it('renders a list of popovers corresponding to checkboxes in description HTML', () => {
+        expect(findPopovers()).toHaveLength(3);
+        expect(findPopovers().at(0).props('target')).toBe(
+          findTaskActionButtons().at(0).attributes('id'),
+        );
+      });
 
-    it('closes the modal on `closeCreateTaskModal` event', () => {
-      findConvertToTaskButton().vm.$emit('click');
-      findCreateWorkItem().vm.$emit('closeModal');
-      expect(hideModal).toHaveBeenCalled();
-    });
+      it('does not show a modal by default', () => {
+        expect(findModal().props('visible')).toBe(false);
+      });
 
-    it('updates description HTML on `onCreate` event', async () => {
-      const newTitle = 'New title';
-      findConvertToTaskButton().vm.$emit('click');
-      findCreateWorkItem().vm.$emit('onCreate', newTitle);
-      expect(hideModal).toHaveBeenCalled();
-      await nextTick();
+      it('opens a modal when a button on popover is clicked and displays correct title', async () => {
+        findConvertToTaskButton().vm.$emit('click');
+        expect(showModal).toHaveBeenCalled();
+        await nextTick();
+        expect(findCreateWorkItem().props('initialTitle').trim()).toBe('todo 1');
+      });
+
+      it('closes the modal on `closeCreateTaskModal` event', () => {
+        findConvertToTaskButton().vm.$emit('click');
+        findCreateWorkItem().vm.$emit('closeModal');
+        expect(hideModal).toHaveBeenCalled();
+      });
+
+      it('updates description HTML on `onCreate` event', async () => {
+        const newTitle = 'New title';
+        findConvertToTaskButton().vm.$emit('click');
+        findCreateWorkItem().vm.$emit('onCreate', newTitle);
+        expect(hideModal).toHaveBeenCalled();
+        await nextTick();
 
-      expect(findTaskSvg().exists()).toBe(true);
-      expect(wrapper.text()).toContain(newTitle);
+        expect(findTaskSvg().exists()).toBe(true);
+        expect(wrapper.text()).toContain(newTitle);
+      });
     });
   });
 });