phase 4
This commit is contained in:
Danilo Reyes
218
frontend/src/routes/boards/+page.svelte
Normal file
218
frontend/src/routes/boards/+page.svelte
Normal file
@@ -0,0 +1,218 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { boards, boardsList, boardsLoading, boardsError } from '$lib/stores/boards';
|
||||
import BoardCard from '$lib/components/boards/BoardCard.svelte';
|
||||
import CreateBoardModal from '$lib/components/boards/CreateBoardModal.svelte';
|
||||
|
||||
let showCreateModal = false;
|
||||
let deleteConfirmId: string | null = null;
|
||||
|
||||
onMount(() => {
|
||||
boards.load();
|
||||
});
|
||||
|
||||
function openCreateModal() {
|
||||
showCreateModal = true;
|
||||
}
|
||||
|
||||
function closeCreateModal() {
|
||||
showCreateModal = false;
|
||||
}
|
||||
|
||||
async function handleCreate(event: CustomEvent<{ title: string; description?: string }>) {
|
||||
try {
|
||||
const board = await boards.create(event.detail);
|
||||
closeCreateModal();
|
||||
goto(`/boards/${board.id}`);
|
||||
} catch (error) {
|
||||
console.error('Failed to create board:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(boardId: string) {
|
||||
if (!confirm('Are you sure you want to delete this board? This action cannot be undone.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await boards.delete(boardId);
|
||||
} catch (error) {
|
||||
console.error('Failed to delete board:', error);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="boards-page">
|
||||
<header class="page-header">
|
||||
<h1>My Boards</h1>
|
||||
<button on:click={openCreateModal} class="btn-primary">
|
||||
<span class="icon">+</span>
|
||||
New Board
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{#if $boardsError}
|
||||
<div class="error-banner">
|
||||
<span class="error-icon">⚠</span>
|
||||
{$boardsError}
|
||||
<button on:click={() => boards.clearError()} class="close-btn">×</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $boardsLoading}
|
||||
<div class="loading">
|
||||
<div class="spinner"></div>
|
||||
<p>Loading boards...</p>
|
||||
</div>
|
||||
{:else if $boardsList.length === 0}
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">📋</div>
|
||||
<h2>No boards yet</h2>
|
||||
<p>Create your first reference board to get started</p>
|
||||
<button on:click={openCreateModal} class="btn-primary">Create Board</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="boards-grid">
|
||||
{#each $boardsList as board (board.id)}
|
||||
<BoardCard {board} on:delete={() => handleDelete(board.id)} />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if showCreateModal}
|
||||
<CreateBoardModal on:create={handleCreate} on:close={closeCreateModal} />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.boards-page {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.error-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
background: #fee2e2;
|
||||
border: 1px solid #fca5a5;
|
||||
border-radius: 8px;
|
||||
color: #991b1b;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: #991b1b;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 4px solid #e5e7eb;
|
||||
border-top-color: #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
color: #6b7280;
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
|
||||
.boards-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
381
frontend/src/routes/boards/[id]/edit/+page.svelte
Normal file
381
frontend/src/routes/boards/[id]/edit/+page.svelte
Normal file
@@ -0,0 +1,381 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/stores';
|
||||
import { boards, currentBoard } from '$lib/stores/boards';
|
||||
|
||||
let title = '';
|
||||
let description = '';
|
||||
let isLoading = true;
|
||||
let isSubmitting = false;
|
||||
let errors: Record<string, string> = {};
|
||||
|
||||
$: boardId = $page.params.id;
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
await boards.loadBoard(boardId);
|
||||
|
||||
if ($currentBoard) {
|
||||
title = $currentBoard.title;
|
||||
description = $currentBoard.description || '';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load board:', error);
|
||||
errors.general = 'Failed to load board';
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
});
|
||||
|
||||
function validate(): boolean {
|
||||
errors = {};
|
||||
|
||||
if (!title.trim()) {
|
||||
errors.title = 'Title is required';
|
||||
} else if (title.length > 255) {
|
||||
errors.title = 'Title must be 255 characters or less';
|
||||
}
|
||||
|
||||
if (description.length > 1000) {
|
||||
errors.description = 'Description must be 1000 characters or less';
|
||||
}
|
||||
|
||||
return Object.keys(errors).length === 0;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!validate()) return;
|
||||
|
||||
isSubmitting = true;
|
||||
|
||||
try {
|
||||
await boards.update(boardId, {
|
||||
title: title.trim(),
|
||||
description: description.trim() || undefined,
|
||||
});
|
||||
|
||||
// Navigate back to board view
|
||||
goto(`/boards/${boardId}`);
|
||||
} catch (error) {
|
||||
console.error('Failed to update board:', error);
|
||||
errors.general = error instanceof Error ? error.message : 'Failed to update board';
|
||||
} finally {
|
||||
isSubmitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
goto(`/boards/${boardId}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Edit Board - Reference Board Viewer</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="edit-board-page">
|
||||
<div class="page-container">
|
||||
<header class="page-header">
|
||||
<button class="back-btn" on:click={handleCancel} aria-label="Go back">
|
||||
← Back to Board
|
||||
</button>
|
||||
<h1>Edit Board</h1>
|
||||
</header>
|
||||
|
||||
{#if isLoading}
|
||||
<div class="loading">
|
||||
<div class="spinner"></div>
|
||||
<p>Loading board...</p>
|
||||
</div>
|
||||
{:else if errors.general}
|
||||
<div class="error-banner">
|
||||
<span class="error-icon">⚠</span>
|
||||
{errors.general}
|
||||
<button class="back-btn-inline" on:click={() => goto('/boards')}>
|
||||
Return to Boards
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<form on:submit|preventDefault={handleSubmit} class="board-form">
|
||||
<div class="form-group">
|
||||
<label for="title">Board Title <span class="required">*</span></label>
|
||||
<input
|
||||
id="title"
|
||||
type="text"
|
||||
bind:value={title}
|
||||
disabled={isSubmitting}
|
||||
placeholder="e.g., Character Design References"
|
||||
class:error={errors.title}
|
||||
maxlength="255"
|
||||
required
|
||||
/>
|
||||
{#if errors.title}
|
||||
<span class="error-text">{errors.title}</span>
|
||||
{:else}
|
||||
<span class="help-text">{title.length}/255 characters</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description (optional)</label>
|
||||
<textarea
|
||||
id="description"
|
||||
bind:value={description}
|
||||
disabled={isSubmitting}
|
||||
placeholder="Add a description to help organize your boards..."
|
||||
rows="4"
|
||||
maxlength="1000"
|
||||
class:error={errors.description}
|
||||
/>
|
||||
{#if errors.description}
|
||||
<span class="error-text">{errors.description}</span>
|
||||
{:else}
|
||||
<span class="help-text">{description.length}/1000 characters</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-secondary"
|
||||
on:click={handleCancel}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn-primary" disabled={isSubmitting}>
|
||||
{#if isSubmitting}
|
||||
<span class="spinner-small"></span>
|
||||
Saving...
|
||||
{:else}
|
||||
Save Changes
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.edit-board-page {
|
||||
min-height: 100vh;
|
||||
background: #f9fafb;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #667eea;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 0;
|
||||
margin-bottom: 1rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
color: #764ba2;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 4px solid #e5e7eb;
|
||||
border-top-color: #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.error-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
background: #fee2e2;
|
||||
border: 1px solid #fca5a5;
|
||||
border-radius: 8px;
|
||||
color: #991b1b;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.back-btn-inline {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #991b1b;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.board-form {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
input.error,
|
||||
textarea.error {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
textarea:disabled {
|
||||
background-color: #f9fafb;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
display: block;
|
||||
color: #ef4444;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
display: block;
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.spinner-small {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
319
frontend/src/routes/boards/new/+page.svelte
Normal file
319
frontend/src/routes/boards/new/+page.svelte
Normal file
@@ -0,0 +1,319 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { boards } from '$lib/stores/boards';
|
||||
|
||||
let title = '';
|
||||
let description = '';
|
||||
let isSubmitting = false;
|
||||
let errors: Record<string, string> = {};
|
||||
|
||||
function validate(): boolean {
|
||||
errors = {};
|
||||
|
||||
if (!title.trim()) {
|
||||
errors.title = 'Title is required';
|
||||
} else if (title.length > 255) {
|
||||
errors.title = 'Title must be 255 characters or less';
|
||||
}
|
||||
|
||||
if (description.length > 1000) {
|
||||
errors.description = 'Description must be 1000 characters or less';
|
||||
}
|
||||
|
||||
return Object.keys(errors).length === 0;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!validate()) return;
|
||||
|
||||
isSubmitting = true;
|
||||
|
||||
try {
|
||||
const board = await boards.create({
|
||||
title: title.trim(),
|
||||
description: description.trim() || undefined,
|
||||
});
|
||||
|
||||
// Navigate to the new board
|
||||
goto(`/boards/${board.id}`);
|
||||
} catch (error) {
|
||||
console.error('Failed to create board:', error);
|
||||
errors.general = error instanceof Error ? error.message : 'Failed to create board';
|
||||
} finally {
|
||||
isSubmitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
goto('/boards');
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>New Board - Reference Board Viewer</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="new-board-page">
|
||||
<div class="page-container">
|
||||
<header class="page-header">
|
||||
<button class="back-btn" on:click={handleCancel} aria-label="Go back">
|
||||
← Back to Boards
|
||||
</button>
|
||||
<h1>Create New Board</h1>
|
||||
</header>
|
||||
|
||||
{#if errors.general}
|
||||
<div class="error-banner">
|
||||
<span class="error-icon">⚠</span>
|
||||
{errors.general}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form on:submit|preventDefault={handleSubmit} class="board-form">
|
||||
<div class="form-group">
|
||||
<label for="title">Board Title <span class="required">*</span></label>
|
||||
<input
|
||||
id="title"
|
||||
type="text"
|
||||
bind:value={title}
|
||||
disabled={isSubmitting}
|
||||
placeholder="e.g., Character Design References"
|
||||
class:error={errors.title}
|
||||
maxlength="255"
|
||||
required
|
||||
autofocus
|
||||
/>
|
||||
{#if errors.title}
|
||||
<span class="error-text">{errors.title}</span>
|
||||
{:else}
|
||||
<span class="help-text">{title.length}/255 characters</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Description (optional)</label>
|
||||
<textarea
|
||||
id="description"
|
||||
bind:value={description}
|
||||
disabled={isSubmitting}
|
||||
placeholder="Add a description to help organize your boards..."
|
||||
rows="4"
|
||||
maxlength="1000"
|
||||
class:error={errors.description}
|
||||
/>
|
||||
{#if errors.description}
|
||||
<span class="error-text">{errors.description}</span>
|
||||
{:else}
|
||||
<span class="help-text">{description.length}/1000 characters</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn-secondary" on:click={handleCancel} disabled={isSubmitting}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn-primary" disabled={isSubmitting}>
|
||||
{#if isSubmitting}
|
||||
<span class="spinner"></span>
|
||||
Creating...
|
||||
{:else}
|
||||
Create Board
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.new-board-page {
|
||||
min-height: 100vh;
|
||||
background: #f9fafb;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #667eea;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 0;
|
||||
margin-bottom: 1rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
color: #764ba2;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
background: #fee2e2;
|
||||
border: 1px solid #fca5a5;
|
||||
border-radius: 8px;
|
||||
color: #991b1b;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.board-form {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
input.error,
|
||||
textarea.error {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
textarea:disabled {
|
||||
background-color: #f9fafb;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
display: block;
|
||||
color: #ef4444;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
display: block;
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
margin-top: 2rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #374151;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
536
frontend/tests/components/boards.test.ts
Normal file
536
frontend/tests/components/boards.test.ts
Normal file
@@ -0,0 +1,536 @@
|
||||
/**
|
||||
* Component tests for board components
|
||||
* Tests BoardCard, CreateBoardModal, and DeleteConfirmModal
|
||||
*/
|
||||
|
||||
import { render, fireEvent, screen, waitFor } from '@testing-library/svelte';
|
||||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||
import { goto } from '$app/navigation';
|
||||
import BoardCard from '$lib/components/boards/BoardCard.svelte';
|
||||
import CreateBoardModal from '$lib/components/boards/CreateBoardModal.svelte';
|
||||
import DeleteConfirmModal from '$lib/components/common/DeleteConfirmModal.svelte';
|
||||
import type { BoardSummary } from '$lib/types/boards';
|
||||
|
||||
// Mock $app/navigation
|
||||
vi.mock('$app/navigation', () => ({
|
||||
goto: vi.fn(),
|
||||
}));
|
||||
|
||||
describe('BoardCard', () => {
|
||||
const mockBoard: BoardSummary = {
|
||||
id: '123e4567-e89b-12d3-a456-426614174000',
|
||||
title: 'Test Board',
|
||||
description: 'Test description',
|
||||
image_count: 5,
|
||||
thumbnail_url: 'https://example.com/thumb.jpg',
|
||||
created_at: '2025-11-01T10:00:00Z',
|
||||
updated_at: '2025-11-02T15:30:00Z',
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('renders board title', () => {
|
||||
render(BoardCard, { props: { board: mockBoard } });
|
||||
|
||||
expect(screen.getByText('Test Board')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders board description', () => {
|
||||
render(BoardCard, { props: { board: mockBoard } });
|
||||
|
||||
expect(screen.getByText('Test description')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders image count', () => {
|
||||
render(BoardCard, { props: { board: mockBoard } });
|
||||
|
||||
expect(screen.getByText('5 images')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders singular "image" when count is 1', () => {
|
||||
const singleImageBoard = { ...mockBoard, image_count: 1 };
|
||||
render(BoardCard, { props: { board: singleImageBoard } });
|
||||
|
||||
expect(screen.getByText('1 image')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders thumbnail image when URL provided', () => {
|
||||
render(BoardCard, { props: { board: mockBoard } });
|
||||
|
||||
const img = screen.getByAltText('Test Board');
|
||||
expect(img).toBeInTheDocument();
|
||||
expect(img).toHaveAttribute('src', 'https://example.com/thumb.jpg');
|
||||
});
|
||||
|
||||
it('renders placeholder when no thumbnail', () => {
|
||||
const noThumbBoard = { ...mockBoard, thumbnail_url: null };
|
||||
render(BoardCard, { props: { board: noThumbBoard } });
|
||||
|
||||
expect(screen.getByText('🖼️')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders formatted update date', () => {
|
||||
render(BoardCard, { props: { board: mockBoard } });
|
||||
|
||||
// Should show "Updated Nov 2, 2025" or similar
|
||||
expect(screen.getByText(/updated/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders without description when null', () => {
|
||||
const noDescBoard = { ...mockBoard, description: null };
|
||||
render(BoardCard, { props: { board: noDescBoard } });
|
||||
|
||||
expect(screen.queryByText('Test description')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Interactions', () => {
|
||||
it('navigates to board on click', async () => {
|
||||
render(BoardCard, { props: { board: mockBoard } });
|
||||
|
||||
const card = screen.getByRole('button');
|
||||
await fireEvent.click(card);
|
||||
|
||||
expect(goto).toHaveBeenCalledWith('/boards/123e4567-e89b-12d3-a456-426614174000');
|
||||
});
|
||||
|
||||
it('navigates to board on Enter key', async () => {
|
||||
render(BoardCard, { props: { board: mockBoard } });
|
||||
|
||||
const card = screen.getByRole('button');
|
||||
await fireEvent.keyDown(card, { key: 'Enter' });
|
||||
|
||||
expect(goto).toHaveBeenCalledWith('/boards/123e4567-e89b-12d3-a456-426614174000');
|
||||
});
|
||||
|
||||
it('dispatches delete event when delete button clicked', async () => {
|
||||
const { component } = render(BoardCard, { props: { board: mockBoard } });
|
||||
|
||||
const deleteHandler = vi.fn();
|
||||
component.$on('delete', deleteHandler);
|
||||
|
||||
const deleteBtn = screen.getByLabelText('Delete board');
|
||||
await fireEvent.click(deleteBtn);
|
||||
|
||||
expect(deleteHandler).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('delete button click stops propagation', async () => {
|
||||
render(BoardCard, { props: { board: mockBoard } });
|
||||
|
||||
const deleteBtn = screen.getByLabelText('Delete board');
|
||||
await fireEvent.click(deleteBtn);
|
||||
|
||||
// Card click should not have been triggered (goto should not be called)
|
||||
expect(goto).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('has proper accessibility attributes', () => {
|
||||
render(BoardCard, { props: { board: mockBoard } });
|
||||
|
||||
const card = screen.getByRole('button');
|
||||
expect(card).toHaveAttribute('tabindex', '0');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('CreateBoardModal', () => {
|
||||
describe('Rendering', () => {
|
||||
it('renders modal with title', () => {
|
||||
render(CreateBoardModal);
|
||||
|
||||
expect(screen.getByText('Create New Board')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders all form fields', () => {
|
||||
render(CreateBoardModal);
|
||||
|
||||
expect(screen.getByLabelText(/board title/i)).toBeInTheDocument();
|
||||
expect(screen.getByLabelText(/description/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders create and cancel buttons', () => {
|
||||
render(CreateBoardModal);
|
||||
|
||||
expect(screen.getByRole('button', { name: /create board/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('populates initial values when provided', () => {
|
||||
render(CreateBoardModal, {
|
||||
props: { initialTitle: 'My Board', initialDescription: 'My Description' },
|
||||
});
|
||||
|
||||
const titleInput = screen.getByLabelText(/board title/i) as HTMLInputElement;
|
||||
const descInput = screen.getByLabelText(/description/i) as HTMLTextAreaElement;
|
||||
|
||||
expect(titleInput.value).toBe('My Board');
|
||||
expect(descInput.value).toBe('My Description');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Validation', () => {
|
||||
it('shows error when title is empty', async () => {
|
||||
render(CreateBoardModal);
|
||||
|
||||
const submitBtn = screen.getByRole('button', { name: /create board/i });
|
||||
await fireEvent.click(submitBtn);
|
||||
|
||||
expect(await screen.findByText(/title is required/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows error when title is too long', async () => {
|
||||
render(CreateBoardModal);
|
||||
|
||||
const titleInput = screen.getByLabelText(/board title/i);
|
||||
await fireEvent.input(titleInput, { target: { value: 'a'.repeat(256) } });
|
||||
|
||||
const submitBtn = screen.getByRole('button', { name: /create board/i });
|
||||
await fireEvent.click(submitBtn);
|
||||
|
||||
expect(await screen.findByText(/255 characters or less/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows error when description is too long', async () => {
|
||||
render(CreateBoardModal);
|
||||
|
||||
const titleInput = screen.getByLabelText(/board title/i);
|
||||
await fireEvent.input(titleInput, { target: { value: 'Valid Title' } });
|
||||
|
||||
const descInput = screen.getByLabelText(/description/i);
|
||||
await fireEvent.input(descInput, { target: { value: 'a'.repeat(1001) } });
|
||||
|
||||
const submitBtn = screen.getByRole('button', { name: /create board/i });
|
||||
await fireEvent.click(submitBtn);
|
||||
|
||||
expect(await screen.findByText(/1000 characters or less/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('accepts valid input', async () => {
|
||||
const { component } = render(CreateBoardModal);
|
||||
|
||||
const createHandler = vi.fn();
|
||||
component.$on('create', createHandler);
|
||||
|
||||
const titleInput = screen.getByLabelText(/board title/i);
|
||||
await fireEvent.input(titleInput, { target: { value: 'Valid Board Title' } });
|
||||
|
||||
const descInput = screen.getByLabelText(/description/i);
|
||||
await fireEvent.input(descInput, { target: { value: 'Valid description' } });
|
||||
|
||||
const submitBtn = screen.getByRole('button', { name: /create board/i });
|
||||
await fireEvent.click(submitBtn);
|
||||
|
||||
expect(createHandler).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('shows character count for title', async () => {
|
||||
render(CreateBoardModal);
|
||||
|
||||
const titleInput = screen.getByLabelText(/board title/i);
|
||||
await fireEvent.input(titleInput, { target: { value: 'Test' } });
|
||||
|
||||
expect(screen.getByText(/4\/255 characters/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows character count for description', async () => {
|
||||
render(CreateBoardModal);
|
||||
|
||||
const descInput = screen.getByLabelText(/description/i);
|
||||
await fireEvent.input(descInput, { target: { value: 'Testing' } });
|
||||
|
||||
expect(screen.getByText(/7\/1000 characters/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Submission', () => {
|
||||
it('dispatches create event with correct data', async () => {
|
||||
const { component } = render(CreateBoardModal);
|
||||
|
||||
const createHandler = vi.fn();
|
||||
component.$on('create', createHandler);
|
||||
|
||||
const titleInput = screen.getByLabelText(/board title/i);
|
||||
await fireEvent.input(titleInput, { target: { value: 'My Board' } });
|
||||
|
||||
const descInput = screen.getByLabelText(/description/i);
|
||||
await fireEvent.input(descInput, { target: { value: 'My Description' } });
|
||||
|
||||
const submitBtn = screen.getByRole('button', { name: /create board/i });
|
||||
await fireEvent.click(submitBtn);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(createHandler).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
const event = createHandler.mock.calls[0][0];
|
||||
expect(event.detail).toEqual({
|
||||
title: 'My Board',
|
||||
description: 'My Description',
|
||||
});
|
||||
});
|
||||
|
||||
it('omits description when empty', async () => {
|
||||
const { component } = render(CreateBoardModal);
|
||||
|
||||
const createHandler = vi.fn();
|
||||
component.$on('create', createHandler);
|
||||
|
||||
const titleInput = screen.getByLabelText(/board title/i);
|
||||
await fireEvent.input(titleInput, { target: { value: 'My Board' } });
|
||||
|
||||
const submitBtn = screen.getByRole('button', { name: /create board/i });
|
||||
await fireEvent.click(submitBtn);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(createHandler).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
const event = createHandler.mock.calls[0][0];
|
||||
expect(event.detail.description).toBeUndefined();
|
||||
});
|
||||
|
||||
it('trims whitespace from inputs', async () => {
|
||||
const { component } = render(CreateBoardModal);
|
||||
|
||||
const createHandler = vi.fn();
|
||||
component.$on('create', createHandler);
|
||||
|
||||
const titleInput = screen.getByLabelText(/board title/i);
|
||||
await fireEvent.input(titleInput, { target: { value: ' My Board ' } });
|
||||
|
||||
const descInput = screen.getByLabelText(/description/i);
|
||||
await fireEvent.input(descInput, { target: { value: ' My Description ' } });
|
||||
|
||||
const submitBtn = screen.getByRole('button', { name: /create board/i });
|
||||
await fireEvent.click(submitBtn);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(createHandler).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
const event = createHandler.mock.calls[0][0];
|
||||
expect(event.detail.title).toBe('My Board');
|
||||
expect(event.detail.description).toBe('My Description');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Modal Behavior', () => {
|
||||
it('dispatches close event when cancel clicked', async () => {
|
||||
const { component } = render(CreateBoardModal);
|
||||
|
||||
const closeHandler = vi.fn();
|
||||
component.$on('close', closeHandler);
|
||||
|
||||
const cancelBtn = screen.getByRole('button', { name: /cancel/i });
|
||||
await fireEvent.click(cancelBtn);
|
||||
|
||||
expect(closeHandler).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('dispatches close event when X button clicked', async () => {
|
||||
const { component } = render(CreateBoardModal);
|
||||
|
||||
const closeHandler = vi.fn();
|
||||
component.$on('close', closeHandler);
|
||||
|
||||
const closeBtn = screen.getByLabelText(/close/i);
|
||||
await fireEvent.click(closeBtn);
|
||||
|
||||
expect(closeHandler).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('dispatches close event when backdrop clicked', async () => {
|
||||
const { component } = render(CreateBoardModal);
|
||||
|
||||
const closeHandler = vi.fn();
|
||||
component.$on('close', closeHandler);
|
||||
|
||||
const backdrop = screen.getByRole('dialog');
|
||||
await fireEvent.click(backdrop);
|
||||
|
||||
expect(closeHandler).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('does not close when modal content clicked', async () => {
|
||||
const { component } = render(CreateBoardModal);
|
||||
|
||||
const closeHandler = vi.fn();
|
||||
component.$on('close', closeHandler);
|
||||
|
||||
const modalContent = screen.getByText('Create New Board').closest('.modal-content');
|
||||
if (modalContent) {
|
||||
await fireEvent.click(modalContent);
|
||||
}
|
||||
|
||||
expect(closeHandler).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('DeleteConfirmModal', () => {
|
||||
const defaultProps = {
|
||||
title: 'Delete Item',
|
||||
message: 'Are you sure?',
|
||||
itemName: 'Test Item',
|
||||
};
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('renders with provided title', () => {
|
||||
render(DeleteConfirmModal, { props: defaultProps });
|
||||
|
||||
expect(screen.getByText('Delete Item')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders with provided message', () => {
|
||||
render(DeleteConfirmModal, { props: defaultProps });
|
||||
|
||||
expect(screen.getByText('Are you sure?')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders item name when provided', () => {
|
||||
render(DeleteConfirmModal, { props: defaultProps });
|
||||
|
||||
expect(screen.getByText('Test Item')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders without item name when not provided', () => {
|
||||
const props = { ...defaultProps, itemName: '' };
|
||||
render(DeleteConfirmModal, { props });
|
||||
|
||||
expect(screen.queryByRole('strong')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders destructive warning icon by default', () => {
|
||||
render(DeleteConfirmModal, { props: defaultProps });
|
||||
|
||||
expect(screen.getByText('⚠️')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders info icon when not destructive', () => {
|
||||
const props = { ...defaultProps, isDestructive: false };
|
||||
render(DeleteConfirmModal, { props });
|
||||
|
||||
expect(screen.getByText('ℹ️')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders custom button text', () => {
|
||||
const props = {
|
||||
...defaultProps,
|
||||
confirmText: 'Remove',
|
||||
cancelText: 'Keep',
|
||||
};
|
||||
render(DeleteConfirmModal, { props });
|
||||
|
||||
expect(screen.getByRole('button', { name: /remove/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /keep/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Interactions', () => {
|
||||
it('dispatches confirm event when confirm button clicked', async () => {
|
||||
const { component } = render(DeleteConfirmModal, { props: defaultProps });
|
||||
|
||||
const confirmHandler = vi.fn();
|
||||
component.$on('confirm', confirmHandler);
|
||||
|
||||
const confirmBtn = screen.getByRole('button', { name: /delete/i });
|
||||
await fireEvent.click(confirmBtn);
|
||||
|
||||
expect(confirmHandler).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('dispatches cancel event when cancel button clicked', async () => {
|
||||
const { component } = render(DeleteConfirmModal, { props: defaultProps });
|
||||
|
||||
const cancelHandler = vi.fn();
|
||||
component.$on('cancel', cancelHandler);
|
||||
|
||||
const cancelBtn = screen.getByRole('button', { name: /cancel/i });
|
||||
await fireEvent.click(cancelBtn);
|
||||
|
||||
expect(cancelHandler).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('dispatches cancel when backdrop clicked', async () => {
|
||||
const { component } = render(DeleteConfirmModal, { props: defaultProps });
|
||||
|
||||
const cancelHandler = vi.fn();
|
||||
component.$on('cancel', cancelHandler);
|
||||
|
||||
const backdrop = screen.getByRole('dialog');
|
||||
await fireEvent.click(backdrop);
|
||||
|
||||
expect(cancelHandler).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('disables buttons when processing', () => {
|
||||
const props = { ...defaultProps, isProcessing: true };
|
||||
render(DeleteConfirmModal, { props });
|
||||
|
||||
const confirmBtn = screen.getByRole('button', { name: /processing/i });
|
||||
const cancelBtn = screen.getByRole('button', { name: /cancel/i });
|
||||
|
||||
expect(confirmBtn).toBeDisabled();
|
||||
expect(cancelBtn).toBeDisabled();
|
||||
});
|
||||
|
||||
it('shows processing state on confirm button', () => {
|
||||
const props = { ...defaultProps, isProcessing: true };
|
||||
render(DeleteConfirmModal, { props });
|
||||
|
||||
expect(screen.getByText(/processing/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not close on backdrop click when processing', async () => {
|
||||
const props = { ...defaultProps, isProcessing: true };
|
||||
const { component } = render(DeleteConfirmModal, { props });
|
||||
|
||||
const cancelHandler = vi.fn();
|
||||
component.$on('cancel', cancelHandler);
|
||||
|
||||
const backdrop = screen.getByRole('dialog');
|
||||
await fireEvent.click(backdrop);
|
||||
|
||||
expect(cancelHandler).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Styling', () => {
|
||||
it('applies destructive styling to confirm button when isDestructive', () => {
|
||||
render(DeleteConfirmModal, { props: defaultProps });
|
||||
|
||||
const confirmBtn = screen.getByRole('button', { name: /delete/i });
|
||||
expect(confirmBtn).toHaveClass('destructive');
|
||||
});
|
||||
|
||||
it('does not apply destructive styling when not destructive', () => {
|
||||
const props = { ...defaultProps, isDestructive: false };
|
||||
render(DeleteConfirmModal, { props });
|
||||
|
||||
const confirmBtn = screen.getByRole('button', { name: /delete/i });
|
||||
expect(confirmBtn).not.toHaveClass('destructive');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('has proper ARIA attributes', () => {
|
||||
render(DeleteConfirmModal, { props: defaultProps });
|
||||
|
||||
const dialog = screen.getByRole('dialog');
|
||||
expect(dialog).toHaveAttribute('aria-modal', 'true');
|
||||
expect(dialog).toHaveAttribute('aria-labelledby', 'modal-title');
|
||||
});
|
||||
|
||||
it('modal title has correct ID for aria-labelledby', () => {
|
||||
render(DeleteConfirmModal, { props: defaultProps });
|
||||
|
||||
const title = screen.getByText('Delete Item');
|
||||
expect(title).toHaveAttribute('id', 'modal-title');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user