Generate graphql fixture instead of hardcoded data

This change improves the testing setup for the runner UI by
generating a fixture with the direct graphql results.

spec/frontend/fixtures/runner.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe 'Runner (JavaScript fixtures)' do
+  include AdminModeHelper
+  include ApiHelpers
+  include JavaScriptFixturesHelpers
+  include GraphqlHelpers
+
+  let_it_be(:admin) { create(:admin) }
+  let_it_be(:group) { create(:group) }
+  let_it_be(:project) { create(:project, :repository, :public) }
+
+  let_it_be(:instance_runner) { create(:ci_runner, :instance, version: '1.0.0', revision: '123', description: 'Instance runner', ip_address: '127.0.0.1') }
+  let_it_be(:group_runner) { create(:ci_runner, :group, groups: [group], active: false, version: '2.0.0', revision: '456', description: 'Group runner', ip_address: '127.0.0.1') }
+  let_it_be(:project_runner) { create(:ci_runner, :project, projects: [project], active: false, version: '2.0.0', revision: '456', description: 'Project runner', ip_address: '127.0.0.1') }
+
+  query_path = 'runner/graphql/'
+  fixtures_path = 'graphql/runner/'
+
+  before(:all) do
+    clean_frontend_fixtures(fixtures_path)
+  end
+
+  after(:all) do
+    remove_repository(project)
+  end
+
+  before do
+    sign_in(admin)
+    enable_admin_mode!(admin)
+  end
+
+  describe GraphQL::Query, type: :request do
+    get_runners_query_name = 'get_runners.query.graphql'
+
+    let_it_be(:query) do
+      get_graphql_query_as_string("#{query_path}#{get_runners_query_name}", [
+      'runner/graphql/runner_node.fragment.graphql',
+      'graphql_shared/fragments/pageInfo.fragment.graphql'
+      ])
+    end
+
+    it "#{fixtures_path}#{get_runners_query_name}.json" do
+      post_graphql(query, current_user: admin, variables: {})
+
+      expect_graphql_errors_to_be_empty
+    end
+
+    it "#{fixtures_path}#{get_runners_query_name}.paginated.json" do
+      post_graphql(query, current_user: admin, variables: { first: 2 })
+
+      expect_graphql_errors_to_be_empty
+    end
+  end
+
+  describe GraphQL::Query, type: :request do
+    get_runner_query_name = 'get_runner.query.graphql'
+
+    let_it_be(:query) { get_graphql_query_as_string("#{query_path}#{get_runner_query_name}") }
+
+    it "#{fixtures_path}#{get_runner_query_name}.json" do
+      post_graphql(query, current_user: admin, variables: {
+        id: instance_runner.to_global_id.to_s
+      })
+
+      expect_graphql_errors_to_be_empty
+    end
+  end
+end

spec/frontend/runner/components/runner_list_spec.js

@@ -68,7 +68,7 @@ describe('RunnerList', () => {
   });
 
   it('Displays a list of runners', () => {
-    expect(findRows()).toHaveLength(2);
+    expect(findRows()).toHaveLength(3);
 
     expect(findSkeletonLoader().exists()).toBe(false);
   });
