e2e. view mode switch

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

@@ -49,9 +49,9 @@ Feature: Accessibility checks
     # personal space
     And "Alice" opens the "files" app
     And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "personal space"
-    And "Alice" switches to the tiles-view
+    And "Alice" switches to the "tiles" view
     And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "personal space"
-    And "Alice" switches to the "resource-table-condensed" view mode
+    And "Alice" switches to the "table-condensed" view
     And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "personal space"
 
     # shares
@@ -65,11 +65,11 @@ Feature: Accessibility checks
     # project spaces
     And "Alice" navigates to the projects space page
     And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "project spaces"
-    And "Alice" switches to the tiles-view
+    And "Alice" switches to the "tiles" view
     And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "project spaces"
     And "Alice" navigates to the project space "my_space"
     And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "project spaces"
-    And "Alice" switches to the "resource-table" view mode
+    And "Alice" switches to the "table" view
     And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "project spaces"
 
     # deleted files

tests/e2e/cucumber/features/mobile-view/smoke.feature

@@ -40,4 +40,7 @@ Feature: Mobile device test
       | resource       | type |
       | testavatar.jpg | file |
     And "Alice" closes the file viewer
+    And "Alice" sees the resources displayed as "tiles"
+    And "Alice" switches to the "table" view
+    And "Alice" sees the resources displayed as "table"
     And "Alice" logs out

tests/e2e/cucumber/features/shares/denyShareAccess.feature

@@ -12,7 +12,7 @@ Feature: deny share access
       | folder_to_shared/folder         |
       | folder_to_shared/folder_to_deny |
     And "Alice" opens the "files" app
-    And "Alice" switches to the "resource-table" view mode
+    And "Alice" switches to the "table" view
     And "Alice" shares the following resource using the quick action
       | resource         | recipient | type | role     | resourceType |
       | folder_to_shared | Brian     | user | Can view | folder       |

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

@@ -11,7 +11,7 @@ Feature: Users can use web to organize tags
       | pathToFile | content     |
       | lorem.txt  | lorem ipsum |
     And "Alice" logs in
-    And "Alice" switches to the "resource-table" view mode
+    And "Alice" switches to the "table" view
     And "Alice" adds the following tags for the following resources using the sidebar panel
       | resource  | tags         |
       | lorem.txt | tag 1, tag 2 |
@@ -39,7 +39,7 @@ Feature: Users can use web to organize tags
       | lorem.txt    | lorem ipsum |
       | textfile.txt | test file   |
     And "Alice" logs in
-    And "Alice" switches to the "resource-table" view mode
+    And "Alice" switches to the "table" view
     And "Alice" adds the following tags for the following resources using the sidebar panel
       | resource  | tags       |
       | lorem.txt | tag1, tag2 |
@@ -61,7 +61,7 @@ Feature: Users can use web to organize tags
       | pathToFile                 | content     |
       | folder_to_shared/lorem.txt | lorem ipsum |
     And "Alice" logs in
-    And "Alice" switches to the "resource-table" view mode
+    And "Alice" switches to the "table" view
     And "Alice" adds the following tags for the following resources using the sidebar panel
       | resource                   | tags         |
       | folder_to_shared/lorem.txt | tag 1, tag 2 |
@@ -71,7 +71,7 @@ Feature: Users can use web to organize tags
     And "Alice" logs out
 
     And "Brian" logs in
-    And "Brian" switches to the "resource-table" view mode
+    And "Brian" switches to the "table" view
     And "Brian" navigates to the shared with me page
     Then the following resources should contain the following tags in the files list for user "Brian"
       | resource                   | tags         |

tests/e2e/cucumber/features/user-settings/tiles.feature

@@ -11,11 +11,11 @@ Feature: Tiles
     And "Alice" creates the following resources
       | resource    | type   |
       | tile_folder | folder |
-    And "Alice" switches to the tiles-view
-    And "Alice" sees the resources displayed as tiles
+    And "Alice" switches to the "tiles" view
+    And "Alice" sees the resources displayed as "tiles"
     And "Alice" opens folder "tile_folder"
     And "Alice" creates the following resources
       | resource     | type   |
       | tile_folder2 | folder |
-    And "Alice" sees the resources displayed as tiles
+    And "Alice" sees the resources displayed as "tiles"
     And "Alice" logs out

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

