admin/DeskClaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add electron e2e harness and regression coverage (#697)

Browse Source
This commit is contained in:
Lingxuan Zuo
2026-03-28 15:34:20 +08:00
committed by GitHub
Unverified
parent 514a6c4112
commit 2668082809
22 changed files with 535 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/layout/MainLayout.tsx
View File

@@ -8,14 +8,14 @@ import { TitleBar } from './TitleBar';
export function MainLayout() {
return (
<div className="flex h-screen flex-col overflow-hidden bg-background">
<div data-testid="main-layout" className="flex h-screen flex-col overflow-hidden bg-background">
{/* Title bar: drag region on macOS, icon + controls on Windows */}
<TitleBar />
{/* Below the title bar: sidebar + content */}
<div className="flex flex-1 overflow-hidden">
<Sidebar />
<main className="flex-1 overflow-auto p-6">
<main data-testid="main-content" className="flex-1 overflow-auto p-6">
<Outlet />
</main>
</div>

20
src/components/layout/Sidebar.tsx
View File

@@ -46,13 +46,15 @@ interface NavItemProps {
badge?: string;
collapsed?: boolean;
onClick?: () => void;
testId?: string;
}
function NavItem({ to, icon, label, badge, collapsed, onClick }: NavItemProps) {
function NavItem({ to, icon, label, badge, collapsed, onClick, testId }: NavItemProps) {
return (
<NavLink
to={to}
onClick={onClick}
data-testid={testId}
className={({ isActive }) =>
cn(
'flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[14px] font-medium transition-colors',
@@ -206,15 +208,16 @@ export function Sidebar() {
}
const navItems = [
{ to: '/models', icon: <Cpu className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.models') },
{ to: '/agents', icon: <Bot className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.agents') },
{ to: '/channels', icon: <Network className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.channels') },
{ to: '/skills', icon: <Puzzle className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.skills') },
{ to: '/cron', icon: <Clock className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.cronTasks') },
{ to: '/models', icon: <Cpu className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.models'), testId: 'sidebar-nav-models' },
{ to: '/agents', icon: <Bot className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.agents'), testId: 'sidebar-nav-agents' },
{ to: '/channels', icon: <Network className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.channels'), testId: 'sidebar-nav-channels' },
{ to: '/skills', icon: <Puzzle className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.skills'), testId: 'sidebar-nav-skills' },
{ to: '/cron', icon: <Clock className="h-[18px] w-[18px]" strokeWidth={2} />, label: t('sidebar.cronTasks'), testId: 'sidebar-nav-cron' },
];
return (
<aside
data-testid="sidebar"
className={cn(
'flex shrink-0 flex-col border-r bg-[#eae8e1]/60 dark:bg-background transition-all duration-300',
sidebarCollapsed ? 'w-16' : 'w-64'
@@ -247,6 +250,7 @@ export function Sidebar() {
{/* Navigation */}
<nav className="flex flex-col px-2 gap-0.5">
<button
data-testid="sidebar-new-chat"
onClick={() => {
const { messages } = useChatStore.getState();
if (messages.length > 0) newSession();
@@ -334,6 +338,7 @@ export function Sidebar() {
<div className="p-2 mt-auto">
<NavLink
to="/settings"
data-testid="sidebar-nav-settings"
className={({ isActive }) =>
cn(
'flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-[14px] font-medium transition-colors',
@@ -354,6 +359,7 @@ export function Sidebar() {
</NavLink>
<Button
data-testid="sidebar-open-dev-console"
variant="ghost"
className={cn(
'flex items-center gap-2.5 rounded-lg px-2.5 py-2 h-auto text-[14px] font-medium transition-colors w-full mt-1',
@@ -391,4 +397,4 @@ export function Sidebar() {
/>
</aside>
);
}
}

28
src/components/settings/ProvidersSettings.tsx
View File

@@ -240,12 +240,12 @@ export function ProvidersSettings() {
};
return (
<div className="space-y-6">
<div data-testid="providers-settings" className="space-y-6">
<div className="flex items-center justify-between">
<h2 className="text-3xl font-serif text-foreground font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
<h2 data-testid="providers-settings-title" className="text-3xl font-serif text-foreground font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
{t('aiProviders.title', 'AI Providers')}
</h2>
<Button onClick={() => setShowAddDialog(true)} className="rounded-full px-5 h-9 shadow-none font-medium text-[13px]">
<Button data-testid="providers-add-button" onClick={() => setShowAddDialog(true)} className="rounded-full px-5 h-9 shadow-none font-medium text-[13px]">
<Plus className="h-4 w-4 mr-2" />
{t('aiProviders.add')}
</Button>
@@ -256,7 +256,7 @@ export function ProvidersSettings() {
<Loader2 className="h-6 w-6 animate-spin" />
</div>
) : displayProviders.length === 0 ? (
<div className="flex flex-col items-center justify-center py-20 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
<div data-testid="providers-empty-state" className="flex flex-col items-center justify-center py-20 text-muted-foreground bg-black/5 dark:bg-white/5 rounded-3xl border border-transparent border-dashed">
<Key className="h-12 w-12 mb-4 opacity-50" />
<h3 className="text-[15px] font-medium mb-1 text-foreground">{t('aiProviders.empty.title')}</h3>
<p className="text-[13px] text-center mb-6 max-w-sm">
@@ -505,6 +505,7 @@ function ProviderCard({
return (
<div
data-testid={`provider-card-${account.id}`}
className={cn(
"group flex flex-col p-4 rounded-2xl transition-all relative overflow-hidden hover:bg-black/5 dark:hover:bg-white/5",
isDefault
@@ -569,10 +570,11 @@ function ProviderCard({
{!isEditing && (
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
{!isDefault && (
<Button
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-blue-600 hover:bg-white dark:hover:bg-card shadow-sm"
<Button
data-testid={`provider-set-default-${account.id}`}
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-blue-600 hover:bg-white dark:hover:bg-card shadow-sm"
onClick={onSetDefault}
title={t('aiProviders.card.setDefault')}
>
@@ -580,6 +582,7 @@ function ProviderCard({
</Button>
)}
<Button
data-testid={`provider-edit-${account.id}`}
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-white dark:hover:bg-card shadow-sm"
@@ -589,6 +592,7 @@ function ProviderCard({
<Edit className="h-4 w-4" />
</Button>
<Button
data-testid={`provider-delete-${account.id}`}
variant="ghost"
size="icon"
className="h-8 w-8 rounded-full text-muted-foreground hover:text-destructive hover:bg-white dark:hover:bg-card shadow-sm"
@@ -1205,7 +1209,7 @@ function AddProviderDialog({
};
return (
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
<div data-testid="add-provider-dialog" className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
<Card className="w-full max-w-2xl max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-[#f3f1e9] dark:bg-card overflow-hidden">
<CardHeader className="relative pb-2 shrink-0">
<CardTitle className="text-2xl font-serif font-normal">{t('aiProviders.dialog.title')}</CardTitle>
@@ -1213,6 +1217,7 @@ function AddProviderDialog({
{t('aiProviders.dialog.desc')}
</CardDescription>
<Button
data-testid="add-provider-close-button"
variant="ghost"
size="icon"
className="absolute right-4 top-4 rounded-full h-8 w-8 -mr-2 -mt-2 text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
@@ -1226,6 +1231,7 @@ function AddProviderDialog({
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
{availableTypes.map((type) => (
<button
data-testid={`add-provider-type-${type.id}`}
key={type.id}
onClick={() => {
setSelectedType(type.id);
@@ -1296,6 +1302,7 @@ function AddProviderDialog({
<div className="space-y-2.5">
<Label htmlFor="name" className={labelClasses}>{t('aiProviders.dialog.displayName')}</Label>
<Input
data-testid="add-provider-name-input"
id="name"
placeholder={typeInfo?.id === 'custom' ? t('aiProviders.custom') : typeInfo?.name}
value={name}
@@ -1347,6 +1354,7 @@ function AddProviderDialog({
</div>
<div className="relative">
<Input
data-testid="add-provider-api-key-input"
id="apiKey"
type={showKey ? 'text' : 'password'}
placeholder={typeInfo?.id === 'ollama' ? t('aiProviders.notRequired') : typeInfo?.placeholder}
@@ -1378,6 +1386,7 @@ function AddProviderDialog({
<div className="space-y-2.5">
<Label htmlFor="baseUrl" className={labelClasses}>{t('aiProviders.dialog.baseUrl')}</Label>
<Input
data-testid="add-provider-base-url-input"
id="baseUrl"
placeholder={getProtocolBaseUrlPlaceholder(apiProtocol)}
value={baseUrl}
@@ -1391,6 +1400,7 @@ function AddProviderDialog({
<div className="space-y-2.5">
<Label htmlFor="modelId" className={labelClasses}>{t('aiProviders.dialog.modelId')}</Label>
<Input
data-testid="add-provider-model-id-input"
id="modelId"
placeholder={typeInfo?.modelIdPlaceholder || 'provider/model-id'}
value={modelId}