test(app): general settings, shortcuts, providers and status popover (#11517)

packages/app/src/components/settings-general.tsx

@@ -165,6 +165,7 @@ export const SettingsGeneral: Component = () => {
               description={language.t("settings.general.row.appearance.description")}
             >
               <Select
+                data-action="settings-color-scheme"
                 options={colorSchemeOptions()}
                 current={colorSchemeOptions().find((o) => o.value === theme.colorScheme())}
                 value={(o) => o.value}
@@ -191,6 +192,7 @@ export const SettingsGeneral: Component = () => {
               }
             >
               <Select
+                data-action="settings-theme"
                 options={themeOptions()}
                 current={themeOptions().find((o) => o.id === theme.themeId())}
                 value={(o) => o.id}
@@ -215,6 +217,7 @@ export const SettingsGeneral: Component = () => {
               description={language.t("settings.general.row.font.description")}
             >
               <Select
+                data-action="settings-font"
                 options={fontOptionsList}
                 current={fontOptionsList.find((o) => o.value === settings.appearance.font())}
                 value={(o) => o.value}
@@ -244,30 +247,36 @@ export const SettingsGeneral: Component = () => {
               title={language.t("settings.general.notifications.agent.title")}
               description={language.t("settings.general.notifications.agent.description")}
             >
-              <Switch
-                checked={settings.notifications.agent()}
-                onChange={(checked) => settings.notifications.setAgent(checked)}
-              />
+              <div data-action="settings-notifications-agent">
+                <Switch
+                  checked={settings.notifications.agent()}
+                  onChange={(checked) => settings.notifications.setAgent(checked)}
+                />
+              </div>
             </SettingsRow>
 
             <SettingsRow
               title={language.t("settings.general.notifications.permissions.title")}
               description={language.t("settings.general.notifications.permissions.description")}
             >
-              <Switch
-                checked={settings.notifications.permissions()}
-                onChange={(checked) => settings.notifications.setPermissions(checked)}
-              />
+              <div data-action="settings-notifications-permissions">
+                <Switch
+                  checked={settings.notifications.permissions()}
+                  onChange={(checked) => settings.notifications.setPermissions(checked)}
+                />
+              </div>
             </SettingsRow>
 
             <SettingsRow
               title={language.t("settings.general.notifications.errors.title")}
               description={language.t("settings.general.notifications.errors.description")}
             >
-              <Switch
-                checked={settings.notifications.errors()}
-                onChange={(checked) => settings.notifications.setErrors(checked)}
-              />
+              <div data-action="settings-notifications-errors">
+                <Switch
+                  checked={settings.notifications.errors()}
+                  onChange={(checked) => settings.notifications.setErrors(checked)}
+                />
+              </div>
             </SettingsRow>
           </div>
         </div>
@@ -282,6 +291,7 @@ export const SettingsGeneral: Component = () => {
               description={language.t("settings.general.sounds.agent.description")}
             >
               <Select
+                data-action="settings-sounds-agent"
                 options={soundOptions}
                 current={soundOptions.find((o) => o.id === settings.sounds.agent())}
                 value={(o) => o.id}
@@ -306,6 +316,7 @@ export const SettingsGeneral: Component = () => {
               description={language.t("settings.general.sounds.permissions.description")}
             >
               <Select
+                data-action="settings-sounds-permissions"
                 options={soundOptions}
                 current={soundOptions.find((o) => o.id === settings.sounds.permissions())}
                 value={(o) => o.id}
@@ -330,6 +341,7 @@ export const SettingsGeneral: Component = () => {
               description={language.t("settings.general.sounds.errors.description")}
             >
               <Select
+                data-action="settings-sounds-errors"
                 options={soundOptions}
                 current={soundOptions.find((o) => o.id === settings.sounds.errors())}
                 value={(o) => o.id}
@@ -360,21 +372,25 @@ export const SettingsGeneral: Component = () => {
               title={language.t("settings.updates.row.startup.title")}
               description={language.t("settings.updates.row.startup.description")}
             >
-              <Switch
-                checked={settings.updates.startup()}
-                disabled={!platform.checkUpdate}
-                onChange={(checked) => settings.updates.setStartup(checked)}
-              />
+              <div data-action="settings-updates-startup">
+                <Switch
+                  checked={settings.updates.startup()}
+                  disabled={!platform.checkUpdate}
+                  onChange={(checked) => settings.updates.setStartup(checked)}
+                />
+              </div>
             </SettingsRow>
 
             <SettingsRow
               title={language.t("settings.general.row.releaseNotes.title")}
               description={language.t("settings.general.row.releaseNotes.description")}
             >
-              <Switch
-                checked={settings.general.releaseNotes()}
-                onChange={(checked) => settings.general.setReleaseNotes(checked)}
-              />
+              <div data-action="settings-release-notes">
+                <Switch
+                  checked={settings.general.releaseNotes()}
+                  onChange={(checked) => settings.general.setReleaseNotes(checked)}
+                />
+              </div>
             </SettingsRow>
 
             <SettingsRow

packages/app/src/components/settings-keybinds.tsx

@@ -396,6 +396,7 @@ export const SettingsKeybinds: Component = () => {
                         <span class="text-14-regular text-text-strong">{title(id)}</span>
                         <button
                           type="button"
+                          data-keybind-id={id}
                           classList={{
                             "h-8 px-3 rounded-md text-12-regular": true,
                             "bg-surface-base text-text-subtle hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active":

packages/app/src/components/settings-providers.tsx

@@ -123,7 +123,7 @@ export const SettingsProviders: Component = () => {
       </div>
 
       <div class="flex flex-col gap-8 max-w-[720px]">
-        <div class="flex flex-col gap-1">
+        <div class="flex flex-col gap-1" data-component="connected-providers-section">
           <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.providers.section.connected")}</h3>
           <div class="bg-surface-raised-base px-4 rounded-lg">
             <Show
@@ -225,7 +225,10 @@ export const SettingsProviders: Component = () => {
               )}
             </For>
 
-            <div class="flex items-center justify-between gap-4 h-16 border-b border-border-weak-base last:border-none">
+            <div
+              class="flex items-center justify-between gap-4 h-16 border-b border-border-weak-base last:border-none"
+              data-component="custom-provider-section"
+            >
               <div class="flex flex-col min-w-0">
                 <div class="flex items-center gap-x-3">
                   <ProviderIcon id={icon("synthetic")} class="size-5 shrink-0 icon-strong-base" />