From d4e84652d8936db5a62137e2a032926e203b50a2 Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Fri, 27 Sep 2024 07:13:41 +0300
Subject: [PATCH] Fix flaky test from #4995 (#4999)

* Fix flaky test from #4995

* Fix flaky preferences test
---
 frontend/src/pages/preferences.vue               | 5 +++++
 frontend/test/playwright/e2e/attribution.spec.ts | 5 ++++-
 frontend/test/playwright/e2e/preferences.spec.ts | 6 +++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

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/attribution.spec.ts b/frontend/test/playwright/e2e/attribution.spec.ts
index bab45b33394..538de279a98 100644
--- a/frontend/test/playwright/e2e/attribution.spec.ts
+++ b/frontend/test/playwright/e2e/attribution.spec.ts
@@ -17,13 +17,16 @@ const copyAttribution = async (
 ) => {
   const formatPattern = new RegExp(formatTitle[formatId], "i")
 
+  // Ensure the page is fully hydrated before interacting with it.
+  const copyButton = getCopyButton(page)
+  await expect(copyButton).toBeEnabled()
+
   await page.getByRole("tab", { name: formatPattern }).click()
 
   await expect(
     page.getByRole("tabpanel", { name: formatPattern })
   ).toBeVisible()
 
-  const copyButton = getCopyButton(page)
   await expect(copyButton).toHaveAttribute("id", `copyattr-${formatId}`)
   await copyButton.click()
 
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"
       ]