Skip to content

Commit 7f1c5f6

Browse files
maximusmith529maximusmith529
committed
Test: Added UI render test for n4a calc
1 parent 13f3dd7 commit 7f1c5f6

File tree

5 files changed

+177
-16
lines changed

5 files changed

+177
-16
lines changed

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -18,37 +18,37 @@ type:
1818
</h3>
1919
<div class="section">
2020
<div class="form-section">
21-
<div class="form-section-content">
21+
<div class="form-section-content" data-testid="form-section-content-estimateNCUUsage">
2222
<h4>1. Estimate NCU Usage </h4>
2323
<div>
2424
<div class="form-field">
2525
<label for="avgNewConnsPerSec">
2626
Average New Connections per Second
2727
</label>
28-
<input id="avgNewConnsPerSec" type="number" />
28+
<input id="avgNewConnsPerSec" type="number" data-testid="input-avgNewConnsPerSec"/>
2929
</div>
3030
<div class="form-field avg-conn-duration-container">
3131
<label for="avgConnDuration">
3232
Average Connection Duration
3333
</label>
34-
<input id="avgConnDuration" type="number" />
34+
<input id="avgConnDuration" type="number" data-testid="input-avgConnDuration"/>
3535
</div>
3636
<div class="form-field bandwidth-input-container">
3737
<label for="totalBandwidth">
3838
Total Processed Data
3939
</label>
40-
<input id="totalBandwidth" type="number" />
40+
<input id="totalBandwidth" type="number" data-testid="input-totalBandwidth"/>
4141
</div>
4242
</div>
4343
</div>
44-
<div class="form-section-content">
44+
<div class="form-section-content" data-testid="form-section-content-capacityUnitsNeeded">
4545
<div class=form-section-footer>
4646
<div class="totals">
4747
<span>NGINX Capacity Units Needed</span>
48-
<span id="ncuEstimateValue">--</span>
48+
<span id="ncuEstimateValue" data-testid="label-ncuEstimateValue">--</span>
4949
<span> Sold in bundles of 10, with a minimum of 10</span>
5050
</div>
51-
<details id="ncu-usage-details">
51+
<details id="ncu-usage-details" data-testid="button-ncu-usage-details">
5252
<summary>Show calculations</summary>
5353
<div id="ncuEstimateDetails">
5454
<div class="math">
@@ -61,7 +61,7 @@ Max(
6161
<var id="ncuEstAvgConn2">x</var> concurrent connections / <span id="ncuEstConnsPerNcu"></span> Conns per NCU,
6262
<var id="ncuEstConnRate2">y</var> connections per second / <span id="ncuEstConnsPerSecondPerNcu"></span> conns per second per NCU,
6363
<var id="ncuEstDataRate">z</var> Mbps / <span id="ncuEstMbpsPerNcu"></span>Mbps per NCU
64-
) = <var id="ncuEstMin1"></var> NCUs
64+
) = <var id="ncuEstMin1" data-testid="label-ncuEstMin1"></var> NCUs
6565
</pre>
6666
<div class="math">
6767
Usage needs at least <var id="ncuEstMin">x</var> NCUs, rounded to the nearest 10, with a minimum of 10 = <var id="ncuEstTotal">total</var> NCUs
@@ -72,52 +72,52 @@ Max(
7272
</div>
7373
</div>
7474
<div class="form-section">
75-
<div class=form-section-content>
75+
<div class="form-section-content" data-testid="form-section-content-estimateMonthlyCost">
7676
<h4 id="calculator-section-heading">
7777
2. Estimate Monthly Cost
7878
</h4>
7979
<div class="form-field">
8080
<label for="region">
8181
Region
8282
</label>
83-
<select id="region">
83+
<select id="region" data-testid="dropdown-region">
8484
<!-- options appended from tiers data -->
8585
</select>
8686
</div>
8787
<div class="form-field">
8888
<label for="numNcus">
8989
NCUs <span class="label-details">- value from usage estimate: <span id="numNcusEstVal"> - </span></span>
9090
</label>
91-
<input id="numNcus" type="number" step="10" min="10" />
91+
<input id="numNcus" data-testid="input-numNcus" type="number" step="10" min="10" />
9292
<span id="ncuValidation"></span>
9393
</div>
9494
<div class="form-field">
9595
<label for="numHours">
9696
Hours <span class="label-details">- used in a month</span>
9797
</label>
98-
<input id="numHours" type="number"/>
98+
<input id="numHours" data-testid="input-numHours" type="number"/>
9999
</div>
100100
<div class="form-field">
101101
<label for="numListenPorts">
102102
Listen Ports <span class="label-details">- first 5 are included</span>
103103
</label>
104-
<input id="numListenPorts" type="number"/>
104+
<input id="numListenPorts" data-testid="input-numListenPorts" type="number"/>
105105
</div>
106106
<div class="form-field">
107107
<label for="isWAF">
108108
Utilize WAF <span class="label-details"></span>
109109
</label>
110-
<input type="checkbox" id="isWAF" />
110+
<input type="checkbox" data-testid="isWAF-checkbox" id="isWAF" />
111111
</div>
112112
</div>
113113
<div class=form-section-content>
114114
<div id="totals-section">
115115
<span class="total-text">Total Monthly Payment</span>
116-
<span id="total-value" class="total-text">--</span>
116+
<span id="total-value" data-testid="label-total-value" class="total-text">--</span>
117117
<div class="subtitle">
118118
The standard Azure networking and bandwidth charges apply to NGINX deployments.
119119
</div>
120-
<details id="total-cost-details">
120+
<details id="total-cost-details" data-testid="button-total-cost-details">
121121
<summary>Show calculations</summary>
122122
<div class="details-content">
123123
<div class="details-section">

‎package-lock.json‎

Lines changed: 60 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"hugo-bin": "^0.111.3"
1414
},
1515
"dependencies": {
16+
"@playwright/test": "^1.55.0",
1617
"lighthouse": "^12.2.2",
1718
"puppeteer": "^23.8.0"
1819
}

