fix: tests and page design

Author: mbifulco

e2e/newsletter-signup.spec.ts

@@ -8,41 +8,44 @@ test.describe('Newsletter Signup Page', () => {
       await route.fulfill({
         status: 400,
         contentType: 'application/json',
-        body: JSON.stringify([{
-          error: {
-            message: 'Subscription failed',
-            code: -32600,
-            data: {
-              code: 'BAD_REQUEST',
-              httpStatus: 400
-            }
-          }
-        }])
+        body: JSON.stringify([
+          {
+            error: {
+              message: 'Subscription failed',
+              code: -32600,
+              data: {
+                code: 'BAD_REQUEST',
+                httpStatus: 400,
+              },
+            },
+          },
+        ]),
       });
     });
-    
-    await page.goto('/newsletter-signup');
+
+    await page.goto('/subscribe');
   });
 
-  test('should render the newsletter signup page correctly', async ({ page }) => {
+  test('should render the newsletter signup page correctly', async ({
+    page,
+  }) => {
     // Check page elements are visible
-    await expect(page.locator('h1')).toContainText('Get the newsletter');
-    await expect(page.locator('h2')).toContainText('💌 Tiny Improvements');
-    await expect(page.getByText('Straight to your inbox, once a week')).toBeVisible();
+    await expect(page.getByTestId('newsletter-title')).toContainText(' devs & founders building better.');
 
     // Check form elements
-    await expect(page.getByPlaceholder('First Name')).toBeVisible();
-    await expect(page.getByPlaceholder('Email Address')).toBeVisible();
-    await expect(page.getByRole('button', { name: /💌 Subscribe/i })).toBeVisible();
+    await expect(page.getByTestId('first-name-input')).toBeVisible();
+    await expect(page.getByTestId('email-input')).toBeVisible();
+    await expect(page.getByTestId('submit-button')).toBeVisible();
 
     // Check privacy disclaimer
-    await expect(page.getByText("I'll never sell your contact info")).toBeVisible();
-    await expect(page.getByRole('link', { name: /unsubscribe at any time/i })).toBeVisible();
+    await expect(page.getByTestId('privacy-link')).toBeVisible();
+    await expect(page.getByTestId('unsubscribe-text')).toBeVisible();
   });
 
-
-  test('should show validation errors for empty form submission', async ({ page }) => {
-    const submitButton = page.getByRole('button', { name: /💌 Subscribe/i });
+  test('should show validation errors for empty form submission', async ({
+    page,
+  }) => {
+    const submitButton = page.getByTestId('submit-button');
     await submitButton.click();
 
     // Check validation error messages appear
@@ -51,9 +54,9 @@ test.describe('Newsletter Signup Page', () => {
   });
 
   test('should show validation error for invalid email', async ({ page }) => {
-    const firstNameInput = page.getByPlaceholder('First Name');
-    const emailInput = page.getByPlaceholder('Email Address');
-    const submitButton = page.getByRole('button', { name: /💌 Subscribe/i });
+    const firstNameInput = page.getByTestId('first-name-input');
+    const emailInput = page.getByTestId('email-input');
+    const submitButton = page.getByTestId('submit-button');
 
     await firstNameInput.fill('John');
     await emailInput.fill('not-an-email-at-all');
@@ -66,17 +69,17 @@ test.describe('Newsletter Signup Page', () => {
 
     // The form should submit successfully since validation happens server-side
     // Check that we can still see the form (indicating it didn't navigate away)
-    await expect(page.getByPlaceholder('Email Address')).toBeVisible();
+    await expect(page.getByTestId('email-input')).toBeVisible();
 
     // Check that the form fields are cleared (indicating successful submission)
     await expect(emailInput).toHaveValue('');
     await expect(firstNameInput).toHaveValue('');
   });
 
   test('should handle form submission with valid data', async ({ page }) => {
-    const firstNameInput = page.getByPlaceholder('First Name');
-    const emailInput = page.getByPlaceholder('Email Address');
-    const submitButton = page.getByRole('button', { name: /💌 Subscribe/i });
+    const firstNameInput = page.getByTestId('first-name-input');
+    const emailInput = page.getByTestId('email-input');
+    const submitButton = page.getByTestId('submit-button');
 
     await firstNameInput.fill('John');
     await emailInput.fill('test@example.com');
@@ -92,79 +95,77 @@ test.describe('Newsletter Signup Page', () => {
     await expect(firstNameInput).toHaveValue('');
   });
 
-  test('should accept valid form input without validation errors', async ({ page }) => {
-    const firstNameInput = page.getByPlaceholder('First Name');
-    const emailInput = page.getByPlaceholder('Email Address');
+  test('should accept valid form input without validation errors', async ({
+    page,
+  }) => {
+    const firstNameInput = page.getByTestId('first-name-input');
+    const emailInput = page.getByTestId('email-input');
 
     await firstNameInput.fill('John');
     await emailInput.fill('john@example.com');
 
     // Validation errors should not be present
     await expect(page.getByText('First name is required')).not.toBeVisible();
     await expect(page.getByText('Email is required')).not.toBeVisible();
-    await expect(page.getByText('Please enter a valid email address')).not.toBeVisible();
+    await expect(
+      page.getByText('Please enter a valid email address')
+    ).not.toBeVisible();
   });
 
-  test('should have working newsletter link in disclaimer', async ({ page }) => {
-    const newsletterLink = page.getByRole('link', { name: /unsubscribe at any time/i });
-    await expect(newsletterLink).toHaveAttribute('href', '/newsletter');
-
-    // Test navigation (but don't actually navigate to avoid breaking test isolation)
-    const href = await newsletterLink.getAttribute('href');
-    expect(href).toBe('/newsletter');
-  });
 
   test('should have proper form accessibility', async ({ page }) => {
     // Check form labels are properly associated
-    const firstNameInput = page.getByPlaceholder('First Name');
-    const emailInput = page.getByPlaceholder('Email Address');
+    const firstNameInput = page.getByTestId('first-name-input');
+    const emailInput = page.getByTestId('email-input');
 
     // Check inputs have proper IDs and labels (even if sr-only)
     await expect(firstNameInput).toHaveAttribute('id', 'firstName');
     await expect(emailInput).toHaveAttribute('id', 'email');
 
     // Check submit button is properly labeled
-    const submitButton = page.getByRole('button', { name: /💌 Subscribe/i });
+    const submitButton = page.getByTestId('submit-button');
     await expect(submitButton).toHaveAttribute('type', 'submit');
   });
 
   test('should handle form submission button states', async ({ page }) => {
-    const firstNameInput = page.getByPlaceholder('First Name');
-    const emailInput = page.getByPlaceholder('Email Address');
-    const submitButton = page.getByRole('button', { name: /💌 Subscribe/i });
+    const firstNameInput = page.getByTestId('first-name-input');
+    const emailInput = page.getByTestId('email-input');
+    const submitButton = page.getByTestId('submit-button');
 
     // Fill valid data
     await firstNameInput.fill('John');
     await emailInput.fill('john@example.com');
 
     // Button should be enabled with valid data
     await expect(submitButton).not.toBeDisabled();
-    await expect(submitButton).toContainText('💌 Subscribe');
+    await expect(submitButton).toContainText('💌 Get the newsletter');
   });
 
-  test('should have correct page title and meta description', async ({ page }) => {
+  test('should have correct page title and meta description', async ({
+    page,
+  }) => {
     await expect(page).toHaveTitle(/Newsletter Signup - Mike Bifulco/);
   });
 
   test('should be responsive on mobile viewport', async ({ page }) => {
     await page.setViewportSize({ width: 375, height: 667 }); // iPhone SE size
 
     // Check that elements are still visible and properly arranged
-    await expect(page.locator('h1')).toContainText('Get the newsletter');
-    await expect(page.getByPlaceholder('First Name')).toBeVisible();
-    await expect(page.getByPlaceholder('Email Address')).toBeVisible();
-    await expect(page.getByRole('button', { name: /💌 Subscribe/i })).toBeVisible();
+    await expect(page.getByTestId('newsletter-title')).toContainText('devs & founders building better.');
+    await expect(page.getByTestId('first-name-input')).toBeVisible();
+    await expect(page.getByTestId('email-input')).toBeVisible();
+    await expect(page.getByTestId('submit-button')).toBeVisible();
   });
 
   test('should maintain focus management', async ({ page }) => {
     // Tab through form elements
     await page.keyboard.press('Tab'); // Should focus first input
-    await expect(page.getByPlaceholder('First Name')).toBeFocused();
+    await expect(page.getByTestId('first-name-input')).toBeFocused();
 
     await page.keyboard.press('Tab'); // Should focus second input
-    await expect(page.getByPlaceholder('Email Address')).toBeFocused();
+    await expect(page.getByTestId('email-input')).toBeFocused();
 
     await page.keyboard.press('Tab'); // Should focus submit button
-    await expect(page.getByRole('button', { name: /💌 Subscribe/i })).toBeFocused();
+    await expect(page.getByTestId('submit-button')).toBeFocused();
   });
 });

e2e/smoke.spec.ts

@@ -37,8 +37,6 @@ test('404 error page smoke test', async ({ page }) => {
   // Check for the default Next.js 404 page in development mode
   await expect(page.locator('h1')).toContainText('404');
   await expect(
-    page.locator(
-      "text=This page could not be found."
-    )
+    page.locator('text=This page could not be found.')
   ).toBeVisible();
 });

src/app/layout.tsx

@@ -2,9 +2,9 @@ import localFont from 'next/font/local';
 import { Toaster } from 'sonner';
 
 import FathomAnalytics from '@components/Analytics/Fathom';
+import { env } from '@utils/env';
 import PostHogProvider from './posthog-provider';
 import TRPCProvider from './trpc-provider';
-import { env } from '@utils/env';
 
 import '../styles/globals.css';
 import '../components/CarbonAd/CarbonAd.css';
@@ -50,4 +50,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+}