Minor code review nitpicks

Add coverage for always expanding first section
Call toLowerCase once
Single line comments

app/assets/javascripts/search_settings/components/search_settings.vue

@@ -51,14 +51,16 @@ const clearResults = (params) => {
   clearHighlights();
 };
 
-const includeNode = (node, searchTerm) =>
-  node.textContent.toLowerCase().includes(searchTerm.toLowerCase()) &&
+const includeNode = (node, lowerSearchTerm) =>
+  node.textContent.toLowerCase().includes(lowerSearchTerm) &&
   EXCLUDED_NODES.every((excluded) => !node.parentElement.closest(excluded));
 
 const search = (root, searchTerm) => {
   const iterator = document.createNodeIterator(root, NodeFilter.SHOW_TEXT, {
     acceptNode(node) {
-      return includeNode(node, searchTerm) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+      return includeNode(node, searchTerm.toLowerCase())
+        ? NodeFilter.FILTER_ACCEPT
+        : NodeFilter.FILTER_REJECT;
     },
   });
   const results = [];

app/assets/javascripts/search_settings/constants.js

-/**
- * We do not consider these nodes in the search index
- */
+// We do not consider these nodes in the search index
 export const EXCLUDED_NODES = ['OPTION'];
 
-/**
- * Used to hide the sections that do not match
- * the search term
- */
+// Used to hide the sections that do not match * the search term
 export const HIDE_CLASS = 'gl-display-none';
 
-/**
- * used to highlight the text that matches the
- * search term
- */
+// used to highlight the text that matches the * search term
 export const HIGHLIGHT_CLASS = 'gl-bg-orange-50';
 
-/**
- * How many seconds to wait until the user
- * stops typing
- * */
+// How many seconds to wait until the user * stops typing
 export const TYPING_DELAY = 400;

spec/frontend/search_settings/components/search_settings_spec.js

@@ -20,7 +20,8 @@ describe('search_settings/components/search_settings.vue', () => {
     });
   };
 
-  const sectionsCount = () => document.querySelectorAll(SECTION_SELECTOR).length;
+  const sections = () => Array.from(document.querySelectorAll(SECTION_SELECTOR));
+  const sectionsCount = () => sections().length;
   const visibleSectionsCount = () =>
     document.querySelectorAll(`${SECTION_SELECTOR}:not(.${HIDE_CLASS})`).length;
   const highlightedElementsCount = () => document.querySelectorAll(`.${HIGHLIGHT_CLASS}`).length;
@@ -51,6 +52,17 @@ describe('search_settings/components/search_settings.vue', () => {
     wrapper.destroy();
   });
 
+  it('expands first section and collapses the rest', () => {
+    clearSearch();
+
+    const [firstSection, ...otherSections] = sections();
+
+    expect(wrapper.emitted()).toEqual({
+      expand: [[firstSection]],
+      collapse: otherSections.map((x) => [x]),
+    });
+  });
+
   it('hides sections that do not match the search term', () => {
     const hiddenSection = document.querySelector(`#${GENERAL_SETTINGS_ID}`);
     search(SEARCH_TERM);