From 3fe95aeda13fd512da0d6c99a472526f2372aef5 Mon Sep 17 00:00:00 2001
From: sarayourfriend <git@sarayourfriend.pictures>
Date: Thu, 26 Sep 2024 14:08:40 -0600
Subject: [PATCH 1/2] Collect lighthouse CI on each frontend change (#4994)

* Collect lighthouse CI on each frontend change

* Fix substitution in recipe

* Add the token to the environment

* Only run if nuxt-build finished successfully

* Upload LHCI artifacts

* Report lighthouse results in action

* Build and run with node_env production
---
 .github/.lighthouserc.yml   | 11 +++++++++++
 .github/workflows/ci_cd.yml | 37 +++++++++++++++++++++++++++++++++++++
 justfile                    |  1 +
 3 files changed, 49 insertions(+)
 create mode 100644 .github/.lighthouserc.yml

diff --git a/.github/.lighthouserc.yml b/.github/.lighthouserc.yml
new file mode 100644
index 00000000000..5a4b315c8de
--- /dev/null
+++ b/.github/.lighthouserc.yml
@@ -0,0 +1,11 @@
+ci:
+  collect:
+    url:
+      - http://127.0.0.1:8443/
+    startServerCommand: "just p frontend start"
+    startServerReadyPattern: "Listening on http"
+  upload:
+    # temporary target until either temporary-public-storage is back
+    # (https://github.com/GoogleChrome/lighthouse-ci/issues/1072)
+    # or we spin up our own Openverse lhci server
+    target: "filesystem"
diff --git a/.github/workflows/ci_cd.yml b/.github/workflows/ci_cd.yml
index 6b091745e8e..883492f4da8 100644
--- a/.github/workflows/ci_cd.yml
+++ b/.github/workflows/ci_cd.yml
@@ -1014,6 +1014,43 @@ jobs:
           issue-number: ${{ github.event.pull_request.number }}
           body: ${{ steps.help-body.outputs.help_body }}
 
+  lighthouse-ci:
+    name: Collect Lighthouse CI results
+    runs-on: ubuntu-latest
+    needs:
+      - nuxt-build
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup CI env
+        uses: ./.github/actions/setup-env
+        with:
+          setup_python: false
+          install_recipe: node-install
+
+      - name: Run build
+        run: just frontend/run build
+        env:
+          DEPLOYMENT_ENV: production
+          NODE_ENV: production
+
+      - name: Run Lighthouse CI
+        id: lhci-autorun
+        # Lighthouse CI runs the webserver for us, as configured in lighthouserc
+        env:
+          NODE_ENV: production
+        run: |
+          pnpm --package=@lhci/cli dlx lhci autorun --config .github/.lighthouserc.yml
+
+      - name: Display Report
+        if: always()
+        uses: jackywithawhitedog/lighthouse-viewer-action@v2
+        with:
+          resultsPath: .lighthouseci
+          lighthouseOutcome: ${{ steps.lhci-autorun.outcome }}
+
   #################
   # Documentation #
   #################
diff --git a/justfile b/justfile
index 037ef385ab9..22a44214172 100644
--- a/justfile
+++ b/justfile
@@ -350,6 +350,7 @@ f:
 # alias for `pnpm --filter {package} run {script}`
 [positional-arguments]
 p package script *args:
+    #!/usr/bin/env bash
     pnpm --filter {{ package }} run {{ script }} "${@:3}"
 
 # Run eslint with --fix and default file selection enabled; used to enable easy file overriding whilst retaining the defaults when running --all-files

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 2/2] 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"
       ]