Suggested spec updates

Add feature spec cases for disabled feature flag and tab navigation
Import query response fixture into mock data, then into component spec

ee/spec/features/projects/pipelines/pipeline_spec.rb

@@ -214,18 +214,33 @@ RSpec.describe 'Pipeline', :js do
         context 'with code quality artifact' do
           before do
             create(:ee_ci_build, :codequality, pipeline: pipeline)
+          end
+
+          context 'when navigating directly to the code quality tab' do
+            before do
               visit codequality_report_project_pipeline_path(project, pipeline)
             end
 
-          it 'shows code quality tab pane as active, quality issue with link to file, and events for data tracking' do
+            it_behaves_like 'an active code quality tab'
+          end
+
+          context 'when starting from the pipeline tab' do
+            before do
+              visit project_pipeline_path(project, pipeline)
+            end
+
+            it 'shows the code quality tab as inactive' do
               expect(page).to have_content('Code Quality')
-            expect(page).to have_css('#js-tab-codequality')
+              expect(page).not_to have_css('#js-tab-codequality')
+            end
 
-            expect(page).to have_content('Method `new_array` has 12 arguments (exceeds 4 allowed). Consider refactoring.')
-            expect(find_link('foo.rb:10')[:href]).to end_with(project_blob_path(project, File.join(pipeline.commit.id, 'foo.rb')) + '#L10')
+            context 'when the code quality tab is clicked' do
+              before do
+                click_link 'Code Quality'
+              end
 
-            expect(page).to have_selector('[data-track-action="click_button"]')
-            expect(page).to have_selector('[data-track-label="get_codequality_report"]')
+              it_behaves_like 'an active code quality tab'
+            end
           end
         end
 
@@ -257,6 +272,19 @@ RSpec.describe 'Pipeline', :js do
       end
     end
 
+    shared_examples_for 'an active code quality tab' do
+      it 'shows code quality tab pane as active, quality issue with link to file, and events for data tracking' do
+        expect(page).to have_content('Code Quality')
+        expect(page).to have_css('#js-tab-codequality')
+
+        expect(page).to have_content('Method `new_array` has 12 arguments (exceeds 4 allowed). Consider refactoring.')
+        expect(find_link('foo.rb:10')[:href]).to end_with(project_blob_path(project, File.join(pipeline.commit.id, 'foo.rb')) + '#L10')
+
+        expect(page).to have_selector('[data-track-action="click_button"]')
+        expect(page).to have_selector('[data-track-label="get_codequality_report"]')
+      end
+    end
+
     context 'for a branch pipeline' do
       let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master', sha: project.commit.id) }
 
@@ -278,6 +306,14 @@ RSpec.describe 'Pipeline', :js do
 
       it_behaves_like 'full codequality report'
     end
+
+    context 'with graphql feature flag disabled' do
+      let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master', sha: project.commit.id) }
+
+      stub_feature_flags(graphql_code_quality_full_report: false)
+
+      it_behaves_like 'full codequality report'
+    end
   end
 
   private

ee/spec/frontend/codequality_report/codequality_report_graphql_spec.js

 import { GlInfiniteScroll } from '@gitlab/ui';
 import { mount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
-import codeQualityViolationsQueryResponse from 'test_fixtures/graphql/codequality_report/graphql/queries/get_code_quality_violations.query.graphql.json';
 import waitForPromises from 'helpers/wait_for_promises';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import CodequalityReportApp from 'ee/codequality_report/codequality_report_graphql.vue';
 import getCodeQualityViolations from 'ee/codequality_report/graphql/queries/get_code_quality_violations.query.graphql';
-
-const codeQualityViolations =
-  codeQualityViolationsQueryResponse.data.project.pipeline.codeQualityReports;
+import { mockGetCodeQualityViolationsResponse, codeQualityViolations } from './mock_data';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);
@@ -17,7 +14,7 @@ describe('Codequality report app', () => {
   let wrapper;
 
   const createComponent = (
-    mockReturnValue = jest.fn().mockResolvedValue(codeQualityViolationsQueryResponse),
+    mockReturnValue = jest.fn().mockResolvedValue(mockGetCodeQualityViolationsResponse),
     mountFn = mount,
   ) => {
     const apolloProvider = createMockApollo([[getCodeQualityViolations, mockReturnValue]]);
@@ -65,7 +62,7 @@ describe('Codequality report app', () => {
 
   describe('when there are codequality issues', () => {
     beforeEach(() => {
-      createComponent(jest.fn().mockResolvedValue(codeQualityViolationsQueryResponse));
+      createComponent(jest.fn().mockResolvedValue(mockGetCodeQualityViolationsResponse));
     });
 
     it('renders the codequality issues', () => {

ee/spec/frontend/codequality_report/mock_data.js

+import mockGetCodeQualityViolationsResponse from 'test_fixtures/graphql/codequality_report/graphql/queries/get_code_quality_violations.query.graphql.json';
+
+export { mockGetCodeQualityViolationsResponse };
+
+export const codeQualityViolations =
+  mockGetCodeQualityViolationsResponse.data.project.pipeline.codeQualityReports;
+
 export const unparsedIssues = [
   {
     type: 'issue',