‎playwright.config.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
export default defineConfig({
3+
testDir: 'tests',
4+
fullyParallel: true,
5+
workers: 1,
6+
outputDir: 'tests/test-results',
7+
reporter: [['html', { outputFolder: 'tests/playwright-report' }]],
8+
projects: [
9+
{
10+
name: 'chromium',
11+
use: { ...devices['Desktop Chrome'] },
12+
},
13+
{
14+
name: 'firefox',
15+
use: { ...devices['Desktop Firefox'] },
16+
},
17+
{
18+
name: 'webkit',
19+
use: { ...devices['Desktop Safari'] },
20+
},
21+
{
22+
name: 'Mobile Chrome',
23+
use: { ...devices['Pixel 5'] },
24+
},
25+
],
26+
use: {
27+
// Base URL to use in actions like `await page.goto('/')`.
28+
baseURL: 'https://docs.nginx.com',
29+
// Set Geolocation to Cork, Ireland
30+
geolocation: { longitude: -8.486316, latitude: 51.896893 },
31+
permissions: ['geolocation'],
32+
video: 'retain-on-failure'
33+
},
34+
})

‎tests/n4a-calculator.spec.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { expect, test } from '@playwright/test';
2+
// import { handleConsentPopup, waitFor } from './util';
3+
4+
// Unit test for the accuracy of the calculations
5+
6+
// UI test to click buttons to test functionality
7+
8+
// UI test to make sure the page renders correctly. IE. Calculator with #s on it, regions, etc are populated
9+
test.describe('Smoke test for calculation page', () => {
10+
test.beforeEach(async ({ page }) => {
11+
await page.goto('/test-product');
12+
await page.waitForLoadState('load');
13+
// await waitFor(async () => await handleConsentPopup(page));
14+
});
15+
16+
test('estimateNCUUSage renders', async ({page}) => {
17+
await expect(
18+
await page.getByTestId("form-section-content-estimateNCUUsage").count()
19+
).toBeTruthy();
20+
await expect(
21+
await page.getByTestId("input-avgNewConnsPerSec").count()
22+
).toBeTruthy();
23+
await expect(
24+
await page.getByTestId("input-avgConnDuration").count()
25+
).toBeTruthy();
26+
await expect(
27+
await page.getByTestId("input-totalBandwidth").count()
28+
).toBeTruthy();
29+
await expect(
30+
await page.getByTestId("form-section-content-capacityUnitsNeeded").count()
31+
).toBeTruthy();
32+
await expect(
33+
await page.getByTestId("label-ncuEstimateValue").count()
34+
).toBeTruthy();
35+
await expect(
36+
await page.getByTestId("button-ncu-usage-details").count()
37+
).toBeTruthy();
38+
await expect(
39+
await page.getByTestId("label-ncuEstMin1").count()
40+
).toBeTruthy();
41+
await expect(
42+
await page.getByTestId("form-section-content-estimateMonthlyCost").count()
43+
).toBeTruthy();
44+
await expect(
45+
await page.getByTestId("dropdown-region").count()
46+
).toBeTruthy();
47+
await expect(
48+
await page.getByTestId("input-numNcus").count()
49+
).toBeTruthy();
50+
await expect(
51+
await page.getByTestId("input-numHours").count()
52+
).toBeTruthy();
53+
await expect(
54+
await page.getByTestId("input-numListenPorts").count()
55+
).toBeTruthy();
56+
await expect(
57+
await page.getByTestId("label-total-value").count()
58+
).toBeTruthy();
59+
await expect(
60+
await page.getByTestId("button-total-cost-details").count()
61+
).toBeTruthy();
62+
63+
})
64+
});
65+
66+
// Behavioural test

0 commit comments

Comments
 (0)