Updates feature specs for Pipelines

* Removed stubbed false flags
* Updates selectors for feature specs
* Add tests for both flag states in ee

app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue

@@ -61,6 +61,9 @@ export default {
     isUpstream() {
       return this.type === UPSTREAM;
     },
+    minWidth() {
+      return this.isUpstream ? 0 : this.$options.minWidth;
+    },
   },
   methods: {
     getPipelineData(pipeline) {
@@ -132,8 +135,8 @@ export default {
 
       this.$emit('pipelineExpandToggle', jobName, expanded);
     },
-    showDownstreamContainer(id) {
-      return !this.isUpstream && (this.isExpanded(id) || this.isLoadingPipeline(id));
+    showContainer(id) {
+      return this.isExpanded(id) || this.isLoadingPipeline(id);
     },
   },
 };
@@ -164,8 +167,8 @@ export default {
             @pipelineExpandToggle="onPipelineExpandToggle"
           />
           <div
-            v-if="showDownstreamContainer(pipeline.id)"
-            :style="{ minWidth: $options.minWidth }"
+            v-if="showContainer(pipeline.id)"
+            :style="{ minWidth }"
             class="gl-display-inline-block"
           >
             <pipeline-graph

app/assets/javascripts/pipelines/components/graph/stage_column_component.vue

@@ -84,7 +84,7 @@ export default {
 };
 </script>
 <template>
-  <main-graph-wrapper class="gl-px-6">
+  <main-graph-wrapper class="gl-px-6" data-testid="stage-column">
     <template #stages>
       <div
         data-testid="stage-column-title"

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

@@ -7,7 +7,6 @@ RSpec.describe 'Pipeline', :js do
   let_it_be(:project) { create(:project, :repository) }
 
   before do
-    stub_feature_flags(graphql_pipeline_details: false)
     stub_feature_flags(graphql_pipeline_details_users: false)
     sign_in(user)
 
@@ -31,63 +30,119 @@ RSpec.describe 'Pipeline', :js do
         create_link(pipeline, downstream_pipeline)
       end
 
-      it 'renders upstream pipeline' do
-        subject
+      context 'when :graphql_pipeline_details flag is on' do
+        context 'expands the upstream pipeline on click' do
+          it 'renders upstream pipeline' do
+            subject
 
-        expect(page).to have_content(upstream_pipeline.id)
-        expect(page).to have_content(upstream_pipeline.project.name)
-      end
+            expect(page).to have_content(upstream_pipeline.id)
+            expect(page).to have_content(upstream_pipeline.project.name)
+          end
 
-      context 'expands the upstream pipeline on click' do
-        it 'expands the upstream on click' do
-          subject
+          it 'expands the upstream on click' do
+            subject
+
+            page.find(".js-pipeline-expand-#{upstream_pipeline.id}").click
+            wait_for_requests
+            expect(page).to have_selector("#pipeline-links-container-#{upstream_pipeline.id}")
+          end
+
+          it 'closes the expanded upstream on click' do
+            subject
+
+            # open
+            page.find(".js-pipeline-expand-#{upstream_pipeline.id}").click
+            wait_for_requests
+
+            # close
+            page.find(".js-pipeline-expand-#{upstream_pipeline.id}").click
 
-          page.find(".js-pipeline-expand-#{upstream_pipeline.id}").click
-          wait_for_requests
-          expect(page).to have_selector(".js-upstream-pipeline-#{upstream_pipeline.id}")
+            expect(page).not_to have_selector("#pipeline-links-container-#{upstream_pipeline.id}")
+          end
         end
 
-        it 'closes the expanded upstream on click' do
+        it 'renders downstream pipeline' do
           subject
 
-          # open
-          page.find(".js-pipeline-expand-#{upstream_pipeline.id}").click
-          wait_for_requests
+          expect(page).to have_content(downstream_pipeline.id)
+          expect(page).to have_content(downstream_pipeline.project.name)
+        end
+
+        context 'expands the downstream pipeline on click' do
+          it 'expands the downstream on click' do
+            subject
+
+            page.find(".js-pipeline-expand-#{downstream_pipeline.id}").click
+            wait_for_requests
+            expect(page).to have_selector("#pipeline-links-container-#{downstream_pipeline.id}")
+          end
+
+          it 'closes the expanded downstream on click' do
+            subject
+
+            # open
+            page.find(".js-pipeline-expand-#{downstream_pipeline.id}").click
+            wait_for_requests
 
-          # close
-          page.find(".js-pipeline-expand-#{upstream_pipeline.id}").click
+            # close
+            page.find(".js-pipeline-expand-#{downstream_pipeline.id}").click
 
-          expect(page).not_to have_selector(".js-upstream-pipeline-#{upstream_pipeline.id}")
+            expect(page).not_to have_selector("#pipeline-links-container-#{downstream_pipeline.id}")
+          end
         end
       end
 
-      it 'renders downstream pipeline' do
-        subject
+      # remove when :graphql_pipeline_details flag is removed
+      # https://gitlab.com/gitlab-org/gitlab/-/issues/299112
+      context 'when :graphql_pipeline_details flag is off' do
+        before do
+          stub_feature_flags(graphql_pipeline_details: false)
+          stub_feature_flags(graphql_pipeline_details_users: false)
+        end
 
-        expect(page).to have_content(downstream_pipeline.id)
-        expect(page).to have_content(downstream_pipeline.project.name)
-      end
+        context 'expands the upstream pipeline on click' do
+          it 'expands the upstream on click' do
+            subject
+            page.find(".js-pipeline-expand-#{upstream_pipeline.id}").click
+            wait_for_requests
+            expect(page).to have_selector(".js-upstream-pipeline-#{upstream_pipeline.id}")
+          end
 
-      context 'expands the downstream pipeline on click' do
-        it 'expands the downstream on click' do
-          subject
+          it 'closes the expanded upstream on click' do
+            subject
+
+            # open
+            page.find(".js-pipeline-expand-#{upstream_pipeline.id}").click
+            wait_for_requests
 
-          page.find(".js-pipeline-expand-#{downstream_pipeline.id}").click
-          wait_for_requests
-          expect(page).to have_selector(".js-downstream-pipeline-#{downstream_pipeline.id}")
+            # close
+            page.find(".js-pipeline-expand-#{upstream_pipeline.id}").click
+
+            expect(page).not_to have_selector(".js-upstream-pipeline-#{upstream_pipeline.id}")
+          end
         end
 
-        it 'closes the expanded downstream on click' do
-          subject
+        context 'expands the downstream pipeline on click' do
+          it 'expands the downstream on click' do
+            subject
 
-          # open
-          page.find(".js-pipeline-expand-#{downstream_pipeline.id}").click
-          wait_for_requests
+            page.find(".js-pipeline-expand-#{downstream_pipeline.id}").click
+            wait_for_requests
+            expect(page).to have_selector(".js-downstream-pipeline-#{downstream_pipeline.id}")
+          end
 
-          # close
-          page.find(".js-pipeline-expand-#{downstream_pipeline.id}").click
+          it 'closes the expanded downstream on click' do
+            subject
 
-          expect(page).not_to have_selector(".js-downstream-pipeline-#{downstream_pipeline.id}")
+            # open
+            page.find(".js-pipeline-expand-#{downstream_pipeline.id}").click
+            wait_for_requests
+
+            # close
+            page.find(".js-pipeline-expand-#{downstream_pipeline.id}").click
+
+            expect(page).not_to have_selector(".js-downstream-pipeline-#{downstream_pipeline.id}")
+          end
         end
       end
     end
@@ -124,7 +179,7 @@ RSpec.describe 'Pipeline', :js do
       it 'displays the pipeline graph' do
         expect(current_path).to eq(pipeline_path(pipeline))
         expect(page).not_to have_css('#js-tab-security')
-        expect(page).to have_selector('.pipeline-visualization')
+        expect(page).to have_selector('.js-pipeline-graph')
       end
     end
   end
@@ -162,7 +217,7 @@ RSpec.describe 'Pipeline', :js do
       it 'displays the pipeline graph' do
         expect(current_path).to eq(pipeline_path(pipeline))
         expect(page).not_to have_content('Licenses')
-        expect(page).to have_selector('.pipeline-visualization')
+        expect(page).to have_selector('.js-pipeline-graph')
       end
     end
   end

spec/features/projects/pipelines/pipeline_spec.rb

@@ -14,8 +14,6 @@ RSpec.describe 'Pipeline', :js do
   before do
     sign_in(user)
     project.add_role(user, role)
-    stub_feature_flags(graphql_pipeline_details: false)
-    stub_feature_flags(graphql_pipeline_details_users: false)
   end
 
   shared_context 'pipeline builds' do
@@ -70,7 +68,7 @@ RSpec.describe 'Pipeline', :js do
     it 'shows the pipeline graph' do
       visit_pipeline
 
-      expect(page).to have_selector('.pipeline-visualization')
+      expect(page).to have_selector('.js-pipeline-graph')
       expect(page).to have_content('Build')
       expect(page).to have_content('Test')
       expect(page).to have_content('Deploy')
@@ -644,7 +642,7 @@ RSpec.describe 'Pipeline', :js do
       end
 
       it 'shows the pipeline graph' do
-        expect(page).to have_selector('.pipeline-visualization')
+        expect(page).to have_selector('.js-pipeline-graph')
         expect(page).to have_content('Build')
         expect(page).to have_content('Test')
         expect(page).to have_content('Deploy')
@@ -684,7 +682,7 @@ RSpec.describe 'Pipeline', :js do
       end
 
       it 'shows the pipeline with a bridge job' do
-        expect(page).to have_selector('.pipeline-visualization')
+        expect(page).to have_selector('.js-pipeline-graph')
         expect(page).to have_content('cross-build')
       end
 
@@ -757,6 +755,61 @@ RSpec.describe 'Pipeline', :js do
     describe 'GET /:project/-/pipelines/:id' do
       subject { visit project_pipeline_path(project, pipeline) }
 
+      # remove when :graphql_pipeline_details flag is removed
+      # https://gitlab.com/gitlab-org/gitlab/-/issues/299112
+      context 'when :graphql_pipeline_details flag is off' do
+        before do
+          stub_feature_flags(graphql_pipeline_details: false)
+          stub_feature_flags(graphql_pipeline_details_users: false)
+        end
+
+        it 'shows deploy job as created' do
+          subject
+
+          within('.pipeline-header-container') do
+            expect(page).to have_content('pending')
+          end
+
+          within('.js-pipeline-graph') do
+            within '.stage-column:nth-child(1)' do
+              expect(page).to have_content('test')
+              expect(page).to have_css('.ci-status-icon-pending')
+            end
+
+            within '.stage-column:nth-child(2)' do
+              expect(page).to have_content('deploy')
+              expect(page).to have_css('.ci-status-icon-created')
+            end
+          end
+        end
+
+        context 'when test job succeeded' do
+          before do
+            test_job.success!
+          end
+
+          it 'shows deploy job as pending' do
+            subject
+
+            within('.pipeline-header-container') do
+              expect(page).to have_content('running')
+            end
+
+            within('.pipeline-graph') do
+              within '.stage-column:nth-child(1)' do
+                expect(page).to have_content('test')
+                expect(page).to have_css('.ci-status-icon-success')
+              end
+
+              within '.stage-column:nth-child(2)' do
+                expect(page).to have_content('deploy')
+                expect(page).to have_css('.ci-status-icon-pending')
+              end
+            end
+          end
+        end
+      end
+
       it 'shows deploy job as created' do
         subject
 
@@ -764,13 +817,13 @@ RSpec.describe 'Pipeline', :js do
           expect(page).to have_content('pending')
         end
 
-        within('.pipeline-graph') do
-          within '.stage-column:nth-child(1)' do
+        within('.js-pipeline-graph') do
+          within(all('[data-testid="stage-column"]')[0]) do
             expect(page).to have_content('test')
             expect(page).to have_css('.ci-status-icon-pending')
           end
 
-          within '.stage-column:nth-child(2)' do
+          within(all('[data-testid="stage-column"]')[1]) do
             expect(page).to have_content('deploy')
             expect(page).to have_css('.ci-status-icon-created')
           end
@@ -789,13 +842,13 @@ RSpec.describe 'Pipeline', :js do
             expect(page).to have_content('running')
           end
 
-          within('.pipeline-graph') do
-            within '.stage-column:nth-child(1)' do
+          within('.js-pipeline-graph') do
+            within(all('[data-testid="stage-column"]')[0]) do
               expect(page).to have_content('test')
               expect(page).to have_css('.ci-status-icon-success')
             end
 
-            within '.stage-column:nth-child(2)' do
+            within(all('[data-testid="stage-column"]')[1]) do
               expect(page).to have_content('deploy')
               expect(page).to have_css('.ci-status-icon-pending')
             end
@@ -818,14 +871,37 @@ RSpec.describe 'Pipeline', :js do
             expect(page).to have_content('waiting')
           end
 
-          within('.pipeline-graph') do
-            within '.stage-column:nth-child(2)' do
+          within('.js-pipeline-graph') do
+            within(all('[data-testid="stage-column"]')[1]) do
               expect(page).to have_content('deploy')
               expect(page).to have_css('.ci-status-icon-waiting-for-resource')
             end
           end
         end
 
+        # remove when :graphql_pipeline_details flag is removed
+        # https://gitlab.com/gitlab-org/gitlab/-/issues/299112
+        context 'when :graphql_pipeline_details flag is off' do
+          before do
+            stub_feature_flags(graphql_pipeline_details: false)
+            stub_feature_flags(graphql_pipeline_details_users: false)
+          end
+          it 'shows deploy job as waiting for resource' do
+            subject
+
+            within('.pipeline-header-container') do
+              expect(page).to have_content('waiting')
+            end
+
+            within('.pipeline-graph') do
+              within '.stage-column:nth-child(2)' do
+                expect(page).to have_content('deploy')
+                expect(page).to have_css('.ci-status-icon-waiting-for-resource')
+              end
+            end
+          end
+        end
+
         context 'when resource is released from another job' do
           before do
             another_job.success!
@@ -838,13 +914,36 @@ RSpec.describe 'Pipeline', :js do
               expect(page).to have_content('running')
             end
 
-            within('.pipeline-graph') do
-              within '.stage-column:nth-child(2)' do
+            within('.js-pipeline-graph') do
+              within(all('[data-testid="stage-column"]')[1]) do
                 expect(page).to have_content('deploy')
                 expect(page).to have_css('.ci-status-icon-pending')
               end
             end
           end
+
+          # remove when :graphql_pipeline_details flag is removed
+          # https://gitlab.com/gitlab-org/gitlab/-/issues/299112
+          context 'when :graphql_pipeline_details flag is off' do
+            before do
+              stub_feature_flags(graphql_pipeline_details: false)
+              stub_feature_flags(graphql_pipeline_details_users: false)
+            end
+            it 'shows deploy job as pending' do
+              subject
+
+              within('.pipeline-header-container') do
+                expect(page).to have_content('running')
+              end
+
+              within('.pipeline-graph') do
+                within '.stage-column:nth-child(2)' do
+                  expect(page).to have_content('deploy')
+                  expect(page).to have_css('.ci-status-icon-pending')
+                end
+              end
+            end
+          end
         end
 
         context 'when deploy job is a bridge to trigger a downstream pipeline' do
@@ -860,8 +959,30 @@ RSpec.describe 'Pipeline', :js do
               expect(page).to have_content('waiting')
             end
 
-            within('.pipeline-graph') do
-              within '.stage-column:nth-child(2)' do
+            within('.js-pipeline-graph') do
+              within(all('[data-testid="stage-column"]')[1]) do
+                expect(page).to have_content('deploy')
+                expect(page).to have_css('.ci-status-icon-waiting-for-resource')
+              end
+            end
+          end
+        end
+
+        context 'when deploy job is a bridge to trigger a downstream pipeline' do
+          let!(:deploy_job) do
+            create(:ci_bridge, :created, stage: 'deploy', name: 'deploy',
+              stage_idx: 2, pipeline: pipeline, project: project, resource_group: resource_group)
+          end
+
+          it 'shows deploy job as waiting for resource' do
+            subject
+
+            within('.pipeline-header-container') do
+              expect(page).to have_content('waiting')
+            end
+
+            within('.js-pipeline-graph') do
+              within(all('[data-testid="stage-column"]')[1]) do
                 expect(page).to have_content('deploy')
                 expect(page).to have_css('.ci-status-icon-waiting-for-resource')
               end
@@ -1087,7 +1208,24 @@ RSpec.describe 'Pipeline', :js do
 
         expect(current_path).to eq(pipeline_path(pipeline))
         expect(page).not_to have_content('Failed Jobs')
-        expect(page).to have_selector('.pipeline-visualization')
+        expect(page).to have_selector('.js-pipeline-graph')
+      end
+
+      # remove when :graphql_pipeline_details flag is removed
+      # https://gitlab.com/gitlab-org/gitlab/-/issues/299112
+      context 'when :graphql_pipeline_details flag is off' do
+        before do
+          stub_feature_flags(graphql_pipeline_details: false)
+          stub_feature_flags(graphql_pipeline_details_users: false)
+        end
+
+        it 'displays the pipeline graph' do
+          subject
+
+          expect(current_path).to eq(pipeline_path(pipeline))
+          expect(page).not_to have_content('Failed Jobs')
+          expect(page).to have_selector('.pipeline-visualization')
+        end
       end
     end
   end

spec/features/projects/pipelines/pipelines_spec.rb

@@ -14,6 +14,7 @@ RSpec.describe 'Pipelines', :js do
       sign_in(user)
       stub_feature_flags(graphql_pipeline_details: false)
       stub_feature_flags(graphql_pipeline_details_users: false)
+
       project.add_developer(user)
       project.update!(auto_devops_attributes: { enabled: false })
     end

spec/frontend/pipelines/graph/linked_pipelines_column_spec.js

@@ -2,7 +2,7 @@ import { mount, shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import getPipelineDetails from 'shared_queries/pipelines/get_pipeline_details.query.graphql';
-import { DOWNSTREAM, GRAPHQL } from '~/pipelines/components/graph/constants';
+import { DOWNSTREAM, GRAPHQL, UPSTREAM } from '~/pipelines/components/graph/constants';
 import PipelineGraph from '~/pipelines/components/graph/graph_component.vue';
 import LinkedPipeline from '~/pipelines/components/graph/linked_pipeline.vue';
 import LinkedPipelinesColumn from '~/pipelines/components/graph/linked_pipelines_column.vue';
@@ -17,7 +17,7 @@ const processedPipeline = pipelineWithUpstreamDownstream(mockPipelineResponse);
 
 describe('Linked Pipelines Column', () => {
   const defaultProps = {
-    columnTitle: 'Upstream',
+    columnTitle: 'Downstream',
     linkedPipelines: processedPipeline.downstream,
     type: DOWNSTREAM,
   };
@@ -45,14 +45,15 @@ describe('Linked Pipelines Column', () => {
     });
   };
 
-  const createComponentWithApollo = (
+  const createComponentWithApollo = ({
     mountFn = shallowMount,
     getPipelineDetailsHandler = jest.fn().mockResolvedValue(wrappedPipelineReturn),
-  ) => {
+    props = {},
+  } = {}) => {
     const requestHandlers = [[getPipelineDetails, getPipelineDetailsHandler]];
 
     const apolloProvider = createMockApollo(requestHandlers);
-    createComponent({ apolloProvider, mountFn });
+    createComponent({ apolloProvider, mountFn, props });
   };
 
   afterEach(() => {
@@ -86,34 +87,90 @@ describe('Linked Pipelines Column', () => {
       await wrapper.vm.$nextTick();
     };
 
-    describe('when successful', () => {
-      beforeEach(() => {
-        createComponentWithApollo(mount);
+    describe('downstream', () => {
+      describe('when successful', () => {
+        beforeEach(() => {
+          createComponentWithApollo({ mountFn: mount });
+        });
+
+        it('toggles the pipeline visibility', async () => {
+          expect(findPipelineGraph().exists()).toBe(false);
+          await clickExpandButtonAndAwaitTimers();
+          expect(findPipelineGraph().exists()).toBe(true);
+          await clickExpandButton();
+          expect(findPipelineGraph().exists()).toBe(false);
+        });
       });
 
-      it('toggles the pipeline visibility', async () => {
-        expect(findPipelineGraph().exists()).toBe(false);
-        await clickExpandButtonAndAwaitTimers();
-        expect(findPipelineGraph().exists()).toBe(true);
-        await clickExpandButton();
-        expect(findPipelineGraph().exists()).toBe(false);
+      describe('on error', () => {
+        beforeEach(() => {
+          createComponentWithApollo({
+            mountFn: mount,
+            getPipelineDetailsHandler: jest.fn().mockRejectedValue(new Error('GraphQL error')),
+          });
+        });
+
+        it('emits the error', async () => {
+          await clickExpandButton();
+          expect(wrapper.emitted().error).toEqual([[LOAD_FAILURE]]);
+        });
+
+        it('does not show the pipeline', async () => {
+          expect(findPipelineGraph().exists()).toBe(false);
+          await clickExpandButtonAndAwaitTimers();
+          expect(findPipelineGraph().exists()).toBe(false);
+        });
       });
     });
 
-    describe('on error', () => {
-      beforeEach(() => {
-        createComponentWithApollo(mount, jest.fn().mockRejectedValue(new Error('GraphQL error')));
+    describe('upstream', () => {
+      const upstreamProps = {
+        columnTitle: 'Upstream',
+        /*
+          Because the IDs need to match to work, rather
+          than make new mock data, we are representing
+          the upstream pipeline with the downstream data.
+        */
+        linkedPipelines: processedPipeline.downstream,
+        type: UPSTREAM,
+      };
+
+      describe('when successful', () => {
+        beforeEach(() => {
+          createComponentWithApollo({
+            mountFn: mount,
+            props: upstreamProps,
+          });
+        });
+
+        it('toggles the pipeline visibility', async () => {
+          expect(findPipelineGraph().exists()).toBe(false);
+          await clickExpandButtonAndAwaitTimers();
+          expect(findPipelineGraph().exists()).toBe(true);
+          await clickExpandButton();
+          expect(findPipelineGraph().exists()).toBe(false);
+        });
       });
 
-      it('emits the error', async () => {
-        await clickExpandButton();
-        expect(wrapper.emitted().error).toEqual([[LOAD_FAILURE]]);
-      });
-
-      it('does not show the pipeline', async () => {
-        expect(findPipelineGraph().exists()).toBe(false);
-        await clickExpandButtonAndAwaitTimers();
-        expect(findPipelineGraph().exists()).toBe(false);
+      describe('on error', () => {
+        beforeEach(() => {
+          createComponentWithApollo({
+            mountFn: mount,
+            getPipelineDetailsHandler: jest.fn().mockRejectedValue(new Error('GraphQL error')),
+            props: upstreamProps,
+          });
+        });
+
+        it('emits the error', async () => {
+          await clickExpandButton();
+          expect(wrapper.emitted().error).toEqual([[LOAD_FAILURE]]);
+        });
+
+        it('does not show the pipeline', async () => {
+          expect(findPipelineGraph().exists()).toBe(false);
+          await clickExpandButtonAndAwaitTimers();
+          expect(findPipelineGraph().exists()).toBe(false);
+        });
       });
     });
   });