firebase-os 1.1.4 → 1.1.6

package/src/templates/TemplateConfirmation.test.tsx

@@ -0,0 +1,106 @@
+// @generated-test
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from '../lib/AuthContext';
+import { ThemeProvider } from '../lib/ThemeContext';
+import { TemplateConfirmation } from './TemplateConfirmation';
+
+// Global mocks
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+const mockAuthContext = { 
+  user: { uid: 'mock-user-123', email: 'test@example.com' }, 
+  userWorkspaces: [], 
+  activeWorkspace: null,
+  activeOrg: null,
+  loading: false
+};
+
+const mockThemeContext = { 
+  themeMode: 'light', 
+  setThemeMode: vi.fn(), 
+  activeConfig: {} 
+};
+
+vi.mock('../lib/AuthContext', () => ({
+  AuthProvider: ({ children }: any) => <>{children}</>,
+  useAuth: () => mockAuthContext
+}));
+
+vi.mock('../lib/ThemeContext', () => ({
+  ThemeProvider: ({ children }: any) => <>{children}</>,
+  useTheme: () => mockThemeContext
+}));
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(() => ({})),
+  onAuthStateChanged: vi.fn((auth, cb) => { cb({ uid: 'mock-user-123', email: 'test@example.com', getIdToken: vi.fn(() => Promise.resolve('mock-token')) }); return () => {}; })
+}));
+vi.mock('firebase/firestore', () => ({
+  getFirestore: vi.fn(() => ({})),
+  collection: vi.fn(),
+  doc: vi.fn(),
+  setDoc: vi.fn(() => Promise.resolve()),
+  addDoc: vi.fn(() => Promise.resolve()),
+  updateDoc: vi.fn(() => Promise.resolve()),
+  deleteDoc: vi.fn(() => Promise.resolve()),
+  query: vi.fn(),
+  where: vi.fn(),
+  orderBy: vi.fn(),
+  limit: vi.fn(),
+  getDoc: vi.fn(() => Promise.resolve({ exists: () => true, data: () => ({ role: 'super_admin' }) })),
+  getDocs: vi.fn(() => Promise.resolve({ docs: [], forEach: vi.fn() })),
+  onSnapshot: vi.fn((...args: any[]) => {
+    let cb = args[1];
+    if (typeof args[2] === 'function') {
+      cb = args[2];
+    }
+    if (typeof cb === 'function') {
+      cb({docs: [], forEach: vi.fn(), data: () => ({}), exists: () => true});
+    }
+    return () => {};
+  })
+}));
+vi.mock('firebase/storage', () => ({
+  getStorage: vi.fn(() => ({})),
+  ref: vi.fn(),
+  listAll: vi.fn(() => Promise.resolve({ items: [], prefixes: [] })),
+  getDownloadURL: vi.fn(() => Promise.resolve('mock-url')),
+  getMetadata: vi.fn(() => Promise.resolve({ size: 1024, timeCreated: new Date().toISOString() }))
+}));
+
+describe('TemplateConfirmation Component', () => {
+  it('renders without crashing', async () => {
+    // Wrap in standard application providers inside act to process async side effects and prevent warnings
+    await act(async () => {
+      render(
+        <BrowserRouter>
+          <AuthProvider>
+            <ThemeProvider>
+              {/* @ts-ignore */}
+              <TemplateConfirmation />
+            </ThemeProvider>
+          </AuthProvider>
+        </BrowserRouter>
+      );
+      // Wait a tick to flush background state updates
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+    
+    // Check if the document has anything rendered without throwing
+    expect(document.body).toBeDefined();
+  });
+});

package/src/templates/TemplateConfirmation.tsx

@@ -0,0 +1,145 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import { ArrowLeft, MessageSquare, Check, X, AlertTriangle } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { Button } from '../components/Button';
+import { useState } from 'react';
+
+export function TemplateConfirmation() {
+  const [confirmed, setConfirmed] = useState<boolean | null | undefined>(undefined);
+
+  const reset = () => setConfirmed(null);
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col pt-12 items-center">
+      <div className="w-full max-w-5xl mb-8">
+        <Link to="/templates" className="inline-flex items-center gap-2 text-foreground/50 hover:text-accent transition-colors font-medium text-[14px]">
+          <ArrowLeft className="w-4 h-4" /> Back to Templates
+        </Link>
+      </div>
+
+      {/* Simulated Background Dashboard */}
+      <div className="w-full max-w-5xl mx-auto mt-2 glass-panel rounded-3xl border border-[var(--panel-border)] p-6 md:p-10 relative overflow-hidden shadow-2xl">
+        <div className="flex items-center justify-between mb-8 pb-6 border-b border-[var(--panel-border)]/50">
+          <div>
+            <h3 className="text-2xl font-extrabold text-foreground tracking-tight">System Files</h3>
+            <p className="text-[14px] text-foreground/50 mt-1">Review and manage core application assets.</p>
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-4">
+          <div className="glass-panel p-5 rounded-2xl border border-[var(--panel-border)]/50 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+            <div className="flex items-center gap-4 w-full sm:w-auto">
+              <div className="w-10 h-10 rounded-xl bg-red-500/10 flex items-center justify-center text-red-500 shrink-0">
+                <AlertTriangle className="w-5 h-5" />
+              </div>
+              <div className="min-w-0 pr-2">
+                <h4 className="font-bold text-[14px] sm:text-[15px] text-foreground truncate">Critical Configuration File</h4>
+                <p className="text-[12px] sm:text-[13px] text-foreground/50 font-medium mt-0.5 truncate">Size: 4.2 MB • Modified 2 hours ago</p>
+              </div>
+            </div>
+            
+            <Button 
+              variant="secondary"
+              onClick={() => setConfirmed(null)}
+              className="w-full sm:w-auto shrink-0 flex items-center justify-center px-6 py-3 sm:py-2.5 text-[13px] font-bold rounded-xl text-red-500 hover:bg-red-500/10 hover:border-red-500/20 bg-red-500/5 sm:bg-transparent"
+            >
+              Delete File
+            </Button>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 opacity-50 pointer-events-none mt-2">
+            {[1, 2].map((i) => (
+              <div key={i} className="glass-panel p-5 rounded-2xl border border-[var(--panel-border)]/20 flex items-center gap-4">
+                 <div className="w-10 h-10 rounded-xl bg-foreground/5 shrink-0" />
+                 <div className="flex flex-col gap-2 flex-1">
+                   <div className="w-32 h-3 rounded-full bg-foreground/10" />
+                   <div className="w-20 h-2 rounded-full bg-foreground/5" />
+                 </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Confirmation Modal */}
+      <AnimatePresence>
+        {confirmed !== undefined && (
+          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="absolute inset-0 bg-background/60 backdrop-blur-xl"
+            />
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95, y: 10 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95, y: 10 }}
+              className="w-full max-w-[400px] p-6 rounded-3xl glass-panel border border-[var(--panel-border)] shadow-2xl relative z-10 text-center"
+            >
+              <AnimatePresence mode="wait">
+                {confirmed === null ? (
+                  <motion.div
+                    key="confirm"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="w-full flex flex-col items-center"
+                  >
+                    <h3 className="text-xl font-extrabold mb-2 text-foreground tracking-tight">Confirm Deletion</h3>
+                    <p className="text-[14px] font-medium text-foreground/60 leading-relaxed mb-6">
+                      Are you entirely sure you wish to delete this configuration? This action is permanent.
+                    </p>
+                    <div className="flex items-center gap-3 w-full">
+                      <Button 
+                        variant="secondary"
+                        onClick={() => setConfirmed(false)}
+                        className="flex-1 py-2.5 text-[13px] font-bold rounded-xl"
+                      >
+                        Cancel
+                      </Button>
+                      <Button 
+                        onClick={() => setConfirmed(true)}
+                        className="flex-1 py-2.5 text-[13px] font-bold rounded-xl bg-red-500 hover:bg-red-600 border-none text-white shadow-xl hover:shadow-red-500/20 glow-hover"
+                      >
+                        Yes, Delete
+                      </Button>
+                    </div>
+                  </motion.div>
+                ) : confirmed === true ? (
+                  <motion.div
+                    key="success"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="w-full flex flex-col items-center py-2"
+                  >
+                    <h3 className="text-xl font-extrabold mb-1 text-green-500 tracking-tight flex items-center gap-2">
+                      <Check className="w-5 h-5" /> Verified
+                    </h3>
+                    <p className="text-[14px] font-medium text-foreground/60 mb-6">Action successfully executed.</p>
+                    <Button variant="secondary" onClick={() => setConfirmed(undefined)} className="px-6 py-2 rounded-xl text-[13px] font-bold">Close Panel</Button>
+                  </motion.div>
+                ) : (
+                  <motion.div
+                    key="error"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="w-full flex flex-col items-center py-2"
+                  >
+                    <h3 className="text-xl font-extrabold mb-1 text-foreground/80 tracking-tight flex items-center gap-2">
+                      <X className="w-5 h-5" /> Aborted
+                    </h3>
+                    <p className="text-[14px] font-medium text-foreground/60 mb-6">Cancellation securely caught.</p>
+                    <Button variant="secondary" onClick={() => setConfirmed(undefined)} className="px-6 py-2 rounded-xl text-[13px] font-bold">Close Panel</Button>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+    </main>
+  );
+}

package/src/templates/TemplateInlineForm.test.tsx

@@ -0,0 +1,106 @@
+// @generated-test
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from '../lib/AuthContext';
+import { ThemeProvider } from '../lib/ThemeContext';
+import { TemplateInlineForm } from './TemplateInlineForm';
+
+// Global mocks
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+const mockAuthContext = { 
+  user: { uid: 'mock-user-123', email: 'test@example.com' }, 
+  userWorkspaces: [], 
+  activeWorkspace: null,
+  activeOrg: null,
+  loading: false
+};
+
+const mockThemeContext = { 
+  themeMode: 'light', 
+  setThemeMode: vi.fn(), 
+  activeConfig: {} 
+};
+
+vi.mock('../lib/AuthContext', () => ({
+  AuthProvider: ({ children }: any) => <>{children}</>,
+  useAuth: () => mockAuthContext
+}));
+
+vi.mock('../lib/ThemeContext', () => ({
+  ThemeProvider: ({ children }: any) => <>{children}</>,
+  useTheme: () => mockThemeContext
+}));
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(() => ({})),
+  onAuthStateChanged: vi.fn((auth, cb) => { cb({ uid: 'mock-user-123', email: 'test@example.com', getIdToken: vi.fn(() => Promise.resolve('mock-token')) }); return () => {}; })
+}));
+vi.mock('firebase/firestore', () => ({
+  getFirestore: vi.fn(() => ({})),
+  collection: vi.fn(),
+  doc: vi.fn(),
+  setDoc: vi.fn(() => Promise.resolve()),
+  addDoc: vi.fn(() => Promise.resolve()),
+  updateDoc: vi.fn(() => Promise.resolve()),
+  deleteDoc: vi.fn(() => Promise.resolve()),
+  query: vi.fn(),
+  where: vi.fn(),
+  orderBy: vi.fn(),
+  limit: vi.fn(),
+  getDoc: vi.fn(() => Promise.resolve({ exists: () => true, data: () => ({ role: 'super_admin' }) })),
+  getDocs: vi.fn(() => Promise.resolve({ docs: [], forEach: vi.fn() })),
+  onSnapshot: vi.fn((...args: any[]) => {
+    let cb = args[1];
+    if (typeof args[2] === 'function') {
+      cb = args[2];
+    }
+    if (typeof cb === 'function') {
+      cb({docs: [], forEach: vi.fn(), data: () => ({}), exists: () => true});
+    }
+    return () => {};
+  })
+}));
+vi.mock('firebase/storage', () => ({
+  getStorage: vi.fn(() => ({})),
+  ref: vi.fn(),
+  listAll: vi.fn(() => Promise.resolve({ items: [], prefixes: [] })),
+  getDownloadURL: vi.fn(() => Promise.resolve('mock-url')),
+  getMetadata: vi.fn(() => Promise.resolve({ size: 1024, timeCreated: new Date().toISOString() }))
+}));
+
+describe('TemplateInlineForm Component', () => {
+  it('renders without crashing', async () => {
+    // Wrap in standard application providers inside act to process async side effects and prevent warnings
+    await act(async () => {
+      render(
+        <BrowserRouter>
+          <AuthProvider>
+            <ThemeProvider>
+              {/* @ts-ignore */}
+              <TemplateInlineForm />
+            </ThemeProvider>
+          </AuthProvider>
+        </BrowserRouter>
+      );
+      // Wait a tick to flush background state updates
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+    
+    // Check if the document has anything rendered without throwing
+    expect(document.body).toBeDefined();
+  });
+});

package/src/templates/TemplateInlineForm.tsx

@@ -0,0 +1,129 @@
+import { ArrowLeft, CheckCircle2 } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { Button } from '../components/Button';
+import { Input } from '../components/Input';
+import { useState } from 'react';
+import { auth, db } from '../lib/firebase';
+import { collection, addDoc, serverTimestamp } from 'firebase/firestore';
+
+export function TemplateInlineForm() {
+  const [formData, setFormData] = useState({ favoriteService: '', satisfactionRating: '', detailedThoughts: '' });
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setStatus('loading');
+    
+    try {
+      const currentUserId = auth.currentUser?.uid || 'guest';
+      await addDoc(collection(db, 'user_submissions'), {
+        uid: currentUserId,
+        ...formData,
+        type: 'template_simulation',
+        submittedAt: serverTimestamp(),
+      });
+      
+      setStatus('success');
+      setTimeout(() => {
+        setStatus('idle');
+        setFormData({ favoriteService: '', satisfactionRating: '', detailedThoughts: '' });
+      }, 3000);
+    } catch (err: any) {
+       setStatus('error');
+    }
+  };
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col pt-12">
+      <div className="w-full max-w-5xl mx-auto mb-6">
+        <Link to="/templates" className="inline-flex items-center gap-2 text-foreground/50 hover:text-accent transition-colors font-medium text-[14px]">
+          <ArrowLeft className="w-4 h-4" /> Back to Templates
+        </Link>
+      </div>
+
+      <div className="w-full max-w-5xl mx-auto mt-6">
+        <motion.div
+           initial={{ opacity: 0, y: 10 }}
+           animate={{ opacity: 1, y: 0 }}
+           className="w-full max-w-[500px] p-6 sm:p-8 lg:p-10 rounded-3xl md:rounded-3xl glass-panel relative glow-hover shadow-[0_8px_32px_rgba(0,0,0,0.08)] z-10 mx-auto"
+        >
+          <div className="absolute -inset-[1px] bg-gradient-to-br from-[var(--primary-glow)] to-transparent opacity-30 blur-[20px] rounded-3xl md:rounded-3xl -z-10" />
+
+          <div className="relative z-10 w-full">
+            {status === 'success' ? (
+              <motion.div
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="flex flex-col items-center justify-center py-8 text-center"
+              >
+                <div className="w-16 h-16 rounded-full bg-green-500/10 border border-green-500/20 flex items-center justify-center text-green-500 mb-4">
+                  <CheckCircle2 className="w-8 h-8" />
+                </div>
+                <h4 className="text-lg font-bold text-foreground mb-2">Simulation Complete!</h4>
+                <p className="text-[14px] text-foreground/60 leading-relaxed">Your test data was sent successfully. Log in as an admin and check the Submissions tab!</p>
+              </motion.div>
+            ) : status === 'loading' ? (
+              <motion.div
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1 }}
+                className="flex flex-col items-center justify-center py-16 text-center"
+              >
+                <div className="w-10 h-10 border-4 border-accent border-r-transparent rounded-full animate-spin mb-4" />
+                <h4 className="text-lg font-bold text-foreground tracking-tight">Processing</h4>
+                <p className="text-[13px] text-foreground/50 mt-1">Simulating submission...</p>
+              </motion.div>
+            ) : (
+              <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
+                <div className="mb-6 text-center">
+                  <h3 className="text-2xl sm:text-3xl font-extrabold mb-2 text-foreground tracking-tight break-words">Inline Form Template</h3>
+                  <p className="text-[14px] md:text-[15px] font-medium text-foreground/60 tracking-wide leading-relaxed">Try interacting with this simulated inline template block.</p>
+                </div>
+
+                <form onSubmit={handleSubmit} className="space-y-4 w-full">
+                  <Input
+                    label="Favorite Service"
+                    placeholder="e.g. Design Consulting"
+                    value={formData.favoriteService}
+                    onChange={e => setFormData({ ...formData, favoriteService: e.target.value })}
+                  />
+                  
+                  <Input
+                    label="Satisfaction Rating"
+                    type="number"
+                    placeholder="1 to 10"
+                    value={formData.satisfactionRating}
+                    onChange={e => setFormData({ ...formData, satisfactionRating: e.target.value })}
+                  />
+
+                  <div className="flex flex-col w-full relative">
+                    <label className="text-[13px] font-medium text-foreground/50 select-none mb-1.5 ml-1">
+                      Detailed Thoughts
+                    </label>
+                    <textarea
+                      rows={3}
+                      placeholder="Type something here..."
+                      value={formData.detailedThoughts}
+                      onChange={e => setFormData({ ...formData, detailedThoughts: e.target.value })}
+                      className="flex w-full rounded-xl text-[15px] text-foreground px-4 py-3 transition-all duration-300 placeholder:text-foreground/40 focus:outline-none focus:border-accent glow-focus disabled:cursor-not-allowed disabled:opacity-50 glass-panel min-h-[100px] resize-none"
+                    />
+                  </div>
+
+                  <div className="pt-2">
+                    <Button
+                      type="submit"
+                      className="w-full px-6 md:px-8 py-3 md:py-3.5 rounded-xl font-semibold tracking-wide btn-primary text-[15px] shadow-xl transition-all duration-300 hover:-translate-y-1 active:scale-95 flex items-center justify-center"
+                      isLoading={false}
+                    >
+                      Trigger Simulation
+                    </Button>
+                  </div>
+                </form>
+              </motion.div>
+            )}
+          </div>
+        </motion.div>
+      </div>
+    </main>
+  );
+}

