add test to check the tab visibility when license is expired

Author: soujay

src/Frontend/src/views/ConfigurationView.vue

@@ -53,35 +53,37 @@ function preventIfDisabled(e: Event) {
     <div class="row">
       <div class="col-sm-12">
         <div class="nav tabs">
-          <h5 :class="{ active: isRouteSelected(routeLinks.configuration.license.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item">
+          <h5 :class="{ active: isRouteSelected(routeLinks.configuration.license.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item" role="tab" aria-label="license">
             <RouterLink :to="routeLinks.configuration.license.link">License</RouterLink>
             <exclamation-mark :type="convertToWarningLevel(licenseStatus.warningLevel)" />
           </h5>
           <h5
             :class="{ active: isRouteSelected(routeLinks.throughput.setup.root) || isRouteSelected(routeLinks.throughput.setup.mask.link) || isRouteSelected(routeLinks.throughput.setup.diagnostics.link), disabled: notConnected }"
             @click.capture="preventIfDisabled"
             class="nav-item"
+            role="tab"
+            aria-label="usage-setup"
           >
             <RouterLink :to="routeLinks.throughput.setup.root">Usage Setup</RouterLink>
             <exclamation-mark :type="WarningLevel.Danger" v-if="hasErrors" />
           </h5>
           <template v-if="!licenseStatus.isExpired">
-            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.massTransitConnector.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item">
+            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.massTransitConnector.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item" role="tab" aria-label="mass-transit-connector">
               <RouterLink :to="routeLinks.configuration.massTransitConnector.link">MassTransit Connector</RouterLink>
             </h5>
-            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.healthCheckNotifications.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item">
+            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.healthCheckNotifications.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item" role="tab" aria-label="health-check-notifications">
               <RouterLink :to="routeLinks.configuration.healthCheckNotifications.link">Health Check Notifications</RouterLink>
             </h5>
-            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.retryRedirects.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item">
+            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.retryRedirects.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item" role="tab" aria-label="retry-redirects">
               <RouterLink :to="routeLinks.configuration.retryRedirects.link">Retry Redirects ({{ redirectCount }})</RouterLink>
             </h5>
-            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.connections.link) }" class="nav-item">
+            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.connections.link) }" class="nav-item" role="tab" aria-label="connections">
               <RouterLink :to="routeLinks.configuration.connections.link">
                 Connections
                 <exclamation-mark v-if="displayConnectionsWarning" :type="WarningLevel.Danger" />
               </RouterLink>
             </h5>
-            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.endpointConnection.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item">
+            <h5 :class="{ active: isRouteSelected(routeLinks.configuration.endpointConnection.link), disabled: notConnected }" @click.capture="preventIfDisabled" class="nav-item" role="tab" aria-label="endpoint-connection">
               <RouterLink :to="routeLinks.configuration.endpointConnection.link">Endpoint Connection</RouterLink>
             </h5>
           </template>

src/Frontend/test/specs/configuration/questions/licenseTabs.ts

@@ -0,0 +1,12 @@
+import { screen } from "@testing-library/vue";
+
+export async function licenseTabList() {
+  const tabs = await screen.findAllByRole("tab");
+  return tabs;
+}
+export async function licenseTabNames() {
+  const tabs = await screen.findAllByRole("tab");
+  // Check the names of the tabs
+  const tabNames = tabs.map((tab) => tab.textContent?.trim());
+  return tabNames;
+}

src/Frontend/test/specs/configuration/viewing-license.spec.ts

@@ -7,6 +7,7 @@ import { licenseExpiryDaysLeft } from "./questions/licenseExpiryDaysLeft";
 import { licenseExpired } from "./questions/licenseExpired";
 import { waitFor } from "@testing-library/vue";
 import { LicenseType } from "@/resources/LicenseInfo";
+import { licenseTabList, licenseTabNames } from "./questions/licenseTabs";
 
 describe("FEATURE: License", () => {
   describe("RULE: Platform license type should be shown shown", () => {
@@ -40,12 +41,15 @@ describe("FEATURE: License", () => {
         expect(await licenseExpired()).toBe("Your license expired. Please update the license to continue using the Particular Service Platform.");
       });
     });
-    test.todo("EXAMPLE: Only 'LICENSE' tab is visible when license has expired");
-
-    /* SCENARIO
-          Given an expired license
-          Then "LICENSE" is the only visible tab in the Configuration screen
-        */
+    test("EXAMPLE: An expired license should show only the license and usage setup tabs", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasExpiredLicense(LicenseType.Subscription, 5)); //license expired 6 days before
+      await driver.goTo("/configuration/license");
+      await waitFor(async () => {
+        expect(await licenseTabList()).toHaveLength(2);
+        expect(await licenseTabNames()).toEqual(expect.arrayContaining(["License", "Usage Setup"]));
+      });
+    });
   });
 
   describe("RULE: License expiring soon must be displayed", () => {