test: convert tiles.feature test to playwright

Author: nirajacharya2

tests/e2e-playwright/helpers/setAccessAndRefreshToken.ts

@@ -4,7 +4,7 @@ import { UsersEnvironment } from '../../e2e/support/environment'
 
 export async function setAccessAndRefreshToken(usersEnvironment: UsersEnvironment) {
   if (!config.basicAuth && !config.predefinedUsers) {
-    let user = usersEnvironment.getUser({ key: config.adminUsername })
+    const user = usersEnvironment.getUser({ key: config.adminUsername })
     await api.token.setAccessAndRefreshToken(user)
   }
 }

tests/e2e-playwright/specs/user-settings/tiles.spec.ts

@@ -0,0 +1,75 @@
+import { test } from '@playwright/test'
+import { config } from './../../../e2e/config.js'
+import { ActorsEnvironment, UsersEnvironment } from '../../../e2e/support/environment'
+import { setAccessAndRefreshToken } from '../../helpers/setAccessAndRefreshToken'
+import * as api from '../../steps/api/api'
+import * as ui from '../../steps/ui/index'
+
+test.describe('tiles view', () => {
+  let actorsEnvironment: ActorsEnvironment
+  const usersEnvironment = new UsersEnvironment()
+
+  test.beforeEach(async ({ browser }) => {
+    actorsEnvironment = new ActorsEnvironment({
+      context: {
+        acceptDownloads: config.acceptDownloads,
+        reportDir: config.reportDir,
+        tracingReportDir: config.tracingReportDir,
+        reportHar: config.reportHar,
+        reportTracing: config.reportTracing,
+        reportVideo: config.reportVideo,
+        failOnUncaughtConsoleError: config.failOnUncaughtConsoleError
+      },
+      browser: browser
+    })
+
+    await setAccessAndRefreshToken(usersEnvironment)
+
+    // Given "Admin" creates following user using API
+    await api.userHasBeenCreated({ usersEnvironment, stepUser: 'Admin', userToBeCreated: 'Alice' })
+    // And "Alice" logs in
+    await ui.logInUser({ usersEnvironment, actorsEnvironment, stepUser: 'Alice' })
+    // And "Alice" creates the following resources
+    await api.userHasCreatedFolder({
+      usersEnvironment,
+      stepUser: 'Alice',
+      folderName: 'tile_folder'
+    })
+  })
+
+  test.afterEach(async () => {
+    await api.deleteUser({ usersEnvironment, stepUser: 'Admin', targetUser: 'Alice' })
+  })
+
+  test('Users can navigate web via tiles', async () => {
+    // When "Alice" switches to the tiles-view
+    await ui.switchToTilesViewMode({
+      actorsEnvironment,
+      stepUser: 'Alice'
+    })
+    // Then "Alice" sees the resources displayed as tiles
+    await ui.shouldSeeResourcesAsTiles({
+      actorsEnvironment,
+      stepUser: 'Alice'
+    })
+    // And "Alice" opens folder "tile_folder"
+    await ui.openFolder({
+      actorsEnvironment,
+      stepUser: 'Alice',
+      resource: 'tile_folder'
+    })
+    // And "Alice" creates the following resources
+    await ui.createDir({
+      actorsEnvironment,
+      stepUser: 'Alice',
+      resource: 'tile_folder/tile_folder2'
+    })
+    // And "Alice" sees the resources displayed as tiles
+    await ui.shouldSeeResourcesAsTiles({
+      actorsEnvironment,
+      stepUser: 'Alice'
+    })
+    // And "Alice" logs out
+    await ui.logOutUser({ actorsEnvironment, stepUser: 'Alice' })
+  })
+})

tests/e2e-playwright/steps/ui/resources.ts

@@ -1,5 +1,6 @@
 import { objects } from '../../../e2e/support'
 import { ActorsEnvironment, FilesEnvironment } from '../../../e2e/support/environment'
