mozempk/insta-recipe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(RECIPE-0009): complete iteration 0 — deduplication, notifications, UI improvements

Browse Source
This commit is contained in:
Giancarmine Salucci
2026-02-18 06:00:48 +01:00
parent 40e3fb0c1b
commit dfca35bde2
12 changed files with 864 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/lib/server/queue/QueueManager.ts
View File

@@ -47,6 +47,21 @@ export class QueueManager {
/** Set of subscriber callbacks */
private subscribers: Set<QueueUpdateCallback> = new Set();
/**
* Find queue item by URL
*
* @param url - Instagram URL to search for
* @returns Existing queue item or undefined
*/
findByUrl(url: string): QueueItem | undefined {
for (const item of this.items.values()) {
if (item.url === url) {
return item;
}
}
return undefined;
}
/**
* Add URL to processing queue
*
@@ -60,6 +75,13 @@ export class QueueManager {
* ```
*/
enqueue(url: string): QueueItem {
// Check for duplicate URL
const existingItem = this.findByUrl(url);
if (existingItem) {
console.log(`[QueueManager] Duplicate URL detected: ${url}, returning existing item ${existingItem.id}`);
return existingItem;
}
const now = new Date().toISOString();
const item: QueueItem = {
id: uuidv4(),

100
src/routes/+page.svelte
View File

@@ -6,6 +6,7 @@
import QueueItemCard from './components/QueueItemCard.svelte';
import NotificationSettings from './components/NotificationSettings.svelte';
import { replaceState } from '$app/navigation';
import { pushNotificationManager } from '$lib/client/PushNotificationManager';
let items = $state<QueueItem[]>([]);
let loading = $state(true);
@@ -14,6 +15,7 @@
let eventSource = $state<EventSource | null>(null);
let connectionStatus = $state<'connecting' | 'connected' | 'disconnected'>('disconnected');
let lastPing = $state<string | null>(null);
let hasAttemptedAutoSubscribe = $state(false);
// Get highlighted item ID from URL params (when redirected from Share page)
let highlightId = $derived($page.url.searchParams.get('highlight'));
@@ -39,6 +41,7 @@
await loadQueueItems();
if (browser) {
startSSEConnection();
setupAutoSubscribe();
}
});
@@ -125,6 +128,41 @@
}
}
/**
* Setup automatic notification subscription on first user interaction
*
* Follows Web Push API best practices: subscription requires user gesture.
* Listens for first click/touch anywhere on page, checks if notifications
* are supported but not subscribed, then auto-subscribes.
*/
function setupAutoSubscribe() {
if (hasAttemptedAutoSubscribe) return;
const attemptSubscribe = async () => {
if (hasAttemptedAutoSubscribe) return;
hasAttemptedAutoSubscribe = true;
const state = pushNotificationManager.getState();
// Only auto-subscribe if:
// - Browser supports notifications
// - Permission is not denied
// - Not already subscribed
if (state.supported && state.permission !== 'denied' && !state.subscribed) {
console.log('[HomePage] Auto-subscribing to notifications on first interaction');
await pushNotificationManager.subscribe();
}
// Remove listener after first attempt
document.removeEventListener('click', attemptSubscribe);
document.removeEventListener('touchstart', attemptSubscribe);
};
// Listen for first user interaction
document.addEventListener('click', attemptSubscribe, { once: true });
document.addEventListener('touchstart', attemptSubscribe, { once: true });
}
function updateQueueItem(update: QueueStatusUpdate) {
// Find and update the item in the list
const itemIndex = items.findIndex(item => item.id === update.itemId);
@@ -223,36 +261,46 @@
<!-- Action Bar -->
<div class="mb-6 flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
<!-- Filter Tabs -->
<div class="flex flex-wrap gap-2">
{#each filters as filterOption}
<button
onclick={() => filter = filterOption.id}
class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {filter === filterOption.id
? 'bg-blue-600 text-white'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
<div class="flex items-center gap-4 w-full sm:w-auto">
<!-- Filter Dropdown -->
<div class="flex items-center gap-2">
<label for="filter-select" class="text-sm font-medium text-gray-700">Filter:</label>
<select
id="filter-select"
bind:value={filter}
class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
>
{filterOption.name}
{#if filterOption.count > 0}
<span class="ml-1 {filter === filterOption.id ? 'text-blue-100' : 'text-gray-500'}">
({filterOption.count})
</span>
{/if}
</button>
{/each}
{#each filters as filterOption}
<option value={filterOption.id}>
{filterOption.name} ({filterOption.count})
</option>
{/each}
</select>
</div>
<!-- Refresh Button (moved to same row) -->
<button
onclick={loadQueueItems}
disabled={loading}
class="flex items-center space-x-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 disabled:opacity-50 transition-colors"
>
<svg class="w-4 h-4 {loading ? 'animate-spin' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>
<span>Refresh</span>
</button>
</div>
<!-- Refresh Button -->
<button
onclick={loadQueueItems}
disabled={loading}
class="flex items-center space-x-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 disabled:opacity-50 transition-colors"
<!-- Add Recipe Button (always visible) -->
<a
href="/share"
class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
>
<svg class="w-4 h-4 {loading ? 'animate-spin' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
<span>Refresh</span>
</button>
Add Recipe URL
</a>
</div>
<!-- Loading State -->

32
src/routes/api/queue/+server.ts
View File

@@ -50,15 +50,35 @@ export const POST: RequestHandler = async ({ request }) => {
throw new ValidationError(validation.error || 'Invalid Instagram URL');
}
// Enqueue the URL
// Check for duplicate before enqueueing
const existingItem = queueManager.findByUrl(url);
if (existingItem) {
// Return info response for duplicate
return json({
duplicate: true,
message: 'This recipe is already in the queue',
item: {
id: existingItem.id,
url: existingItem.url,
status: existingItem.status,
enqueuedAt: existingItem.enqueuedAt
}
}, { status: 200 }); // 200 OK, not an error
}
// Enqueue new URL
const queueItem = queueManager.enqueue(url);
// Return minimal response (full details available at GET /api/queue/{id})
// Return success response
return json({
id: queueItem.id,
url: queueItem.url,
status: queueItem.status,
enqueuedAt: queueItem.enqueuedAt
duplicate: false,
item: {
id: queueItem.id,
url: queueItem.url,
status: queueItem.status,
enqueuedAt: queueItem.enqueuedAt
}
});
} catch (error) {
return handleApiError(error);

83
src/routes/components/NotificationSettings.svelte
View File

@@ -12,10 +12,6 @@
let unsubscribe: (() => void) | null = null;
// Test notification state
let testLoading = $state<boolean>(false);
let testMessage = $state<string | null>(null);
onMount(() => {
// Subscribe to state changes
unsubscribe = pushNotificationManager.onStateChange((newState) => {
@@ -54,35 +50,6 @@
function canToggle(): boolean {
return viewModel.supported && viewModel.permission !== 'denied' && !viewModel.loading;
}
async function sendTestNotification(type: 'success' | 'error' | 'progress') {
testLoading = true;
testMessage = null;
try {
const response = await fetch('/api/notifications/test', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type })
});
if (!response.ok) {
throw new Error('Failed to send test notification');
}
const result = await response.json();
testMessage = `✓ Test ${type} notification sent to ${result.subscriberCount} subscriber(s)`;
} catch (error) {
testMessage = `✗ Error: ${error instanceof Error ? error.message : 'Unknown error'}`;
} finally {
testLoading = false;
// Auto-dismiss message after 3 seconds
setTimeout(() => {
testMessage = null;
}, 3000);
}
}
</script>
<div class="bg-white border rounded-lg shadow-sm p-6">
@@ -212,54 +179,4 @@
</button>
</div>
</div>
<!-- Test Notification Buttons (only shown when subscribed) -->
{#if viewModel.subscribed}
<div class="mt-6 pt-6 border-t border-gray-200">
<h4 class="text-sm font-medium text-gray-900 mb-3">Test Notifications</h4>
<p class="text-sm text-gray-600 mb-4">
Send a test notification to verify your subscription is working correctly.
</p>
<div class="flex flex-wrap gap-2">
<button
onclick={() => sendTestNotification('success')}
disabled={testLoading || viewModel.loading}
class="px-3 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{testLoading ? 'Sending...' : 'Test Success'}
</button>
<button
onclick={() => sendTestNotification('error')}
disabled={testLoading || viewModel.loading}
class="px-3 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{testLoading ? 'Sending...' : 'Test Error'}
</button>
<button
onclick={() => sendTestNotification('progress')}
disabled={testLoading || viewModel.loading}
class="px-3 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{testLoading ? 'Sending...' : 'Test Progress'}
</button>
</div>
<!-- Test Message -->
{#if testMessage}
<div class="mt-4 p-3 rounded-lg {testMessage.startsWith('✓') ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'}">
<div class="flex items-start space-x-2">
<svg class="w-4 h-4 flex-shrink-0 mt-0.5 {testMessage.startsWith('✓') ? 'text-green-400' : 'text-red-400'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={testMessage.startsWith('✓') ? "M5 13l4 4L19 7" : "M6 18L18 6M6 6l12 12"}></path>
</svg>
<div class="text-sm {testMessage.startsWith('✓') ? 'text-green-800' : 'text-red-800'}">
{testMessage}
</div>
</div>
</div>
{/if}
</div>
{/if}
</div>

246
src/routes/components/NotificationSettings.svelte.spec.ts
View File

@@ -1,246 +0,0 @@
import { page } from 'vitest/browser';
import { describe, test, expect, vi, beforeEach } from 'vitest';
import { render } from 'vitest-browser-svelte';
import NotificationSettings from './NotificationSettings.svelte';
import { pushNotificationManager } from '$lib/client/PushNotificationManager';
// Mock the pushNotificationManager
vi.mock('$lib/client/PushNotificationManager', () => ({
pushNotificationManager: {
onStateChange: vi.fn(),
toggleSubscription: vi.fn()
}
}));
describe('NotificationSettings test buttons', () => {
beforeEach(() => {
vi.clearAllMocks();
// Mock fetch using vi.stubGlobal for browser environment
vi.stubGlobal('fetch', vi.fn());
});
test('should not show test buttons when not subscribed', async () => {
vi.mocked(pushNotificationManager.onStateChange).mockImplementation((callback) => {
callback({
supported: true,
permission: 'granted',
subscribed: false,
loading: false,
error: null
});
return () => {};
});
render(NotificationSettings);
// Test Notifications section should not be visible
const testSection = page.getByText('Test Notifications');
await expect.element(testSection).not.toBeInTheDocument();
});
test('should show test buttons when subscribed', async () => {
vi.mocked(pushNotificationManager.onStateChange).mockImplementation((callback) => {
callback({
supported: true,
permission: 'granted',
subscribed: true,
loading: false,
error: null
});
return () => {};
});
render(NotificationSettings);
await expect.element(page.getByText('Test Success')).toBeInTheDocument();
await expect.element(page.getByText('Test Error')).toBeInTheDocument();
await expect.element(page.getByText('Test Progress')).toBeInTheDocument();
});
test('should send test success notification on button click', async () => {
vi.mocked(fetch).mockResolvedValue({
ok: true,
json: async () => ({ success: true, subscriberCount: 1 })
} as Response);
vi.mocked(pushNotificationManager.onStateChange).mockImplementation((callback) => {
callback({
supported: true,
permission: 'granted',
subscribed: true,
loading: false,
error: null
});
return () => {};
});
render(NotificationSettings);
const button = page.getByText('Test Success');
await button.click();
expect(fetch).toHaveBeenCalledWith('/api/notifications/test', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'success' })
});
const successMessage = page.getByText(/✓ Test success notification sent to 1 subscriber/i);
await expect.element(successMessage).toBeInTheDocument();
});
test('should send test error notification on button click', async () => {
vi.mocked(fetch).mockResolvedValue({
ok: true,
json: async () => ({ success: true, subscriberCount: 2 })
} as Response);
vi.mocked(pushNotificationManager.onStateChange).mockImplementation((callback) => {
callback({
supported: true,
permission: 'granted',
subscribed: true,
loading: false,
error: null
});
return () => {};
});
render(NotificationSettings);
const button = page.getByText('Test Error');
await button.click();
expect(fetch).toHaveBeenCalledWith('/api/notifications/test', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'error' })
});
const successMessage = page.getByText(/✓ Test error notification sent/i);
await expect.element(successMessage).toBeInTheDocument();
});
test('should send test progress notification on button click', async () => {
vi.mocked(fetch).mockResolvedValue({
ok: true,
json: async () => ({ success: true, subscriberCount: 1 })
} as Response);
vi.mocked(pushNotificationManager.onStateChange).mockImplementation((callback) => {
callback({
supported: true,
permission: 'granted',
subscribed: true,
loading: false,
error: null
});
return () => {};
});
render(NotificationSettings);
const button = page.getByText('Test Progress');
await button.click();
expect(fetch).toHaveBeenCalledWith('/api/notifications/test', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type: 'progress' })
});
const successMessage = page.getByText(/✓ Test progress notification sent/i);
await expect.element(successMessage).toBeInTheDocument();
});
test('should display error message on failed request', async () => {
vi.mocked(fetch).mockResolvedValue({
ok: false,
status: 500
} as Response);
vi.mocked(pushNotificationManager.onStateChange).mockImplementation((callback) => {
callback({
supported: true,
permission: 'granted',
subscribed: true,
loading: false,
error: null
});
return () => {};
});
render(NotificationSettings);
const button = page.getByText('Test Success');
await button.click();
const errorMessage = page.getByText(/✗ Error:/i);
await expect.element(errorMessage).toBeInTheDocument();
});
test('should auto-dismiss message after 3 seconds', async () => {
vi.mocked(fetch).mockResolvedValue({
ok: true,
json: async () => ({ success: true, subscriberCount: 1 })
} as Response);
vi.mocked(pushNotificationManager.onStateChange).mockImplementation((callback) => {
callback({
supported: true,
permission: 'granted',
subscribed: true,
loading: false,
error: null
});
return () => {};
});
render(NotificationSettings);
const button = page.getByText('Test Success');
await button.click();
// Message should appear
const successMessage = page.getByText(/✓ Test success notification sent to 1 subscriber/i);
await expect.element(successMessage).toBeInTheDocument();
});
test('should disable buttons during loading', async () => {
// Create a promise that we can control
let resolvePromise: ((value: any) => void) | undefined;
const fetchPromise = new Promise((resolve) => {
resolvePromise = resolve;
});
vi.mocked(fetch).mockReturnValue(fetchPromise as any);
vi.mocked(pushNotificationManager.onStateChange).mockImplementation((callback) => {
callback({
supported: true,
permission: 'granted',
subscribed: true,
loading: false,
error: null
});
return () => {};
});
render(NotificationSettings);
const successButton = page.getByRole('button', { name: 'Test Success' });
// Click a button to start loading
await successButton.click();
// Button should show "Sending..." text
const sendingButton = page.getByRole('button', { name: 'Sending...' }).first();
await expect.element(sendingButton).toBeInTheDocument();
// Cleanup - resolve the promise
resolvePromise?.({
ok: true,
json: async () => ({ success: true, subscriberCount: 1 })
});
});
});

