feat: Changed file structure for a clean and better navigation

Author: Sushant092003

page-objects/service-spec-config-page.ts

@@ -42,9 +42,12 @@ export class ServiceSpecConfigPage extends BasePage {
 
   constructor(page: Page, testInfo: TestInfo, eyes: any, specName: string) {
     super(page, testInfo, eyes, specName);
+    const specFileName = specName.includes("/")
+      ? specName.split("/").pop()!
+      : specName;
     this.specTree = page.locator("#spec-tree");
     this.specSection = page.locator(
-      `xpath=//div[contains(@id,"${specName}") and @data-mode="spec"]`,
+      `xpath=//div[contains(@id,"${specFileName}") and @data-mode="spec"]`,
     );
     this.specBtn = page.locator('li.tab[data-type="spec"]').first();
     this.editBtn = this.specSection.getByText(/Edit specmatic.yaml/i);
@@ -57,10 +60,10 @@ export class ServiceSpecConfigPage extends BasePage {
     this.contractTestTab = page.locator('li.tab[data-type="test"]').first();
     this.alertMsg = page.locator(".alert-msg p");
     this.validationErrorBtn = page
-      .locator(`[id*="${this.specName}"]`)
+      .locator(`[id*="${specFileName}"]`)
       .locator("button.bcc-errors-btn");
     this.errorContent = page
-      .locator(`[id*="${this.specName}"]`)
+      .locator(`[id*="${specFileName}"]`)
       .locator(".bcc-errors-content");
 
     this.bccTestButton = this.specSection.locator("#bcc-test-btn");
@@ -384,14 +387,23 @@ export class ServiceSpecConfigPage extends BasePage {
   }
 
   async toggleBccErrorSection(shouldExpand: boolean) {
-    const isExpanded = await this.bccErrorToggle.getAttribute("aria-expanded");
+    // Use the content element's CSS class as the source of truth for the
+    // current expanded state. aria-expanded on the toggle button can drift
+    // out of sync with the actual visual state when scenarios run back-to-back
+    // without a page reload.
+    const classes = (await this.bccErrorContent.getAttribute("class")) ?? "";
+    const isCurrentlyExpanded = classes.includes("show");
 
     if (
-      (shouldExpand && isExpanded === "false") ||
-      (!shouldExpand && isExpanded === "true")
+      (shouldExpand && !isCurrentlyExpanded) ||
+      (!shouldExpand && isCurrentlyExpanded)
     ) {
       await this.bccErrorToggle.click();
-      await takeAndAttachScreenshot(this.page, "expanding-error-setion");
+      await takeAndAttachScreenshot(
+        this.page,
+        "expanding-error-section",
+        this.eyes,
+      );
     }
 
     if (shouldExpand) {
@@ -510,4 +522,82 @@ export class ServiceSpecConfigPage extends BasePage {
       await expect(saveAlert).toBeHidden({ timeout: 5000 });
     });
   }
+
+  async verifyCompatibilityScenario(
+    scenario: {
+      oldText: string;
+      newText: string;
+      expectedMessage: string | RegExp;
+    },
+    reload: boolean = true,
+  ) {
+    await test.step(`Scenario: ${scenario.oldText} -> ${scenario.newText}`, async () => {
+      if (scenario.newText === "") {
+        await this.deleteSpecLinesInEditor(scenario.oldText, 1);
+      } else {
+        await this.editSpecInEditor(scenario.oldText, scenario.newText);
+      }
+
+      await this.runBackwardCompatibilityTest();
+
+      const actualMessage = await this.getAlertMessageText();
+      expect(actualMessage).toContain(scenario.expectedMessage);
+
+      await this.dismissAlert();
+
+      if (reload) {
+        await this.page.reload();
+        await this.openSpecTab();
+      }
+    });
+  }
+
+  async verifyIncompatibilityScenario(
+    scenario: {
+      oldText: string;
+      newText: string;
+      lineCount: number;
+      expectedErrorCount: number;
+      expectedDetail: string;
+    },
+    reload: boolean = true,
+  ) {
+    // 1. Preconditions: Get back to a clean state (skipped when batching without reload)
+    if (reload) {
+      await test.step("Preconditions for the test", async () => {
+        await this.page.reload();
+        await this.navigateToSpec(this.specName!);
+      });
+    }
+
+    await test.step(`Incompatibility Check for: ${scenario.oldText}`, async () => {
+      if (scenario.lineCount > 0) {
+        await this.deleteSpecLinesInEditor(
+          scenario.oldText,
+          scenario.lineCount,
+        );
+      } else if (scenario.newText !== "") {
+        await this.editSpecInEditor(scenario.oldText, scenario.newText);
+      }
+
+      await this.runBackwardCompatibilityTest();
+
+      const toastText = await this.getAlertMessageText();
+      expect.soft(toastText).toContain("Backward compatibility test failed");
+      await this.dismissAlert();
+
+      await this.toggleBccErrorSection(true);
+      const { summary, details } = await this.getBccErrorDetails();
+
+      // Check for error count and details
+      expect.soft(summary).toContain(`${scenario.expectedErrorCount} error`);
+      const hasMatch = details.some((d) => d.includes(scenario.expectedDetail));
+      expect
+        .soft(
+          hasMatch,
+          `Expected error detail not found: ${scenario.expectedDetail}`,
+        )
+        .toBe(true);
+    });
+  }
 }

page-objects/side-bar-page.ts

@@ -14,10 +14,6 @@ export class SideBarPage {
     this.eyes = eyes;
   }
 
-  /**
-   * Ensures the left sidebar is expanded. If closed, expands it and verifies the state.
-   * Takes a screenshot after opening if testInfo is provided.
-   */
   async ensureSidebarOpen(): Promise<void> {
     console.log("\tEnsuring sidebar is open");
     await expect(this.leftSidebar).toBeAttached();
@@ -33,15 +29,43 @@ export class SideBarPage {
   }
 
   async selectSpec(specName: string): Promise<Locator> {
+    const parts = specName.split("/");
+    const fileName = parts[parts.length - 1];
+    const folderPath = parts.slice(0, -1);
     const specLocator = this.page
       .locator("#spec-tree")
-      .locator(`span.wb-title:has-text("${specName}")`);
+      .locator(`span.wb-title[title="${fileName}"]`);
 
     await test.step(`Maps to Service Spec: '${specName}'`, async () => {
       await this.ensureSidebarOpen();
-
       await this.page.waitForTimeout(500);
 
+      for (let i = 0; i < folderPath.length; i++) {
+        const folder = folderPath[i];
+        const folderRow = this.page
+          .locator("#spec-tree")
+          .locator(`div.wb-row:has(span.wb-title[title="${folder}"])`);
+
+        await folderRow.waitFor({ state: "visible", timeout: 5000 });
+
+        const classes = (await folderRow.getAttribute("class")) ?? "";
+        if (!classes.includes("wb-expanded")) {
+          const expander = folderRow.locator("i.wb-expander");
+          if ((await expander.count()) > 0) {
+            await expander.click();
+          } else {
+            await folderRow.click();
+          }
+
+          const nextLabel =
+            i + 1 < folderPath.length ? folderPath[i + 1] : fileName;
+          await this.page
+            .locator("#spec-tree")
+            .locator(`span.wb-title[title="${nextLabel}"]`)
+            .waitFor({ state: "visible", timeout: 5000 });
+        }
+      }
+
       await expect(specLocator).toBeVisible({ timeout: 5000 });
 
       await specLocator.evaluate((node) =>