Added Checking styles in a Document (#6631)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>

plugins/controlled-documents-resources/src/components/document/right-panel/DocumentCommentThread.svelte

@@ -32,13 +32,13 @@
 {#if value !== undefined}
   <div class:highlighted class="root">
     <div class="header pt-2 pb-2 pl-4 pr-4 flex-between">
-      <div>
+      <span class="overflow-label">
         {#if value?.index}
-          <span>#{value.index}</span>
+          <span data-id="commentId">#{value.index}</span>
           <span>•</span>
         {/if}
         <Label label={resolved ? documents.string.Resolved : documents.string.Pending} />
-      </div>
+      </span>
       {#if $canAddDocumentCommentsFeedback}
         <div class="tools">
           <Button

qms-tests/sanity/tests/model/documents/document-comments-page.ts

@@ -76,15 +76,15 @@ export class DocumentCommentsPage extends DocumentCommonPage {
     reply: string
   ): Promise<void> {
     const comment = this.page
-      .locator('div.popup div.root div.header > div > span:first-child', { hasText: String(commentId) })
+      .locator('div.text-editor-popup span[data-id="commentId"]', { hasText: `#${String(commentId)}` })
       .locator('xpath=../../../..')
     // check header
-    await expect(comment.locator('div.root > div.header > div:first-child')).toContainText(header)
+    await expect(comment.locator('div.root > div.header > span.overflow-label')).toContainText(header)
     // can be resolved
     await comment.locator('div.header div.tools button').hover()
     await expect(comment.locator('div.header div.tools button')).toBeEnabled()
     // check author
-    await expect(comment.locator('div.root div.header > div.username span.ap-label').first()).toHaveText(author)
+    await expect(comment.locator('div.activityMessage div.header a span[class*="label"]').first()).toHaveText(author)
     // check message
     await expect(
       comment.locator('div.activityMessage div.flex-col div.clear-mins div.text-markup-view > p').first()
@@ -103,15 +103,15 @@ export class DocumentCommentsPage extends DocumentCommonPage {
     reply: string
   ): Promise<void> {
     const comment = this.page
-      .locator('div.box div.root div.header > div > span:first-child', { hasText: String(commentId) })
+      .locator('div[data-testid="comment"] span[data-id="commentId"]', { hasText: `#${String(commentId)}` })
       .locator('xpath=../../../..')
     // check header
-    await expect(comment.locator('div.root > div.header > div:first-child')).toContainText(header)
+    await expect(comment.locator('div.root > div.header > span.overflow-label')).toContainText(header)
     // can be resolved
-    await comment.locator('div.header > div > span:last-child').hover()
+    await comment.locator('div.root > div.header > span.overflow-label').first().hover()
     await expect(comment.locator('div.header div.tools button')).toBeEnabled()
     // check author
-    await expect(comment.locator('div.root div.header > div.username span.ap-label').first()).toHaveText(author)
+    await expect(comment.locator('div.activityMessage div.header a span[class*="label"]').first()).toHaveText(author)
     // check message
     await expect(
       comment.locator('div.activityMessage div.flex-col div.clear-mins div.text-markup-view > p').first()

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

@@ -36,7 +36,7 @@ test.describe('Content in the Documents tests', () => {
   let documentsSecondPage: DocumentsPage
   let documentContentSecondPage: DocumentContentPage
 
-  test.beforeEach(async ({ browser, page, request }) => {
+  test.beforeEach(async ({ page, request }) => {
     leftSideMenuPage = new LeftSideMenuPage(page)
     documentsPage = new DocumentsPage(page)
     documentContentPage = new DocumentContentPage(page)
@@ -116,8 +116,8 @@ test.describe('Content in the Documents tests', () => {
 
     await documentContentPage.inputContentParapraph().click()
     await documentContentPage.leftMenu().click()
-    await documentContentPage.menuPopupItemButton('Table').click()
+    await documentContentPage.clickPopupItem('Table')
-    await documentContentPage.menuPopupItemButton('1x2').first().click()
+    await documentContentPage.clickPopupItem('1x2')
     await documentContentPage.proseTableCell(0, 0).fill('One')
     await documentContentPage.proseTableCell(0, 1).fill('Two')
     await documentContentPage.buttonInsertColumn().click()
@@ -295,4 +295,64 @@ test.describe('Content in the Documents tests', () => {
       await documentContentPage.page.keyboard.press('Escape')
     })
   })
+
+  test('Checking styles in a Document', async ({ page, browser, request }) => {
+    const content: string = [...new Array(20).keys()].map((index) => `Line ${index + 1}`).join('\n')
+    const testLink: string = 'http://test/link/123456'
+    const testNote: string = 'Test Note'
+
+    await documentContentPage.addContentToTheNewLine(content, false)
+    await documentContentPage.applyToolbarCommand('Line 1', 'btnH1')
+    await documentContentPage.applyToolbarCommand('Line 2', 'btnH2')
+    await documentContentPage.applyToolbarCommand('Line 3', 'btnH3')
+    await documentContentPage.goToByTOC('Line 3')
+    await documentContentPage.goToByTOC('Line 1')
+
+    await documentContentPage.applyToolbarCommand('Line 4', 'btnBold')
+    await documentContentPage.applyToolbarCommand('Line 5', 'btnItalic')
+    await documentContentPage.applyToolbarCommand('Line 6', 'btnStrikethrough')
+    await documentContentPage.applyToolbarCommand('Line 7', 'btnUnderlined')
+
+    await documentContentPage.applyToolbarCommand('Line 8', 'btnLink')
+    await documentContentPage.inputFormLink().fill(testLink)
+    await documentContentPage.buttonFormLinkSave().click()
+
+    await documentContentPage.addSeparator('Line 9')
+    for (let i = 9; i <= 11; i++) {
+      await documentContentPage.applyToolbarCommand(`Line ${i}`, 'btnOrderedList')
+    }
+    await documentContentPage.addSeparator('Line 12')
+    for (let i = 12; i <= 14; i++) {
+      await documentContentPage.applyToolbarCommand(`Line ${i}`, 'btnBulletedList')
+    }
+    await documentContentPage.addSeparator('Line 15')
+    await documentContentPage.applyToolbarCommand('Line 15', 'btnH3')
+    await documentContentPage.goToByTOC('Line 15')
+
+    await documentContentPage.applyToolbarCommand('Line 16', 'btnBlockquote')
+    await documentContentPage.applyToolbarCommand('Line 17', 'btnCode')
+    await documentContentPage.applyToolbarCommand('Line 18', 'btnCodeBlock')
+    await documentContentPage.changeCodeBlockLanguage('Line 18', 'auto', 'css')
+    await documentContentPage.applyNote('Line 19', 'warning', testNote)
+    await documentContentPage.addImage('Line 20')
+    await page.keyboard.type('Cat')
+
+    newUser2 = generateUser()
+    await createAccount(request, newUser2)
+    const linkText = await getInviteLink(page)
+    using _secondPage = await getSecondPageByInvite(browser, linkText, newUser2)
+    secondPage = _secondPage.page
+    leftSideMenuSecondPage = new LeftSideMenuPage(secondPage)
+    documentsSecondPage = new DocumentsPage(secondPage)
+    documentContentSecondPage = new DocumentContentPage(secondPage)
+
+    await leftSideMenuSecondPage.clickDocuments()
+    await documentsSecondPage.openTeamspace(testDocument.space)
+    await documentsSecondPage.openDocument(testDocument.title)
+    await documentContentSecondPage.checkDocumentTitle(testDocument.title)
+    await documentContentSecondPage.checkLinkInTheText('Line 8', testLink)
+    await documentContentSecondPage.goToByTOC('Line 15')
+    await documentContentSecondPage.checkImage()
+    await documentContentSecondPage.checkNote('Line 19', 'warning', testNote)
+  })
 })

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

@@ -169,7 +169,7 @@ test.describe('Documents tests', () => {
     })
   })
 
-  test('Add Link to the Document', async () => {
+  test.skip('Add Link to the Document', async () => {
     const contentLink = 'Lineforthelink'
     const linkDocument: NewDocument = {
       title: `Links Document Title-${generateId()}`,

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

@@ -206,6 +206,10 @@ export class CommonPage {
     await expect(this.menuPopupItemButton(itemText)).toBeVisible()
   }
 
+  async clickPopupItem (itemText: string): Promise<void> {
+    await this.menuPopupItemButton(itemText).first().click()
+  }
+
   async selectFilter (filter: string, filterSecondLevel?: string): Promise<void> {
     await this.buttonFilter().click()
     await this.selectPopupMenu(filter).click()

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

@@ -1,6 +1,7 @@
 import { type Locator, type Page, expect } from '@playwright/test'
 import { CommonPage } from '../common-page'
 import { uploadFile } from '../../utils'
+import path from 'path'
 
 export class DocumentContentPage extends CommonPage {
   readonly page: Page
@@ -35,7 +36,9 @@ export class DocumentContentPage extends CommonPage {
   readonly buttonInsertInnerRow = (row: number = 0): Locator =>
     this.page.locator('table.proseTable').locator('tr').nth(row).locator('div.table-row-insert button')
 
-  readonly buttonToolbarLink = (): Locator => this.page.locator('div.text-editor-toolbar button[data-id="btnLink"]')
+  readonly buttonOnToolbar = (id: string): Locator =>
+    this.page.locator(`div.text-editor-toolbar button[data-id="${id}"]`)
+
   readonly inputFormLink = (): Locator => this.page.locator('form[id="text-editor:string:Link"] input')
   readonly buttonFormLinkSave = (): Locator =>
     this.page.locator('form[id="text-editor:string:Link"] button[type="submit"]')
@@ -61,6 +64,18 @@ export class DocumentContentPage extends CommonPage {
 
   readonly slashActionItemsPopup = (): Locator => this.page.locator('.selectPopup')
 
+  readonly codeBlock = (hasText: string): Locator => this.page.locator('pre.proseCodeBlock > code', { hasText })
+  readonly inputFormNote = (): Locator => this.page.locator('form[id="text-editor:string:ConfigureNote"] textarea')
+  readonly colorFormNote = (color: string): Locator =>
+    this.page.locator(`form[id="text-editor:string:ConfigureNote"] div.colorBox.${color}`)
+
+  readonly setFormNote = (): Locator =>
+    this.page.locator('form[id="text-editor:string:ConfigureNote"] div.antiCard-footer button[type="submit"]')
+
+  readonly inputImageFile = (): Locator => this.page.locator('input[id="imageInput"]')
+  readonly imageInContent = (): Locator => this.page.locator('p img[data-type="image"]')
+  readonly noteInContent = (hasText: string): Locator => this.page.locator('p span[data-mark="note"]', { hasText })
+
   async checkDocumentTitle (title: string): Promise<void> {
     await expect(this.buttonDocumentTitle()).toHaveValue(title)
   }
@@ -69,10 +84,10 @@ export class DocumentContentPage extends CommonPage {
     await expect(this.buttonLockedInTitle()).toBeVisible({ timeout: 1000 })
   }
 
-  async addContentToTheNewLine (newContent: string): Promise<string> {
+  async addContentToTheNewLine (newContent: string, newLine: boolean = true): Promise<string> {
     await expect(this.inputContent()).toBeVisible()
     await expect(this.inputContent()).toHaveJSProperty('contentEditable', 'true')
-    await this.inputContent().pressSequentially(`\n${newContent}`)
+    await this.inputContent().pressSequentially(`${newLine ? '\n' : ''}${newContent}`)
     const endContent = await this.inputContent().textContent()
     return endContent ?? ''
   }
@@ -202,14 +217,70 @@ export class DocumentContentPage extends CommonPage {
 
   async addLinkToText (text: string, link: string): Promise<void> {
     await expect(this.page.locator('p', { hasText: text })).toBeVisible()
-    await this.page.locator('p', { hasText: text }).click()
+    await this.page.locator('p', { hasText: text }).click({ clickCount: 3 })
-    await this.page.locator('p', { hasText: text }).dblclick()
+    await this.buttonOnToolbar('btnLink').click()
-    await this.buttonToolbarLink().click()
 
     await this.inputFormLink().fill(link)
     await this.buttonFormLinkSave().click()
   }
 
+  async clickButtonOnTooltip (id: string): Promise<void> {
+    await this.buttonOnToolbar(id).click()
+  }
+
+  async selectLine (text: string): Promise<void> {
+    const loc: Locator = this.page.locator('p', { hasText: text }).first()
+    await expect(loc).toBeVisible()
+    await loc.click({ clickCount: 3 })
+  }
+
+  async applyToolbarCommand (text: string, btnId: string): Promise<void> {
+    await this.selectLine(text)
+    await this.clickButtonOnTooltip(btnId)
+  }
+
+  async addSeparator (text: string): Promise<void> {
+    await this.selectLine(text)
+    await this.clickLeftMenu()
+    await this.clickPopupItem('Separator line')
+  }
+
+  async goToByTOC (text: string): Promise<void> {
+    await this.tocItems().first().click()
+    await this.clickPopupItem(text)
+  }
+
+  async clickLeftMenu (): Promise<void> {
+    await this.leftMenu().click()
+  }
+
+  async changeCodeBlockLanguage (text: string, oldLang: string, lang: string): Promise<void> {
+    await this.codeBlock(text).locator('button.antiButton', { hasText: oldLang }).nth(1).click()
+    await this.selectMenuItem(this.page, lang, true)
+  }
+
+  async applyNote (text: string, color: string, note: string): Promise<void> {
+    await this.applyToolbarCommand(text, 'btnNote')
+    await this.inputFormNote().fill(note)
+    await this.colorFormNote(color).click()
+    await this.setFormNote().click()
+  }
+
+  async checkNote (text: string, color: string, note: string): Promise<void> {
+    await expect(this.noteInContent(text)).toBeVisible()
+    await expect(this.noteInContent(text)).toHaveAttribute('data-kind', color)
+    await expect(this.noteInContent(text)).toHaveAttribute('title', note)
+  }
+
+  async addImage (text: string): Promise<void> {
+    await this.selectLine(text)
+    await this.inputImageFile().setInputFiles(path.join(__dirname, '../../files/cat.jpeg'))
+  }
+
+  async checkImage (width: number = 215): Promise<void> {
+    await expect(this.imageInContent()).toHaveAttribute('width', width.toString())
+  }
+
   async checkLinkInTheText (text: string, link: string): Promise<void> {
     await expect(this.page.locator('a', { hasText: text })).toHaveAttribute('href', link)
   }

tests/sanity/tests/model/recruiting/talent-details-page.ts

@@ -59,6 +59,10 @@ export class TalentDetailsPage extends CommonRecruitingPage {
     await this.buttonFinalContact().click()
     await this.selectMenuItem(this.page, talentName.finalContactName)
 
+    await expect(
+      this.buttonMergeRow().locator('div.flex-center', { hasText: talentName.name }).locator('label.checkbox-container')
+    ).toBeVisible()
+
     await this.buttonMergeRow()
       .locator('div.flex-center', { hasText: talentName.name })
       .locator('label.checkbox-container')