feat: Table cell for test coverage information (#1165)

app/components/pipeline/jobs/table/cell/coverage/component.js

@@ -0,0 +1,52 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
+
+export default class PipelineJobsTableCellCoverageComponent extends Component {
+  @service shuttle;
+
+  @tracked latestBuild;
+
+  @tracked coverage;
+
+  constructor() {
+    super(...arguments);
+
+    const { job } = this.args.record;
+
+    this.args.record.onCreate(job, builds => {
+      if (builds.length > 0) {
+        this.latestBuild = builds[builds.length - 1];
+        const { pipeline } = this.args.record;
+
+        this.shuttle
+          .fetchFromApi('get', '/coverage/info', {
+            jobId: job.id,
+            buildId: this.latestBuild.id,
+            startTime: this.latestBuild.startTime,
+            endTime: this.latestBuild.endTime,
+            jobName: job.name,
+            pipelineName: pipeline.name,
+            projectKey: `pipeline:${pipeline.id}`
+          })
+          .then(response => {
+            if (response.coverage) {
+              this.coverage =
+                response.coverage === 'N/A'
+                  ? response.coverage
+                  : `${response.coverage}%`;
+            }
+          })
+          .catch(() => {
+            this.coverage = null;
+          });
+      }
+    });
+  }
+
+  willDestroy() {
+    super.willDestroy();
+
+    this.args.record.onDestroy(this.args.record.job);
+  }
+}

app/components/pipeline/jobs/table/cell/coverage/template.hbs

@@ -0,0 +1,3 @@
+<div class="coverage-cell">
+  {{this.coverage}}
+</div>

tests/integration/components/pipeline/jobs/table/cell/coverage/component-test.js

@@ -0,0 +1,149 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'screwdriver-ui/tests/helpers';
+import { clearRender, render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
+
+module(
+  'Integration | Component | pipeline/jobs/table/cell/coverage',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders', async function (assert) {
+      const pipeline = { id: 123, name: 'myPipeline' };
+      const job = { id: 123, name: 'main' };
+
+      this.setProperties({
+        record: {
+          pipeline,
+          job,
+          onCreate: () => {},
+          onDestroy: () => {}
+        }
+      });
+
+      await render(
+        hbs`<Pipeline::Jobs::Table::Cell::Coverage
+            @record={{this.record}}
+        />`
+      );
+
+      assert.dom(this.element).hasText('');
+    });
+
+    test('it calls onCreate', async function (assert) {
+      const onCreate = sinon.spy();
+      const job = { id: 123, name: 'main' };
+
+      this.setProperties({
+        record: {
+          job,
+          onCreate,
+          onDestroy: () => {}
+        }
+      });
+
+      await render(
+        hbs`<Pipeline::Jobs::Table::Cell::Coverage
+            @record={{this.record}}
+        />`
+      );
+
+      assert.equal(onCreate.calledOnce, true);
+      assert.equal(onCreate.calledWith(job), true);
+    });
+
+    test('it calls onDestroy', async function (assert) {
+      const onDestroy = sinon.spy();
+      const job = { id: 123, name: 'main' };
+
+      this.setProperties({
+        record: {
+          job,
+          onCreate: () => {},
+          onDestroy
+        }
+      });
+
+      await render(
+        hbs`<Pipeline::Jobs::Table::Cell::Coverage
+            @record={{this.record}}
+        />`
+      );
+      await clearRender();
+
+      assert.equal(onDestroy.calledOnce, true);
+      assert.equal(onDestroy.calledWith(job), true);
+    });
+
+    test('it renders coverage value', async function (assert) {
+      const pipeline = { id: 123, name: 'myPipeline' };
+      const job = { id: 123, name: 'main' };
+      const builds = [
+        {
+          id: 999,
+          startTime: '2021-01-01T12:00:00.000Z',
+          endTime: '2021-01-01T12:02:00.000Z'
+        }
+      ];
+
+      const shuttle = this.owner.lookup('service:shuttle');
+
+      sinon.stub(shuttle, 'fetchFromApi').resolves({ coverage: '90.0' });
+
+      this.setProperties({
+        record: {
+          pipeline,
+          job,
+          onCreate: (j, cb) => {
+            return cb(builds);
+          },
+          onDestroy: () => {}
+        }
+      });
+
+      await render(
+        hbs`<Pipeline::Jobs::Table::Cell::Coverage
+            @record={{this.record}}
+        />`
+      );
+
+      assert.dom(this.element).hasText('90.0%');
+    });
+
+    test('it renders when no coverage available', async function (assert) {
+      const pipeline = { id: 123, name: 'myPipeline' };
+      const job = { id: 123, name: 'main' };
+      const builds = [
+        {
+          id: 999,
+          startTime: '2021-01-01T12:00:00.000Z',
+          endTime: '2021-01-01T12:02:00.000Z'
+        }
+      ];
+
+      const shuttle = this.owner.lookup('service:shuttle');
+
+      sinon.stub(shuttle, 'fetchFromApi').resolves({ coverage: 'N/A' });
+
+      this.setProperties({
+        record: {
+          pipeline,
+          job,
+          onCreate: (j, cb) => {
+            return cb(builds);
+          },
+          onDestroy: () => {}
+        }
+      });
+
+      await render(
+        hbs`<Pipeline::Jobs::Table::Cell::Coverage
+            @record={{this.record}}
+        />`
+      );
+
+      assert.dom(this.element).hasText('N/A');
+    });
+  }
+);