evcc-io/tests/issue.spec.ts

import { test, expect } from "@playwright/test";
import { start, stop, restart, baseUrl } from "./evcc";
import { enableExperimental, expectModalVisible, expectModalHidden } from "./utils";

test.use({ baseURL: baseUrl() });

test.afterEach(async () => {
  await stop();
});

const REDACT_CONFIG = "sponsor.evcc.yaml";
const CONFIG = "issue.evcc.yaml";

test.describe("issue creation", () => {
  test("verify evcc.yaml redaction", async ({ page }) => {
    await start(REDACT_CONFIG);
    await page.goto("/#/issue");

    // get configuration (yaml)
    await page
      .getByTestId("issueYamlConfig-additional-item")
      .getByRole("button", { name: "show details" })
      .click();
    const modal = page.getByTestId("issueYamlConfig-modal");
    await expectModalVisible(modal);
    const configContent = await modal.getByRole("textbox").inputValue();

    // check for redation
    expect(configContent).toContain("sponsortoken: *****");
    expect(configContent).toContain("user: *****");
    expect(configContent).toContain("password: *****");

    // ensure redacted values are not present
    expect(configContent).not.toContain("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9");
    expect(configContent).not.toContain("test@example.org");
    expect(configContent).not.toContain("none");

    // verify other poarts
    expect(configContent).toContain("site:");
    expect(configContent).toContain("loadpoints:");
  });

  test("create issue via ui", async ({ page }) => {
    await start(CONFIG);
    await page.goto("/#/config");

    // Enable experimental features
    await enableExperimental(page, false);

    // Create a battery meter
    await page.getByRole("button", { name: "Add solar or battery" }).click();
    await page.getByRole("button", { name: "Add battery meter" }).click();
    const meterModal = page.getByTestId("meter-modal");
    await expectModalVisible(meterModal);
    await meterModal.getByLabel("Title").fill("BigBlueBattery");
    await meterModal.getByLabel("Manufacturer").selectOption("Demo battery");
    await meterModal.getByRole("button", { name: "Validate & save" }).click();
    await expectModalHidden(meterModal);
    await expect(page.getByTestId("battery")).toBeVisible();

    // Restart to apply changes
    await restart(CONFIG);
    await page.reload();

    // Navigate to issue creation from config page
    await page.getByRole("link", { name: "Report a problem" }).click();
    await expect(page.getByRole("heading", { name: "Report a problem" })).toBeVisible();

    await expect(page.getByRole("button", { name: "Start GitHub Discussion..." })).toBeVisible();
    await page.getByRole("radio", { name: "Found a bug" }).click();
    await expect(page.getByRole("button", { name: "Create GitHub Issue..." })).toBeVisible();

    // Fill out the issue form
    await page.getByLabel("Title").fill("Kaboom");
    await page
      .getByLabel("Description")
      .fill("This is a test issue created from the config page workflow");
    await page
      .getByLabel("Steps to reproduce")
      .fill("1. Go to config\n2. Enable experimental\n3. Add battery\n4. Report issue");

    // check yaml data
    const yamlItem = page.getByTestId("issueYamlConfig-additional-item");
    await yamlItem.getByRole("button", { name: "show details" }).click();
    const yamlModal = page.getByTestId("issueYamlConfig-modal");
    await expectModalVisible(yamlModal);
    await expect(yamlModal.getByRole("textbox")).toHaveValue(/carport_pv/);
    await yamlModal.getByRole("button", { name: "Close" }).first().click();
    await expectModalHidden(yamlModal);

    // check ui data
    const uiItem = page.getByTestId("issueUiConfig-additional-item");
    await uiItem.getByRole("button", { name: "show details" }).click();
    const uiModal = page.getByTestId("issueUiConfig-modal");
    await expectModalVisible(uiModal);
    await expect(uiModal.getByRole("textbox")).toHaveValue(/BigBlueBattery/);
    await uiModal.getByRole("button", { name: "Close" }).first().click();
    await expectModalHidden(uiModal);

    // check log data
    const logsItem = page.getByTestId("issueLogs-additional-item");
    await logsItem.getByRole("button", { name: "show details" }).click();
    const logsModal = page.getByTestId("issueLogs-modal");
    await expectModalVisible(logsModal);
    await expect(logsModal.getByRole("textbox")).toHaveValue(/DEBUG/);
    await logsModal.getByRole("button", { name: "Close" }).first().click();
    await expectModalHidden(logsModal);

    // check state
    const stateItem = page.getByTestId("issueState-additional-item");
    await stateItem.getByRole("button", { name: "show details" }).click();
    const stateModal = page.getByTestId("issueState-modal");
    await expectModalVisible(stateModal);
    await expect(stateModal.getByRole("textbox")).toHaveValue(/"telemetry":/);
    await stateModal.getByRole("button", { name: "Close" }).first().click();
    await expectModalHidden(stateModal);

    const stateSwitch = stateItem.getByRole("switch", { name: "include" });
    await stateSwitch.check();
    await expect(stateSwitch).toBeChecked();

    await page.getByRole("button", { name: "Create GitHub Issue..." }).click();

    // 2-step process
    const summaryModal = page.getByTestId("issue-summary-modal");
    await expectModalVisible(summaryModal);
    await expect(summaryModal.getByRole("heading", { name: /GitHub Problem/ })).toBeVisible();
    await expect(summaryModal.getByRole("heading", { name: /Step 1:/ })).toBeVisible();
    await expect(summaryModal.getByRole("heading", { name: /Step 2:/ })).toBeVisible();

    // check info in textarea
    const textarea = summaryModal.getByTestId("issue-summary-modal-textarea");
    await expect(textarea).toBeVisible();
    const textareaContent = await textarea.inputValue();
    expect(textareaContent).toContain("carport_pv"); // from evcc.yaml
    expect(textareaContent).toContain("BigBlueBattery"); // from ui config
    expect(textareaContent).toContain("DEBUG"); // from logs
    expect(textareaContent).toContain('"telemetry":'); // from state

    // check only basics in github link
    let href = await summaryModal
      .getByRole("link", { name: "Create GitHub Issue" })
      .getAttribute("href");
    expect(href).toContain("https://github.com/evcc-io/evcc/issues/new?title=Kaboom&body=");
    expect(href).not.toContain("BigBlueBattery"); // from ui config
    expect(href).not.toContain("carport_pv"); // from evcc.yaml

    // close modal
    await summaryModal.getByRole("button", { name: "Close" }).click();
    await expectModalHidden(summaryModal);

    // replace long state with short custom message
    await stateItem.getByRole("button", { name: "show details" }).click();
    await expectModalVisible(stateModal);
    await stateModal.getByRole("textbox").fill("MyFancyState");
    await stateModal.getByRole("button", { name: "Apply & close" }).first().click();
    await expectModalHidden(stateModal);

    // single-step process
    await page.getByRole("button", { name: "Create GitHub Issue..." }).click();
    await expectModalVisible(summaryModal);
    await expect(summaryModal.getByRole("heading", { name: /Step 1:/ })).not.toBeVisible();
    await expect(summaryModal.getByRole("heading", { name: /Step 2:/ })).not.toBeVisible();

    // verify contents in github link
    href = await summaryModal
      .getByRole("link", { name: "Create GitHub Issue" })
      .getAttribute("href");
    expect(href).toContain("https://github.com/evcc-io/evcc/issues/new?title=Kaboom&body=");
    expect(href).toContain("BigBlueBattery"); // from ui config
    expect(href).toContain("carport_pv"); // from evcc.yaml
    expect(href).toContain("DEBUG"); // from logs
    expect(href).toContain("MyFancyState"); // from state
  });
});