Skip to content

Commit 09d57d3

Browse files
maximusmith529maximusmith529
committed
Testing: N4A input testing
1 parent ddeeefc commit 09d57d3

File tree

5 files changed

+279
-85
lines changed

5 files changed

+279
-85
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ type:
4848
<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" data-testid="button-ncu-usage-details">
52-
<summary>Show calculations</summary>
51+
<details id="ncu-usage-details" data-testid="summary-ncu-usage-details">
52+
<summary data-testid="button-ncu-usage-details">Show calculations</summary>
5353
<div id="ncuEstimateDetails">
5454
<div class="math">
5555
<var id="ncuEstConnRate">x</var> new connections per second *
@@ -117,8 +117,8 @@ Max(
117117
<div class="subtitle">
118118
The standard Azure networking and bandwidth charges apply to NGINX deployments.
119119
</div>
120-
<details id="total-cost-details" data-testid="button-total-cost-details">
121-
<summary>Show calculations</summary>
120+
<details id="total-cost-details" data-testid="summary-total-cost-details">
121+
<summary data-testid="button-total-cost-details">Show calculations</summary>
122122
<div class="details-content">
123123
<div class="details-section">
124124
<p class="math">

‎tests/constants.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const TIMEOUT = 4000;

‎tests/n4a-calculator.spec.ts‎

Lines changed: 169 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,176 @@
1-
import { expect, test } from '@playwright/test';
2-
// import { handleConsentPopup, waitFor } from './util';
1+
import { expect, test } from "@playwright/test";
2+
import { handleConsentPopup, waitFor } from "./util";
33

44
// Unit test for the accuracy of the calculations
5-
test.describe('Numerical test for N4A calculator page', () => {
6-
test.beforeEach(async ({ page }) => {
7-
await page.goto('/test-product');
8-
await page.waitForLoadState('load');
9-
});
10-
11-
test('estimageNCUUsage calculations are accurate', async ({page}) => {
12-
await page.getByTestId("button-ncu-usage-details").click();
13-
await page.getByTestId("button-total-cost-details").click();
14-
});
15-
});
5+
// test.describe('Numerical test for N4A calculator page', () => {
6+
// test.beforeEach(async ({ page }) => {
7+
// await page.goto('/nginxaas/azure/billing/usage-and-cost-estimator/');
8+
// await page.waitForLoadState('load');
9+
// await waitFor(async () => await handleConsentPopup(page));
10+
// });
11+
12+
// test('estimageNCUUsage calculations are accurate', async ({page}) => {
13+
// // change input-avgNewConnsPerSec to 1000 (label-ncuEstimateValue should be 30 NCUs)
14+
15+
// // change input-avgConnDuration 100 (label-ncuEstimateValue should be 30 NCUs)
16+
17+
// // change input-totalBandwidth to 1000 (label-ncuEstimateValue should be 20 NCUs)
18+
19+
// });
20+
// });
1621

1722
// UI test to click buttons to test functionality
18-
test.describe('Button functionality test for N4A calculator page', () => {
19-
test.beforeEach(async ({ page }) => {
20-
await page.goto('/test-product');
21-
await page.waitForLoadState('load');
22-
});
23-
24-
test('estimateNCUUsage buttons are functional', async ({page}) => {
25-
await page.getByTestId("button-ncu-usage-details").click();
26-
await page.getByTestId("button-total-cost-details").click();
27-
});
28-
});
23+
test.describe("Button and input functionality test for N4A calculator page", () => {
24+
test.beforeEach(async ({ page }) => {
25+
await page.goto("/nginxaas/azure/billing/usage-and-cost-estimator/");
26+
await page.waitForLoadState("load");
27+
await waitFor(async () => await handleConsentPopup(page));
28+
});
29+
30+
test("estimateNCUUsage buttons and input are functional", async ({
31+
page,
32+
}) => {
33+
await page.getByTestId("button-ncu-usage-details").click();
34+
await page.getByTestId("button-total-cost-details").click();
35+
});
36+
// go through each input and change it to 10000. label-total-value != $219
37+
test("input-avgNewConnsPerSec", async ({ page }) => {
38+
const input = page.getByTestId("input-avgNewConnsPerSec");
39+
const label = page.getByTestId("label-total-value");
40+
41+
const before = await label.textContent();
42+
43+
await input.fill("1000");
44+
await input.blur();
45+
46+
await expect(input).toHaveValue("1000");
47+
await expect(label).not.toHaveText(before || "");
48+
console.log('before:', before, 'after:', await label.textContent());
49+
});
50+
51+
test("input-avgConnDuration", async ({ page }) => {
52+
const input = page.getByTestId("input-avgConnDuration");
53+
const label = page.getByTestId("label-total-value");
54+
55+
const before = await label.textContent();
56+
57+
await input.fill("1000");
58+
await input.blur();
59+
60+
await expect(input).toHaveValue("1000");
61+
await expect(label).not.toHaveText(before || "");
62+
});
63+
64+
test("input-totalBandwidth", async ({ page }) => {
65+
const input = page.getByTestId("input-totalBandwidth");
66+
const label = page.getByTestId("label-total-value");
67+
68+
const before = await label.textContent();
2969

30-
// UI test to make sure the page renders correctly. IE. Calculator with #s on it, regions, etc are populated
31-
test.describe('Smoke test for calculation page', () => {
32-
test.beforeEach(async ({ page }) => {
33-
await page.goto('/test-product');
34-
await page.waitForLoadState('load');
35-
// await waitFor(async () => await handleConsentPopup(page));
36-
});
37-
38-
test('estimateNCUUSage renders', async ({page}) => {
39-
await expect(
40-
await page.getByTestId("form-section-content-estimateNCUUsage").count()
41-
).toBeTruthy();
42-
await expect(
43-
await page.getByTestId("input-avgNewConnsPerSec").count()
44-
).toBeTruthy();
45-
await expect(
46-
await page.getByTestId("input-avgConnDuration").count()
47-
).toBeTruthy();
48-
await expect(
49-
await page.getByTestId("input-totalBandwidth").count()
50-
).toBeTruthy();
51-
await expect(
52-
await page.getByTestId("form-section-content-capacityUnitsNeeded").count()
53-
).toBeTruthy();
54-
await expect(
55-
await page.getByTestId("label-ncuEstimateValue").count()
56-
).toBeTruthy();
57-
await expect(
58-
await page.getByTestId("button-ncu-usage-details").count()
59-
).toBeTruthy();
60-
await expect(
61-
await page.getByTestId("label-ncuEstMin1").count()
62-
).toBeTruthy();
63-
await expect(
64-
await page.getByTestId("form-section-content-estimateMonthlyCost").count()
65-
).toBeTruthy();
66-
await expect(
67-
await page.getByTestId("dropdown-region").count()
68-
).toBeTruthy();
69-
await expect(
70-
await page.getByTestId("input-numNcus").count()
71-
).toBeTruthy();
72-
await expect(
73-
await page.getByTestId("input-numHours").count()
74-
).toBeTruthy();
75-
await expect(
76-
await page.getByTestId("input-numListenPorts").count()
77-
).toBeTruthy();
78-
await expect(
79-
await page.getByTestId("label-total-value").count()
80-
).toBeTruthy();
81-
await expect(
82-
await page.getByTestId("button-total-cost-details").count()
83-
).toBeTruthy();
84-
85-
})
70+
await input.fill("1000");
71+
await input.blur();
72+
73+
await expect(input).toHaveValue("1000");
74+
await expect(label).not.toHaveText(before || "");
75+
});
76+
77+
test("input-numNcus", async ({ page }) => {
78+
const input = page.getByTestId("input-numNcus");
79+
const label = page.getByTestId("label-total-value");
80+
81+
const before = await label.textContent();
82+
83+
await input.fill("1000");
84+
await input.blur();
85+
86+
await expect(input).toHaveValue("1000");
87+
await expect(label).not.toHaveText(before || "");
88+
});
89+
90+
test("input-numHours", async ({ page }) => {
91+
const input = page.getByTestId("input-numHours");
92+
const label = page.getByTestId("label-total-value");
93+
94+
const before = await label.textContent();
95+
96+
await input.fill("1000");
97+
await input.blur();
98+
99+
await expect(input).toHaveValue("1000");
100+
await expect(label).not.toHaveText(before || "");
101+
});
102+
103+
test("input-numListenPorts", async ({ page }) => {
104+
const input = page.getByTestId("input-numListenPorts");
105+
const label = page.getByTestId("label-total-value");
106+
107+
const before = await label.textContent();
108+
109+
await input.fill("1000");
110+
await input.blur();
111+
112+
await expect(input).toHaveValue("1000");
113+
await expect(label).not.toHaveText(before || "");
114+
});
86115
});
87116

88-
// Behavioural test
117+
// // UI test to make sure the page renders correctly. IE. Calculator with #s on it, regions, etc are populated
118+
// test.describe('Smoke test for calculation page', () => {
119+
// test.beforeEach(async ({ page }) => {
120+
// await page.goto('/nginxaas/azure/billing/usage-and-cost-estimator/');
121+
// await page.waitForLoadState('load');
122+
// await waitFor(async () => await handleConsentPopup(page));
123+
// // await waitFor(async () => await handleConsentPopup(page));
124+
// });
125+
126+
// test('estimateNCUUSage renders', async ({page}) => {
127+
// await expect(
128+
// await page.getByTestId("form-section-content-estimateNCUUsage").count()
129+
// ).toBeTruthy();
130+
// await expect(
131+
// await page.getByTestId("input-avgNewConnsPerSec").count()
132+
// ).toBeTruthy();
133+
// await expect(
134+
// await page.getByTestId("input-avgConnDuration").count()
135+
// ).toBeTruthy();
136+
// await expect(
137+
// await page.getByTestId("input-totalBandwidth").count()
138+
// ).toBeTruthy();
139+
// await expect(
140+
// await page.getByTestId("form-section-content-capacityUnitsNeeded").count()
141+
// ).toBeTruthy();
142+
// await expect(
143+
// await page.getByTestId("label-ncuEstimateValue").count()
144+
// ).toBeTruthy();
145+
// await expect(
146+
// await page.getByTestId("button-ncu-usage-details").count()
147+
// ).toBeTruthy();
148+
// await expect(
149+
// await page.getByTestId("label-ncuEstMin1").count()
150+
// ).toBeTruthy();
151+
// await expect(
152+
// await page.getByTestId("form-section-content-estimateMonthlyCost").count()
153+
// ).toBeTruthy();
154+
// await expect(
155+
// await page.getByTestId("dropdown-region").count()
156+
// ).toBeTruthy();
157+
// await expect(
158+
// await page.getByTestId("input-numNcus").count()
159+
// ).toBeTruthy();
160+
// await expect(
161+
// await page.getByTestId("input-numHours").count()
162+
// ).toBeTruthy();
163+
// await expect(
164+
// await page.getByTestId("input-numListenPorts").count()
165+
// ).toBeTruthy();
166+
// await expect(
167+
// await page.getByTestId("label-total-value").count()
168+
// ).toBeTruthy();
169+
// await expect(
170+
// await page.getByTestId("button-total-cost-details").count()
171+
// ).toBeTruthy();
172+
173+
// })
174+
// });
175+
176+
// Behavioural test

‎tests/playwright-report/index.html‎

Lines changed: 76 additions & 0 deletions
Large diffs are not rendered by default.

‎tests/util.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { expect } from '@playwright/test';
2+
import { TIMEOUT } from './constants.js';
3+
4+
export async function runSmokeTestOnPage(page) {
5+
/* Ensure each page follows the following dom structure */
6+
await expect(await page.getByTestId('content').count()).toBeTruthy();
7+
await expect(await page.getByTestId('header').count()).toBeTruthy();
8+
await expect(await page.getByTestId('sidebar').count()).toBeTruthy();
9+
await expect(await page.getByTestId('footer').count()).toBeTruthy();
10+
await expect(await page.getByTestId('not-found-container').count()).toBe(0);
11+
}
12+
13+
// THE GDPR Consent button appears when test is run from EU locations. This handles that popup.
14+
export async function handleConsentPopup(page) {
15+
await page.addLocatorHandler(
16+
page.locator('#truste-consent-content'),
17+
async () => {
18+
const consentButton = page.locator('#truste-consent-required');
19+
expect(consentButton).toBeVisible();
20+
await consentButton.click();
21+
}
22+
);
23+
}
24+
25+
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
26+
export const waitFor = async function waitFor(f, ftimeout = TIMEOUT) {
27+
while (!f()) await sleep(ftimeout);
28+
return f();
29+
};

0 commit comments

Comments
 (0)