test(app): test for toggling model variant (#11221)

Author: neriousy

packages/app/e2e/thinking-level.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from "./fixtures"
+import { modelVariantCycleSelector } from "./utils"
+
+test("smoke model variant cycle updates label", async ({ page, gotoSession }) => {
+  await gotoSession()
+
+  await page.addStyleTag({
+    content: `${modelVariantCycleSelector} { display: inline-block !important; }`,
+  })
+
+  const button = page.locator(modelVariantCycleSelector)
+  const exists = (await button.count()) > 0
+  test.skip(!exists, "current model has no variants")
+  if (!exists) return
+
+  await expect(button).toBeVisible()
+
+  const before = (await button.innerText()).trim()
+  await button.click()
+  await expect(button).not.toHaveText(before)
+
+  const after = (await button.innerText()).trim()
+  await button.click()
+  await expect(button).not.toHaveText(after)
+})

packages/app/e2e/utils.ts

@@ -12,6 +12,7 @@ export const terminalToggleKey = "Control+Backquote"
 
 export const promptSelector = '[data-component="prompt-input"]'
 export const terminalSelector = '[data-component="terminal"]'
+export const modelVariantCycleSelector = '[data-action="model-variant-cycle"]'
 
 export function createSdk(directory?: string) {
   return createOpencodeClient({ baseUrl: serverUrl, directory, throwOnError: true })

packages/app/src/components/prompt-input.tsx

@@ -1953,6 +1953,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     keybind={command.keybind("model.variant.cycle")}
                   >
                     <Button
+                      data-action="model-variant-cycle"
                       variant="ghost"
                       class="text-text-base _hidden group-hover/prompt-input:inline-block capitalize text-12-regular"
                       onClick={() => local.model.variant.cycle()}