Promote develop → production: landing, signup funnel, policies, billing, coverage

apps/web/__tests__/App.test.tsx

@@ -1,17 +1,26 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 import { describe, it, expect, vi, beforeAll } from 'vitest';
 import { AuthProvider } from '@beakerstack/shared/contexts/AuthContext';
 import { ProfileProvider } from '@beakerstack/shared/contexts/ProfileContext';
 import App from '../src/App';
-import { HOME_TITLE } from '@beakerstack/shared/utils/strings';
 
 // Mock environment variables to prevent real Supabase client creation
 beforeAll(() => {
   vi.stubEnv('VITE_SUPABASE_URL', 'http://localhost:54321');
   vi.stubEnv('VITE_SUPABASE_ANON_KEY', 'test-anon-key');
 });
 
+// Mock lazy-loaded HomePage so Suspense resolves synchronously in tests
+vi.mock('../src/pages/HomePage', () => ({
+  default: () => (
+    <div>
+      <a href='/login'>Sign in</a>
+      <a href='/signup'>Get started</a>
+    </div>
+  ),
+}));
+
 // Mock the supabase client
 vi.mock('../src/lib/supabase', () => {
   const mockChannel = {
@@ -79,39 +88,37 @@ const mockSupabaseClient = {
   removeChannel: vi.fn().mockResolvedValue({ status: 'ok', error: null }),
 } as any;
 
+function renderApp() {
+  return render(
+    <AuthProvider supabaseClient={mockSupabaseClient}>
+      <ProfileProvider supabaseClient={mockSupabaseClient}>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </ProfileProvider>
+    </AuthProvider>
+  );
+}
+
 describe('App', () => {
-  it('renders without crashing', () => {
-    render(
-      <AuthProvider supabaseClient={mockSupabaseClient}>
-        <ProfileProvider supabaseClient={mockSupabaseClient}>
-          <BrowserRouter>
-            <App />
-          </BrowserRouter>
-        </ProfileProvider>
-      </AuthProvider>
-    );
+  it('renders without crashing', async () => {
+    // act(async) flushes React.lazy's dynamic-import Promise and all
+    // subsequent React state updates before we query the DOM.
+    await act(async () => {
+      renderApp();
+    });
 
-    // Check if the home page content is rendered
-    // Title appears in both header and main content
-    const titles = screen.getAllByText(HOME_TITLE);
-    expect(titles.length).toBeGreaterThan(0);
+    const signInLinks = screen.getAllByRole('link', { name: /sign in/i });
+    expect(signInLinks.length).toBeGreaterThan(0);
   });
 
-  it('renders navigation links', () => {
-    render(
-      <AuthProvider supabaseClient={mockSupabaseClient}>
-        <ProfileProvider supabaseClient={mockSupabaseClient}>
-          <BrowserRouter>
-            <App />
-          </BrowserRouter>
-        </ProfileProvider>
-      </AuthProvider>
-    );
+  it('renders navigation links', async () => {
+    await act(async () => {
+      renderApp();
+    });
 
-    // Check if sign in and sign up links are present
-    // These appear in both header and main content
-    const signInLinks = screen.getAllByText('Sign In');
-    const signUpLinks = screen.getAllByText('Sign Up');
+    const signInLinks = screen.getAllByRole('link', { name: /sign in/i });
+    const signUpLinks = screen.getAllByRole('link', { name: /get started/i });
     expect(signInLinks.length).toBeGreaterThan(0);
     expect(signUpLinks.length).toBeGreaterThan(0);
   });

apps/web/package.json

@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "@rolldown/pluginutils": "^1.0.0-beta.47",
+    "@tailwindcss/typography": "^0.5.19",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.1.0",
     "@testing-library/react": "^14.1.0",

apps/web/src/App.tsx

@@ -1,48 +1,78 @@
+import { lazy, Suspense } from 'react';
 import { Routes, Route, Outlet } from 'react-router-dom';
 import { ProtectedRoute } from '@beakerstack/shared/components/auth/ProtectedRoute.web';
 import { BillingProviderLayout } from './billing/BillingProviderLayout';
-import HomePage from './pages/HomePage';
+import { AppFooter } from './components/AppFooter';
 import LoginPage from './pages/LoginPage';
 import SignupPage from './pages/SignupPage';
 import DashboardPage from './pages/DashboardPage';
 import ProfilePage from './pages/ProfilePage';
 import AuthCallbackPage from './pages/AuthCallbackPage';
+import PolicyPage from './pages/PolicyPage';
 import BillingOverviewPage from './pages/billing/BillingOverviewPage';
 import BillingUsagePage from './pages/billing/BillingUsagePage';
 import BillingPlansPage from './pages/billing/BillingPlansPage';
 import BillingInvoicesPage from './pages/billing/BillingInvoicesPage';
 
+const HomePage = lazy(() => import('./pages/HomePage'));
+
+function RootLayout() {
+  return (
+    <div className='flex min-h-screen flex-col'>
+      <div className='flex-1'>
+        <Outlet />
+      </div>
+      <AppFooter />
+    </div>
+  );
+}
+
 function App() {
   return (
-    <div className='min-h-screen bg-gray-50'>
+    <div className='bg-gray-50'>
       <Routes>
-        <Route path='/' element={<HomePage />} />
-        <Route path='/login' element={<LoginPage />} />
-        <Route path='/signup' element={<SignupPage />} />
-        <Route
-          path='/profile'
-          element={
-            <ProtectedRoute>
-              <ProfilePage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          element={
-            <ProtectedRoute>
-              <Outlet />
-            </ProtectedRoute>
-          }
-        >
-          <Route element={<BillingProviderLayout />}>
-            <Route path='/dashboard' element={<DashboardPage />} />
-            <Route path='/billing' element={<BillingOverviewPage />} />
-            <Route path='/billing/usage' element={<BillingUsagePage />} />
-            <Route path='/billing/plans' element={<BillingPlansPage />} />
-            <Route path='/billing/invoices' element={<BillingInvoicesPage />} />
+        <Route element={<RootLayout />}>
+          <Route
+            path='/'
+            element={
+              <Suspense fallback={null}>
+                <HomePage />
+              </Suspense>
+            }
+          />
+          <Route path='/login' element={<LoginPage />} />
+          <Route path='/signup' element={<SignupPage />} />
+          <Route path='/terms' element={<PolicyPage policy='terms' />} />
+          <Route path='/privacy' element={<PolicyPage policy='privacy' />} />
+          <Route path='/refunds' element={<PolicyPage policy='refunds' />} />
+          <Route
+            path='/profile'
+            element={
+              <ProtectedRoute>
+                <ProfilePage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            element={
+              <ProtectedRoute>
+                <Outlet />
+              </ProtectedRoute>
+            }
+          >
+            <Route element={<BillingProviderLayout />}>
+              <Route path='/dashboard' element={<DashboardPage />} />
+              <Route path='/billing' element={<BillingOverviewPage />} />
+              <Route path='/billing/usage' element={<BillingUsagePage />} />
+              <Route path='/billing/plans' element={<BillingPlansPage />} />
+              <Route
+                path='/billing/invoices'
+                element={<BillingInvoicesPage />}
+              />
+            </Route>
           </Route>
+          <Route path='/auth/callback' element={<AuthCallbackPage />} />
         </Route>
-        <Route path='/auth/callback' element={<AuthCallbackPage />} />
       </Routes>
     </div>
   );

apps/web/src/auth/__tests__/planSignupBullets.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import { planSignupBullets } from '../planSignupBullets';
+
+describe('planSignupBullets', () => {
+  it('returns non-empty strings for known plans', () => {
+    const b = planSignupBullets('beakerstack_pro');
+    expect(b.length).toBeGreaterThan(0);
+    expect(b.length).toBeLessThanOrEqual(3);
+    expect(b.every(x => typeof x === 'string' && x.length > 0)).toBe(true);
+  });
+
+  it('includes trial copy when trial days > 0', () => {
+    const b = planSignupBullets('beakerstack_max');
+    expect(b.some(x => /trial/i.test(x))).toBe(true);
+  });
+
+  it('returns empty for unknown plan', () => {
+    expect(planSignupBullets('unknown')).toEqual([]);
+  });
+
+  it('lists limited numeric features for Free plan', () => {
+    const b = planSignupBullets('beakerstack_free');
+    expect(b.some(x => /Up to 2 collections/i.test(x))).toBe(true);
+    expect(b.some(x => /Up to 3 items per collection/i.test(x))).toBe(true);
+    expect(b.some(x => /AI summarize/i.test(x))).toBe(true);
+    expect(b.length).toBeLessThanOrEqual(3);
+  });
+
+  it('includes unlimited collection copy when capped at -1', () => {
+    const b = planSignupBullets('beakerstack_pro');
+    expect(b.some(x => /Unlimited collections/i.test(x))).toBe(true);
+    expect(b.some(x => /Feature A/i.test(x))).toBe(true);
+  });
+
+  it('caps at three lines on Max (trial + booleans fill quota before meter)', () => {
+    const b = planSignupBullets('beakerstack_max');
+    expect(b.length).toBe(3);
+    expect(b.some(x => /trial/i.test(x))).toBe(true);
+    expect(b.some(x => /Feature A/i.test(x))).toBe(true);
+    expect(b.some(x => /Feature B/i.test(x))).toBe(true);
+  });
+
+  it('adds meter copy when feature rows leave room (Free)', () => {
+    const b = planSignupBullets('beakerstack_free');
+    expect(
+      b.some(x => /\d+\s+AI summarize\s+\/\s+billing period/i.test(x))
+    ).toBe(true);
+  });
+});