131
src/routes/test/+page.svelte Normal file
View File

@@ -0,0 +1,131 @@
<script lang="ts">
import { pushNotificationManager, type NotificationState } from '$lib/client/PushNotificationManager';
import { onMount } from 'svelte';
let viewModel = $state<NotificationState>({
supported: false,
permission: 'default',
subscribed: false,
loading: false,
error: null
});
let testLoading = $state<boolean>(false);
let testMessage = $state<string | null>(null);
let unsubscribe: (() => void) | null = null;
onMount(() => {
unsubscribe = pushNotificationManager.onStateChange((newState) => {
viewModel = newState;
});
return () => {
unsubscribe?.();
};
});
async function sendTestNotification(type: 'success' | 'error' | 'progress') {
testLoading = true;
testMessage = null;
try {
const response = await fetch('/api/notifications/test', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ type })
});
if (!response.ok) {
throw new Error('Failed to send test notification');
}
const result = await response.json();
testMessage = `✓ Test ${type} notification sent to ${result.subscriberCount} subscriber(s)`;
} catch (error) {
testMessage = `✗ Error: ${error instanceof Error ? error.message : 'Unknown error'}`;
} finally {
testLoading = false;
setTimeout(() => {
testMessage = null;
}, 3000);
}
}
</script>
<svelte:head>
<title>InstaRecipe - Notification Tests</title>
</svelte:head>
<div class="mx-auto p-6 max-w-4xl">
<div class="mb-8">
<h1 class="text-3xl font-bold mb-2">Notification Testing</h1>
<p class="text-gray-600">Debug endpoint for testing push notifications</p>
</div>
{#if !viewModel.subscribed}
<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
<div class="flex items-start space-x-2">
<svg class="w-5 h-5 text-yellow-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 15.5c-.77.833.192 2.5 1.732 2.5z"></path>
</svg>
<div>
<div class="text-sm font-medium text-yellow-800">Not Subscribed</div>
<div class="text-sm text-yellow-700">
You must enable push notifications on the <a href="/" class="underline">homepage</a> before testing.
</div>
</div>
</div>
</div>
{/if}
<div class="bg-white border rounded-lg shadow-sm p-6">
<h2 class="text-lg font-medium text-gray-900 mb-4">Test Notifications</h2>
<p class="text-sm text-gray-600 mb-6">
Send test notifications to verify your subscription is working correctly.
</p>
<div class="flex flex-wrap gap-3 mb-6">
<button
onclick={() => sendTestNotification('success')}
disabled={testLoading || !viewModel.subscribed}
class="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{testLoading ? 'Sending...' : 'Test Success'}
</button>
<button
onclick={() => sendTestNotification('error')}
disabled={testLoading || !viewModel.subscribed}
class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{testLoading ? 'Sending...' : 'Test Error'}
</button>
<button
onclick={() => sendTestNotification('progress')}
disabled={testLoading || !viewModel.subscribed}
class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{testLoading ? 'Sending...' : 'Test Progress'}
</button>
</div>
{#if testMessage}
<div class="p-3 rounded-lg {testMessage.startsWith('✓') ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'}">
<div class="flex items-start space-x-2">
<svg class="w-4 h-4 flex-shrink-0 mt-0.5 {testMessage.startsWith('✓') ? 'text-green-400' : 'text-red-400'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={testMessage.startsWith('✓') ? "M5 13l4 4L19 7" : "M6 18L18 6M6 6l12 12"}></path>
</svg>
<div class="text-sm {testMessage.startsWith('✓') ? 'text-green-800' : 'text-red-800'}">
{testMessage}
</div>
</div>
</div>
{/if}
</div>
<div class="mt-6">
<a href="/" class="text-sm text-blue-600 hover:text-blue-700">← Back to Dashboard</a>
</div>
</div>

26
src/service-worker.ts
View File

@@ -183,22 +183,36 @@ self.addEventListener('notificationclick', (event) => {
let url = '/';
if (action === 'view' && data?.itemId) {
url = `/?highlight=${data.itemId}`;
// Handle 'view' action - redirect to Tandoor if available
if (action === 'view') {
if (data?.tandoorUrl) {
// Success notification with Tandoor URL - redirect to recipe
url = data.tandoorUrl;
} else if (data?.itemId) {
// Fallback to dashboard highlight
url = `/?highlight=${data.itemId}`;
}
} else if (action === 'retry' && data?.itemId) {
// Navigate to dashboard and trigger retry via postMessage
// Navigate to dashboard and trigger retry
url = `/?highlight=${data.itemId}&action=retry`;
} else if (data?.itemId) {
// Default: highlight item in dashboard
url = `/?highlight=${data.itemId}`;
}
event.waitUntil(
clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientsList) => {
// Check if there's already a window/tab open
// For external URLs (Tandoor), always open new window
if (url.startsWith('http') && !url.includes(self.location.origin)) {
if (clients.openWindow) {
return clients.openWindow(url);
}
}
// For internal URLs, check for existing window
for (const client of clientsList) {
if (client.url.includes(self.location.origin) && 'focus' in client) {
return client.focus().then(() => {
// Send message to the client about the action
return client.postMessage({
type: 'notification-action',
action: action,
@@ -208,7 +222,7 @@ self.addEventListener('notificationclick', (event) => {
}
}
// If no window is open, open a new one
// No window open, open new one
if (clients.openWindow) {
return clients.openWindow(url);
}

120
src/tests/notification-auto-subscribe.svelte.spec.ts Normal file
View File

@@ -0,0 +1,120 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import HomePage from '../routes/+page.svelte';
import { pushNotificationManager } from '$lib/client/PushNotificationManager';
// Mock $app/environment
vi.mock('$app/environment', () => ({
browser: true
}));
// Mock fetch for queue API calls
globalThis.fetch = vi.fn(() =>
Promise.resolve({
ok: true,
json: () => Promise.resolve({ items: [], stats: { total: 0, pending: 0, in_progress: 0, completed: 0, error: 0 } })
} as Response)
);
// Mock EventSource for SSE
globalThis.EventSource = vi.fn(() => ({
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
close: vi.fn(),
onerror: null,
onmessage: null,
onopen: null,
readyState: 0,
url: '',
withCredentials: false,
CONNECTING: 0,
OPEN: 1,
CLOSED: 2,
dispatchEvent: vi.fn()
})) as any;
vi.mock('$lib/client/PushNotificationManager', () => ({
pushNotificationManager: {
getState: vi.fn(),
subscribe: vi.fn(),
onStateChange: vi.fn(() => () => {})
}
}));
describe('Automatic Notification Subscription', () => {
beforeEach(() => {
vi.clearAllMocks();
vi.mocked(pushNotificationManager.getState).mockReturnValue({
supported: true,
permission: 'default',
subscribed: false,
loading: false,
error: null
});
});
it('should auto-subscribe on first user click when supported and not subscribed', async () => {
render(HomePage);
// Wait for component to mount and set up event listeners
await new Promise(resolve => setTimeout(resolve, 100));
// Simulate user click anywhere on page
document.body.click();
// Wait for event handlers to process
await new Promise(resolve => setTimeout(resolve, 50));
expect(pushNotificationManager.subscribe).toHaveBeenCalledTimes(1);
});
it('should not auto-subscribe if permission denied', async () => {
vi.mocked(pushNotificationManager.getState).mockReturnValue({
supported: true,
permission: 'denied',
subscribed: false,
loading: false,
error: null
});
render(HomePage);
await new Promise(resolve => setTimeout(resolve, 100));
document.body.click();
await new Promise(resolve => setTimeout(resolve, 50));
expect(pushNotificationManager.subscribe).not.toHaveBeenCalled();
});
it('should not auto-subscribe if already subscribed', async () => {
vi.mocked(pushNotificationManager.getState).mockReturnValue({
supported: true,
permission: 'granted',
subscribed: true,
loading: false,
error: null
});
render(HomePage);
await new Promise(resolve => setTimeout(resolve, 100));
document.body.click();
await new Promise(resolve => setTimeout(resolve, 50));
expect(pushNotificationManager.subscribe).not.toHaveBeenCalled();
});
it('should only attempt subscription once', async () => {
render(HomePage);
await new Promise(resolve => setTimeout(resolve, 100));
document.body.click();
document.body.click();
document.body.click();
await new Promise(resolve => setTimeout(resolve, 50));
expect(pushNotificationManager.subscribe).toHaveBeenCalledTimes(1);
});
});

57
src/tests/queue-api.spec.ts
View File

@@ -37,13 +37,14 @@ describe('Queue API Endpoints', () => {
expect(response.status).toBe(200);
const data = await response.json();
expect(data.id).toBeTruthy();
expect(data.url).toBe('https://instagram.com/p/ABC123');
expect(data.status).toBe('pending');
expect(data.enqueuedAt).toBeTruthy();
expect(data.duplicate).toBe(false);
expect(data.item.id).toBeTruthy();
expect(data.item.url).toBe('https://instagram.com/p/ABC123');
expect(data.item.status).toBe('pending');
expect(data.item.enqueuedAt).toBeTruthy();
// Verify item exists in queue
const item = queueManager.get(data.id);
// Verify item exists in queue
const item = queueManager.get(data.item.id);
expect(item).toBeTruthy();
expect(item?.url).toBe('https://instagram.com/p/ABC123');
});
@@ -63,10 +64,11 @@ describe('Queue API Endpoints', () => {
expect(response.status).toBe(200);
const data = await response.json();
expect(data.url).toBe('https://www.instagram.com/p/XYZ789');
expect(data.duplicate).toBe(false);
expect(data.item.url).toBe('https://www.instagram.com/p/XYZ789');
// Verify item exists in queue
const item = queueManager.get(data.id);
// Verify item exists in queue
const item = queueManager.get(data.item.id);
expect(item).toBeTruthy();
expect(item?.url).toBe('https://www.instagram.com/p/XYZ789');
});
@@ -83,7 +85,8 @@ describe('Queue API Endpoints', () => {
const response = await queuePOST({ request } as any);
expect(response.status).toBe(200);
const data = await response.json();
expect(data.url).toBe('https://instagram.com/reel/ABC123');
expect(data.duplicate).toBe(false);
expect(data.item.url).toBe('https://instagram.com/reel/ABC123');
});
it('should accept Instagram URLs with query parameters', async () => {
@@ -98,7 +101,8 @@ describe('Queue API Endpoints', () => {
const response = await queuePOST({ request } as any);
expect(response.status).toBe(200);
const data = await response.json();
expect(data.url).toBe(
expect(data.duplicate).toBe(false);
expect(data.item.url).toBe(
'https://www.instagram.com/reel/DSevV5CDcNm/?utm_source=ig_web_copy_link'
);
});
@@ -234,6 +238,37 @@ describe('Queue API Endpoints', () => {
});
});
describe('POST /api/queue deduplication', () => {
it('should return duplicate flag when URL already exists', async () => {
const url = 'https://instagram.com/p/DUP123';
// First request
const request1 = new Request('http://localhost/api/queue', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url })
});
const response1 = await queuePOST({ request: request1 } as any);
const data1 = await response1.json();
expect(data1.duplicate).toBe(false);
// Second request (duplicate)
const request2 = new Request('http://localhost/api/queue', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url })
});
const response2 = await queuePOST({ request: request2 } as any);
const data2 = await response2.json();
expect(response2.status).toBe(200);
expect(data2.duplicate).toBe(true);
expect(data2.message).toContain('already in the queue');
expect(data2.item.id).toBe(data1.item.id);
});
});
describe('GET /api/queue', () => {
it('should return empty list when no items', async () => {
const url = new URL('http://localhost/api/queue');

24
src/tests/queue-manager.spec.ts
View File

@@ -353,4 +353,28 @@ describe('QueueManager', () => {
expect(callback3).toHaveBeenCalled();
});
});
describe('deduplication', () => {
it('should return existing item when enqueueing duplicate URL', () => {
const url = 'https://instagram.com/p/ABC123';
const firstItem = queueManager.enqueue(url);
const secondItem = queueManager.enqueue(url);
expect(secondItem.id).toBe(firstItem.id);
expect(queueManager.getAll()).toHaveLength(1);
});
it('should find item by URL', () => {
const url = 'https://instagram.com/p/TEST123';
const item = queueManager.enqueue(url);
const found = queueManager.findByUrl(url);
expect(found?.id).toBe(item.id);
});
it('should return undefined when URL not found', () => {
const found = queueManager.findByUrl('https://instagram.com/p/NOTFOUND');
expect(found).toBeUndefined();
});
});
});