TESTS-50: feat(tests): done Edit a component test

tests/sanity/tests/model/tracker/component-details-page.ts

@@ -0,0 +1,41 @@
+import { expect, type Locator, type Page } from '@playwright/test'
+import { NewComponent } from './types'
+import { CommonTrackerPage } from './common-tracker-page'
+
+export class ComponentsDetailsPage extends CommonTrackerPage {
+  readonly page: Page
+  readonly inputComponentName: Locator
+  readonly inputComponentDescription: Locator
+  readonly buttonLead: Locator
+
+  constructor (page: Page) {
+    super(page)
+    this.page = page
+    this.inputComponentName = page.locator('div.antiEditBox input')
+    this.inputComponentDescription = page.locator('div.textInput div.tiptap')
+    this.buttonLead = page.locator('//span[text()="Lead"]/following-sibling::div[1]/div/button')
+  }
+
+  async editComponent (data: NewComponent): Promise<void> {
+    if (data.name != null) {
+      await this.inputComponentName.fill(data.name)
+    }
+    if (data.description != null) {
+      await this.inputComponentDescription.fill(data.description)
+    }
+    if (data.lead != null) {
+      await this.buttonLead.click()
+      await this.selectMenuItem(this.page, data.lead)
+    }
+  }
+
+  async checkComponent (data: NewComponent): Promise<void> {
+    await expect(this.inputComponentName).toHaveValue(data.name)
+    if (data.description != null) {
+      await expect(this.inputComponentDescription).toHaveText(data.description)
+    }
+    if (data.lead != null) {
+      await expect(this.buttonLead).toHaveText(data.lead)
+    }
+  }
+}

tests/sanity/tests/model/tracker/components-page.ts

@@ -0,0 +1,43 @@
+import { type Locator, type Page } from '@playwright/test'
+import { NewComponent } from './types'
+import { CommonTrackerPage } from './common-tracker-page'
+
+export class ComponentsPage extends CommonTrackerPage {
+  readonly page: Page
+  readonly buttonNewComponent: Locator
+  readonly inputNewComponentModalComponentName: Locator
+  readonly inputNewComponentModalComponentDescription: Locator
+  readonly buttonNewComponentModalComponentLead: Locator
+  readonly buttonNewComponentModalComponentCreate: Locator
+
+  constructor (page: Page) {
+    super(page)
+    this.page = page
+    this.buttonNewComponent = page.locator('button[type="submit"] span', { hasText: 'Component' })
+    this.inputNewComponentModalComponentName = page.locator('form[id="tracker:string:NewComponent"] input')
+    this.inputNewComponentModalComponentDescription = page.locator('form[id="tracker:string:NewComponent"] div.tiptap')
+    this.buttonNewComponentModalComponentLead = page.locator(
+      'form[id="tracker:string:NewComponent"] div.antiCard-pool button[type="button"]'
+    )
+    this.buttonNewComponentModalComponentCreate = page.locator(
+      'form[id="tracker:string:NewComponent"] button[type="submit"]'
+    )
+  }
+
+  async createNewComponent (data: NewComponent): Promise<void> {
+    await this.buttonNewComponent.click()
+    await this.inputNewComponentModalComponentName.fill(data.name)
+    if (data.description != null) {
+      await this.inputNewComponentModalComponentDescription.fill(data.description)
+    }
+    if (data.lead != null) {
+      await this.buttonNewComponentModalComponentLead.click()
+      await this.selectMenuItem(this.page, data.lead)
+    }
+    await this.buttonNewComponentModalComponentCreate.click()
+  }
+
+  async openComponentByName (componentName: string): Promise<void> {
+    await this.page.locator('div.row a', { hasText: componentName }).click()
+  }
+}

tests/sanity/tests/model/tracker/tracker-navigation-menu-page.ts

@@ -57,9 +57,17 @@ export class TrackerNavigationMenuPage extends CommonPage {
 
   async openMilestonesForProject (projectName: string): Promise<void> {
     await this.page
-      .locator('div[class*="antiNav-element"] a[href$="milestones"][href*="Default"]> div > span', {
+      .locator(`div[class*="antiNav-element"] a[href$="milestones"][href*="${projectName}"]> div > span`, {
         hasText: 'Milestones'
       })
       .click()
   }
+
+  async openComponentsForProject (projectName: string): Promise<void> {
+    await this.page
+      .locator(`div[class*="antiNav-element"] a[href$="components"][href*="${projectName}"]> div > span`, {
+        hasText: 'Components'
+      })
+      .click()
+  }
 }

tests/sanity/tests/model/tracker/types.ts

@@ -40,3 +40,9 @@ export interface NewMilestone {
   }
   targetDateInDays?: string
 }
+
+export interface NewComponent {
+  name: string
+  description?: string
+  lead?: string
+}

tests/sanity/tests/tracker/component.spec.ts

@@ -2,6 +2,11 @@ import { expect, test } from '@playwright/test'
 import { navigate } from './tracker.utils'
 import { generateId, PlatformSetting, PlatformURI, fillSearch } from '../utils'
 import { allure } from 'allure-playwright'
+import { LeftSideMenuPage } from '../model/left-side-menu-page'
+import { TrackerNavigationMenuPage } from '../model/tracker/tracker-navigation-menu-page'
+import { ComponentsPage } from '../model/tracker/components-page'
+import { NewComponent } from '../model/tracker/types'
+import { ComponentsDetailsPage } from '../model/tracker/component-details-page'
 
 test.use({
   storageState: PlatformSetting
@@ -38,4 +43,36 @@ test.describe('Tracker component tests', () => {
     await page.click('form button:has-text("Create issue")')
     await page.waitForSelector('form.antiCard', { state: 'detached' })
   })
+
+  test('Edit a component', async ({ page }) => {
+    const newComponent: NewComponent = {
+      name: `Edit component test create-${generateId()}`,
+      description: 'Edit component test description create',
+      lead: 'Dirak Kainin'
+    }
+    const editComponent: NewComponent = {
+      name: `Edit component test update-${generateId()}`,
+      description: 'Edit component test description update',
+      lead: 'Appleseed John'
+    }
+
+    const leftSideMenuPage = new LeftSideMenuPage(page)
+    await leftSideMenuPage.buttonTracker.click()
+
+    const trackerNavigationMenuPage = new TrackerNavigationMenuPage(page)
+    await trackerNavigationMenuPage.openComponentsForProject('Default')
+
+    const componentsPage = new ComponentsPage(page)
+    await componentsPage.createNewComponent(newComponent)
+    await componentsPage.openComponentByName(newComponent.name)
+
+    const componentsDetailsPage = new ComponentsDetailsPage(page)
+    await componentsDetailsPage.checkComponent(newComponent)
+
+    await componentsDetailsPage.editComponent(editComponent)
+    await trackerNavigationMenuPage.openComponentsForProject('Default')
+
+    await componentsPage.openComponentByName(editComponent.name)
+    await componentsDetailsPage.checkComponent(editComponent)
+  })
 })