added data-testid to html for testing

Author: lamATnginx

content/nginxaas-google/billing/usage-and-cost-estimator.md

@@ -11,12 +11,12 @@ nd-product: NGOOGL
 {{< raw-html >}}
 <link rel="stylesheet" href="/nginxaas-google/css/cost-calculator_v2.css">
 <div id="calculator">
-  <h3 id="calculator-section-heading">
+  <h3 id="calculator-section-heading" data-testid="calculator-section-main-header">
     Cost Estimation for Enterprise Plan
     <button id="printButton">Print Estimate</button>
   </h3>
 
-  <div class="section">
+  <div class="section" data-testid="calculator-section-content">
     <div class="form-section">
       <div class="form-section-content">
         <h4 id="calculator-section-heading">Estimate Monthly Cost</h4>
@@ -51,7 +51,7 @@ nd-product: NGOOGL
       <div class="form-section-content">
         <div id="totals-section">
           <span class="total-text">Total Monthly Payment</span>
-          <span id="total-value" class="total-text">--</span>
+          <span id="total-value" class="total-text" data-testid-"total-value">--</span>
 
           <details id="total-cost-details">
             <summary>Show calculations</summary>

tests/src/n4g-calculator.spec.ts

@@ -9,7 +9,7 @@ test.describe("Testing for N4G calculator page", () => {
 	});
 
 	test("calculator renders", async ({ page }) => {
-		const header = page.getByTestId("calculator-section-heading");
+		const header = page.getByTestId("calculator-section-main-header");
 		const content = page.getByTestId("calculator-section-content");
 
 		await expect(header).toBeVisible();
@@ -19,10 +19,8 @@ test.describe("Testing for N4G calculator page", () => {
 	test("calculator values render", async ({ page }) => {
 		// Conjunction - If outputs are rendered, it is safe to say the inputs are rendered.
 		// NOT testing changing numbers will impact the total values as that should be the job of unit tests. This is just a smoke tests.
-		const ncuEstimateValue = page.getByTestId("ncuEstimateValue");
 		const totalValue = page.getByTestId("total-value");
 
-		expect(await ncuEstimateValue.textContent()).toBeTruthy();
 		expect(await totalValue.textContent()).toBeTruthy();
 	});
 });