1 files changed, 30 insertions, 5 deletions

diff --git a/spec/frontend/runner/admin_runner_edit/admin_runner_edit_app_spec.js b/spec/frontend/runner/admin_runner_edit/admin_runner_edit_app_spec.js
index d121c6be218..8a34cb14d8b 100644
--- a/spec/frontend/runner/admin_runner_edit/admin_runner_edit_app_spec.js
+++ b/spec/frontend/runner/admin_runner_edit/admin_runner_edit_app_spec.js
@@ -7,17 +7,20 @@ import { createAlert } from '~/flash';
 
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import RunnerHeader from '~/runner/components/runner_header.vue';
-import runnerQuery from '~/runner/graphql/details/runner.query.graphql';
+import RunnerUpdateForm from '~/runner/components/runner_update_form.vue';
+import runnerFormQuery from '~/runner/graphql/edit/runner_form.query.graphql';
 import AdminRunnerEditApp from '~//runner/admin_runner_edit/admin_runner_edit_app.vue';
 import { captureException } from '~/runner/sentry_utils';
 
-import { runnerData } from '../mock_data';
+import { runnerFormData } from '../mock_data';
 
 jest.mock('~/flash');
 jest.mock('~/runner/sentry_utils');
 
-const mockRunnerGraphqlId = runnerData.data.runner.id;
+const mockRunner = runnerFormData.data.runner;
+const mockRunnerGraphqlId = mockRunner.id;
 const mockRunnerId = `${getIdFromGraphQLId(mockRunnerGraphqlId)}`;
+const mockRunnerPath = `/admin/runners/${mockRunnerId}`;
 
 Vue.use(VueApollo);
 
@@ -26,12 +29,14 @@ describe('AdminRunnerEditApp', () => {
   let mockRunnerQuery;
 
   const findRunnerHeader = () => wrapper.findComponent(RunnerHeader);
+  const findRunnerUpdateForm = () => wrapper.findComponent(RunnerUpdateForm);
 
   const createComponentWithApollo = ({ props = {}, mountFn = shallowMount } = {}) => {
     wrapper = mountFn(AdminRunnerEditApp, {
-      apolloProvider: createMockApollo([[runnerQuery, mockRunnerQuery]]),
+      apolloProvider: createMockApollo([[runnerFormQuery, mockRunnerQuery]]),
       propsData: {
         runnerId: mockRunnerId,
+        runnerPath: mockRunnerPath,
         ...props,
       },
     });
@@ -40,7 +45,7 @@ describe('AdminRunnerEditApp', () => {
   };
 
   beforeEach(() => {
-    mockRunnerQuery = jest.fn().mockResolvedValue(runnerData);
+    mockRunnerQuery = jest.fn().mockResolvedValue(runnerFormData);
   });
 
   afterEach(() => {
@@ -68,6 +73,26 @@ describe('AdminRunnerEditApp', () => {
     expect(findRunnerHeader().text()).toContain(`shared`);
   });
 
+  it('displays a loading runner form', () => {
+    createComponentWithApollo();
+
+    expect(findRunnerUpdateForm().props()).toMatchObject({
+      runner: null,
+      loading: true,
+      runnerPath: mockRunnerPath,
+    });
+  });
+
+  it('displays the runner form', async () => {
+    await createComponentWithApollo();
+
+    expect(findRunnerUpdateForm().props()).toMatchObject({
+      runner: mockRunner,
+      loading: false,
+      runnerPath: mockRunnerPath,
+    });
+  });
+
   describe('When there is an error', () => {
     beforeEach(async () => {
       mockRunnerQuery = jest.fn().mockRejectedValueOnce(new Error('Error!'));