+import { createResourceTypes } from '../../../e2e/support/objects/app-files/resource/actions'
 
 export async function uploadResource({
   actorsEnvironment,
@@ -46,16 +47,60 @@ export async function isAbleToEditFileOrFolder({
 export async function createDir({
   actorsEnvironment,
   stepUser,
-  directoryName
+  resource,
+  content,
+  password
 }: {
   actorsEnvironment: ActorsEnvironment
   stepUser: string
-  directoryName: string
+  resource: string
+  content?: string
+  password?: string
 }): Promise<void> {
   const { page } = actorsEnvironment.getActor({ key: stepUser })
   const resourceObject = new objects.applicationFiles.Resource({ page })
   await resourceObject.create({
-    name: directoryName,
-    type: 'folder'
+    name: resource,
+    type: 'folder' as createResourceTypes,
+    content: content,
+    password: password
   })
 }
+
+export async function switchToTilesViewMode({
+  actorsEnvironment,
+  stepUser
+}: {
+  actorsEnvironment: ActorsEnvironment
+  stepUser: string
+}): Promise<void> {
+  const { page } = actorsEnvironment.getActor({ key: stepUser })
+  const resourceObject = new objects.applicationFiles.Resource({ page })
+  await resourceObject.switchToTilesViewMode()
+}
+
+export async function shouldSeeResourcesAsTiles({
+  actorsEnvironment,
+  stepUser
+}: {
+  actorsEnvironment: ActorsEnvironment
+  stepUser: string
+}): Promise<void> {
+  const { page } = actorsEnvironment.getActor({ key: stepUser })
+  const resourceObject = new objects.applicationFiles.Resource({ page })
+  await resourceObject.expectThatResourcesAreTiles()
+}
+
+export async function openFolder({
+  actorsEnvironment,
+  stepUser,
+  resource
+}: {
+  actorsEnvironment: ActorsEnvironment
+  stepUser: string
+  resource: string
+}): Promise<void> {
+  const { page } = actorsEnvironment.getActor({ key: stepUser })
+  const resourceObject = new objects.applicationFiles.Resource({ page })
+  await resourceObject.openFolder(resource)
+}

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

@@ -28,7 +28,12 @@ export const selectors = {
   appbarBatchActions: '#oc-appbar-batch-actions',
   filesSpaceTableCheckbox: '#files-space-table .oc-checkbox',
   uploadMenuDropdown: '#upload-menu-drop',
-  appSidebar: '#app-sidebar'
+  appSidebar: '#app-sidebar',
+  tippyBox: '.tippy-box',
+  textEditor: '#text-editor-component',
+  topBar: '#oc-topbar',
+  displayOptions: '#files-app-bar-controls-right',
+  ocCard: '.oc-card'
 }
 
 const a11yRuleTags = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice']

tests/e2e/support/objects/a11y/actions.ts

@@ -350,6 +350,14 @@ export const createPasswordProtectedFolder = async ({
   password: string
 }): Promise<void> => {
   password = substitute(password)
+  const a11yObject = new objects.a11y.Accessibility({ page })
+  const violations = await a11yObject.getSevereAccessibilityViolations(
+    a11yObject.getSelectors().ocModal
+  )
+  expect(
+    violations,
+    `Found ${violations.length} severe accessibility violations in create new folder modal`
+  ).toHaveLength(0)
   await page.locator(passwordProtectedFolderButton).click()
   await page.locator(passwordProtectedFolderNameInput).fill(resource)
   await page.locator(passwordProtectedFolderPasswordInput).fill(password)
@@ -379,6 +387,14 @@ export const createPasswordProtectedFolder = async ({
 export const createNewFileOrFolder = async (args: createResourceArgs): Promise<void> => {
   const { page, name, type, content, password } = args
   await page.locator(addNewResourceButton).click()
+  const a11yObject = new objects.a11y.Accessibility({ page })
+  const violations = await a11yObject.getSevereAccessibilityViolations(
+    a11yObject.getSelectors().tippyBox
+  )
+  expect(
+    violations,
+    `Found ${violations.length} severe accessibility violations in create new tippy box`
+  ).toHaveLength(0)
   switch (type) {
     case 'folder': {
       await createNewFolder({ page, resource: name })
@@ -440,6 +456,14 @@ const createDocumentFile = async (
       `The document of type ${type} did not appear in the webUI for ${editorToOpen}. Possible reason could be the app provider service for ${editorToOpen} was not ready yet.`
     )
   }
+  const a11yObject = new objects.a11y.Accessibility({ page })
+  const violations = await a11yObject.getSevereAccessibilityViolations(
+    a11yObject.getSelectors().ocModal
+  )
+  expect(
+    violations,
+    `Found ${violations.length} severe accessibility violations in create new folder modal`
+  ).toHaveLength(0)
   await page.locator(util.format(createNewOfficeDocumentFileButton, type)).click()
   await page.locator(resourceNameInput).clear()
   await page.locator(resourceNameInput).fill(name)
@@ -569,6 +593,19 @@ export const editTextDocument = async ({
   const inputLocator =
     isMarkdownMode === 'true' ? textEditorMarkdownInput : textEditorPlainTextInput
 
+  const a11yObject = new objects.a11y.Accessibility({ page })
+  let violations = await a11yObject.getSevereAccessibilityViolations(
+    a11yObject.getSelectors().textEditor
+  )
+  violations = [
+    ...violations,
+    ...(await a11yObject.getSevereAccessibilityViolations(a11yObject.getSelectors().topBar))
+  ]
+  expect(
+    violations,
+    `Found ${violations.length} severe accessibility violations in text editor`
+  ).toHaveLength(0)
+
   await page.locator(inputLocator).fill(content)
   await Promise.all([
     page.waitForResponse((resp) => resp.status() === 204 && resp.request().method() === 'PUT'),
@@ -1656,11 +1693,27 @@ export interface switchViewModeArgs {
 
 export const clickViewModeToggle = async (args: switchViewModeArgs): Promise<void> => {
   const { page, target } = args
+  const a11yObject = new objects.a11y.Accessibility({ page })
+  const a11yViolations = await a11yObject.getSevereAccessibilityViolations(
+    a11yObject.getSelectors().displayOptions
+  )
+  expect(
+    a11yViolations,
+    `Found ${a11yViolations.length} severe accessibility violations in file controls modal`
+  ).toHaveLength(0)
   await page.locator(`.viewmode-switch-buttons .${target}`).click()
 }
 
 export const expectThatResourcesAreTiles = async (args: { page: Page }): Promise<void> => {
   const { page } = args
+  const a11yObject = new objects.a11y.Accessibility({ page })
+  const a11yViolations = await a11yObject.getSevereAccessibilityViolations(
+    a11yObject.getSelectors().tilesView
+  )
+  expect(
+    a11yViolations,
+    `Found ${a11yViolations.length} severe accessibility violations in file tile view`
+  ).toHaveLength(0)
   const tiles = page.locator(resourcesAsTiles)
   await expect(tiles).toBeVisible()
 }