package/src/templates/TemplatePopupForm.test.tsx

@@ -0,0 +1,106 @@
+// @generated-test
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from '../lib/AuthContext';
+import { ThemeProvider } from '../lib/ThemeContext';
+import { TemplatePopupForm } from './TemplatePopupForm';
+
+// Global mocks
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+const mockAuthContext = { 
+  user: { uid: 'mock-user-123', email: 'test@example.com' }, 
+  userWorkspaces: [], 
+  activeWorkspace: null,
+  activeOrg: null,
+  loading: false
+};
+
+const mockThemeContext = { 
+  themeMode: 'light', 
+  setThemeMode: vi.fn(), 
+  activeConfig: {} 
+};
+
+vi.mock('../lib/AuthContext', () => ({
+  AuthProvider: ({ children }: any) => <>{children}</>,
+  useAuth: () => mockAuthContext
+}));
+
+vi.mock('../lib/ThemeContext', () => ({
+  ThemeProvider: ({ children }: any) => <>{children}</>,
+  useTheme: () => mockThemeContext
+}));
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(() => ({})),
+  onAuthStateChanged: vi.fn((auth, cb) => { cb({ uid: 'mock-user-123', email: 'test@example.com', getIdToken: vi.fn(() => Promise.resolve('mock-token')) }); return () => {}; })
+}));
+vi.mock('firebase/firestore', () => ({
+  getFirestore: vi.fn(() => ({})),
+  collection: vi.fn(),
+  doc: vi.fn(),
+  setDoc: vi.fn(() => Promise.resolve()),
+  addDoc: vi.fn(() => Promise.resolve()),
+  updateDoc: vi.fn(() => Promise.resolve()),
+  deleteDoc: vi.fn(() => Promise.resolve()),
+  query: vi.fn(),
+  where: vi.fn(),
+  orderBy: vi.fn(),
+  limit: vi.fn(),
+  getDoc: vi.fn(() => Promise.resolve({ exists: () => true, data: () => ({ role: 'super_admin' }) })),
+  getDocs: vi.fn(() => Promise.resolve({ docs: [], forEach: vi.fn() })),
+  onSnapshot: vi.fn((...args: any[]) => {
+    let cb = args[1];
+    if (typeof args[2] === 'function') {
+      cb = args[2];
+    }
+    if (typeof cb === 'function') {
+      cb({docs: [], forEach: vi.fn(), data: () => ({}), exists: () => true});
+    }
+    return () => {};
+  })
+}));
+vi.mock('firebase/storage', () => ({
+  getStorage: vi.fn(() => ({})),
+  ref: vi.fn(),
+  listAll: vi.fn(() => Promise.resolve({ items: [], prefixes: [] })),
+  getDownloadURL: vi.fn(() => Promise.resolve('mock-url')),
+  getMetadata: vi.fn(() => Promise.resolve({ size: 1024, timeCreated: new Date().toISOString() }))
+}));
+
+describe('TemplatePopupForm Component', () => {
+  it('renders without crashing', async () => {
+    // Wrap in standard application providers inside act to process async side effects and prevent warnings
+    await act(async () => {
+      render(
+        <BrowserRouter>
+          <AuthProvider>
+            <ThemeProvider>
+              {/* @ts-ignore */}
+              <TemplatePopupForm />
+            </ThemeProvider>
+          </AuthProvider>
+        </BrowserRouter>
+      );
+      // Wait a tick to flush background state updates
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+    
+    // Check if the document has anything rendered without throwing
+    expect(document.body).toBeDefined();
+  });
+});