@@ -412,16 +412,7 @@ When(
 )
 
 When(
-  '{string} switches to the tiles-view',
-  async function (this: World, stepUser: string): Promise<void> {
-    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
-    const resourceObject = new objects.applicationFiles.Resource({ page })
-    await resourceObject.switchToTilesViewMode()
-  }
-)
-
-When(
-  '{string} switches to the {string} view mode',
+  '{string} switches to the {string} view',
   async function (this: World, stepUser: string, viewMode: string): Promise<void> {
     const { page } = this.actorsEnvironment.getActor({ key: stepUser })
     const resourceObject = new objects.applicationFiles.Resource({ page })
@@ -430,11 +421,11 @@ When(
 )
 
 When(
-  '{string} sees the resources displayed as tiles',
-  async function (this: World, stepUser: string): Promise<void> {
+  '{string} sees the resources displayed as {string}',
+  async function (this: World, stepUser: string, viewMode: string): Promise<void> {
     const { page } = this.actorsEnvironment.getActor({ key: stepUser })
     const resourceObject = new objects.applicationFiles.Resource({ page })
-    await resourceObject.expectThatResourcesAreTiles()
+    await resourceObject.expectThatResourcesAreDisplayedAs(viewMode)
   }
 )
 

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

@@ -88,7 +88,6 @@ const tagInFilesTable = '//*[contains(@class, "oc-tag")]//span[text()="%s"]//anc
 const tagInInputForm =
   '//span[contains(@class, "tags-select-tag")]//span[text()="%s"]//ancestor::span//button[contains(@class, "vs__deselect")]'
 const tagFormInput = '//*[@data-testid="tags"]//input'
-const resourcesAsTiles = '#files-view .oc-tiles'
 const versionsPanelSelect = '//*[@data-testid="sidebar-panel-versions-select"]'
 const noLinkMessage = '#web .oc-link-resolve [data-testid="error-message"]'
 const listItemPageSelector = '//*[contains(@class,"oc-pagination-list-item-page") and text()="%s"]'
@@ -125,6 +124,8 @@ const sharerAvatarSelector =
 const recipientAvatarSelector =
   '//*[@data-test-resource-name="%s"]/ancestor::tr//td[contains(@class, "oc-table-data-cell-sharedWith")]//img'
 const userAvatarInActivitypanelSelector = '[data-test-user-name="%s"]'
+const mobileViewmodeSwitchBtn = '#mobile-viewmode-switch-toggle'
+const mobileViewmodeSwitchDropdown = '#mobile-viewmode-switch-drop'
 
 // online office locators
 // Collabora
@@ -1636,18 +1637,45 @@ export const getDisplayedResourcesFromTrashbin = async (page: Page): Promise<str
 
 export interface switchViewModeArgs {
   page: Page
-  target: 'resource-table' | 'resource-tiles' | 'resource-table-condensed'
+  target: 'table' | 'tiles' | 'table-condensed'
 }
 
 export const clickViewModeToggle = async (args: switchViewModeArgs): Promise<void> => {
   const { page, target } = args
-  await page.locator(`.viewmode-switch-buttons .${target}`).click()
+
+  if (config.browser === 'mobile-chromium' || config.browser === 'mobile-webkit') {
+    await page.locator(mobileViewmodeSwitchBtn).click()
+    await expect(page.locator(mobileViewmodeSwitchDropdown)).toBeVisible()
+
+    const mobileTexts = {
+      table: 'Default table view',
+      tiles: 'Tiles view',
+      'table-condensed': 'Condensed table view'
+    }
+    await page.getByText(mobileTexts[target]).first().click()
+  } else {
+    const webSelectors = {
+      table: 'resource-table',
+      tiles: 'resource-tiles',
+      'table-condensed': 'resource-table-condensed'
+    }
+    await page.locator(`.viewmode-switch-buttons .${webSelectors[target]}`).click()
+  }
 }
 
-export const expectThatResourcesAreTiles = async (args: { page: Page }): Promise<void> => {
-  const { page } = args
-  const tiles = page.locator(resourcesAsTiles)
-  await expect(tiles).toBeVisible()
+export const expectThatResourcesAreDisplayedAs = async (args: {
+  page: Page
+  viewMode: string
+}): Promise<void> => {
+  const { page, viewMode } = args
+  const viewSelectors = {
+    table: '#files-view .oc-table',
+    tiles: '#files-view .oc-tiles',
+    'table-condensed': '#files-view .oc-table.oc-table-condensed'
+  }
+
+  const selector = viewSelectors[viewMode]
+  await expect(page.locator(selector)).toBeVisible()
 }
 
 export const showHiddenResources = async (page: Page): Promise<void> => {

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

@@ -212,16 +212,12 @@ export class Resource {
     await po.clickResourceFromBreadcrumb({ page: this.#page, resource })
   }
 
-  async switchToTilesViewMode(): Promise<void> {
-    await po.clickViewModeToggle({ page: this.#page, target: 'resource-tiles' })
-  }
-
   async switchViewMode(viewMode): Promise<void> {
     await po.clickViewModeToggle({ page: this.#page, target: viewMode })
   }
 
-  async expectThatResourcesAreTiles(): Promise<void> {
-    await po.expectThatResourcesAreTiles({ page: this.#page })
+  async expectThatResourcesAreDisplayedAs(viewMode: string): Promise<void> {
+    await po.expectThatResourcesAreDisplayedAs({ page: this.#page, viewMode })
   }
 
   async showHiddenFiles(): Promise<void> {