Repository: louislam/uptime-kuma
File: test/e2e/specs/monitor-form.spec.js (JavaScript)

Code before:
import { expect, test } from "@playwright/test";
import { login, restoreSqliteSnapshot, screenshot } from "../util-test";
import { step } from "../tools/step";

/**
 * Initializes the monitor form by navigating to the add page, logging in,
 * taking a screenshot, and selecting a monitor type from the dropdown.
 * @param {import('@playwright/test').Page} page - The Playwright page instance.
 * @param {import('@playwright/test').TestInfo} testInfo - Information about the current test run.
 * @param {string} monitorType - The monitor type to select (default is "dns").
 * @returns {Promise<void>} - A promise that resolves when the form setup is complete.
 */
async function setupMonitorForm(page, testInfo, monitorType = "dns") {
    step("Navigating to add monitor form");
    await page.goto("./add");

    step("Logging in");
    await login(page);
    await screenshot(testInfo, page);

    const monitorTypeSelect = page.getByTestId("monitor-type-select");
    await expect(monitorTypeSelect).toBeVisible();

    step(`Selecting monitor type: ${monitorType}`);
    await monitorTypeSelect.selectOption(monitorType);

    const selectedValue = await monitorTypeSelect.evaluate(
        (select) => select.value
    );
    expect(selectedValue).toBe(monitorType);
}

test.describe("Monitor Form", () => {
    test.beforeEach(async ({ page }) => {
        await restoreSqliteSnapshot(page);
    });

    test("condition ui", async ({ page }, testInfo) => {

Review comment (bug):
About this function, please remove the parts which make this the testcases harder to read and duplicate that code instead.
DRY is not a goal for testcases, debuggability is.
Sorry if I was unclear about this in https://github.com/louislam/uptime-kuma/pull/5148#issuecomment-2387110283

For example the following would be much better for readability in a testcase

```js
await page.goto("./add");
await login(page);
await screenshot(testInfo, page);
await selectMonitorType("dns")
```


Code after:
import { expect, test } from "@playwright/test";
import { login, restoreSqliteSnapshot, screenshot } from "../util-test";

/**
 * Selects the monitor type from the dropdown.
 * @param {import('@playwright/test').Page} page - The Playwright page instance.
 * @param {string} monitorType - The monitor type to select (default is "dns").
 * @returns {Promise<void>} - A promise that resolves when the monitor type is selected.
 */
async function selectMonitorType(page, monitorType = "dns") {
    const monitorTypeSelect = page.getByTestId("monitor-type-select");
    await expect(monitorTypeSelect).toBeVisible();
    await monitorTypeSelect.selectOption(monitorType);

    const selectedValue = await monitorTypeSelect.evaluate((select) => select.value);
    expect(selectedValue).toBe(monitorType);
}

test.describe("Monitor Form", () => {
    test.beforeEach(async ({ page }) => {
        await restoreSqliteSnapshot(page);
    });

    test("condition ui", async ({ page }, testInfo) => {
        await page.goto("./add");
        await login(page);
        await screenshot(testInfo, page);
        await selectMonitorType(page);

        await page.getByTestId("add-condition-button").click();
        expect(await page.getByTestId("condition").count()).toEqual(2); // 1 added by default + 1 explicitly added

        await page.getByTestId("add-group-button").click();
        expect(await page.getByTestId("condition-group").count()).toEqual(1);
        expect(await page.getByTestId("condition").count()).toEqual(3); // 2 solo conditions + 1 condition in group

        await screenshot(testInfo, page);