Files
nvfp4_gguf_quant/llama.cpp/tools/ui/tests/client/reasoning-control-mobile.svelte.test.ts
T

42 lines
1.5 KiB
TypeScript

// Guards the phone shape of the reasoning control: a phone picks the effort in a drawer,
// since a dropdown of small rows is not a touch target.
import ChatFormActionReasoning from '$lib/components/app/chat/ChatForm/ChatFormActions/ChatFormActionReasoning.svelte';
import { ServerRole } from '$lib/enums';
import { serverStore } from '$lib/stores/server.svelte';
import { afterEach, beforeEach, describe, expect, it } from 'vitest';
import { page } from 'vitest/browser';
import { render } from 'vitest-browser-svelte';
const PHONE = { height: 844, width: 390 };
const DESKTOP = { height: 900, width: 1280 };
describe('reasoning control on a phone', () => {
beforeEach(async () => {
serverStore.role = ServerRole.ROUTER;
await page.viewport(PHONE.width, PHONE.height);
});
afterEach(async () => {
await page.viewport(DESKTOP.width, DESKTOP.height);
});
it('offers the effort levels in a drawer', async () => {
const screen = render(ChatFormActionReasoning);
await screen.getByRole('button', { name: 'Reasoning effort' }).click();
await expect.element(screen.getByRole('button', { name: /^Off$/ })).toBeVisible();
await expect.element(screen.getByRole('button', { name: /^Max/ })).toBeVisible();
});
it('closes the drawer once a level is picked', async () => {
const screen = render(ChatFormActionReasoning);
await screen.getByRole('button', { name: 'Reasoning effort' }).click();
await screen.getByRole('button', { name: 'Low' }).click();
await expect.poll(() => screen.getByRole('button', { name: 'Low' }).query()).toBeNull();
});
});