Follow up after review

app/assets/javascripts/jobs/components/log/collapsible_section.vue

@@ -18,9 +18,14 @@ export default {
       required: true,
     },
   },
+  computed: {
+    badgeDuration() {
+      return this.section.line && this.section.line.section_duration;
+    },
+  },
   methods: {
     handleOnClickCollapsibleLine(section) {
-      this.$emit('handleOnClickCollapsibleLine', section);
+      this.$emit('onClickCollapsibleLine', section);
     },
   },
 };
@@ -29,7 +34,7 @@ export default {
   <div>
     <log-line-header
       :line="section.line"
-      :duration="section.line.section_duration"
+      :duration="badgeDuration"
       :path="traceEndpoint"
       :is-closed="section.isClosed"
       @toggleLine="handleOnClickCollapsibleLine(section)"
@@ -41,7 +46,7 @@ export default {
           :key="`collapsible-nested-${line.offset}`"
           :section="line"
           :trace-endpoint="traceEndpoint"
-          @handleOnClickCollapsibleLine="handleOnClickCollapsibleLine"
+          @toggleLine="handleOnClickCollapsibleLine"
         />
         <log-line v-else :key="line.offset" :line="line" :path="traceEndpoint" />
       </template>

app/assets/javascripts/jobs/components/log/log.vue

@@ -27,7 +27,7 @@ export default {
         :key="`collapsible-${index}`"
         :section="section"
         :trace-endpoint="traceEndpoint"
-        @handleOnClickCollapsibleLine="handleOnClickCollapsibleLine"
+        @onClickCollapsibleLine="handleOnClickCollapsibleLine"
       />
       <log-line v-else :key="section.offset" :line="section" :path="traceEndpoint" />
     </template>

spec/frontend/jobs/components/log/collapsible_section_spec.js

@@ -7,6 +7,8 @@ describe('Job Log Collapsible Section', () => {
 
   const traceEndpoint = 'jobs/335';
 
+  const findCollapsibleLine = () => wrapper.find('.collapsible-line');
+
   const createComponent = (props = {}) => {
     wrapper = mount(CollpasibleSection, {
       sync: true,
@@ -16,8 +18,6 @@ describe('Job Log Collapsible Section', () => {
     });
   };
 
-  beforeEach(() => {});
-
   afterEach(() => {
     wrapper.destroy();
   });
@@ -31,7 +31,7 @@ describe('Job Log Collapsible Section', () => {
     });
 
     it('renders clickable header line', () => {
-      expect(wrapper.find('.collapsible-line').attributes('role')).toBe('button');
+      expect(findCollapsibleLine().attributes('role')).toBe('button');
     });
   });
 
@@ -48,13 +48,13 @@ describe('Job Log Collapsible Section', () => {
     });
   });
 
-  it('emits handleOnClickCollapsibleLine on click', () => {
+  it('emits onClickCollapsibleLine on click', () => {
     createComponent({
       section: nestedSectionOpened,
       traceEndpoint,
     });
 
-    wrapper.find('.collapsible-line').trigger('click');
-    expect(wrapper.emitted('handleOnClickCollapsibleLine').length).toBe(1);
+    findCollapsibleLine().trigger('click');
+    expect(wrapper.emitted('onClickCollapsibleLine').length).toBe(1);
   });
 });