Add basic smoke test to N4A calculator on prod (#1130)

* Test: Added UI render test for n4a calc

* Testing: N4A Button testing

* Testing: N4A input testing

* Testing: Refactor testing + update package.json + Add ignore

* Testing: Add playwright workflow

* chore: Updated package lock

* removed unneeded util file

---------

Co-authored-by: Maximus Smith <[email protected]>

Author: lamATnginx

.github/workflows/notification.yml

@@ -5,6 +5,7 @@ on:
     workflows:
       - "QE LinkChecker"
       - "Check for Broken Links"
+      - "UI validation on prod"
     types: [completed]
 
 permissions:

.github/workflows/playwright.yml

@@ -0,0 +1,32 @@
+name: UI validation on prod
+on: 
+  workflow_dispatch:
+  schedule:
+    - cron: "0 * * * *"
+
+jobs:
+  run-playwright-tests:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test --retries=2
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: tests/playwright-report/
+        retention-days: 30
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: test-results
+        path: tests/test-results/
+        retention-days: 30

.gitignore

@@ -40,3 +40,8 @@ build
 *.swp
 *.mo
 node_modules
+
+# Playwright
+/coverage
+*/test-results
+*/playwright-report

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

@@ -11,45 +11,45 @@ type:
 {{< raw-html >}}
 
 <link rel="stylesheet" href="/nginxaas-azure/css/cost-calculator_v2.css">
-<div id="calculator">
-    <h3 id="calculator-section-heading">
+<div id="calculator" data-testid="calculator">
+    <h3 id="calculator-section-heading" data-testid="calculator-section-heading">
             Cost Estimation for Standard V2 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">
+            <div class="form-section-content" data-testid="form-section-content-estimateNCUUsage">
                 <h4>1. Estimate NCU Usage </h4>
                 <div>
                     <div class="form-field">
                         <label for="avgNewConnsPerSec">
                             Average New Connections per Second
                         </label>
-                        <input id="avgNewConnsPerSec" type="number" />
+                        <input id="avgNewConnsPerSec" type="number" data-testid="input-avgNewConnsPerSec"/>
                     </div>
                     <div class="form-field avg-conn-duration-container">
                         <label for="avgConnDuration">
                             Average Connection Duration
                         </label>
-                        <input id="avgConnDuration" type="number" />
+                        <input id="avgConnDuration" type="number" data-testid="input-avgConnDuration"/>
                     </div>
                     <div class="form-field bandwidth-input-container">
                         <label for="totalBandwidth">
                             Total Processed Data
                         </label>
-                        <input id="totalBandwidth" type="number" />
+                        <input id="totalBandwidth" type="number" data-testid="input-totalBandwidth"/>
                     </div>
                 </div>
             </div>
-            <div class="form-section-content">
+            <div class="form-section-content" data-testid="form-section-content-capacityUnitsNeeded">
                 <div class=form-section-footer>
                     <div class="totals">
                         <span>NGINX Capacity Units Needed</span>
-                        <span id="ncuEstimateValue">--</span>
+                        <span id="ncuEstimateValue" data-testid="ncuEstimateValue">--</span>
                         <span> Sold in bundles of 10, with a minimum of 10</span>
                     </div>
                     <details id="ncu-usage-details">
-                        <summary>Show calculations</summary>
+                        <summary data-testid="button-ncu-usage-details">Show calculations</summary>
                         <div id="ncuEstimateDetails">
                         <div class="math">
                             <var id="ncuEstConnRate">x</var> new connections per second *
@@ -72,36 +72,36 @@ Max(
             </div>
         </div>
         <div class="form-section">
-        <div class=form-section-content>
+        <div class="form-section-content" data-testid="form-section-content-estimateMonthlyCost">
             <h4 id="calculator-section-heading">
                2. Estimate Monthly Cost
             </h4>
             <div class="form-field">
                 <label for="region">
                     Region
                 </label>
-                <select id="region">
+                <select id="region" data-testid="dropdown-region">
                 <!-- options appended from tiers data -->
                 </select>
             </div>
             <div class="form-field">
                 <label for="numNcus">
                     NCUs <span class="label-details">- value from usage estimate: <span id="numNcusEstVal"> - </span></span>
                 </label>
-                <input id="numNcus" type="number" step="10" min="10" />
+                <input id="numNcus" data-testid="input-numNcus" type="number" step="10" min="10" />
                 <span id="ncuValidation"></span>
             </div>
             <div class="form-field">
                 <label for="numHours">
                     Hours <span class="label-details">- used in a month</span>
                 </label>
-                <input id="numHours" type="number"/>
+                <input id="numHours" data-testid="input-numHours" type="number"/>
             </div>
             <div class="form-field">
                 <label for="numListenPorts">
                     Listen Ports <span class="label-details">- first 5 are included</span>
                 </label>
-                <input id="numListenPorts" type="number"/>
+                <input id="numListenPorts" data-testid="input-numListenPorts" type="number"/>
             </div>
             <div class="form-field">
                 <label for="isWAF">
@@ -113,7 +113,7 @@ Max(
             <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" data-testid="total-value" class="total-text">--</span>
                     <div class="subtitle">
                         The standard Azure networking and bandwidth charges apply to NGINX deployments.
                     </div>