Display error for unmet prerequisites

Added the ability to display an error for unmet prerequisites

2 files changed, 73 insertions, 0 deletions

diff --git a/spec/javascripts/jobs/components/job_app_spec.js b/spec/javascripts/jobs/components/job_app_spec.js
index ba5d672f189..6117eb8cff5 100644
--- a/spec/javascripts/jobs/components/job_app_spec.js
+++ b/spec/javascripts/jobs/components/job_app_spec.js
@@ -17,6 +17,7 @@ describe('Job App ', () => {
   const props = {
     endpoint: `${gl.TEST_HOST}jobs/123.json`,
     runnerHelpUrl: 'help/runner',
+    deploymentHelpUrl: 'help/deployment',
     runnerSettingsUrl: 'settings/ci-cd/runners',
     terminalPath: 'jobs/123/terminal',
     pagePath: `${gl.TEST_HOST}jobs/123`,
@@ -253,6 +254,41 @@ describe('Job App ', () => {
       });
     });
 
+    describe('unmet prerequisites block', () => {
+      it('renders unmet prerequisites block when there is an unmet prerequisites failure', done => {
+        mock.onGet(props.endpoint).replyOnce(
+          200,
+          Object.assign({}, job, {
+            status: {
+              group: 'failed',
+              icon: 'status_failed',
+              label: 'failed',
+              text: 'failed',
+              details_path: 'path',
+              illustration: {
+                content: 'Retry this job in order to create the necessary resources.',
+                image: 'path',
+                size: 'svg-430',
+                title: 'Failed to create resources',
+              },
+            },
+            has_trace: false,
+            unmet_prerequisites: true,
+            runners: {
+              available: true,
+            },
+            tags: [],
+          }),
+        );
+        vm = mountComponentWithStore(Component, { props, store });
+
+        setTimeout(() => {
+          expect(vm.$el.querySelector('.js-job-failed')).not.toBeNull();
+          done();
+        }, 0);
+      });
+    });
+
     describe('environments block', () => {
       it('renders environment block when job has environment', done => {
         mock.onGet(props.endpoint).replyOnce(
diff --git a/spec/javascripts/jobs/components/unmet_prerequisites_block_spec.js b/spec/javascripts/jobs/components/unmet_prerequisites_block_spec.js
new file mode 100644
index 00000000000..68fcb321214
--- /dev/null
+++ b/spec/javascripts/jobs/components/unmet_prerequisites_block_spec.js
@@ -0,0 +1,37 @@
+import Vue from 'vue';
+import component from '~/jobs/components/unmet_prerequisites_block.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Unmet Prerequisites Block Job component', () => {
+  const Component = Vue.extend(component);
+  let vm;
+  const helpPath = '/user/project/clusters/index.html#troubleshooting-failed-deployment-jobs';
+
+  beforeEach(() => {
+    vm = mountComponent(Component, {
+      hasNoRunnersForProject: true,
+      helpPath,
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders an alert with the correct message', () => {
+    const container = vm.$el.querySelector('.js-failed-unmet-prerequisites');
+    const alertMessage =
+      'This job failed because the necessary resources were not successfully created.';
+
+    expect(container).not.toBeNull();
+    expect(container.innerHTML).toContain(alertMessage);
+  });
+
+  it('renders link to help page', () => {
+    const helpLink = vm.$el.querySelector('.js-help-path');
+
+    expect(helpLink).not.toBeNull();
+    expect(helpLink.innerHTML).toContain('More information');
+    expect(helpLink.getAttribute('href')).toEqual(helpPath);
+  });
+});