feat: add unit test for ordering

src/components/Sections/SectionHeader.tsx

@@ -22,7 +22,7 @@ export const SectionHeader = ({
       {name}
     </Divider>
 
-    {flag('home.showMore') && (
+    {flag('home.detailed_section.show_more-dev') && (
       <>
         <Button
           label={<Icon icon={DotsIcon} />}

src/components/Sections/SectionsTypes.ts

@@ -14,7 +14,7 @@ export interface Section {
     createdByApp: string
     mobile: DeviceSettings
     desktop: DeviceSettings
-    order: number
+    order?: number
   }
 }
 

src/components/Sections/utils.spec.ts

@@ -0,0 +1,189 @@
+import { DirectoryData } from 'components/Shortcuts/types'
+import { Section } from './SectionsTypes'
+import { _defaultLayout, formatSections } from './utils'
+
+describe('formatSections', () => {
+  it('should merge sections and sort them correctly based on order and name', () => {
+    const folders = [
+      {
+        id: '968dae76ae098d95ef402552fd001fcc',
+        name: 'Applications Toutatice',
+        items: [{ id: 'item1' }]
+      },
+      {
+        id: '968dae76ae098d95ef402552fd0009c0',
+        name: 'Infos',
+        items: [{ id: 'item2' }]
+      },
+      {
+        id: '968dae76ae098d95ef402552fd001234',
+        name: 'Another Folder',
+        items: [{ id: 'item3' }]
+      }
+    ] as Array<DirectoryData>
+
+    const layout = [
+      {
+        id: '968dae76ae098d95ef402552fd001fcc',
+        layout: {
+          originalName: 'Applications Toutatice',
+          createdByApp: 'toutatice',
+          mobile: {
+            detailedLine: false,
+            grouped: false
+          },
+          desktop: {
+            detailedLine: true,
+            grouped: true
+          },
+          order: 3
+        }
+      },
+      {
+        id: '968dae76ae098d95ef402552fd0009c0',
+        layout: {
+          originalName: 'Infos',
+          createdByApp: 'infos',
+          mobile: {
+            detailedLine: true,
+            grouped: true
+          },
+          desktop: {
+            detailedLine: false,
+            grouped: true
+          },
+          order: 4
+        }
+      }
+    ] as Section[]
+
+    const expectedOutput = [
+      {
+        id: '968dae76ae098d95ef402552fd001fcc',
+        name: 'Applications Toutatice',
+        items: [{ id: 'item1' }],
+        layout: {
+          ..._defaultLayout,
+          order: 3,
+          originalName: 'Applications Toutatice',
+          createdByApp: 'toutatice',
+          mobile: {
+            detailedLine: false,
+            grouped: false
+          },
+          desktop: {
+            detailedLine: true,
+            grouped: true
+          }
+        }
+      },
+      {
+        id: '968dae76ae098d95ef402552fd0009c0',
+        name: 'Infos',
+        items: [{ id: 'item2' }],
+        layout: {
+          ..._defaultLayout,
+          order: 4,
+          originalName: 'Infos',
+          createdByApp: 'infos',
+          mobile: {
+            detailedLine: true,
+            grouped: true
+          },
+          desktop: {
+            detailedLine: false,
+            grouped: true
+          }
+        }
+      },
+      {
+        id: '968dae76ae098d95ef402552fd001234',
+        name: 'Another Folder',
+        items: [{ id: 'item3' }],
+        layout: {
+          ..._defaultLayout,
+          order: Infinity
+        }
+      }
+    ]
+
+    const result = formatSections(folders, layout)
+    expect(result).toEqual(expectedOutput)
+  })
+
+  it('should sort sections with the same order alphabetically by name', () => {
+    const folders = [
+      { id: '1', name: 'B Folder', items: [{ id: 'item1' }] },
+      { id: '2', name: 'A Folder', items: [{ id: 'item2' }] },
+      { id: '3', name: 'C Folder', items: [{ id: 'item3' }] }
+    ] as Array<DirectoryData>
+
+    const layout = [
+      { id: '1', layout: { order: 1 } },
+      { id: '2', layout: { order: 1 } },
+      { id: '3', layout: { order: 1 } }
+    ] as Section[]
+
+    const expectedOutput = [
+      {
+        id: '2',
+        name: 'A Folder',
+        items: [{ id: 'item2' }],
+        layout: { ..._defaultLayout, order: 1 }
+      },
+      {
+        id: '1',
+        name: 'B Folder',
+        items: [{ id: 'item1' }],
+        layout: { ..._defaultLayout, order: 1 }
+      },
+      {
+        id: '3',
+        name: 'C Folder',
+        items: [{ id: 'item3' }],
+        layout: { ..._defaultLayout, order: 1 }
+      }
+    ]
+
+    const result = formatSections(folders, layout)
+    expect(result).toEqual(expectedOutput)
+  })
+
+  it('should place sections without order at the end, sorted alphabetically by name', () => {
+    const folders = [
+      { id: '1', name: 'B Folder', items: [{ id: 'item1' }] },
+      { id: '2', name: 'A Folder', items: [{ id: 'item2' }] },
+      { id: '3', name: 'C Folder', items: [{ id: 'item3' }] }
+    ] as Array<DirectoryData>
+
+    const layout = [
+      { id: '1', layout: { order: 2 } },
+      { id: '2', layout: {} }, // No order
+      { id: '3', layout: { order: 1 } }
+    ] as Section[]
+
+    const expectedOutput = [
+      {
+        id: '3',
+        name: 'C Folder',
+        items: [{ id: 'item3' }],
+        layout: { ..._defaultLayout, order: 1 }
+      },
+      {
+        id: '1',
+        name: 'B Folder',
+        items: [{ id: 'item1' }],
+        layout: { ..._defaultLayout, order: 2 }
+      },
+      {
+        id: '2',
+        name: 'A Folder',
+        items: [{ id: 'item2' }],
+        layout: { ..._defaultLayout, order: Infinity }
+      }
+    ]
+
+    const result = formatSections(folders, layout)
+    expect(result).toEqual(expectedOutput)
+  })
+})

src/components/Sections/utils.ts

@@ -1,7 +1,7 @@
 import { Section } from 'components/Sections/SectionsTypes'
 import { DirectoryDataArray } from 'components/Shortcuts/types'
 
-const defaultLayout: Section['layout'] = {
+export const _defaultLayout: Section['layout'] = {
   mobile: {
     detailedLine: false,
     grouped: false
@@ -10,7 +10,7 @@ const defaultLayout: Section['layout'] = {
     detailedLine: false,
     grouped: false
   },
-  order: 0,
+  order: Infinity, // This should be used only if no order is defined
   originalName: '',
   createdByApp: ''
 }
@@ -27,16 +27,37 @@ export const formatSections = (
   const mergedMap = folders?.map(folder => {
     const sectionLayout = sectionsMap[folder.id] || {}
 
+    // Merge layouts while keeping the defined order, defaulting to Infinity if not present
+    const mergedLayout = {
+      ..._defaultLayout,
+      ...sectionLayout.layout,
+      order:
+        sectionLayout.layout?.order !== undefined
+          ? sectionLayout.layout.order
+          : Infinity
+    }
+
     return {
       id: folder.id,
       name: folder.name,
       items: folder.items,
-      layout: {
-        ...defaultLayout,
-        ...sectionLayout
-      }
+      layout: mergedLayout
     }
   })
 
-  return mergedMap ?? []
+  // Sort the merged array based on the "order" property and name
+  const sortedSections = mergedMap.sort((a, b) => {
+    const orderA = a.layout.order
+    const orderB = b.layout.order
+
+    // If both sections have the same order, sort alphabetically by name
+    if (orderA === orderB) {
+      return a.name.localeCompare(b.name)
+    }
+
+    // Otherwise, sort by order
+    return orderA - orderB
+  })
+
+  return sortedSections ?? []
 }

src/components/Shortcuts/index.jsx

@@ -45,7 +45,7 @@ export const Shortcuts = ({ shortcutsDirectories }) => {
     homeSettingsResult.data?.[0]?.shortcutsLayout ?? TEMP_FIXTURE_DELETE_ASAP
   const formattedSections = formatSections(shortcutsDirectories, fetchedLayout)
 
-  if (flag('home.sections')) {
+  if (flag('home.detailed_sections-dev')) {
     return (
       <>
         {formattedSections?.map(section => (

src/components/Shortcuts/types.ts

@@ -66,7 +66,7 @@ interface Relationships {
   }
 }
 
-interface DirectoryData {
+export interface DirectoryData {
   items: FileData[]
   id: string
   _id: string

src/global.d.ts

@@ -1,4 +1,6 @@
 declare module 'cozy-harvest-lib'
-declare module 'cozy-ui/transpiled/react/providers/Breakpoints'
+declare module 'cozy-ui/transpiled/react/providers/Breakpoints' {
+  export default function useBreakpoints(): { isMobile: boolean }
+}
 declare module 'cozy-ui/transpiled/react/Spinner'
 declare module 'cozy-ui/transpiled/react/SquareAppIcon'