mirror of
https://github.com/khoaliber/LetterFeed.git
synced 2026-03-02 21:19:13 +00:00
v0.1.0
This commit is contained in:
Leon
115
frontend/components/letterfeed/AddNewsletterDialog.tsx
Normal file
115
frontend/components/letterfeed/AddNewsletterDialog.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Plus } from "lucide-react"
|
||||
import { createNewsletter } from "@/lib/api"
|
||||
|
||||
interface AddNewsletterDialogProps {
|
||||
isOpen: boolean
|
||||
onOpenChange: (isOpen: boolean) => void
|
||||
onSuccess: () => void
|
||||
}
|
||||
|
||||
export function AddNewsletterDialog({ isOpen, onOpenChange, onSuccess }: AddNewsletterDialogProps) {
|
||||
const [newNewsletter, setNewNewsletter] = useState({
|
||||
name: "",
|
||||
emails: [""],
|
||||
})
|
||||
|
||||
const handleAddEmail = () => {
|
||||
setNewNewsletter((prev) => ({
|
||||
...prev,
|
||||
emails: [...prev.emails, ""],
|
||||
}))
|
||||
}
|
||||
|
||||
const handleRemoveEmail = (index: number) => {
|
||||
setNewNewsletter((prev) => ({
|
||||
...prev,
|
||||
emails: prev.emails.filter((_, i) => i !== index),
|
||||
}))
|
||||
}
|
||||
|
||||
const handleEmailChange = (index: number, value: string) => {
|
||||
setNewNewsletter((prev) => ({
|
||||
...prev,
|
||||
emails: prev.emails.map((email, i) => (i === index ? value : email)),
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (newNewsletter.name && newNewsletter.emails.some((email) => email.trim())) {
|
||||
try {
|
||||
await createNewsletter({
|
||||
name: newNewsletter.name,
|
||||
sender_emails: newNewsletter.emails.filter((email) => email.trim()),
|
||||
})
|
||||
setNewNewsletter({ name: "", emails: [""] })
|
||||
onOpenChange(false)
|
||||
onSuccess()
|
||||
} catch (error) {
|
||||
console.error("Failed to create newsletter:", error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Register New Newsletter</DialogTitle>
|
||||
<DialogDescription>Add a new newsletter.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Newsletter Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={newNewsletter.name}
|
||||
onChange={(e) => setNewNewsletter((prev) => ({ ...prev, name: e.target.value }))}
|
||||
placeholder="Enter newsletter name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Email Addresses</Label>
|
||||
{newNewsletter.emails.map((email, index) => (
|
||||
<div key={index} className="flex gap-2">
|
||||
<Input
|
||||
value={email}
|
||||
onChange={(e) => handleEmailChange(index, e.target.value)}
|
||||
placeholder="Enter email address"
|
||||
type="email"
|
||||
/>
|
||||
{newNewsletter.emails.length > 1 && (
|
||||
<Button variant="outline" size="sm" onClick={() => handleRemoveEmail(index)}>
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<Button variant="outline" size="sm" onClick={handleAddEmail} className="w-full bg-transparent">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add Another Email
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSubmit}>Register Newsletter</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
139
frontend/components/letterfeed/EditNewsletterDialog.tsx
Normal file
139
frontend/components/letterfeed/EditNewsletterDialog.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
import { useState, useEffect } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Plus } from "lucide-react"
|
||||
import { Newsletter, updateNewsletter, deleteNewsletter } from "@/lib/api"
|
||||
|
||||
interface EditNewsletterDialogProps {
|
||||
newsletter: Newsletter | null
|
||||
isOpen: boolean
|
||||
onOpenChange: (isOpen: boolean) => void
|
||||
onSuccess: () => void
|
||||
}
|
||||
|
||||
export function EditNewsletterDialog({ newsletter, isOpen, onOpenChange, onSuccess }: EditNewsletterDialogProps) {
|
||||
const [editedDetails, setEditedDetails] = useState<{ name: string; emails: string[] }>({
|
||||
name: "",
|
||||
emails: [],
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (newsletter) {
|
||||
setEditedDetails({
|
||||
name: newsletter.name,
|
||||
emails: newsletter.senders.map((s) => s.email),
|
||||
})
|
||||
}
|
||||
}, [newsletter])
|
||||
|
||||
if (!newsletter) return null
|
||||
|
||||
const handleUpdateEmailChange = (index: number, value: string) => {
|
||||
setEditedDetails((prev) => ({
|
||||
...prev,
|
||||
emails: prev.emails.map((email, i) => (i === index ? value : email)),
|
||||
}))
|
||||
}
|
||||
|
||||
const handleAddEmailToEdit = () => {
|
||||
setEditedDetails((prev) => ({
|
||||
...prev,
|
||||
emails: [...prev.emails, ""],
|
||||
}))
|
||||
}
|
||||
|
||||
const handleRemoveEmailFromEdit = (index: number) => {
|
||||
setEditedDetails((prev) => ({
|
||||
...prev,
|
||||
emails: prev.emails.filter((_, i) => i !== index),
|
||||
}))
|
||||
}
|
||||
|
||||
const handleUpdate = async () => {
|
||||
try {
|
||||
await updateNewsletter(newsletter.id, {
|
||||
name: editedDetails.name,
|
||||
sender_emails: editedDetails.emails.filter((email) => email.trim()),
|
||||
})
|
||||
onOpenChange(false)
|
||||
onSuccess()
|
||||
} catch (error) {
|
||||
console.error("Failed to update newsletter:", error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (window.confirm(`Are you sure you want to delete the "${newsletter.name}" newsletter?`)) {
|
||||
try {
|
||||
await deleteNewsletter(newsletter.id)
|
||||
onOpenChange(false)
|
||||
onSuccess()
|
||||
} catch (error) {
|
||||
console.error("Failed to delete newsletter:", error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit Newsletter</DialogTitle>
|
||||
<DialogDescription>Update the details for {newsletter.name}.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-name">Newsletter Name</Label>
|
||||
<Input
|
||||
id="edit-name"
|
||||
value={editedDetails.name}
|
||||
onChange={(e) => setEditedDetails((prev) => ({ ...prev, name: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Email Addresses</Label>
|
||||
{editedDetails.emails.map((email, index) => (
|
||||
<div key={index} className="flex gap-2">
|
||||
<Input
|
||||
value={email}
|
||||
onChange={(e) => handleUpdateEmailChange(index, e.target.value)}
|
||||
placeholder="Enter email address"
|
||||
type="email"
|
||||
/>
|
||||
{editedDetails.emails.length > 1 && (
|
||||
<Button variant="outline" size="sm" onClick={() => handleRemoveEmailFromEdit(index)}>
|
||||
Remove
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<Button variant="outline" size="sm" onClick={handleAddEmailToEdit} className="w-full bg-transparent">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add Another Email
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter className="sm:justify-between">
|
||||
<Button variant="destructive" onClick={handleDelete}>
|
||||
Delete Newsletter
|
||||
</Button>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleUpdate}>Save Changes</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
20
frontend/components/letterfeed/EmptyState.tsx
Normal file
20
frontend/components/letterfeed/EmptyState.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Plus, Rss } from "lucide-react"
|
||||
|
||||
interface EmptyStateProps {
|
||||
onAddNewsletter: () => void
|
||||
}
|
||||
|
||||
export function EmptyState({ onAddNewsletter }: EmptyStateProps) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<Rss className="w-12 h-12 text-gray-400 mx-auto mb-4" />
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">No newsletters registered</h3>
|
||||
<p className="text-gray-600 mb-4">Get started by adding your first newsletter</p>
|
||||
<Button onClick={onAddNewsletter}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add Your First Newsletter
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
34
frontend/components/letterfeed/Header.tsx
Normal file
34
frontend/components/letterfeed/Header.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Plus, Settings } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
|
||||
interface HeaderProps {
|
||||
onOpenAddNewsletter: () => void
|
||||
onOpenSettings: () => void
|
||||
}
|
||||
|
||||
export function Header({ onOpenAddNewsletter, onOpenSettings }: HeaderProps) {
|
||||
return (
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<Image src="/logo.png" alt="LetterFeed Logo" width={48} height={48} className="rounded-lg" />
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">LetterFeed</h1>
|
||||
<p className="text-gray-600 mt-1">Read your newsletters as RSS feeds!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={onOpenAddNewsletter}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add Newsletter
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" onClick={onOpenSettings}>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
9
frontend/components/letterfeed/LoadingSpinner.tsx
Normal file
9
frontend/components/letterfeed/LoadingSpinner.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { Loader2 } from "lucide-react"
|
||||
|
||||
export function LoadingSpinner() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<Loader2 className="w-12 h-12 text-gray-400 animate-spin" data-testid="loading-spinner" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
61
frontend/components/letterfeed/NewsletterCard.tsx
Normal file
61
frontend/components/letterfeed/NewsletterCard.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Rss, Mail, ExternalLink, Edit } from "lucide-react"
|
||||
import { Newsletter, getFeedUrl } from "@/lib/api"
|
||||
|
||||
interface NewsletterCardProps {
|
||||
newsletter: Newsletter
|
||||
onEdit: (newsletter: Newsletter) => void
|
||||
}
|
||||
|
||||
export function NewsletterCard({ newsletter, onEdit }: NewsletterCardProps) {
|
||||
return (
|
||||
<Card className="hover:shadow-md transition-shadow flex flex-col">
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Rss className="w-5 h-5 text-orange-500" />
|
||||
{newsletter.name}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{newsletter.entries_count} entr{newsletter.entries_count !== 1 ? "ies" : "y"}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" onClick={() => onEdit(newsletter)} aria-label="Edit Newsletter">
|
||||
<Edit className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 flex-grow">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
|
||||
<Mail className="w-4 h-4" />
|
||||
Email Addresses
|
||||
</h4>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{newsletter.senders.map((sender) => (
|
||||
<Badge key={sender.id} variant="secondary" className="text-xs">
|
||||
{sender.email}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-medium text-gray-700 mb-2">RSS Feed</h4>
|
||||
<a
|
||||
href={getFeedUrl(newsletter.id)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800 hover:underline"
|
||||
>
|
||||
<ExternalLink className="w-3 h-3" />
|
||||
{getFeedUrl(newsletter.id)}
|
||||
</a>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
17
frontend/components/letterfeed/NewsletterList.tsx
Normal file
17
frontend/components/letterfeed/NewsletterList.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import { Newsletter } from "@/lib/api"
|
||||
import { NewsletterCard } from "./NewsletterCard"
|
||||
|
||||
interface NewsletterListProps {
|
||||
newsletters: Newsletter[]
|
||||
onEditNewsletter: (newsletter: Newsletter) => void
|
||||
}
|
||||
|
||||
export function NewsletterList({ newsletters, onEditNewsletter }: NewsletterListProps) {
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{newsletters.map((newsletter) => (
|
||||
<NewsletterCard key={newsletter.id} newsletter={newsletter} onEdit={onEditNewsletter} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
227
frontend/components/letterfeed/SettingsDialog.tsx
Normal file
227
frontend/components/letterfeed/SettingsDialog.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
import { useState, useEffect } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Loader2, CheckCircle, XCircle } from "lucide-react"
|
||||
import { Settings as AppSettings, SettingsCreate, updateSettings, testImapConnection } from "@/lib/api"
|
||||
|
||||
interface SettingsDialogProps {
|
||||
settings: AppSettings
|
||||
folderOptions: string[]
|
||||
isOpen: boolean
|
||||
onOpenChange: (isOpen: boolean) => void
|
||||
onSuccess: () => void
|
||||
}
|
||||
|
||||
export function SettingsDialog({ settings, folderOptions, isOpen, onOpenChange, onSuccess }: SettingsDialogProps) {
|
||||
const [currentSettings, setCurrentSettings] = useState<SettingsCreate | null>(null)
|
||||
const [testConnectionStatus, setTestConnectionStatus] = useState<"idle" | "loading" | "success" | "error">("idle")
|
||||
const [testConnectionMessage, setTestConnectionMessage] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
if (settings) {
|
||||
setCurrentSettings({ ...settings, imap_password: "" })
|
||||
}
|
||||
}, [settings])
|
||||
|
||||
if (!currentSettings) return null
|
||||
|
||||
const handleSettingsChange = <K extends keyof SettingsCreate>(key: K, value: SettingsCreate[K]) => {
|
||||
setCurrentSettings((prev) => (prev ? { ...prev, [key]: value } : null))
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!currentSettings) return
|
||||
try {
|
||||
await updateSettings(currentSettings)
|
||||
onOpenChange(false)
|
||||
onSuccess()
|
||||
} catch (error) {
|
||||
console.error("Failed to save settings:", error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleTestConnection = async () => {
|
||||
if (!currentSettings) return
|
||||
setTestConnectionStatus("loading")
|
||||
try {
|
||||
await updateSettings(currentSettings)
|
||||
const result = await testImapConnection()
|
||||
setTestConnectionStatus("success")
|
||||
setTestConnectionMessage(result.message)
|
||||
} catch (error: unknown) {
|
||||
setTestConnectionStatus("error")
|
||||
if (error instanceof Error) {
|
||||
setTestConnectionMessage(error.message || "Connection failed")
|
||||
} else {
|
||||
setTestConnectionMessage("An unknown error occurred")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Settings</DialogTitle>
|
||||
<DialogDescription>Fields are locked if they are set by environment variables.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 py-4">
|
||||
{/* IMAP Configuration */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-medium col-span-1 md:col-span-2">IMAP Configuration</h3>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="imap-server">IMAP Server</Label>
|
||||
<Input
|
||||
id="imap-server"
|
||||
value={currentSettings.imap_server}
|
||||
onChange={(e) => handleSettingsChange("imap_server", e.target.value)}
|
||||
placeholder="imap.gmail.com"
|
||||
disabled={settings.locked_fields.includes("imap_server")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="imap-username">IMAP Username</Label>
|
||||
<Input
|
||||
id="imap-username"
|
||||
value={currentSettings.imap_username}
|
||||
onChange={(e) => handleSettingsChange("imap_username", e.target.value)}
|
||||
placeholder="your-email@gmail.com"
|
||||
disabled={settings.locked_fields.includes("imap_username")}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="imap-password">IMAP Password</Label>
|
||||
<Input
|
||||
id="imap-password"
|
||||
type="password"
|
||||
value={currentSettings.imap_password}
|
||||
onChange={(e) => handleSettingsChange("imap_password", e.target.value)}
|
||||
placeholder="Your password or app password"
|
||||
disabled={settings.locked_fields.includes("imap_password")}
|
||||
/>
|
||||
</div>
|
||||
<div className="pt-2">
|
||||
<Button
|
||||
onClick={handleTestConnection}
|
||||
disabled={testConnectionStatus === "loading"}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
{testConnectionStatus === "loading" && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
|
||||
Test Connection
|
||||
</Button>
|
||||
{testConnectionStatus !== "idle" && (
|
||||
<div
|
||||
data-testid="connection-status"
|
||||
className={`mt-2 flex items-center text-sm ${
|
||||
testConnectionStatus === "success" ? "text-green-600" : "text-red-600"
|
||||
}`}
|
||||
>
|
||||
{testConnectionStatus === "success" && <CheckCircle className="w-4 h-4 mr-2" />}
|
||||
{testConnectionStatus === "error" && <XCircle className="w-4 h-4 mr-2" />}
|
||||
{testConnectionMessage}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email Processing */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-medium col-span-1 md:col-span-2">Email Processing</h3>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="search-folder">Folder to Search</Label>
|
||||
<Select
|
||||
value={currentSettings.search_folder}
|
||||
onValueChange={(value) => handleSettingsChange("search_folder", value)}
|
||||
disabled={settings.locked_fields.includes("search_folder")}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select folder" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{folderOptions.map((folder) => (
|
||||
<SelectItem key={folder} value={folder}>
|
||||
{folder}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="move-folder">Move to Folder</Label>
|
||||
<Select
|
||||
value={currentSettings.move_to_folder || "None"}
|
||||
onValueChange={(value) => handleSettingsChange("move_to_folder", value === "None" ? null : value)}
|
||||
disabled={settings.locked_fields.includes("move_to_folder")}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select folder or leave empty" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="None">None (Don't move)</SelectItem>
|
||||
{folderOptions.map((folder) => (
|
||||
<SelectItem key={folder} value={folder}>
|
||||
{folder}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="check-interval">Check Interval (minutes)</Label>
|
||||
<Input
|
||||
id="check-interval"
|
||||
type="number"
|
||||
min="1"
|
||||
max="1440"
|
||||
value={currentSettings.email_check_interval}
|
||||
onChange={(e) => handleSettingsChange("email_check_interval", Number.parseInt(e.target.value) || 15)}
|
||||
placeholder="15"
|
||||
disabled={settings.locked_fields.includes("email_check_interval")}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 pt-2">
|
||||
<Checkbox
|
||||
id="mark-read"
|
||||
checked={currentSettings.mark_as_read}
|
||||
onCheckedChange={(checked) => handleSettingsChange("mark_as_read", !!checked)}
|
||||
disabled={settings.locked_fields.includes("mark_as_read")}
|
||||
/>
|
||||
<Label htmlFor="mark-read" className="text-sm font-normal">
|
||||
Mark emails as read
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="auto-add"
|
||||
checked={currentSettings.auto_add_new_senders}
|
||||
onCheckedChange={(checked) => handleSettingsChange("auto_add_new_senders", !!checked)}
|
||||
disabled={settings.locked_fields.includes("auto_add_new_senders")}
|
||||
/>
|
||||
<Label htmlFor="auto-add" className="text-sm font-normal">
|
||||
Auto-add new senders
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave}>Save Settings</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import React from "react"
|
||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react"
|
||||
import "@testing-library/jest-dom"
|
||||
import { AddNewsletterDialog } from "../AddNewsletterDialog"
|
||||
import * as api from "@/lib/api"
|
||||
|
||||
// Mock the API module
|
||||
jest.mock("@/lib/api", () => ({
|
||||
...jest.requireActual("@/lib/api"),
|
||||
createNewsletter: jest.fn(),
|
||||
}))
|
||||
|
||||
const mockedApi = api as jest.Mocked<typeof api>
|
||||
|
||||
describe("AddNewsletterDialog", () => {
|
||||
const handleOpenChange = jest.fn()
|
||||
const handleSuccess = jest.fn()
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks()
|
||||
})
|
||||
|
||||
it("allows user to fill out the form and submit", async () => {
|
||||
mockedApi.createNewsletter.mockResolvedValueOnce({
|
||||
id: 1,
|
||||
name: "My New Newsletter",
|
||||
is_active: true,
|
||||
senders: [{ id: 1, email: "test@example.com", newsletter_id: 1 }],
|
||||
entries_count: 0,
|
||||
})
|
||||
|
||||
render(<AddNewsletterDialog isOpen={true} onOpenChange={handleOpenChange} onSuccess={handleSuccess} />)
|
||||
|
||||
// Fill out the form
|
||||
fireEvent.change(screen.getByLabelText(/Newsletter Name/i), { target: { value: "My New Newsletter" } })
|
||||
fireEvent.change(screen.getByPlaceholderText(/Enter email address/i), { target: { value: "test@example.com" } })
|
||||
|
||||
// Submit the form
|
||||
fireEvent.click(screen.getByRole("button", { name: /Register Newsletter/i }))
|
||||
|
||||
// Wait for the async operation to complete
|
||||
await waitFor(() => {
|
||||
expect(mockedApi.createNewsletter).toHaveBeenCalledWith({
|
||||
name: "My New Newsletter",
|
||||
sender_emails: ["test@example.com"],
|
||||
})
|
||||
expect(handleSuccess).toHaveBeenCalledTimes(1)
|
||||
expect(handleOpenChange).toHaveBeenCalledWith(false)
|
||||
})
|
||||
})
|
||||
|
||||
it("allows adding and removing email fields", () => {
|
||||
render(<AddNewsletterDialog isOpen={true} onOpenChange={() => {}} onSuccess={() => {}} />)
|
||||
|
||||
// Initial state
|
||||
expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(1)
|
||||
|
||||
// Add another email
|
||||
fireEvent.click(screen.getByRole("button", { name: /Add Another Email/i }))
|
||||
expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(2)
|
||||
|
||||
// Remove the first email
|
||||
fireEvent.click(screen.getAllByRole("button", { name: /Remove/i })[0])
|
||||
expect(screen.getAllByPlaceholderText(/Enter email address/i)).toHaveLength(1)
|
||||
})
|
||||
|
||||
it("closes the dialog when cancel is clicked", () => {
|
||||
render(<AddNewsletterDialog isOpen={true} onOpenChange={handleOpenChange} onSuccess={handleSuccess} />)
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Cancel/i }))
|
||||
expect(handleOpenChange).toHaveBeenCalledWith(false)
|
||||
expect(handleSuccess).not.toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,108 @@
|
||||
import React from "react"
|
||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react"
|
||||
import "@testing-library/jest-dom"
|
||||
import { EditNewsletterDialog } from "../EditNewsletterDialog"
|
||||
import { Newsletter } from "@/lib/api"
|
||||
import * as api from "@/lib/api"
|
||||
|
||||
// Mock the API module
|
||||
jest.mock("@/lib/api", () => ({
|
||||
...jest.requireActual("@/lib/api"),
|
||||
updateNewsletter: jest.fn(),
|
||||
deleteNewsletter: jest.fn(),
|
||||
}))
|
||||
|
||||
const mockedApi = api as jest.Mocked<typeof api>
|
||||
|
||||
const mockNewsletter: Newsletter = {
|
||||
id: 1,
|
||||
name: "Existing Newsletter",
|
||||
is_active: true,
|
||||
senders: [{ id: 1, email: "current@example.com", newsletter_id: 1 }],
|
||||
entries_count: 5,
|
||||
}
|
||||
|
||||
describe("EditNewsletterDialog", () => {
|
||||
const handleOpenChange = jest.fn()
|
||||
const handleSuccess = jest.fn()
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks()
|
||||
// Mock window.confirm for the delete action
|
||||
window.confirm = jest.fn(() => true)
|
||||
})
|
||||
|
||||
it("renders with initial newsletter data and allows updates", async () => {
|
||||
mockedApi.updateNewsletter.mockResolvedValueOnce({ ...mockNewsletter, name: "Updated Name" })
|
||||
|
||||
render(
|
||||
<EditNewsletterDialog
|
||||
newsletter={mockNewsletter}
|
||||
isOpen={true}
|
||||
onOpenChange={handleOpenChange}
|
||||
onSuccess={handleSuccess}
|
||||
/>
|
||||
)
|
||||
|
||||
// Check that initial data is present
|
||||
const nameInput = screen.getByLabelText(/Newsletter Name/i)
|
||||
expect(nameInput).toHaveValue("Existing Newsletter")
|
||||
expect(screen.getByDisplayValue("current@example.com")).toBeInTheDocument()
|
||||
|
||||
// Update the name
|
||||
fireEvent.change(nameInput, { target: { value: "Updated Name" } })
|
||||
|
||||
// Submit
|
||||
fireEvent.click(screen.getByRole("button", { name: /Save Changes/i }))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockedApi.updateNewsletter).toHaveBeenCalledWith(1, {
|
||||
name: "Updated Name",
|
||||
sender_emails: ["current@example.com"],
|
||||
})
|
||||
expect(handleSuccess).toHaveBeenCalledTimes(1)
|
||||
expect(handleOpenChange).toHaveBeenCalledWith(false)
|
||||
})
|
||||
})
|
||||
|
||||
it("calls deleteNewsletter when delete button is clicked and confirmed", async () => {
|
||||
mockedApi.deleteNewsletter.mockResolvedValueOnce()
|
||||
|
||||
render(
|
||||
<EditNewsletterDialog
|
||||
newsletter={mockNewsletter}
|
||||
isOpen={true}
|
||||
onOpenChange={handleOpenChange}
|
||||
onSuccess={handleSuccess}
|
||||
/>
|
||||
)
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Delete Newsletter/i }))
|
||||
|
||||
expect(window.confirm).toHaveBeenCalledWith('Are you sure you want to delete the "Existing Newsletter" newsletter?')
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockedApi.deleteNewsletter).toHaveBeenCalledWith(1)
|
||||
expect(handleSuccess).toHaveBeenCalledTimes(1)
|
||||
expect(handleOpenChange).toHaveBeenCalledWith(false)
|
||||
})
|
||||
})
|
||||
|
||||
it("does not call deleteNewsletter when delete is not confirmed", () => {
|
||||
window.confirm = jest.fn(() => false) // User clicks "Cancel"
|
||||
|
||||
render(
|
||||
<EditNewsletterDialog
|
||||
newsletter={mockNewsletter}
|
||||
isOpen={true}
|
||||
onOpenChange={handleOpenChange}
|
||||
onSuccess={handleSuccess}
|
||||
/>
|
||||
)
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Delete Newsletter/i }))
|
||||
|
||||
expect(mockedApi.deleteNewsletter).not.toHaveBeenCalled()
|
||||
expect(handleSuccess).not.toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
24
frontend/components/letterfeed/__tests__/EmptyState.test.tsx
Normal file
24
frontend/components/letterfeed/__tests__/EmptyState.test.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import React from "react"
|
||||
import { render, screen, fireEvent } from "@testing-library/react"
|
||||
import "@testing-library/jest-dom"
|
||||
import { EmptyState } from "../EmptyState"
|
||||
|
||||
describe("EmptyState", () => {
|
||||
it("renders the correct content", () => {
|
||||
render(<EmptyState onAddNewsletter={() => {}} />)
|
||||
|
||||
expect(screen.getByText("No newsletters registered")).toBeInTheDocument()
|
||||
expect(screen.getByText("Get started by adding your first newsletter")).toBeInTheDocument()
|
||||
expect(screen.getByRole("button", { name: /Add Your First Newsletter/i })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it("calls onAddNewsletter when the button is clicked", () => {
|
||||
const handleAddNewsletter = jest.fn()
|
||||
render(<EmptyState onAddNewsletter={handleAddNewsletter} />)
|
||||
|
||||
const addButton = screen.getByRole("button", { name: /Add Your First Newsletter/i })
|
||||
fireEvent.click(addButton)
|
||||
|
||||
expect(handleAddNewsletter).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
})
|
||||
30
frontend/components/letterfeed/__tests__/Header.test.tsx
Normal file
30
frontend/components/letterfeed/__tests__/Header.test.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from "react"
|
||||
import { render, screen, fireEvent } from "@testing-library/react"
|
||||
import "@testing-library/jest-dom"
|
||||
import { Header } from "../Header"
|
||||
|
||||
describe("Header", () => {
|
||||
it("renders the title and description", () => {
|
||||
render(<Header onOpenAddNewsletter={() => {}} onOpenSettings={() => {}} />)
|
||||
expect(screen.getByText("LetterFeed")).toBeInTheDocument()
|
||||
expect(screen.getByText("Read your newsletters as RSS feeds!")).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('calls onOpenAddNewsletter when "Add Newsletter" button is clicked', () => {
|
||||
const handleOpenAdd = jest.fn()
|
||||
render(<Header onOpenAddNewsletter={handleOpenAdd} onOpenSettings={() => {}} />)
|
||||
|
||||
const addButton = screen.getByRole("button", { name: /Add Newsletter/i })
|
||||
fireEvent.click(addButton)
|
||||
expect(handleOpenAdd).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('calls onOpenSettings when "Settings" button is clicked', () => {
|
||||
const handleOpenSettings = jest.fn()
|
||||
render(<Header onOpenAddNewsletter={() => {}} onOpenSettings={handleOpenSettings} />)
|
||||
|
||||
const settingsButton = screen.getByRole("button", { name: /Settings/i })
|
||||
fireEvent.click(settingsButton)
|
||||
expect(handleOpenSettings).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,13 @@
|
||||
import React from "react"
|
||||
import { render, screen } from "@testing-library/react"
|
||||
import "@testing-library/jest-dom"
|
||||
import { LoadingSpinner } from "../LoadingSpinner"
|
||||
|
||||
describe("LoadingSpinner", () => {
|
||||
it("renders the spinner with the correct animation class", () => {
|
||||
render(<LoadingSpinner />)
|
||||
const spinner = screen.getByTestId("loading-spinner")
|
||||
expect(spinner).toBeInTheDocument()
|
||||
expect(spinner).toHaveClass("animate-spin")
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,63 @@
|
||||
import React from "react"
|
||||
import { render, screen, fireEvent } from "@testing-library/react"
|
||||
import "@testing-library/jest-dom"
|
||||
import { NewsletterCard } from "../NewsletterCard"
|
||||
import { Newsletter } from "@/lib/api"
|
||||
|
||||
// Mock the getFeedUrl function
|
||||
jest.mock("@/lib/api", () => ({
|
||||
...jest.requireActual("@/lib/api"), // import and retain all actual implementations
|
||||
getFeedUrl: jest.fn((id) => `http://mock-api/feeds/${id}`),
|
||||
}))
|
||||
|
||||
const mockNewsletter: Newsletter = {
|
||||
id: 1,
|
||||
name: "Tech Weekly",
|
||||
is_active: true,
|
||||
senders: [
|
||||
{ id: 1, email: "contact@techweekly.com", newsletter_id: 1 },
|
||||
{ id: 2, email: "updates@techweekly.com", newsletter_id: 1 },
|
||||
],
|
||||
entries_count: 42,
|
||||
}
|
||||
|
||||
describe("NewsletterCard", () => {
|
||||
it("renders newsletter details correctly", () => {
|
||||
const handleEdit = jest.fn()
|
||||
render(<NewsletterCard newsletter={mockNewsletter} onEdit={handleEdit} />)
|
||||
|
||||
// Check for the title
|
||||
expect(screen.getByText("Tech Weekly")).toBeInTheDocument()
|
||||
|
||||
// Check for the entries count
|
||||
expect(screen.getByText("42 entries")).toBeInTheDocument()
|
||||
|
||||
// Check for sender emails
|
||||
expect(screen.getByText("contact@techweekly.com")).toBeInTheDocument()
|
||||
expect(screen.getByText("updates@techweekly.com")).toBeInTheDocument()
|
||||
|
||||
// Check for the RSS feed link
|
||||
const feedLink = screen.getByRole("link")
|
||||
expect(feedLink).toHaveAttribute("href", "http://mock-api/feeds/1")
|
||||
expect(feedLink).toHaveTextContent("http://mock-api/feeds/1")
|
||||
})
|
||||
|
||||
it('calls the onEdit function with the correct newsletter when the edit button is clicked', () => {
|
||||
const handleEdit = jest.fn()
|
||||
render(<NewsletterCard newsletter={mockNewsletter} onEdit={handleEdit} />)
|
||||
|
||||
const editButton = screen.getByRole("button", { name: /edit newsletter/i })
|
||||
fireEvent.click(editButton)
|
||||
|
||||
expect(handleEdit).toHaveBeenCalledTimes(1)
|
||||
expect(handleEdit).toHaveBeenCalledWith(mockNewsletter)
|
||||
})
|
||||
|
||||
it('displays "entry" for a single entry', () => {
|
||||
const singleEntryNewsletter = { ...mockNewsletter, entries_count: 1 }
|
||||
const handleEdit = jest.fn()
|
||||
render(<NewsletterCard newsletter={singleEntryNewsletter} onEdit={handleEdit} />)
|
||||
|
||||
expect(screen.getByText("1 entry")).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from "react"
|
||||
import { render, screen } from "@testing-library/react"
|
||||
import "@testing-library/jest-dom"
|
||||
import { NewsletterList } from "../NewsletterList"
|
||||
import { Newsletter } from "@/lib/api"
|
||||
|
||||
// Mock the child component to isolate the list component's behavior
|
||||
jest.mock("../NewsletterCard", () => ({
|
||||
NewsletterCard: ({ newsletter }: { newsletter: Newsletter }) => (
|
||||
<div data-testid={`newsletter-card-${newsletter.id}`}>{newsletter.name}</div>
|
||||
),
|
||||
}))
|
||||
|
||||
const mockNewsletters: Newsletter[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Newsletter One",
|
||||
is_active: true,
|
||||
senders: [],
|
||||
entries_count: 10,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Newsletter Two",
|
||||
is_active: true,
|
||||
senders: [],
|
||||
entries_count: 5,
|
||||
},
|
||||
]
|
||||
|
||||
describe("NewsletterList", () => {
|
||||
it("renders a list of newsletter cards", () => {
|
||||
render(<NewsletterList newsletters={mockNewsletters} onEditNewsletter={() => {}} />)
|
||||
|
||||
// Check that both newsletters are rendered
|
||||
expect(screen.getByText("Newsletter One")).toBeInTheDocument()
|
||||
expect(screen.getByText("Newsletter Two")).toBeInTheDocument()
|
||||
expect(screen.getByTestId("newsletter-card-1")).toBeInTheDocument()
|
||||
expect(screen.getByTestId("newsletter-card-2")).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it("renders nothing when the newsletter list is empty", () => {
|
||||
const { container } = render(<NewsletterList newsletters={[]} onEditNewsletter={() => {}} />)
|
||||
// The main div should be empty
|
||||
expect(container.firstChild).toBeEmptyDOMElement()
|
||||
})
|
||||
})
|
||||
131
frontend/components/letterfeed/__tests__/SettingsDialog.test.tsx
Normal file
131
frontend/components/letterfeed/__tests__/SettingsDialog.test.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
import React from "react"
|
||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react"
|
||||
import "@testing-library/jest-dom"
|
||||
import { SettingsDialog } from "../SettingsDialog"
|
||||
import { Settings } from "@/lib/api"
|
||||
import * as api from "@/lib/api"
|
||||
|
||||
// Mock the API module
|
||||
jest.mock("@/lib/api", () => ({
|
||||
...jest.requireActual("@/lib/api"),
|
||||
updateSettings: jest.fn(),
|
||||
testImapConnection: jest.fn(),
|
||||
}))
|
||||
|
||||
const mockedApi = api as jest.Mocked<typeof api>
|
||||
|
||||
const mockSettings: Settings = {
|
||||
id: 1,
|
||||
imap_server: "imap.example.com",
|
||||
imap_username: "user@example.com",
|
||||
search_folder: "INBOX",
|
||||
move_to_folder: "Archive",
|
||||
mark_as_read: true,
|
||||
email_check_interval: 30,
|
||||
auto_add_new_senders: false,
|
||||
locked_fields: ["imap_server"], // Mock a locked field
|
||||
}
|
||||
|
||||
const mockFolderOptions = ["INBOX", "Sent", "Archive", "Spam"]
|
||||
|
||||
describe("SettingsDialog", () => {
|
||||
const handleOpenChange = jest.fn()
|
||||
const handleSuccess = jest.fn()
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks()
|
||||
})
|
||||
|
||||
it("renders settings and respects locked fields", () => {
|
||||
render(
|
||||
<SettingsDialog
|
||||
settings={mockSettings}
|
||||
folderOptions={mockFolderOptions}
|
||||
isOpen={true}
|
||||
onOpenChange={handleOpenChange}
|
||||
onSuccess={handleSuccess}
|
||||
/>
|
||||
)
|
||||
|
||||
// Check that a locked field is disabled
|
||||
expect(screen.getByLabelText(/IMAP Server/i)).toBeDisabled()
|
||||
// Check that a non-locked field is enabled
|
||||
expect(screen.getByLabelText(/IMAP Username/i)).toBeEnabled()
|
||||
|
||||
// Check that values are set correctly
|
||||
expect(screen.getByLabelText(/IMAP Username/i)).toHaveValue(mockSettings.imap_username)
|
||||
expect(screen.getByLabelText(/Mark emails as read/i)).toBeChecked()
|
||||
})
|
||||
|
||||
it("allows updating and saving settings", async () => {
|
||||
mockedApi.updateSettings.mockResolvedValueOnce(mockSettings)
|
||||
|
||||
render(
|
||||
<SettingsDialog
|
||||
settings={mockSettings}
|
||||
folderOptions={mockFolderOptions}
|
||||
isOpen={true}
|
||||
onOpenChange={handleOpenChange}
|
||||
onSuccess={handleSuccess}
|
||||
/>
|
||||
)
|
||||
|
||||
// Change a setting
|
||||
fireEvent.change(screen.getByLabelText(/IMAP Username/i), { target: { value: "new.user@example.com" } })
|
||||
|
||||
// Save
|
||||
fireEvent.click(screen.getByRole("button", { name: /Save Settings/i }))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(mockedApi.updateSettings).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
imap_username: "new.user@example.com",
|
||||
})
|
||||
)
|
||||
expect(handleSuccess).toHaveBeenCalledTimes(1)
|
||||
expect(handleOpenChange).toHaveBeenCalledWith(false)
|
||||
})
|
||||
})
|
||||
|
||||
it("handles successful connection test", async () => {
|
||||
mockedApi.testImapConnection.mockResolvedValueOnce({ message: "Connection successful!" })
|
||||
|
||||
render(
|
||||
<SettingsDialog
|
||||
settings={mockSettings}
|
||||
folderOptions={mockFolderOptions}
|
||||
isOpen={true}
|
||||
onOpenChange={handleOpenChange}
|
||||
onSuccess={handleSuccess}
|
||||
/>
|
||||
)
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Test Connection/i }))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Connection successful!")).toBeInTheDocument()
|
||||
expect(screen.getByTestId("connection-status")).toHaveClass("text-green-600")
|
||||
})
|
||||
})
|
||||
|
||||
it("handles failed connection test", async () => {
|
||||
mockedApi.testImapConnection.mockRejectedValueOnce(new Error("Authentication failed"))
|
||||
|
||||
render(
|
||||
<SettingsDialog
|
||||
settings={mockSettings}
|
||||
folderOptions={mockFolderOptions}
|
||||
isOpen={true}
|
||||
onOpenChange={handleOpenChange}
|
||||
onSuccess={handleSuccess}
|
||||
/>
|
||||
)
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /Test Connection/i }))
|
||||
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Authentication failed")).toBeInTheDocument()
|
||||
expect(screen.getByTestId("connection-status")).toHaveClass("text-red-600")
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user