Adds specs and changelog - squash

1 files changed, 5 insertions, 6 deletions

diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue
index 8e4557e2b6c..28d1490259d 100644
--- a/app/assets/javascripts/jobs/components/job_log.vue
+++ b/app/assets/javascripts/jobs/components/job_log.vue
@@ -49,12 +49,12 @@ export default {
     },
     removeEventListener() {
       this.$el
-        .querySelector('.js-section-start')
-        .removeEventListener('click', this.handleSectionClick);
+        .querySelectorAll('.js-section-start')
+        .forEach(el => el.removeEventListener('click', this.handleSectionClick));
     },
     /**
      * The collapsible rows are sent in HTML from the backend
-     * We need to add a onclick handler for the divs that match `.js-section-start`
+     * We need tos add a onclick handler for the divs that match `.js-section-start`
      *
      */
     handleCollapsibleRows() {
@@ -68,13 +68,12 @@ export default {
      */
     handleSectionClick(evt) {
       const clickedArrow = evt.currentTarget;
-
       // toggle the arrow class
       clickedArrow.classList.toggle('fa-caret-right');
       clickedArrow.classList.toggle('fa-caret-down');
 
-      const dataSection = clickedArrow.getAttribute('data-section');
-      const sibilings = this.$el.querySelectorAll(`.js-s_${dataSection}:not(.js-section-header)`);
+      const { section } = clickedArrow.dataset;
+      const sibilings = this.$el.querySelectorAll(`.js-s_${section}:not(.js-section-header)`);
 
       sibilings.forEach(row => row.classList.toggle('hidden'));
     },