adding test for flat list (#12535)

Author: nirajacharya2

tests/e2e/cucumber/features/spaces/pagination.feature

@@ -30,4 +30,6 @@ Feature: check files pagination in project space
     Then "Alice" should be on page "2"
     When "Alice" changes the items per page to "500"
     Then "Alice" should not see the pagination in the project space files view
+    When "Alice" enables flat list
+    Then "Alice" should see files being sorted in alphabetic order
     And "Alice" logs out

tests/e2e/cucumber/steps/ui/resources.ts

@@ -406,6 +406,25 @@ When(
   }
 )
 
+When('{string} enables flat list', async function (this: World, stepUser: string): Promise<void> {
+  const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+  const resourceObject = new objects.applicationFiles.Resource({ page })
+  await resourceObject.toggleFlatList()
+})
+
+Then(
+  '{string} should see files being sorted in alphabetic order',
+  async function (this: World, stepUser: string): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const resourceObject = new objects.applicationFiles.Resource({ page })
+    const allFiles: string[] = await resourceObject.getAllFiles()
+    const sortedFiles = [...allFiles].sort((a, b) =>
+      a.localeCompare(b, 'en-us', { numeric: true, ignorePunctuation: true })
+    )
+    expect(allFiles).toEqual(sortedFiles)
+  }
+)
+
 When(
   '{string} switches to the tiles-view',
   async function (this: World, stepUser: string): Promise<void> {

tests/e2e/support/objects/app-files/resource/actions.ts

@@ -91,7 +91,9 @@ const searchList =
 const globalSearchOptions = '#files-global-search-options'
 const loadingSpinner = '#files-global-search-options .loading'
 const filesViewOptionButton = '#files-view-options-btn'
-const hiddenFilesToggleButton = '//*[@data-testid="files-switch-hidden-files"]//button'
+const hiddenFilesToggleButton = '//*[@data-testid="files-switch-hidden-files"]/button'
+const flatListToggleButton = '//*[@data-testid="files-switch-flat-list"]/button'
+const fileNameSelector = '.oc-resource-basename'
 const previewImage = '//main[@id="preview"]//div[contains(@class,"stage_media")]//img'
 const previewAudio = '//main[@id="preview"]//div[contains(@class,"stage_media")]//audio//source'
 const previewVideo = '//main[@id="preview"]//div[contains(@class,"stage_media")]//video//source'
@@ -1607,6 +1609,19 @@ export const showHiddenResources = async (page: Page): Promise<void> => {
   await page.locator(filesViewOptionButton).click()
 }
 
+export const toggleFlatList = async (page: Page): Promise<void> => {
+  await page.locator(filesViewOptionButton).click()
+  await page.locator(flatListToggleButton).click()
+  // close the files view option
+  await page.locator(filesViewOptionButton).click()
+}
+
+export const getAllFiles = async (page: Page): Promise<string[]> => {
+  await page.locator(footerTextSelector).waitFor()
+  const fileLocators = await page.locator(fileNameSelector).all()
+  return await Promise.all(fileLocators.map((locator) => locator.textContent()))
+}
+
 export interface editResourcesArgs {
   page: Page
   name: string

tests/e2e/support/objects/app-files/resource/index.ts

@@ -223,6 +223,14 @@ export class Resource {
     await po.showHiddenResources(this.#page)
   }
 
+  async toggleFlatList(): Promise<void> {
+    await po.toggleFlatList(this.#page)
+  }
+
+  async getAllFiles(): Promise<string[]> {
+    return po.getAllFiles(this.#page)
+  }
+
   async editResource(args: Omit<po.editResourcesArgs, 'page'>): Promise<void> {
     await po.editResource({ ...args, page: this.#page })
   }