test(app): more e2e tests (#13162)

packages/app/e2e/settings/settings.spec.ts

@@ -9,6 +9,8 @@ import {
   settingsNotificationsPermissionsSelector,
   settingsReleaseNotesSelector,
   settingsSoundsAgentSelector,
+  settingsSoundsErrorsSelector,
+  settingsSoundsPermissionsSelector,
   settingsThemeSelector,
   settingsUpdatesStartupSelector,
 } from "../selectors"
@@ -139,6 +141,105 @@ test("changing font persists in localStorage and updates CSS variable", async ({
   expect(newFontFamily).not.toBe(initialFontFamily)
 })
 
+test("color scheme and font rehydrate after reload", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const dialog = await openSettings(page)
+
+  const colorSchemeSelect = dialog.locator(settingsColorSchemeSelector)
+  await expect(colorSchemeSelect).toBeVisible()
+  await colorSchemeSelect.locator('[data-slot="select-select-trigger"]').click()
+  await page.locator('[data-slot="select-select-item"]').filter({ hasText: "Dark" }).click()
+  await expect(page.locator("html")).toHaveAttribute("data-color-scheme", "dark")
+
+  const fontSelect = dialog.locator(settingsFontSelector)
+  await expect(fontSelect).toBeVisible()
+
+  const initialFontFamily = await page.evaluate(() => {
+    return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim()
+  })
+
+  const initialSettings = await page.evaluate((key) => {
+    const raw = localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : null
+  }, settingsKey)
+
+  const currentFont =
+    (await fontSelect.locator('[data-slot="select-select-trigger-value"]').textContent())?.trim() ?? ""
+  await fontSelect.locator('[data-slot="select-select-trigger"]').click()
+
+  const fontItems = page.locator('[data-slot="select-select-item"]')
+  expect(await fontItems.count()).toBeGreaterThan(1)
+
+  if (currentFont) {
+    await fontItems.filter({ hasNotText: currentFont }).first().click()
+  }
+  if (!currentFont) {
+    await fontItems.nth(1).click()
+  }
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate((key) => {
+        const raw = localStorage.getItem(key)
+        return raw ? JSON.parse(raw) : null
+      }, settingsKey)
+    })
+    .toMatchObject({
+      appearance: {
+        font: expect.any(String),
+      },
+    })
+
+  const updatedSettings = await page.evaluate((key) => {
+    const raw = localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : null
+  }, settingsKey)
+
+  const updatedFontFamily = await page.evaluate(() => {
+    return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim()
+  })
+  expect(updatedFontFamily).not.toBe(initialFontFamily)
+  expect(updatedSettings?.appearance?.font).not.toBe(initialSettings?.appearance?.font)
+
+  await closeDialog(page, dialog)
+  await page.reload()
+
+  await expect(page.locator("html")).toHaveAttribute("data-color-scheme", "dark")
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate((key) => {
+        const raw = localStorage.getItem(key)
+        return raw ? JSON.parse(raw) : null
+      }, settingsKey)
+    })
+    .toMatchObject({
+      appearance: {
+        font: updatedSettings?.appearance?.font,
+      },
+    })
+
+  const rehydratedSettings = await page.evaluate((key) => {
+    const raw = localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : null
+  }, settingsKey)
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate(() => {
+        return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim()
+      })
+    })
+    .not.toBe(initialFontFamily)
+
+  const rehydratedFontFamily = await page.evaluate(() => {
+    return getComputedStyle(document.documentElement).getPropertyValue("--font-family-mono").trim()
+  })
+  expect(rehydratedFontFamily).not.toBe(initialFontFamily)
+  expect(rehydratedSettings?.appearance?.font).toBe(updatedSettings?.appearance?.font)
+})
+
 test("toggling notification agent switch updates localStorage", async ({ page, gotoSession }) => {
   await gotoSession()
 
@@ -234,6 +335,67 @@ test("changing sound agent selection persists in localStorage", async ({ page, g
   expect(stored?.sounds?.agent).not.toBe("staplebops-01")
 })
 
+test("changing permissions and errors sounds updates localStorage", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  const dialog = await openSettings(page)
+  const permissionsSelect = dialog.locator(settingsSoundsPermissionsSelector)
+  const errorsSelect = dialog.locator(settingsSoundsErrorsSelector)
+  await expect(permissionsSelect).toBeVisible()
+  await expect(errorsSelect).toBeVisible()
+
+  const initial = await page.evaluate((key) => {
+    const raw = localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : null
+  }, settingsKey)
+
+  const permissionsCurrent =
+    (await permissionsSelect.locator('[data-slot="select-select-trigger-value"]').textContent())?.trim() ?? ""
+  await permissionsSelect.locator('[data-slot="select-select-trigger"]').click()
+  const permissionItems = page.locator('[data-slot="select-select-item"]')
+  expect(await permissionItems.count()).toBeGreaterThan(1)
+  if (permissionsCurrent) {
+    await permissionItems.filter({ hasNotText: permissionsCurrent }).first().click()
+  }
+  if (!permissionsCurrent) {
+    await permissionItems.nth(1).click()
+  }
+
+  const errorsCurrent =
+    (await errorsSelect.locator('[data-slot="select-select-trigger-value"]').textContent())?.trim() ?? ""
+  await errorsSelect.locator('[data-slot="select-select-trigger"]').click()
+  const errorItems = page.locator('[data-slot="select-select-item"]')
+  expect(await errorItems.count()).toBeGreaterThan(1)
+  if (errorsCurrent) {
+    await errorItems.filter({ hasNotText: errorsCurrent }).first().click()
+  }
+  if (!errorsCurrent) {
+    await errorItems.nth(1).click()
+  }
+
+  await expect
+    .poll(async () => {
+      return await page.evaluate((key) => {
+        const raw = localStorage.getItem(key)
+        return raw ? JSON.parse(raw) : null
+      }, settingsKey)
+    })
+    .toMatchObject({
+      sounds: {
+        permissions: expect.any(String),
+        errors: expect.any(String),
+      },
+    })
+
+  const stored = await page.evaluate((key) => {
+    const raw = localStorage.getItem(key)
+    return raw ? JSON.parse(raw) : null
+  }, settingsKey)
+
+  expect(stored?.sounds?.permissions).not.toBe(initial?.sounds?.permissions)
+  expect(stored?.sounds?.errors).not.toBe(initial?.sounds?.errors)
+})
+
 test("toggling updates startup switch updates localStorage", async ({ page, gotoSession }) => {
   await gotoSession()