feat: tests adaptation for new menus and pop-up for export (#39)

* feat(export): update page object model

- ExportSettingsDialog
- OverviewGroupRow
- DocumentsPackageTab
- DocumentPreviewPage

* test(export): update export tests according to the new page object model

* test(export): extract export tests into one file

* test(export): use package ID and version instead of dashboard for documents export from dashboard

* test(export): rename tests

Author: vOrigins

src/packages/portal/pages/PortalPage/BaseVersionPage.ts

@@ -1,7 +1,5 @@
-import { test as report, type Page } from '@playwright/test'
+import { type Page } from '@playwright/test'
 import { Button, Link } from '@shared/components/base'
-import type { DownloadedTestFile } from '@shared/entities'
-import { DOWNLOAD_EXPECT } from '@test-setup'
 import { CompareSelectDialog } from './BaseVersionPage/CompareSelectDialog'
 import { ConfigureVersionTab } from './BaseVersionPage/ConfigureVersionTab'
 import { CopyVersionDialog } from './BaseVersionPage/CopyVersionDialog'
@@ -14,7 +12,7 @@ import { DocumentPreviewPage } from './VersionPage/DocumentPreviewPage'
 import { VersionOverviewTab } from './VersionPage/VersionOverviewTab'
 import { VersionPageSidebar } from './VersionPage/VersionPageSidebar'
 import { VersionPageToolbar } from './VersionPage/VersionPageToolbar'
-import { getDownloadedFile } from '@services/utils'
+import { ExportSettingsDialog } from './BaseVersionPage/ExportSettingsDialog'
 
 export abstract class BaseVersionPage {
 
@@ -31,19 +29,9 @@ export abstract class BaseVersionPage {
   readonly oldRevisionDialog = new OldRevisionDialog(this.page)
   readonly methodsForUploadDialog = new MethodsForUploadDialog(this.page)
   readonly copyVersionDialog = new CopyVersionDialog(this.page)
+  readonly exportSettingsDialog = new ExportSettingsDialog(this.page)
   readonly howToUploadBtn = new Button(this.page.getByTestId('HowToUploadButton'), 'How to Upload API documentation?')
   readonly createVersionLink = new Link(this.page.getByTestId('CreateVersionLink'), 'Create Version')
 
   protected constructor(protected readonly page: Page) { }
-
-  async exportVersion(): Promise<DownloadedTestFile> {
-    let file!: DownloadedTestFile
-    await report.step('Export version', async () => {
-      const downloadPromise = this.page.waitForEvent('download', { timeout: DOWNLOAD_EXPECT })
-      await this.toolbar.exportBtn.click()
-      const download = await downloadPromise
-      file = await getDownloadedFile(download)
-    })
-    return file
-  }
 }

src/packages/portal/pages/PortalPage/BaseVersionPage/ExportSettingsDialog.ts

@@ -0,0 +1,92 @@
+import { type Page, test as report } from '@playwright/test'
+import { Button, Icon } from '@shared/components/base'
+import { BaseDialog } from '@shared/components/custom/dialogs/base/BaseDialog'
+import type { DownloadedTestFile } from '@shared/entities'
+import { PUBLISH_TIMEOUT } from '@test-setup'
+import { getDownloadedFile } from '@services/utils'
+import { RadioButton } from '@shared/components/base/buttons/RadioButton'
+
+export class ExportSettingsDialog extends BaseDialog {
+
+  readonly reducedBtn = new RadioButton(this.rootLocator.locator('input[type="radio"][value="reducedSourceSpecifications"]'), 'Reduced source specifications')
+  readonly combinedBtn = new RadioButton(this.rootLocator.locator('input[type="radio"][value="mergedSpecification"]'), 'Combined specification')
+  readonly yamlBtn = new RadioButton(this.rootLocator.locator('input[type="radio"][value="yaml"]'), 'YAML')
+  readonly jsonBtn = new RadioButton(this.rootLocator.locator('input[type="radio"][value="json"]'), 'JSON')
+  readonly htmlBtn = new RadioButton(this.rootLocator.locator('input[type="radio"][value="html"]'), 'Interactive HTML')
+  readonly preserveBtn = new RadioButton(this.rootLocator.locator('input[type="radio"][value="preserve"]'), 'Preserve all OAS extensions')
+  readonly removeBtn = new RadioButton(this.rootLocator.locator('input[type="radio"][value="remove"]'), 'Remove OAS extensions')
+  readonly exportBtn = new Button(this.rootLocator.getByTestId('ExportButton'), 'Export')
+  readonly closeBtn = new Button(this.rootLocator.getByTestId('CloseButton'), 'Close')
+  readonly infoIcon = new Icon(this.rootLocator.getByTestId('InfoIcon'), 'Info')
+
+  constructor(protected readonly page: Page) {
+    super(page)
+  }
+
+  async fillForm(params: ExportParams): Promise<void> {
+    const { specType, fileFormat, OasExtensions } = params
+    if (specType) {
+      await report.step(`Set Specification type with "${specType}"`, async () => {
+        switch (specType) {
+          case 'reduced': {
+            await this.reducedBtn.click()
+            break
+          }
+          case 'combined': {
+            await this.combinedBtn.click()
+            break
+          }
+        }
+      })
+    }
+    if (fileFormat) {
+      await report.step(`Set File format with "${fileFormat}"`, async () => {
+        switch (fileFormat) {
+          case 'yaml': {
+            await this.yamlBtn.click()
+            break
+          }
+          case 'json': {
+            await this.jsonBtn.click()
+            break
+          }
+          case 'html': {
+            await this.htmlBtn.click()
+            break
+          }
+        }
+      })
+    }
+    if (OasExtensions) {
+      await report.step(`Set OpenAPI extensions with "${OasExtensions}"`, async () => {
+        switch (OasExtensions) {
+          case 'preserve': {
+            await this.preserveBtn.click()
+            break
+          }
+          case 'remove': {
+            await this.removeBtn.click()
+            break
+          }
+        }
+      })
+    }
+  }
+
+  async performExport(): Promise<DownloadedTestFile> {
+    let file!: DownloadedTestFile
+    await report.step('Export', async () => {
+      const downloadPromise = this.page.waitForEvent('download', { timeout: PUBLISH_TIMEOUT })
+      await this.exportBtn.click()
+      const download = await downloadPromise
+      file = await getDownloadedFile(download)
+    })
+    return file
+  }
+}
+
+export type ExportParams = {
+  specType?: 'reduced' | 'combined'
+  fileFormat?: 'yaml' | 'json' | 'html'
+  OasExtensions?: 'preserve' | 'remove'
+}

src/packages/portal/pages/PortalPage/VersionPage/DocumentPreviewPage/DocumentPreviewPageToolbar.ts

@@ -1,6 +1,6 @@
 import type { Page } from '@playwright/test'
 import { Breadcrumbs, Button, Title } from '@shared/components/base'
-import { OpenapiDownloadMenu } from '../OpenapiDownloadMenu'
+import { DocumentsActionMenu } from '@portal/pages/PortalPage/VersionPage/VersionPackagePage/DocumentsPackageTab/DocumentsActionMenu'
 
 export class DocumentPreviewPageToolbar {
 
@@ -12,7 +12,7 @@ export class DocumentPreviewPageToolbar {
   readonly detailedBtn = new Button(this.page.locator('button[value=detailed]'), 'Detailed')
   readonly docBtn = new Button(this.page.locator('button[value=doc]'), 'Doc')
   readonly rawBtn = new Button(this.page.locator('button[value=raw]'), 'Raw')
-  readonly exportDocumentMenu = new OpenapiDownloadMenu(this.page.getByTestId('ExportDocumentMenuButton'), 'Export')
+  readonly moreMenu = new DocumentsActionMenu(this.page.getByTestId('ExportDocumentMenuButton'), 'More')
 
   constructor(protected readonly page: Page) { }
 }

src/packages/portal/pages/PortalPage/VersionPage/OpenapiDownloadMenu.ts

@@ -1,10 +1,7 @@
 import type { Locator } from '@playwright/test'
-import { type BaseComponent, Button, TableCell, TableRow } from '@shared/components/base'
-import { GroupDownloadMenu } from './OverviewGroupRow/GroupDownloadMenu'
+import { Button, TableCell, TableRow } from '@shared/components/base'
 import { test as report } from 'playwright/test'
-import type { DownloadedTestFile } from '@shared/entities'
 import { GroupNameCell } from './OverviewGroupRow/GroupNameCell'
-import { getDownloadedFile } from '@services/utils'
 
 export class OverviewGroupRow extends TableRow {
 
@@ -15,8 +12,8 @@ export class OverviewGroupRow extends TableRow {
   readonly operationsNumberCell = new TableCell(this.mainLocator.getByTestId('Cell-operations-number'), this.componentName, 'operations number cell')
   readonly addBtn = new Button(this.mainLocator.getByTestId('AddButton'), this.componentName, 'add button')
   readonly editBtn = new Button(this.mainLocator.getByTestId('EditButton'), this.componentName, 'edit button')
+  readonly exportBtn = new Button(this.mainLocator.getByTestId('ExportButton'), this.componentName, 'export button')
   readonly deleteBtn = new Button(this.mainLocator.getByTestId('DeleteButton'), this.componentName, 'delete button')
-  readonly downloadMenu = new GroupDownloadMenu(this.mainLocator)
 
   constructor(rootLocator: Locator, componentName?: string, componentType?: string) {
     super(rootLocator, componentName, componentType || 'group row')
@@ -36,44 +33,17 @@ export class OverviewGroupRow extends TableRow {
     })
   }
 
-  async openDeleteGroupDialog(): Promise<void> {
-    await report.step(`Open "Delete group" dialog for the "${this.componentName}" group`, async () => {
+  async openExportDialog(): Promise<void> {
+    await report.step(`Open "Export settings" dialog for the "${this.componentName}" group`, async () => {
       await this.hover()
-      await this.deleteBtn.click()
+      await this.exportBtn.click()
     })
   }
 
-  async downloadCombinedYaml(): Promise<DownloadedTestFile> {
-    return await this.hoverableDownload(this.mainLocator, 'Download combined YAML', this.downloadMenu, this.downloadMenu.combinedYamlItm)
-  }
-
-  async downloadCombinedJson(): Promise<DownloadedTestFile> {
-    return await this.hoverableDownload(this.mainLocator, 'Download combined JSON', this.downloadMenu, this.downloadMenu.combinedJsonItm)
-  }
-
-  async downloadReducedYaml(): Promise<DownloadedTestFile> {
-    return await this.hoverableDownload(this.mainLocator, 'Download reduced YAML', this.downloadMenu, this.downloadMenu.reducedYamlItm)
-  }
-
-  async downloadReducedJson(): Promise<DownloadedTestFile> {
-    return await this.hoverableDownload(this.mainLocator, 'Download reduced JSON', this.downloadMenu, this.downloadMenu.reducedJsonItm)
-  }
-
-  async downloadReducedHtml(): Promise<DownloadedTestFile> {
-    return await this.hoverableDownload(this.mainLocator, 'Download reduced HTML', this.downloadMenu, this.downloadMenu.reducedHtmlItm)
-  }
-
-  //TODO: need to move to shared functions
-  private async hoverableDownload(hoverableElement: Locator, stepTitle: string, menu: BaseComponent, menuElement: BaseComponent): Promise<DownloadedTestFile> {
-    let file!: DownloadedTestFile
-    await report.step(stepTitle, async () => {
-      const downloadPromise = hoverableElement.page().waitForEvent('download')
-      await hoverableElement.hover()
-      await menu.click()
-      await menuElement.click({ position: { x: 1, y: 1 } }) //WA: tooltip handling
-      const download = await downloadPromise
-      file = await getDownloadedFile(download)
+  async openDeleteGroupDialog(): Promise<void> {
+    await report.step(`Open "Delete group" dialog for the "${this.componentName}" group`, async () => {
+      await this.hover()
+      await this.deleteBtn.click()
     })
-    return file
   }
 }

src/packages/portal/pages/PortalPage/VersionPage/VersionOverviewTab/OverviewGroupsTab/OverviewGroupRow.ts

@@ -1,19 +1,19 @@
 import type { Page } from '@playwright/test'
 import { DocumentsPackageTabSidebar } from './DocumentsPackageTab/DocumentsPackageTabSidebar'
-import { DocumentsMdView } from './DocumentsPackageTab/DocumentsPackageTabViews/DocumentsMdView'
-import { DocumentsJsonSchemaView } from './DocumentsPackageTab/DocumentsPackageTabViews/DocumentsJsonSchemaView'
-import { DocumentsFileView } from './DocumentsPackageTab/DocumentsPackageTabViews/DocumentsFileView'
-import { DocumentsOpenapiView } from './DocumentsPackageTab/DocumentsPackageTabViews/DocumentsOpenapiView'
-import { Content, Tab } from '@shared/components/base'
+import { DocumentsFileView } from './DocumentsPackageTab/DocumentsFileView'
+import { DocumentsOasView } from './DocumentsPackageTab/DocumentsOasView'
+import { Tab } from '@shared/components/base'
+import { DocumentsViewToolbar } from './DocumentsPackageTab/DocumentsViewToolbar'
+import { JsonSchemaView, MdView } from '@shared/components/custom'
 
 export class DocumentsPackageTab extends Tab {
 
   readonly mainLocator = this.page.getByTestId('DocumentsButton')
-  readonly content = new Content(this.rootLocator, 'Documents Tab')
+  readonly toolbar = new DocumentsViewToolbar(this.page)
   readonly sidebar = new DocumentsPackageTabSidebar(this.page)
-  readonly openapiView = new DocumentsOpenapiView(this.page)
-  readonly mdView = new DocumentsMdView(this.page)
-  readonly jsonSchemaView = new DocumentsJsonSchemaView(this.page)
+  readonly oasView = new DocumentsOasView(this.page)
+  readonly jsonSchemaView = new JsonSchemaView(this.page)
+  readonly mdView = new MdView(this.page)
   readonly fileView = new DocumentsFileView(this.page)
 
   constructor(page: Page) {

src/packages/portal/pages/PortalPage/VersionPage/VersionOverviewTab/OverviewGroupsTab/OverviewGroupRow/GroupDownloadMenu.ts

@@ -0,0 +1,52 @@
+import { type Locator, test as report } from '@playwright/test'
+import { DropdownMenu, ListItem } from '@shared/components/base'
+import { MenuItem } from '@shared/components/base/list-items/MenuItem'
+import { PUBLISH_TIMEOUT } from '@test-setup'
+import type { DownloadedTestFile } from '@shared/entities'
+import { getDownloadedFile } from '@services/utils'
+
+export class DocumentsActionMenu extends DropdownMenu {
+
+  readonly componentType: string = 'action menu'
+
+  readonly previewItm = new MenuItem(this.page.getByTestId('PreviewMenuItem'), 'Preview')
+  readonly exportItm = new MenuItem(this.page.getByTestId('ExportMenuItem'), 'Export')
+  readonly downloadItm = new MenuItem(this.page.getByTestId('DownloadMenuItem'), 'Download')
+  readonly copyPublicLinkItm = new ListItem(this.page.getByTestId('CopyPublicLinkMenuItem'), 'Copy public link to source')
+  readonly copyPageTemplateItm = new ListItem(this.page.getByTestId('CopyPageTemplateMenuItem'), 'Copy page template')
+
+  constructor(rootLocator: Locator, componentName?: string, componentType?: string) {
+    super(rootLocator, componentName, componentType)
+  }
+
+  async performDownload(): Promise<DownloadedTestFile> {
+    let file!: DownloadedTestFile
+    await report.step('Download', async () => {
+      const downloadPromise = this.page.waitForEvent('download', { timeout: PUBLISH_TIMEOUT })
+      await this.downloadItm.click()
+      const download = await downloadPromise
+      file = await getDownloadedFile(download)
+    })
+    return file
+  }
+
+  async copyPublicLink(): Promise<string> {
+    let str = ''
+    await report.step('Copy public link to source', async () => {
+      await this.copyPublicLinkItm.click()
+      await this.page.waitForTimeout(2000)
+      str = await this.mainLocator.evaluate('navigator.clipboard.readText()')
+    })
+    return str
+  }
+
+  async copyPageTemplate(): Promise<string> {
+    let str = ''
+    await report.step('Copy page template', async () => {
+      await this.copyPageTemplateItm.click()
+      await this.page.waitForTimeout(2000)
+      str = await this.mainLocator.evaluate('navigator.clipboard.readText()')
+    })
+    return str
+  }
+}