make sbom packge tab reusable

Author: carlosthe19916

tests/ui/helpers/ToolbarTable.ts

@@ -1,6 +1,6 @@
 import { expect, Page } from "@playwright/test";
 export class ToolbarTable {
-  private _page: Page;
+  private readonly _page: Page;
   private _tableName: string;
 
   constructor(page: Page, tableName: string) {

tests/ui/pages/Constants.ts

@@ -1,16 +1,3 @@
-export const DetailsPage_SBOM = {
-  packagesTab: {
-    toolbarAriaLabel: "Package toolbar",
-    tableAriaLabel: "Package table",
-    paginationIdTop: "package-table-pagination-top",
-    paginationIdBottom: "package-table-pagination-bottom",
-    filters: {
-      filterText: "Filter text",
-      license: "License",
-    },
-  },
-};
-
 export const isSorted = (arr: string[], asc: boolean) => {
   let sorted = [...arr].sort((a, b) => a.localeCompare(b));
   if (!asc) {

tests/ui/pages/DetailsPageLayout.ts

@@ -1,7 +1,7 @@
 import { expect, Page } from "@playwright/test";
 
 export class DetailsPageLayout {
-  private _page: Page;
+  private readonly _page: Page;
 
   private constructor(page: Page) {
     this._page = page;

tests/ui/pages/LabelsModal.ts

@@ -2,7 +2,7 @@ import { Locator, Page } from "playwright-core";
 import { expect } from "playwright/test";
 
 export class LabelsModal {
-  private _page: Page;
+  private readonly _page: Page;
   private _dialog: Locator;
 
   private constructor(page: Page, dialog: Locator) {

tests/ui/pages/Navigation.ts

@@ -4,7 +4,7 @@ import { Page } from "playwright-core";
  * Used to navigate to different pages
  */
 export class Navigation {
-  private _page: Page;
+  private readonly _page: Page;
 
   private constructor(page: Page) {
     this._page = page;

tests/ui/pages/Pagination.ts

@@ -2,7 +2,7 @@ import { expect, Locator, Page } from "@playwright/test";
 import { Table } from "./Table";
 
 export class Pagination {
-  private _page: Page;
+  private readonly _page: Page;
   _pagination: Locator;
 
   private constructor(page: Page, pagination: Locator) {

tests/ui/pages/Table.ts

@@ -1,7 +1,7 @@
 import { expect, Locator, Page } from "@playwright/test";
 
 export class Table {
-  private _page: Page;
+  private readonly _page: Page;
   _table: Locator;
 
   private constructor(page: Page, table: Locator) {

tests/ui/pages/Toolbar.ts

@@ -1,7 +1,7 @@
 import { expect, Locator, Page } from "@playwright/test";
 
 export class Toolbar {
-  private _page: Page;
+  private readonly _page: Page;
   _toolbar: Locator;
 
   private constructor(page: Page, toolbar: Locator) {

tests/ui/pages/sbom-details/SbomDetailsPage.ts

@@ -1,12 +1,10 @@
 import { expect, Page } from "@playwright/test";
-import { ListPage_SBOM } from "../Constants";
 import { DetailsPageLayout } from "../DetailsPageLayout";
 import { Navigation } from "../Navigation";
-import { Table } from "../Table";
-import { Toolbar } from "../Toolbar";
+import { SbomListPage } from "../sbom-list/SbomListPage";
 
 export class SbomDetailsPage {
-  private _page: Page;
+  private readonly _page: Page;
   _layout: DetailsPageLayout;
 
   private constructor(page: Page, layout: DetailsPageLayout) {
@@ -18,10 +16,11 @@ export class SbomDetailsPage {
     const navigation = await Navigation.build(page);
     await navigation.goToSidebar("SBOMs");
 
-    const toolbar = await Toolbar.build(page, ListPage_SBOM.toolbarAriaLabel);
-    const table = await Table.build(page, ListPage_SBOM.tableAriaLabel);
+    const listPage = await SbomListPage.build(page);
+    const toolbar = await listPage.getToolbar();
+    const table = await listPage.getTable();
 
-    await toolbar.applyTextFilter(ListPage_SBOM.filters.filterText, sbomName);
+    await toolbar.applyTextFilter("Filter text", sbomName);
     await table.waitUntilDataIsLoaded();
     await table.verifyColumnContainsText("Name", sbomName);
 

tests/ui/pages/sbom-details/package/PackageTab.ts

@@ -0,0 +1,37 @@
+import { Page } from "@playwright/test";
+import { SbomDetailsPage } from "../SbomDetailsPage";
+import { Toolbar } from "../../Toolbar";
+import { Table } from "../../Table";
+import { Pagination } from "../../Pagination";
+
+export class PackageTab {
+  private readonly _page: Page;
+  _detailsPage: SbomDetailsPage;
+
+  private constructor(page: Page, layout: SbomDetailsPage) {
+    this._page = page;
+    this._detailsPage = layout;
+  }
+
+  static async build(page: Page, sbomName: string) {
+    const detailsPage = await SbomDetailsPage.build(page, sbomName);
+    await detailsPage._layout.selectTab("Packages");
+
+    return new PackageTab(page, detailsPage);
+  }
+
+  async getToolbar() {
+    return await Toolbar.build(this._page, "Package toolbar");
+  }
+
+  async getTable() {
+    return await Table.build(this._page, "Package table");
+  }
+
+  async getPagination(top: boolean = true) {
+    return await Pagination.build(
+      this._page,
+      `package-table-pagination-${top ? "top" : "bottom"}`
+    );
+  }
+}