UBERF-6593: Add document content tests (#6594)

tests/sanity/tests/documents/documents-content.spec.ts

@@ -17,6 +17,7 @@ import { PlanningNavigationMenuPage } from '../model/planning/planning-navigatio
 import { PlanningPage } from '../model/planning/planning-page'
 import { SignUpData } from '../model/common-types'
 import { TestData } from '../chat/types'
+import { faker } from '@faker-js/faker'
 
 const retryOptions = { intervals: [1000, 1500, 2500], timeout: 60000 }
 
@@ -148,4 +149,150 @@ test.describe('Content in the Documents tests', () => {
     await documentContentSecondPage.proseTableCell(1, 1).fill('Center')
     await expect(documentContentPage.proseTableCell(1, 1)).toContainText('Center', { timeout: 5000 })
   })
+
+  test.describe('Image in the document', () => {
+    test('Check Image alignment setting', async ({ page }) => {
+      await documentContentPage.addImageToDocument(page)
+
+      await test.step('Align image to right', async () => {
+        await documentContentPage.clickImageAlignButton('right')
+        await documentContentPage.checkImageAlign('right')
+      })
+
+      await test.step('Align image to left', async () => {
+        await documentContentPage.clickImageAlignButton('left')
+        await documentContentPage.checkImageAlign('left')
+      })
+
+      await test.step('Align image to center', async () => {
+        await documentContentPage.clickImageAlignButton('center')
+        await documentContentPage.checkImageAlign('center')
+      })
+    })
+
+    test('Check Image view and size actions', async ({ page }) => {
+      await documentContentPage.addImageToDocument(page)
+      const imageSrc = await documentContentPage.firstImageInDocument().getAttribute('src')
+
+      await test.step('Set size of image to the 25%', async () => {
+        await documentContentPage.clickImageSizeButton('25%')
+        await documentContentPage.checkImageSize('25%')
+      })
+
+      await test.step('Set size of image to the 50%', async () => {
+        await documentContentPage.clickImageSizeButton('50%')
+        await documentContentPage.checkImageSize('50%')
+      })
+
+      await test.step('Set size of image to the 100%', async () => {
+        await documentContentPage.clickImageSizeButton('100%')
+        await documentContentPage.checkImageSize('100%')
+      })
+
+      await test.step('Set size of image to the unset', async () => {
+        const IMAGE_ORIGINAL_SIZE = 199
+        await documentContentPage.clickImageSizeButton('Unset')
+        await documentContentPage.checkImageSize(IMAGE_ORIGINAL_SIZE)
+      })
+
+      await test.step('User can open image in fullscreen on current page', async () => {
+        await documentContentPage.clickImageFullscreenButton()
+        await expect(documentContentPage.fullscreenImage()).toBeVisible()
+        await documentContentPage.page.keyboard.press('Escape')
+        await expect(documentContentPage.fullscreenImage()).toBeHidden()
+      })
+
+      await test.step('User can open image original in the new tab', async () => {
+        const [newPage] = await Promise.all([
+          page.waitForEvent('popup'),
+          documentContentPage.clickImageOriginalButton()
+        ])
+
+        await newPage.waitForLoadState('domcontentloaded')
+        expect(newPage.url()).toBe(imageSrc)
+        await newPage.close()
+      })
+    })
+
+    test('Remove image with Backspace', async ({ page }) => {
+      await documentContentPage.addImageToDocument(page)
+      await documentContentPage.selectedFirstImageInDocument()
+      await documentContentPage.page.keyboard.press('Backspace')
+      await expect(documentContentPage.firstImageInDocument()).toBeHidden()
+    })
+
+    test('Check Table of Content', async ({ page }) => {
+      const HEADER_1_CONTENT = 'Header 1'
+      const HEADER_2_CONTENT = 'Header 2'
+      const HEADER_3_CONTENT = 'Header 3'
+      const contentParts = [
+        `# ${HEADER_1_CONTENT}\n\n${faker.lorem.paragraph(20)}\n`,
+        `## ${HEADER_2_CONTENT}\n\n${faker.lorem.paragraph(20)}\n`,
+        `### ${HEADER_3_CONTENT}\n\n${faker.lorem.paragraph(20)}`
+      ]
+
+      await test.step('Fill in the document and check the appearance of the ToC items', async () => {
+        await documentContentPage.inputContentParapraph().click()
+
+        let partIndex = 0
+        for (const contentPart of contentParts) {
+          await documentContentPage.page.keyboard.type(contentPart)
+          await expect(documentContentPage.tocItems()).toHaveCount(++partIndex)
+        }
+      })
+
+      await test.step('Check if ToC element is visible', async () => {
+        await expect(documentContentPage.page.locator('.toc-container .toc-item')).toHaveCount(3)
+      })
+
+      await test.step('User go to first header by ToC', async () => {
+        await documentContentPage.tocItems().first().click()
+        await documentContentPage.buttonTocPopupHeader(HEADER_1_CONTENT).click()
+        await expect(documentContentPage.headerElementInDocument('h1', HEADER_1_CONTENT)).toBeInViewport()
+      })
+
+      await test.step('User go to last header by ToC', async () => {
+        await documentContentPage.tocItems().first().click()
+        await documentContentPage.buttonTocPopupHeader(HEADER_3_CONTENT).click()
+        await expect(documentContentPage.headerElementInDocument('h3', HEADER_3_CONTENT)).toBeInViewport()
+      })
+    })
+  })
+
+  test('Check a slash typing handling', async ({ page }) => {
+    await test.step('User can open the popup if types "/" in empty document', async () => {
+      await documentContentPage.inputContentParapraph().click()
+      await documentContentPage.page.keyboard.type('/')
+      await expect(documentContentPage.slashActionItemsPopup()).toBeVisible()
+      await documentContentPage.page.keyboard.press('Escape')
+    })
+
+    await test.step('User can open the popup if types "/" after some content', async () => {
+      await documentContentPage.inputContentParapraph().click()
+      await documentContentPage.page.keyboard.type('First paragraph\n\n')
+      await documentContentPage.page.keyboard.type('/')
+      await expect(documentContentPage.slashActionItemsPopup()).toBeVisible()
+      await documentContentPage.page.keyboard.press('Escape')
+    })
+
+    await test.step('User cannot open a popup if he types "/" inside code block', async () => {
+      await documentContentPage.page.keyboard.press('Enter')
+      await documentContentPage.page.keyboard.type('/')
+      await documentContentPage.menuPopupItemButton('Code block').click()
+      await documentContentPage.page.keyboard.type('/')
+      await expect(documentContentPage.slashActionItemsPopup()).toBeHidden()
+      await documentContentPage.page.keyboard.press('ArrowDown')
+      await documentContentPage.page.keyboard.press('ArrowDown')
+    })
+
+    await test.step('User can create table by slash and open a popup if he types "/" inside a table', async () => {
+      await documentContentPage.page.keyboard.type('/')
+      await documentContentPage.menuPopupItemButton('Table').click()
+      await documentContentPage.menuPopupItemButton('1x2').first().click()
+      await documentContentPage.proseTableCell(0, 1).click()
+      await documentContentPage.page.keyboard.type('/')
+      await expect(documentContentPage.slashActionItemsPopup()).toBeVisible()
+      await documentContentPage.page.keyboard.press('Escape')
+    })
+  })
 })

