Sort frameworks in framework dropdown list (mozilla#554)

esanuandra · Oct 31, 2023 · 4416d9c · 4416d9c
1 parent 45b9da8
commit 4416d9c
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 1 deletion.
diff --git a/src/__tests__/Search/CompareWithBase.test.tsx b/src/__tests__/Search/CompareWithBase.test.tsx
@@ -63,6 +63,7 @@ describe('Compare With Base', () => {
     });
 
     await user.click(frameworkDropdown);
+    expect(screen.getByRole('listbox')).toMatchSnapshot();
     const buildMetricsItem = screen.getByRole('option', {
       name: 'build_metrics',
     });

diff --git a/src/__tests__/Search/__snapshots__/CompareWithBase.test.tsx.snap b/src/__tests__/Search/__snapshots__/CompareWithBase.test.tsx.snap
@@ -381,3 +381,133 @@ exports[`Compare With Base renders correctly when there are no results 1`] = `
   </div>
 </body>
 `;
+
+exports[`Compare With Base selects and displays new framework when clicked 1`] = `
+<ul
+  aria-labelledby="select-framework-label"
+  class="MuiList-root MuiList-padding MuiMenu-list css-6hp17o-MuiList-root-MuiMenu-list"
+  role="listbox"
+  tabindex="-1"
+>
+  <li
+    aria-selected="false"
+    class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters framework-dropdown-item css-shx448-MuiButtonBase-root-MuiMenuItem-root"
+    data-value="4"
+    role="option"
+    tabindex="-1"
+  >
+    awsy
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </li>
+  <li
+    aria-selected="false"
+    class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters framework-dropdown-item css-shx448-MuiButtonBase-root-MuiMenuItem-root"
+    data-value="13"
+    role="option"
+    tabindex="-1"
+  >
+    browsertime
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </li>
+  <li
+    aria-selected="false"
+    class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters framework-dropdown-item css-shx448-MuiButtonBase-root-MuiMenuItem-root"
+    data-value="2"
+    role="option"
+    tabindex="-1"
+  >
+    build_metrics
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </li>
+  <li
+    aria-selected="false"
+    class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters framework-dropdown-item css-shx448-MuiButtonBase-root-MuiMenuItem-root"
+    data-value="12"
+    role="option"
+    tabindex="-1"
+  >
+    devtools
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </li>
+  <li
+    aria-selected="false"
+    class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters framework-dropdown-item css-shx448-MuiButtonBase-root-MuiMenuItem-root"
+    data-value="16"
+    role="option"
+    tabindex="-1"
+  >
+    fxrecord
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </li>
+  <li
+    aria-selected="false"
+    class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters framework-dropdown-item css-shx448-MuiButtonBase-root-MuiMenuItem-root"
+    data-value="11"
+    role="option"
+    tabindex="-1"
+  >
+    js-bench
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </li>
+  <li
+    aria-selected="false"
+    class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters framework-dropdown-item css-shx448-MuiButtonBase-root-MuiMenuItem-root"
+    data-value="15"
+    role="option"
+    tabindex="-1"
+  >
+    mozperftest
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </li>
+  <li
+    aria-selected="false"
+    class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters framework-dropdown-item css-shx448-MuiButtonBase-root-MuiMenuItem-root"
+    data-value="6"
+    role="option"
+    tabindex="-1"
+  >
+    platform_microbench
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </li>
+  <li
+    aria-selected="false"
+    class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters framework-dropdown-item css-shx448-MuiButtonBase-root-MuiMenuItem-root"
+    data-value="10"
+    role="option"
+    tabindex="-1"
+  >
+    raptor
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </li>
+  <li
+    aria-selected="true"
+    class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters Mui-selected MuiMenuItem-root MuiMenuItem-gutters Mui-selected framework-dropdown-item css-shx448-MuiButtonBase-root-MuiMenuItem-root"
+    data-value="1"
+    role="option"
+    tabindex="0"
+  >
+    talos
+    <span
+      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+    />
+  </li>
+</ul>
+`;
diff --git a/src/components/Search/FrameworkDropdown.tsx b/src/components/Search/FrameworkDropdown.tsx
@@ -29,6 +29,22 @@ interface FrameworkDropdownProps {
 
 const strings = Strings.components.searchDefault.sharedCollasped.framkework;
 
+const sortFrameworks = (
+  frameworks: Record<Framework['id'], Framework['name']>,
+) => {
+  const unsortedArray = Object.entries(frameworks);
+
+  // Sort the array based on values
+
+  const sortedArray = unsortedArray.sort((a, b) => {
+    return a[1].localeCompare(b[1]);
+  });
+
+  return sortedArray;
+};
+
+const sortedFrameworks = sortFrameworks(frameworkMap);
+
 function FrameworkDropdown({ mode }: FrameworkDropdownProps) {
   cssRule('.MuiTooltip-popper', {
     ...(mode === 'light' ? TooltipRaw.Light : TooltipRaw.Dark),
@@ -115,7 +131,7 @@ function FrameworkDropdown({ mode }: FrameworkDropdownProps) {
           onChange={(e) => void handleFrameworkSelect(e)}
           name='Framework'
         >
-          {Object.entries(frameworkMap).map(([id, name]) => (
+          {sortedFrameworks.map(([id, name]) => (
             <MenuItem value={id} key={name} className='framework-dropdown-item'>
               {name}
             </MenuItem>