Move filterGitlabCiYmls to helper function

Addresses reviewer feedback an adds unit test

ee/app/assets/javascripts/pages/admin/application_settings/ci_cd/ci_template_dropdown.vue

@@ -7,6 +7,7 @@ import {
   GlSearchBoxByType,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { filterGitlabCiYmls } from './helpers';
 
 export default {
   name: 'CiTemplateDropdown',
@@ -37,19 +38,7 @@ export default {
         return this.gitlabCiYmls;
       }
 
-      return Object.keys(this.gitlabCiYmls).reduce((filteredYmls, category) => {
-        const categoryYmls = this.gitlabCiYmls[category].filter((yml) =>
-          yml.name.toLowerCase().startsWith(this.searchTerm),
-        );
-
-        if (categoryYmls.length > 0) {
-          Object.assign(filteredYmls, {
-            [category]: categoryYmls,
-          });
-        }
-
-        return filteredYmls;
-      }, {});
+      return filterGitlabCiYmls(this.gitlabCiYmls, this.searchTerm);
     },
     filteredTemplateCategories() {
       return Object.keys(this.filteredYmls);

ee/app/assets/javascripts/pages/admin/application_settings/ci_cd/helpers.js

+/**
+ * Filters [gitlabCiYmls] based on a given [searchTerm].
+ * Yml catagories with no items after filtering are not included in the returned object.
+ * @param {Object} gitlabCiYmls - { <categoryName>: [{ name, id }] }
+ * @param {String} searchTerm
+ * @returns {Object}
+ */
+export function filterGitlabCiYmls(gitlabCiYmls, searchTerm) {
+  return Object.keys(gitlabCiYmls).reduce((filteredYmls, category) => {
+    const categoryYmls = gitlabCiYmls[category].filter((yml) =>
+      yml.name.toLowerCase().startsWith(searchTerm),
+    );
+
+    if (categoryYmls.length > 0) {
+      Object.assign(filteredYmls, {
+        [category]: categoryYmls,
+      });
+    }
+
+    return filteredYmls;
+  }, {});
+}

ee/spec/frontend/pages/admin/application_settings/ci_cd/helpers_spec.js

+import { filterGitlabCiYmls } from 'ee/pages/admin/application_settings/ci_cd/helpers';
+
+describe('CI/CD helpers', () => {
+  const Yml = (name) => ({ name, id: name });
+  it.each`
+    gitlabCiYmls                                                   | searchTerm | result
+    ${{ CatA: [Yml('test'), Yml('node')], CatB: [Yml('test')] }}   | ${'t'}     | ${{ CatA: [Yml('test')], CatB: [Yml('test')] }}
+    ${{ CatA: [Yml('test'), Yml('tether')], CatB: [Yml('test')] }} | ${'tet'}   | ${{ CatA: [Yml('tether')] }}
+    ${{ CatA: [Yml('test'), Yml('node')], CatB: [Yml('test')] }}   | ${'n'}     | ${{ CatA: [Yml('node')] }}
+    ${{ CatA: [Yml('test'), Yml('node')], CatB: [Yml('test')] }}   | ${'asd'}   | ${{}}
+  `(
+    'returns filtered list with correct categories when search term is $searchTerm',
+    ({ gitlabCiYmls, searchTerm, result }) => {
+      expect(filterGitlabCiYmls(gitlabCiYmls, searchTerm)).toEqual(result);
+    },
+  );
+});