tests/sanity/tests/documents/documents.spec.ts

@@ -87,6 +87,43 @@ test.describe('Documents tests', () => {
     await documentContentPage.checkDocumentTitle(moveDocument.title)
   })
 
+  test('Create a document inside another document', async () => {
+    const contentFirst = 'Text first line'
+    const parentTeamspace: NewTeamspace = {
+      title: `Parent Teamspace-${generateId()}`,
+      description: 'Parent Teamspace description',
+      private: false
+    }
+    const parentDocument: NewDocument = {
+      title: `Parent Document Title-${generateId()}`,
+      space: parentTeamspace.title
+    }
+    const childDocument: NewDocument = {
+      title: `Child Document Title-${generateId()}`,
+      space: parentTeamspace.title
+    }
+
+    await test.step('Create a parent document by button "+" in left menu documents list', async () => {
+      await leftSideMenuPage.clickDocuments()
+      await documentsPage.checkTeamspaceNotExist(parentTeamspace.title)
+      await documentsPage.createNewTeamspace(parentTeamspace)
+      await documentsPage.checkTeamspaceExist(parentTeamspace.title)
+      await documentsPage.clickOnButtonCreateDocument()
+      await documentsPage.createDocument(parentDocument)
+    })
+
+    await test.step('Create a child document', async () => {
+      await documentsPage.clickAddDocumentIntoDocument(parentDocument.title)
+      await documentContentPage.updateDocumentTitle(childDocument.title)
+      const content = await documentContentPage.addContentToTheNewLine(contentFirst)
+      await documentContentPage.checkContent(content)
+    })
+
+    await test.step('Check nesting of documents', async () => {
+      await documentsPage.checkIfParentDocumentIsExistInBreadcrumbs(parentDocument.title)
+    })
+  })
+
   test('Collaborative edit document content', async ({ page, browser }) => {
     let content = ''
     const contentFirstUser = 'First first!!! This string comes from the first user'

tests/sanity/tests/model/documents/document-content-page.ts

@@ -1,5 +1,6 @@
 import { type Locator, type Page, expect } from '@playwright/test'
 import { CommonPage } from '../common-page'
+import { uploadFile } from '../../utils'
 
 export class DocumentContentPage extends CommonPage {
   readonly page: Page
@@ -11,11 +12,17 @@ export class DocumentContentPage extends CommonPage {
 
   readonly buttonDocumentTitle = (): Locator => this.page.locator('div[class*="main-content"] div.title input')
   readonly inputContent = (): Locator => this.page.locator('div.textInput div.tiptap')
+  readonly selectContent = (): Locator => this.page.locator('div.textInput .select-text')
   readonly inputContentParapraph = (): Locator => this.page.locator('div.textInput div.tiptap > p')
   readonly leftMenu = (): Locator => this.page.locator('div.tiptap-left-menu')
   readonly proseTableCell = (row: number, col: number): Locator =>
     this.page.locator('table.proseTable').locator('tr').nth(row).locator('td').nth(col).locator('p')
 
+  readonly firstImageInDocument = (): Locator => this.page.locator('.textInput .text-editor-image-container img')
+  readonly tooltipImageTools = (): Locator => this.page.locator('.tippy-box')
+
+  readonly fullscreenImage = (): Locator => this.page.locator('.popup.fullsize img')
+
   readonly proseTableColumnHandle = (col: number): Locator =>
     this.page.locator('table.proseTable').locator('tr').first().locator('td').nth(col).locator('div.table-col-handle')
 
@@ -45,6 +52,15 @@ export class DocumentContentPage extends CommonPage {
   readonly assigneeToDo = (hasText: string): Locator => this.rowToDo(hasText).locator('div.assignee')
   readonly checkboxToDo = (hasText: string): Locator => this.rowToDo(hasText).locator('input.chBox')
 
+  readonly tocItems = (): Locator => this.page.locator('.toc-container .toc-item')
+  readonly buttonTocPopupHeader = (headerText: string): Locator =>
+    this.page.locator(`.popup button:has-text("${headerText}")`)
+
+  readonly headerElementInDocument = (headerType: 'h1' | 'h2' | 'h3' = 'h1', text: string): Locator =>
+    this.page.locator(`.textInput ${headerType}:has-text("${text}")`)
+
+  readonly slashActionItemsPopup = (): Locator => this.page.locator('.selectPopup')
+
   async checkDocumentTitle (title: string): Promise<void> {
     await expect(this.buttonDocumentTitle()).toHaveValue(title)
   }
@@ -65,6 +81,113 @@ export class DocumentContentPage extends CommonPage {
     await expect(this.inputContent()).toHaveText(content)
   }
 
+  async checkUserAddedImage (): Promise<void> {
+    await expect(this.firstImageInDocument()).toBeVisible()
+  }
+
+  async checkIfImageToolsIsVisible (): Promise<void> {
+    await expect(this.tooltipImageTools()).toBeVisible()
+  }
+
+  async clickImageToolsButton (dataId: string): Promise<void> {
+    await this.tooltipImageTools().locator(`[data-id$="${dataId}"]`).click()
+  }
+
+  async selectedFirstImageInDocument (): Promise<void> {
+    await this.firstImageInDocument().click()
+  }
+
+  async checkIfImageHasAttribute (attribute: string, value: string): Promise<void> {
+    await expect(this.firstImageInDocument()).toHaveAttribute(attribute, value)
+  }
+
+  async clickImageAlignButton (align: 'left' | 'center' | 'right'): Promise<void> {
+    await this.selectedFirstImageInDocument()
+    await this.checkIfImageToolsIsVisible()
+
+    switch (align) {
+      case 'left':
+        await this.clickImageToolsButton('btnAlignLeft')
+        break
+      case 'right':
+        await this.clickImageToolsButton('btnAlignRight')
+        break
+      case 'center':
+        await this.clickImageToolsButton('btnAlignCenter')
+        break
+    }
+  }
+
+  async clickImageSizeButton (size: string | number): Promise<void> {
+    await this.selectedFirstImageInDocument()
+    await this.checkIfImageToolsIsVisible()
+    await this.clickImageToolsButton('btnMoreActions')
+    await this.page.locator(`.popup button:has-text("${size}")`).click()
+  }
+
+  async clickImageFullscreenButton (): Promise<void> {
+    await this.selectedFirstImageInDocument()
+    await this.checkIfImageToolsIsVisible()
+    await this.clickImageToolsButton('btnViewImage')
+  }
+
+  async clickImageOriginalButton (): Promise<void> {
+    await this.selectedFirstImageInDocument()
+    await this.checkIfImageToolsIsVisible()
+    await this.clickImageToolsButton('btnViewOriginal')
+  }
+
+  async checkImageAlign (side: 'left' | 'right' | 'center' = 'left'): Promise<void> {
+    const imageBox = await this.firstImageInDocument().boundingBox()
+    const parentBox = await this.selectContent().boundingBox()
+
+    if (!(imageBox !== null && parentBox !== null)) {
+      throw new Error('Image or parent box is not found')
+    }
+
+    const elementLeftEdge = imageBox.x
+    const parentLeftEdge = parentBox.x
+    const elementRightEdge = imageBox.x + imageBox.width
+    const parentRightEdge = parentBox.x + parentBox.width
+
+    switch (side) {
+      case 'right':
+        expect(elementRightEdge).toEqual(parentRightEdge)
+        break
+      case 'left':
+        expect(elementLeftEdge).toEqual(parentLeftEdge)
+        break
+      case 'center':
+        expect(elementLeftEdge - parentLeftEdge).toBeGreaterThan(0)
+        expect(elementLeftEdge - parentLeftEdge).toEqual(parentRightEdge - elementRightEdge)
+        break
+    }
+  }
+
+  async checkImageSize (size: '25%' | '50%' | '100%' | number): Promise<void> {
+    const imageBox = await this.firstImageInDocument().boundingBox()
+    const parentBox = await this.selectContent().boundingBox()
+
+    if (!(imageBox !== null && parentBox !== null)) {
+      throw new Error('Image or parent box is not found')
+    }
+
+    switch (size) {
+      case '25%':
+        expect(imageBox.width).toEqual(parentBox.width / 4)
+        break
+      case '50%':
+        expect(imageBox.width).toEqual(parentBox.width / 2)
+        break
+      case '100%':
+        expect(imageBox.width).toEqual(parentBox.width)
+        break
+      default:
+        expect(imageBox.width).toEqual(size)
+        break
+    }
+  }
+
   async updateDocumentTitle (title: string): Promise<void> {
     await this.buttonDocumentTitle().fill(title)
     await this.buttonDocumentTitle().blur()
@@ -110,4 +233,11 @@ export class DocumentContentPage extends CommonPage {
     await this.rowToDo(text).hover()
     await expect(this.checkboxToDo(text)).toBeChecked({ checked, timeout: 5000 })
   }
+
+  async addImageToDocument (page: Page): Promise<void> {
+    await this.inputContentParapraph().click()
+    await this.leftMenu().click()
+    await uploadFile(page, 'cat3.jpeg', 'Image')
+    await this.checkUserAddedImage()
+  }
 }

tests/sanity/tests/model/documents/documents-page.ts

@@ -20,8 +20,16 @@ export class DocumentsPage extends CommonPage {
   readonly buttonCreateDocument = (): Locator =>
     this.page.locator('div[data-float="navigator"] button[id="new-document"]')
 
-  readonly buttonDocument = (name: string): Locator =>
-    this.page.locator('button.hulyNavItem-container > span[class*="label"]', { hasText: name })
+  readonly buttonDocumentWrapper = (name: string): Locator =>
+    this.page.locator(`button.hulyNavItem-container:has-text("${name}")`)
+
+  readonly buttonDocument = (name: string): Locator => this.buttonDocumentWrapper(name).locator('span[class*="label"]')
+
+  readonly buttonAddDocumentToDocument = (name: string): Locator =>
+    this.buttonDocumentWrapper(name).getByTestId('document:string:CreateDocument')
+
+  readonly breadcrumbsByDocumentParent = (parentDocumentTitle: string): Locator =>
+    this.page.locator(`.hulyHeader-titleGroup:has-text("${parentDocumentTitle}")`)
 
   readonly buttonDocumentsApp = (): Locator => this.page.locator('button[id$="document:string:DocumentApplication"]')
   readonly divTeamspacesParent = (): Locator =>
@@ -123,6 +131,11 @@ export class DocumentsPage extends CommonPage {
     await this.selectFromDropdown(this.page, popupItem)
   }
 
+  async clickAddDocumentIntoDocument (documentTitle: string): Promise<void> {
+    await this.buttonDocumentWrapper(documentTitle).hover()
+    await this.buttonAddDocumentToDocument(documentTitle).click()
+  }
+
   async openDocumentForTeamspace (spaceName: string, documentName: string): Promise<void> {
     await this.page
       .locator('button.hulyNavGroup-header span[class*="label"]', { hasText: spaceName })
@@ -176,4 +189,8 @@ export class DocumentsPage extends CommonPage {
     await expect(this.rowTeamspace(name)).toBeVisible()
     await this.buttonJoinTeamspace(name).click()
   }
+
+  async checkIfParentDocumentIsExistInBreadcrumbs (parentDocumentTitle: string): Promise<void> {
+    await expect(this.breadcrumbsByDocumentParent(parentDocumentTitle)).toBeVisible()
+  }
 }

tests/sanity/tests/playwright.config.ts

@@ -12,6 +12,7 @@ const config: PlaywrightTestConfig = {
     {
       name: 'Platform',
       use: {
+        testIdAttribute: 'data-id',
         permissions: ['clipboard-read', 'clipboard-write'],
         ...devices['Desktop Chrome'],
         screenshot: 'only-on-failure',