@@ -77,7 +77,7 @@ describe('RunnerList', () => {
     const { id, description, version, ipAddress, shortSha } = mockRunners[0];
 
     // Badges
-    expect(findCell({ fieldKey: 'type' }).text()).toMatchInterpolatedText('shared locked');
+    expect(findCell({ fieldKey: 'type' }).text()).toMatchInterpolatedText('specific paused');
 
     // Runner identifier
     expect(findCell({ fieldKey: 'name' }).text()).toContain(

spec/frontend/runner/mock_data.js

-export const runnersData = {
-  data: {
-    runners: {
-      nodes: [
-        {
-          id: 'gid://gitlab/Ci::Runner/1',
-          description: 'runner-1',
-          runnerType: 'INSTANCE_TYPE',
-          shortSha: '2P6oDVDm',
-          version: '13.12.0',
-          revision: '11223344',
-          ipAddress: '127.0.0.1',
-          active: true,
-          locked: true,
-          tagList: [],
-          contactedAt: '2021-05-14T11:44:03Z',
-          __typename: 'CiRunner',
-        },
-        {
-          id: 'gid://gitlab/Ci::Runner/2',
-          description: 'runner-2',
-          runnerType: 'GROUP_TYPE',
-          shortSha: 'dpSCAC31',
-          version: '13.12.0',
-          revision: '11223344',
-          ipAddress: '127.0.0.1',
-          active: true,
-          locked: true,
-          tagList: [],
-          contactedAt: '2021-05-14T11:44:02Z',
-          __typename: 'CiRunner',
-        },
-      ],
-      pageInfo: {
-        endCursor: 'GRAPHQL_END_CURSOR',
-        startCursor: 'GRAPHQL_START_CURSOR',
-        hasNextPage: true,
-        hasPreviousPage: false,
-        __typename: 'PageInfo',
-      },
-      __typename: 'CiRunnerConnection',
-    },
-  },
-};
+// Fixtures generated by: spec/frontend/fixtures/runner.rb
+export const runnersData = getJSONFixture('graphql/runner/get_runners.query.graphql.json');
+export const runnersDataPaginated = getJSONFixture(
+  'graphql/runner/get_runners.query.graphql.paginated.json',
+);
+export const runnerData = getJSONFixture('graphql/runner/get_runner.query.graphql.json');

spec/frontend/runner/runner_detail/runner_details_app_spec.js

@@ -3,12 +3,15 @@ import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import RunnerTypeBadge from '~/runner/components/runner_type_badge.vue';
-import { INSTANCE_TYPE } from '~/runner/constants';
 import getRunnerQuery from '~/runner/graphql/get_runner.query.graphql';
 import RunnerDetailsApp from '~/runner/runner_details/runner_details_app.vue';
 
-const mockRunnerId = '55';
+import { runnerData } from '../mock_data';
+
+const mockRunnerGraphqlId = runnerData.data.runner.id;
+const mockRunnerId = `${getIdFromGraphQLId(mockRunnerGraphqlId)}`;
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
@@ -35,15 +38,7 @@ describe('RunnerDetailsApp', () => {
   };
 
   beforeEach(async () => {
-    mockRunnerQuery = jest.fn().mockResolvedValue({
-      data: {
-        runner: {
-          id: `gid://gitlab/Ci::Runner/${mockRunnerId}`,
-          runnerType: INSTANCE_TYPE,
-          __typename: 'CiRunner',
-        },
-      },
-    });
+    mockRunnerQuery = jest.fn().mockResolvedValue(runnerData);
   });
 
   afterEach(() => {
@@ -54,13 +49,13 @@ describe('RunnerDetailsApp', () => {
   it('expect GraphQL ID to be requested', async () => {
     await createComponentWithApollo();
 
-    expect(mockRunnerQuery).toHaveBeenCalledWith({ id: `gid://gitlab/Ci::Runner/${mockRunnerId}` });
+    expect(mockRunnerQuery).toHaveBeenCalledWith({ id: mockRunnerGraphqlId });
   });
 
   it('displays the runner id', async () => {
     await createComponentWithApollo();
 
-    expect(wrapper.text()).toContain('Runner #55');
+    expect(wrapper.text()).toContain(`Runner #${mockRunnerId}`);
   });
 
   it('displays the runner type', async () => {

spec/frontend/runner/runner_list/runner_list_app_spec.js

@@ -24,12 +24,10 @@ import {
 import getRunnersQuery from '~/runner/graphql/get_runners.query.graphql';
 import RunnerListApp from '~/runner/runner_list/runner_list_app.vue';
 
-import { runnersData } from '../mock_data';
+import { runnersData, runnersDataPaginated } from '../mock_data';
 
 const mockRegistrationToken = 'MOCK_REGISTRATION_TOKEN';
 const mockActiveRunnersCount = 2;
-const mocKRunners = runnersData.data.runners.nodes;
-const mockPageInfo = runnersData.data.runners.pageInfo;
 
 jest.mock('@sentry/browser');
 jest.mock('~/lib/utils/url_utility', () => ({
@@ -98,7 +96,7 @@ describe('RunnerListApp', () => {
   });
 
   it('shows the runners list', () => {
-    expect(mocKRunners).toMatchObject(findRunnerList().props('runners'));
+    expect(runnersData.data.runners.nodes).toMatchObject(findRunnerList().props('runners'));
   });
 
   it('requests the runners with no filters', () => {
@@ -205,6 +203,8 @@ describe('RunnerListApp', () => {
 
   describe('Pagination', () => {
     beforeEach(() => {
+      mockRunnersQuery = jest.fn().mockResolvedValue(runnersDataPaginated);
+
       createComponentWithApollo({ mountFn: mount });
     });
 
@@ -225,13 +225,7 @@ describe('RunnerListApp', () => {
       expect(mockRunnersQuery).toHaveBeenLastCalledWith({
         sort: CREATED_DESC,
         first: RUNNER_PAGE_SIZE,
-        after: expect.any(String),
-      });
-
-      expect(mockRunnersQuery).toHaveBeenLastCalledWith({
-        sort: CREATED_DESC,
-        first: RUNNER_PAGE_SIZE,
-        after: mockPageInfo.endCursor,
+        after: runnersDataPaginated.data.runners.pageInfo.endCursor,
       });
     });
   });