unflake

assets/js/components/Savings/Savings.vue

@@ -31,7 +31,7 @@
 				data-bs-backdrop="true"
 				tabindex="-1"
 				role="dialog"
-				aria-hidden="true"
+				:aria-hidden="modalVisible ? 'false' : 'true'"
 				data-testid="savings-modal"
 			>
 				<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
@@ -306,10 +306,21 @@ export default defineComponent({
 		return {
 			communityView: false,
 			telemetryEnabled: false,
+			modalVisible: false,
 			period: settings.savingsPeriod || ("30d" as StatisticsPeriod),
 			selectedRegion: settings.savingsRegion || ("Germany" as string),
 		};
 	},
+	mounted() {
+		const modal = this.$refs["modal"] as HTMLElement;
+		modal.addEventListener("shown.bs.modal", this.handleShown);
+		modal.addEventListener("hidden.bs.modal", this.handleHidden);
+	},
+	unmounted() {
+		const modal = this.$refs["modal"] as HTMLElement;
+		modal?.removeEventListener("shown.bs.modal", this.handleShown);
+		modal?.removeEventListener("hidden.bs.modal", this.handleHidden);
+	},
 	computed: {
 		sponsorActive(): boolean {
 			return !!this.sponsor?.status?.name;
@@ -429,6 +440,12 @@ export default defineComponent({
 			const modal = Modal.getOrCreateInstance(this.$refs["modal"] as HTMLElement);
 			modal.show();
 		},
+		handleShown() {
+			this.modalVisible = true;
+		},
+		handleHidden() {
+			this.modalVisible = false;
+		},
 		selectPeriod(period: StatisticsPeriod) {
 			this.period = period;
 			settings.savingsPeriod = period;

tests/statistics.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect } from "@playwright/test";
 import { start, stop, baseUrl } from "./evcc";
+import { expectModalVisible, expectModalHidden } from "./utils";
 
 test.use({ baseURL: baseUrl() });
 
@@ -20,21 +21,21 @@ test.describe("footer", async () => {
     // last 365 days
     await page.getByTestId("savings-button").click();
     const savingsModal = page.getByTestId("savings-modal");
-    await expect(savingsModal).toBeVisible();
+    await expectModalVisible(savingsModal);
     await page
       .getByTestId("savings-period-select")
       .getByRole("combobox")
       .selectOption("last 365 days");
     await page.getByRole("button", { name: "Close" }).click();
-    await expect(savingsModal).not.toBeVisible();
+    await expectModalHidden(savingsModal);
     await expect(page.getByTestId("savings-button")).toContainText("30%");
 
     // all time
     await page.getByTestId("savings-button").click();
-    await expect(savingsModal).toBeVisible();
+    await expectModalVisible(savingsModal);
     await page.getByTestId("savings-period-select").getByRole("combobox").selectOption("all time");
     await page.getByRole("button", { name: "Close" }).click();
-    await expect(savingsModal).not.toBeVisible();
+    await expectModalHidden(savingsModal);
     await expect(page.getByTestId("savings-button")).toContainText("50%");
   });
 });
@@ -43,7 +44,7 @@ test.describe("statistics values", async () => {
   test("last 30 days", async ({ page }) => {
     await page.goto("/");
     await page.getByTestId("savings-button").click();
-    await expect(page.getByTestId("savings-modal")).toBeVisible();
+    await expectModalVisible(page.getByTestId("savings-modal"));
 
     await page
       .getByTestId("savings-period-select")
@@ -64,7 +65,7 @@ test.describe("statistics values", async () => {
   test("last 365 days", async ({ page }) => {
     await page.goto("/");
     await page.getByTestId("savings-button").click();
-    await expect(page.getByTestId("savings-modal")).toBeVisible();
+    await expectModalVisible(page.getByTestId("savings-modal"));
     await page
       .getByTestId("savings-period-select")
       .getByRole("combobox")
@@ -84,7 +85,7 @@ test.describe("statistics values", async () => {
   test("reference data", async ({ page }) => {
     await page.goto("/");
     await page.getByTestId("savings-button").click();
-    await expect(page.getByTestId("savings-modal")).toBeVisible();
+    await expectModalVisible(page.getByTestId("savings-modal"));
 
     await expect(page.getByTestId("savings-reference")).toContainText("Reference data");
     await expect(page.getByTestId("savings-reference")).toContainText("30.0 ct./kWh");
@@ -117,7 +118,7 @@ test.describe("header savings", async () => {
     // open modal, verify values still work
     await page.getByTestId("savings-button").click();
     const savingsModal = page.getByTestId("savings-modal");
-    await expect(savingsModal).toBeVisible();
+    await expectModalVisible(savingsModal);
 
     await expect(page.getByTestId("savings-tile-solar")).toContainText("60.0%");
     await expect(page.getByTestId("savings-tile-price")).toContainText("18.0ct./kWh");
@@ -126,7 +127,7 @@ test.describe("header savings", async () => {
     // switch indicator to "price"
     await page.getByTestId("savings-indicator-select").getByRole("combobox").selectOption("price");
     await page.getByRole("button", { name: "Close" }).click();
-    await expect(savingsModal).not.toBeVisible();
+    await expectModalHidden(savingsModal);
 
     // verify button now shows price
     await expect(page.getByTestId("savings-button")).toContainText("18.0");