tests

Author: xynicole

.github/workflows/playwright.yml

@@ -3,12 +3,16 @@ on:
   push:
     branches: [main]
     paths:
-      - 'static/nginxaas-azure/js/cost-calculator_v2.js'  
+      - 'static/nginxaas-azure/js/cost-calculator_v2.js'
       - 'content/nginxaas-azure/billing/usage-and-cost-estimator.md'
+      - 'static/nginxaas-google/js/cost-calculator_gc.js'
+      - 'content/nginxaas-google/billing/usage-and-cost-estimator.md'
   pull_request:
     paths:
       - 'static/nginxaas-azure/js/cost-calculator_v2.js'
       - 'content/nginxaas-azure/billing/usage-and-cost-estimator.md'
+      - 'static/nginxaas-google/js/cost-calculator_gc.js'
+      - 'content/nginxaas-google/billing/usage-and-cost-estimator.md'
 permissions:
   contents: read
 jobs:

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-heading">
     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

@@ -0,0 +1,28 @@
+import { expect, test } from "@playwright/test";
+import { handleConsentPopup, waitFor } from "../util";
+
+test.describe("Testing for N4G calculator page", () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto("/nginxaas/google/billing/usage-and-cost-estimator/");
+		await page.waitForLoadState("load");
+		await waitFor(async () => await handleConsentPopup(page));
+	});
+
+	test("calculator renders", async ({ page }) => {
+		const header = page.getByTestId("calculator-section-heading");
+		const content = page.getByTestId("calculator-section-content");
+
+		await expect(header).toBeVisible();
+		await expect(content).toBeVisible();
+	});
+
+	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();
+	});
+});