added E2E test to sort files/folders

tests/e2e/cucumber/features/smoke/sort.feature

@@ -0,0 +1,94 @@
+Feature: Sort files/folders
+  As a user
+  I want to sort files/folders
+  So that I can make the file/folder list more clear
+
+
+  Scenario: sort files and folders
+    Given "Admin" creates following user using API
+      | id    |
+      | Alice |
+    And "Alice" logs in
+    And "Alice" creates the following resources
+      | resource          | type   |
+      | FOLDER            | folder |
+      | Folder,With,Comma | folder |
+      | PARENT            | folder |
+    And "Alice" uploads the following resource
+      | resource          | to     |
+      | simple.pdf        | FOLDER |
+      | new-lorem-big.txt | PARENT |
+    And "Alice" uploads the following resource
+      | resource               |
+      | lorem.txt              |
+      | testavatar.jpg         |
+      | testavatar.jpeg        |
+      | new-data.zip           |
+      | new-'single'quotes.txt |
+    And "Alice" opens the "files" app
+    And "Alice" should see resources displayed in ascending order by name
+      | resource               |
+      | FOLDER                 |
+      | Folder,With,Comma      |
+      | PARENT                 |
+      | lorem.txt              |
+      | new-'single'quotes.txt |
+      | new-data.zip           |
+      | testavatar.jpeg        |
+      | testavatar.jpg         |
+    When "Alice" sorts the resources by name
+    Then "Alice" should see resources displayed in descending order by name
+      | resource               |
+      | testavatar.jpg         |
+      | testavatar.jpeg        |
+      | new-data.zip           |
+      | new-'single'quotes.txt |
+      | lorem.txt              |
+      | PARENT                 |
+      | Folder,With,Comma      |
+      | FOLDER                 |
+    And "Alice" sorts the resources by modified date
+    And "Alice" should see resources displayed in descending order by modified date
+      | resources              |
+      | new-'single'quotes.txt |
+      | new-data.zip           |
+      | testavatar.jpeg        |
+      | testavatar.jpg         |
+      | lorem.txt              |
+      | PARENT                 |
+      | FOLDER                 |
+      | Folder,With,Comma      |
+    And "Alice" sorts the resources by modified date
+    And "Alice" should see resources displayed in ascending order by modified date
+      | resources              |
+      | Folder,With,Comma      |
+      | FOLDER                 |
+      | PARENT                 |
+      | lorem.txt              |
+      | testavatar.jpg         |
+      | testavatar.jpeg        |
+      | new-data.zip           |
+      | new-'single'quotes.txt |
+    And "Alice" sorts the resources by size
+    And "Alice" should see resources displayed in descending order by size
+      | resources              |
+      | testavatar.jpg         |
+      | FOLDER                 |
+      | PARENT                 |
+      | new-data.zip           |
+      | testavatar.jpeg        |
+      | new-'single'quotes.txt |
+      | lorem.txt              |
+      | Folder,With,Comma      |
+    And "Alice" sorts the resources by size
+    And "Alice" should see resources displayed in ascending order by size
+      | resources              |
+      | Folder,With,Comma      |
+      | lorem.txt              |
+      | new-'single'quotes.txt |
+      | testavatar.jpeg        |
+      | new-data.zip           |
+      | PARENT                 |
+      | FOLDER                 |
+      | testavatar.jpg         |
+    And "Alice" logs out

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

@@ -353,6 +353,31 @@ Then(
   }
 )
 
+Then(
+  /^"([^"]*)" should see resources displayed in (ascending|descending) order by (name|modified date|size)$/,
+  async function (
+    this: World,
+    stepUser: string,
+    order: string,
+    orderBy: string,
+    stepTable: DataTable
+  ): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const resourceObject = new objects.applicationFiles.Resource({ page })
+    const resources = [].concat(...stepTable.rows())
+    await resourceObject.checkSortedResources({ order, orderBy, resources })
+  }
+)
+
+When(
+  /^"([^"]*)" sorts the resources by (modified date|size|name)$/,
+  async function (this: World, stepUser: string, sortType: string): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const resourceObject = new objects.applicationFiles.Resource({ page })
+    await resourceObject.sortResourcesByType({ sortType })
+  }
+)
+
 When(
   '{string} opens folder {string}',
   async function (this: World, stepUser: string, resource: string): Promise<void> {

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

@@ -115,6 +115,9 @@ const resourceLockIcon =
   '//*[@data-test-resource-name="%s"]/ancestor::tr//td//span[contains(@class, "oc-resource-icon-status-badge")]'
 const sharesNavigationButtonSelector = '.oc-sidebar-nav [data-nav-name="files-shares"]'
 const keepBothButton = '.oc-modal-body-actions-confirm'
+const modifiedDateTableHeader = '//th[contains(@class, "oc-table-header-cell-mdate")]/span'
+const sizeTableHeader = '//th[contains(@class, "oc-table-header-cell-size")]/span'
+const nameTableHeader = '//th[contains(@class, "oc-table-header-cell-name")]/span'
 
 export const clickResource = async ({
   page,
@@ -1385,6 +1388,32 @@ export const getDisplayedResourcesFromShares = async (page): Promise<string[]> =
 }
 
 export const getDisplayedResourcesFromTrashbin = async (page): Promise<string[]> => {
+  return getDisplayedResources({ page })
+}
+
+export const checkSortedResources = async ({ page, order, orderBy, resources }): Promise<void> => {
+  switch (orderBy) {
+    case 'name':
+      expect(await page.locator('.oc-table-header-cell-name').getAttribute('aria-sort')).toBe(order)
+      break
+    case 'size':
+      expect(await page.locator('.oc-table-header-cell-size').getAttribute('aria-sort')).toBe(order)
+      break
+    case 'modified date':
+      expect(await page.locator('.oc-table-header-cell-mdate').getAttribute('aria-sort')).toBe(
+        order
+      )
+      break
+    default:
+      throw new Error(`Unknown order type: ${orderBy}`)
+  }
+  const sortedResources = await getDisplayedResources({ page })
+  for (let i = 0; i < resources.length; i++) {
+    expect(sortedResources[i]).toBe(resources[i])
+  }
+}
+
+const getDisplayedResources = async ({ page }): Promise<string[]> => {
   const files = []
   const result = await page.locator('[data-test-resource-path]')
 
@@ -1396,6 +1425,22 @@ export const getDisplayedResourcesFromTrashbin = async (page): Promise<string[]>
   return files
 }
 
+export const sortResourcesByType = async ({ page, sortType }): Promise<void> => {
+  switch (sortType) {
+    case 'name':
+      await page.locator(nameTableHeader).click()
+      break
+    case 'size':
+      await page.locator(sizeTableHeader).click()
+      break
+    case 'modified date':
+      await page.locator(modifiedDateTableHeader).click()
+      break
+    default:
+      throw new Error(`Unknown sort type: ${sortType}`)
+  }
+}
+
 export interface switchViewModeArgs {
   page: Page
   target: 'resource-table' | 'resource-tiles'

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

@@ -197,6 +197,14 @@ export class Resource {
     }
   }
 
+  async checkSortedResources({ order, orderBy, resources }): Promise<void> {
+    await po.checkSortedResources({ page: this.#page, order, orderBy, resources })
+  }
+
+  async sortResourcesByType({ sortType }): Promise<void> {
+    return po.sortResourcesByType({ page: this.#page, sortType })
+  }
+
   async openFolder(resource): Promise<void> {
     await po.clickResource({ page: this.#page, path: resource })
   }