From 1397e88e73c6137b428034807d0dc09a2de1fca2 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 26 Sep 2024 21:56:49 +0300
Subject: [PATCH] Fix flaky preferences test

---
 frontend/src/pages/preferences.vue               | 5 +++++
 frontend/test/playwright/e2e/preferences.spec.ts | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/preferences.vue b/frontend/src/pages/preferences.vue
index b914c5db5ea..078d5cd524b 100644
--- a/frontend/src/pages/preferences.vue
+++ b/frontend/src/pages/preferences.vue
@@ -7,6 +7,8 @@ import { useFeatureFlagStore } from "~/stores/feature-flag"
 import { isFlagName } from "~/types/feature-flag"
 import { SWITCHABLE, ON, OFF } from "~/constants/feature-flag"
 
+import { useHydrating } from "~/composables/use-hydrating"
+
 import VContentPage from "~/components/VContentPage.vue"
 import VCheckbox from "~/components/VCheckbox/VCheckbox.vue"
 
@@ -50,6 +52,8 @@ const flagsBySwitchable = computed(() => {
 const featureGroups = computed(() => {
   return featureFlagStore.getFeatureGroups()
 })
+
+const doneHydrating = computed(() => useHydrating())
 </script>
 
 <template>
@@ -86,6 +90,7 @@ const featureGroups = computed(() => {
             class="flex-row items-center"
             :checked="flag.state === ON"
             is-switch
+            :disabled="!doneHydrating"
             @change="handleChange"
             >{{ $t(`prefPage.features.${flag.name}`) }}</VCheckbox
           >
diff --git a/frontend/test/playwright/e2e/preferences.spec.ts b/frontend/test/playwright/e2e/preferences.spec.ts
index db154dd3cd0..91128306b0c 100644
--- a/frontend/test/playwright/e2e/preferences.spec.ts
+++ b/frontend/test/playwright/e2e/preferences.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect, Page } from "@playwright/test"
+import { expect, Page, test } from "@playwright/test"
 
 import { preparePageForTests } from "~~/test/playwright/utils/navigation"
 
@@ -114,8 +114,12 @@ test.describe("switchable features", () => {
     }) => {
       await page.goto(`/preferences`)
       const featureFlag = await getSwitchableInput(page, name, checked)
+
       await featureFlag.click()
 
+      // Ensure the feature flag is updated
+      await getSwitchableInput(page, name, !checked)
+
       const storageCookie = { cookie: "features", session: "sessionFeatures" }[
         featureData.features[name as FlagName].storage as "cookie" | "session"
       ]