test: convert tiles.feature test to playwright

Author: nirajacharya2

.drone.star

@@ -579,6 +579,7 @@ def e2eTestsOnPlaywright(ctx):
         "BASE_URL_OCIS": "ocis:9200",
         "PLAYWRIGHT_BROWSERS_PATH": ".playwright",
         "TESTS_RUNNER": "playwright",
+        "SKIP_A11Y_TESTS": True,
     }
 
     steps += restoreBuildArtifactCache(ctx, "pnpm", ".pnpm-store") + \
@@ -695,7 +696,7 @@ def e2eTests(ctx):
             "PLAYWRIGHT_BROWSERS_PATH": ".playwright",
             "BROWSER": "chromium",
             "FEDERATED_BASE_URL_OCIS": "federation-ocis:9200",
-            "SKIP_A11Y_TESTS": params["skipA11y"],
+            "SKIP_A11Y_TESTS": True,
         }
 
         if "suites" in matrix:
@@ -1937,6 +1938,7 @@ def e2eTestsOnKeycloak(ctx):
                          "KEYCLOAK_HOST": "keycloak:8443",
                          "PLAYWRIGHT_BROWSERS_PATH": ".playwright",
                          "BROWSER": "chromium",
+                         "SKIP_A11Y_TESTS": True,
                      },
                      "commands": [
                          "cd tests/e2e",

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('user-settings', () => {
+  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.expectThatResourcesAreTiles({
+      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.createFolder({
+      actorsEnvironment,
+      stepUser: 'Alice',
+      resource: 'tile_folder/tile_folder2'
+    })
+    // And "Alice" sees the resources displayed as tiles
+    await ui.expectThatResourcesAreTiles({
+      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,
@@ -59,3 +60,64 @@ export async function createDir({
     type: 'folder'
   })
 }
+
+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 expectThatResourcesAreTiles({
+  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)
+}
+
+export async function createFolder({
+  actorsEnvironment,
+  stepUser,
+  resource,
+  content,
+  password
+}: {
+  actorsEnvironment: ActorsEnvironment
+  stepUser: 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: resource,
+    type: 'folder' as createResourceTypes,
+    content: content,
+    password: password
+  })
+}

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

@@ -3,7 +3,6 @@ import { File } from '../../../types'
 import util from 'util'
 import path from 'path'
 import * as po from '../resource/actions'
-import { objects } from '../../..'
 
 const passwordInput = 'input[type="password"]'
 const fileUploadInput = '//input[@id="files-file-upload-input"]'
@@ -21,8 +20,6 @@ export class Public {
 
   async open({ url }: { url: string }): Promise<void> {
     await this.#page.goto(url)
-    const a11yObject = new objects.a11y.Accessibility({ page: this.#page })
-    await a11yObject.getSevereAccessibilityViolations('body')
   }
 
   async authenticate({

tests/e2e/support/objects/app-files/page/public.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 create new folder modal`
+  ).toHaveLength(0)
+
   await page.locator(inputLocator).fill(content)
   await Promise.all([
     page.waitForResponse((resp) => resp.status() === 204 && resp.request().method() === 'PUT'),
@@ -1656,11 +1693,21 @@ 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).toMatchObject([])
   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).toMatchObject([])
   const tiles = page.locator(resourcesAsTiles)
   await expect(tiles).toBeVisible()
 }

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

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