E2E - CI/CD Catalog resources sorting

app/assets/javascripts/ci/catalog/components/list/catalog_search.vue

@@ -67,6 +67,7 @@ export default {
       :text="currentSortText"
       :sort-options="$options.sortOptions"
       :sort-by="currentSortOption"
+      data-testid="catalog-sorting-option-button"
       @sortByChange="setSelectedSortOption"
       @sortDirectionChange="onSortDirectionChange"
     />

qa/qa/page/explore/ci_cd_catalog.rb

+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Explore
+      class CiCdCatalog < Page::Base
+        view 'app/assets/javascripts/ci/catalog/components/list/ci_resources_list.vue' do
+          element 'catalog-list-container'
+        end
+
+        view 'app/assets/javascripts/ci/catalog/components/list/ci_resources_list_item.vue' do
+          element 'catalog-resource-item'
+        end
+
+        view 'app/assets/javascripts/ci/catalog/components/list/catalog_search.vue' do
+          element 'catalog-search-bar', required: true
+          element 'catalog-sorting-option-button', required: true
+        end
+
+        def sort_by_created_at
+          switch_catalog_sorting_option('CREATED')
+        end
+
+        def sort_in_ascending_order
+          # Switching from descending to ascending
+          click_element('sort-highest-icon')
+          wait_for_requests
+        end
+
+        def get_top_project_names(count)
+          all_elements('ci-resource-link', minimum: 1).first(count).map(&:text)
+        end
+
+        def get_bottom_project_names(count)
+          all_elements('ci-resource-link', minimum: 1).last(count).map(&:text)
+        end
+
+        private
+
+        # Current acceptable options: 'CREATED', 'RELEASED'
+        def switch_catalog_sorting_option(option)
+          click_element('catalog-sorting-option-button')
+          find("[data-testid='listbox-item-#{option}']").click
+        end
+      end
+    end
+  end
+end

qa/qa/page/main/menu.rb

@@ -8,6 +8,7 @@ class Menu < Page::Base
         # since tablets have the regular top navigation bar
         include SubMenus::CreateNewMenu
         include SubMenus::SuperSidebar::GlobalSearchModal
+        include SubMenus::Explore
 
         view 'app/assets/javascripts/super_sidebar/components/super_sidebar.vue' do
           element 'super-sidebar', required: true

qa/qa/page/project/settings/visibility_features_permissions.rb

@@ -10,10 +10,20 @@ class VisibilityFeaturesPermissions < Page::Base
             element 'project-features-save-button'
           end
 
+          view 'app/assets/javascripts/pages/projects/shared/permissions/components/ci_catalog_settings.vue' do
+            element 'catalog-resource-toggle'
+          end
+
           def set_project_visibility(visibility)
             select_element('project-visibility-dropdown', visibility)
             click_element 'project-features-save-button'
           end
+
+          def enable_ci_cd_catalog_resource
+            within_element('catalog-resource-toggle') do
+              find('.gl-toggle').click
+            end
+          end
         end
       end
     end

qa/qa/page/sub_menus/explore.rb

+# frozen_string_literal: true
+
+module QA
+  module Page
+    module SubMenus
+      module Explore
+        extend QA::Page::PageConcern
+
+        def self.prepended(base)
+          super
+
+          base.class_eval do
+            view 'app/assets/javascripts/super_sidebar/components/nav_item.vue' do
+              element 'nav-item-link'
+            end
+          end
+        end
+
+        def go_to_ci_cd_catalog
+          click_element('nav-item-link', submenu_item: 'CI/CD Catalog')
+        end
+      end
+    end
+  end
+end

qa/qa/specs/features/browser_ui/4_verify/ci_components_catalog/ci_catalog_sorting_spec.rb

+# frozen_string_literal: true
+
+module QA
+  RSpec.describe 'Verify', :skip_live_env, product_group: :pipeline_authoring do
+    describe 'CI catalog' do
+      let(:project_count) { 3 }
+
+      let(:catalog_project_list) do
+        create_list(
+          :project,
+          project_count,
+          :with_readme,
+          name: 'project-for-catalog',
+          description: 'This is a catalog project.'
+        )
+      end
+
+      let(:tag) { '1.0.0' }
+      let(:test_project_names) { catalog_project_list.map(&:name) }
+
+      shared_examples 'descending order by default' do |testcase|
+        it 'displays from last to first', testcase: testcase do
+          Page::Explore::CiCdCatalog.perform do |catalog|
+            expect(top_projects_from_ui(catalog)).to eql(test_project_names.reverse)
+          end
+        end
+      end
+
+      shared_examples 'ascending order' do |testcase|
+        it 'displays from first to last', testcase: testcase do
+          Page::Explore::CiCdCatalog.perform do |catalog|
+            catalog.sort_in_ascending_order
+            expect(bottom_projects_from_ui(catalog)).to eql(test_project_names)
+          end
+        end
+      end
+
+      context 'when sorting' do
+        before do
+          Flow::Login.sign_in
+
+          catalog_project_list.each do |project|
+            enable_catalog_resource_feature(project)
+            setup_component(project)
+            create_release(project)
+          end
+
+          Page::Main::Menu.perform do |main|
+            main.go_to_explore
+            main.go_to_ci_cd_catalog
+          end
+        end
+
+        context 'with released at' do
+          it_behaves_like 'descending order by default',
+            'https://gitlab.com/gitlab-org/gitlab/-/quality/test_cases/441478'
+
+          it_behaves_like 'ascending order',
+            'https://gitlab.com/gitlab-org/gitlab/-/quality/test_cases/441477'
+        end
+
+        context 'with created at' do
+          before do
+            Page::Explore::CiCdCatalog.perform(&:sort_by_created_at)
+          end
+
+          it_behaves_like 'descending order by default',
+            'https://gitlab.com/gitlab-org/gitlab/-/quality/test_cases/441479'
+
+          it_behaves_like 'ascending order',
+            'https://gitlab.com/gitlab-org/gitlab/-/quality/test_cases/441475'
+        end
+      end
+
+      private
+
+      def enable_catalog_resource_feature(project)
+        project.visit!
+
+        Page::Project::Menu.perform(&:go_to_general_settings)
+        Page::Project::Settings::Main.perform do |settings|
+          settings.expand_visibility_project_features_permissions(&:enable_ci_cd_catalog_resource)
+        end
+      end
+
+      def setup_component(project)
+        create(:commit, project: project, commit_message: 'Add .gitlab-ci.yml and component', actions: [
+          {
+            action: 'create',
+            file_path: '.gitlab-ci.yml',
+            content: <<~YAML
+              create-release:
+                stage: deploy
+                script: echo "Creating release $CI_COMMIT_TAG"
+                rules:
+                  - if: $CI_COMMIT_TAG
+              release:
+                tag_name: $CI_COMMIT_TAG
+                description: "Release $CI_COMMIT_TAG of components in $CI_PROJECT_PATH"
+            YAML
+          },
+          {
+            action: 'create',
+            file_path: 'templates/new_component.yml',
+            content: <<~YAML
+              spec:
+                inputs:
+                  scanner-output:
+                    default: json
+              ---
+              my-scanner:
+                script: my-scan --output $[[ inputs.scanner-output ]]
+            YAML
+          }
+        ])
+      end
+
+      def create_release(project)
+        project.create_release(tag)
+      end
+
+      def top_projects_from_ui(page_object)
+        page_object.get_top_project_names(project_count)
+      end
+
+      def bottom_projects_from_ui(page_object)
+        page_object.get_bottom_project_names(project_count)
+      end
+    end
+  end
+end