feat: add E2E tests for job posting sites and generate screenshot

- Add sites.spec.ts with 8 tests covering CRUD, navigation, and links
- Add test fixtures with 5 seeded job posting sites
- Seed sites in PGLite test database
- Add screenshot test generating docs/screenshots/sites.png
- Fix formatLastChecked to handle future timestamps gracefully

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: danbim

app/components/job-form.tsx

@@ -111,15 +111,22 @@ export function JobForm({ job, errors, headerActions }: JobFormProps) {
         </div>
       </div>
 
-      <Tabs defaultValue="basic-info" className="mt-6 flex flex-col flex-1 min-h-0">
+      <Tabs
+        defaultValue="basic-info"
+        className="mt-6 flex flex-col flex-1 min-h-0"
+      >
         <TabsList className="w-full">
           <TabsTrigger value="basic-info">Basic Info</TabsTrigger>
           <TabsTrigger value="compensation">Compensation</TabsTrigger>
           <TabsTrigger value="work-location">Work Location</TabsTrigger>
           <TabsTrigger value="ratings">Ratings</TabsTrigger>
         </TabsList>
 
-        <TabsContent value="basic-info" forceMount className="data-[state=inactive]:hidden flex-1 min-h-0">
+        <TabsContent
+          value="basic-info"
+          forceMount
+          className="data-[state=inactive]:hidden flex-1 min-h-0"
+        >
           <Card className="h-full">
             <CardContent className="pt-6 space-y-4 h-full flex flex-col">
               <div className="grid grid-cols-1 gap-4">
@@ -240,15 +247,20 @@ export function JobForm({ job, errors, headerActions }: JobFormProps) {
                   id="dateOpened"
                   name="dateOpened"
                   type="date"
-                  defaultValue={job?.dateOpened ?? new Date().toISOString().split('T')[0]}
+                  defaultValue={
+                    job?.dateOpened ?? new Date().toISOString().split('T')[0]
+                  }
                 />
               </div>
-
             </CardContent>
           </Card>
         </TabsContent>
 
-        <TabsContent value="compensation" forceMount className="data-[state=inactive]:hidden">
+        <TabsContent
+          value="compensation"
+          forceMount
+          className="data-[state=inactive]:hidden"
+        >
           <Card>
             <CardContent className="pt-6 space-y-4">
               <div className="grid grid-cols-4 gap-4">
@@ -333,12 +345,19 @@ export function JobForm({ job, errors, headerActions }: JobFormProps) {
           </Card>
         </TabsContent>
 
-        <TabsContent value="work-location" forceMount className="data-[state=inactive]:hidden">
+        <TabsContent
+          value="work-location"
+          forceMount
+          className="data-[state=inactive]:hidden"
+        >
           <Card>
             <CardContent className="pt-6 space-y-4">
               <div className="space-y-2">
                 <Label htmlFor="workLocation">Work Type</Label>
-                <Select name="workLocation" defaultValue={job?.workLocation ?? ''}>
+                <Select
+                  name="workLocation"
+                  defaultValue={job?.workLocation ?? ''}
+                >
                   <SelectTrigger>
                     <SelectValue placeholder="Select work type" />
                   </SelectTrigger>
@@ -376,7 +395,11 @@ export function JobForm({ job, errors, headerActions }: JobFormProps) {
           </Card>
         </TabsContent>
 
-        <TabsContent value="ratings" forceMount className="data-[state=inactive]:hidden">
+        <TabsContent
+          value="ratings"
+          forceMount
+          className="data-[state=inactive]:hidden"
+        >
           <Card>
             <CardContent className="pt-6 space-y-4">
               <div className="flex items-center space-x-2">
@@ -401,14 +424,15 @@ export function JobForm({ job, errors, headerActions }: JobFormProps) {
                   key={name}
                   name={name}
                   label={label}
-                  defaultValue={job?.[name as keyof JobOpening] as number | null}
+                  defaultValue={
+                    job?.[name as keyof JobOpening] as number | null
+                  }
                 />
               ))}
             </CardContent>
           </Card>
         </TabsContent>
       </Tabs>
-
     </Form>
   )
 }

app/db/db.server.ts

@@ -16,9 +16,12 @@ export const db = await (async () => {
     await migrate(db, { migrationsFolder: './app/db/migrations' })
 
     // Load and insert test data
-    const { testFormulas, testJobs } = await import('../../e2e/fixtures')
+    const { testFormulas, testJobs, testSites } = await import(
+      '../../e2e/fixtures'
+    )
     await db.insert(schema.scoringFormulas).values(testFormulas)
     await db.insert(schema.jobOpenings).values(testJobs)
+    await db.insert(schema.jobPostingSites).values(testSites)
 
     console.log('[PGLite] Initialized with test data')
     return db

app/repositories/job-posting-site.repository.ts

@@ -3,8 +3,8 @@ import type { PostgresJsDatabase } from 'drizzle-orm/postgres-js'
 import type * as schema from '~/db/schema'
 import {
   type JobPostingSite,
-  type NewJobPostingSite,
   jobPostingSites,
+  type NewJobPostingSite,
 } from '~/db/schema'
 
 export class JobPostingSiteRepository {
@@ -14,9 +14,7 @@ export class JobPostingSiteRepository {
     return this.db
       .select()
       .from(jobPostingSites)
-      .orderBy(
-        sql`${jobPostingSites.lastCheckedAt} ASC NULLS FIRST`,
-      )
+      .orderBy(sql`${jobPostingSites.lastCheckedAt} ASC NULLS FIRST`)
   }
 
   async findById(id: string): Promise<JobPostingSite | undefined> {

app/routes/sites.tsx

@@ -90,7 +90,7 @@ function formatLastChecked(date: string | null): string {
   const diffMs = now.getTime() - checked.getTime()
   const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
 
-  if (diffDays === 0) return 'Today'
+  if (diffDays <= 0) return 'Today'
   if (diffDays === 1) return 'Yesterday'
   if (diffDays < 7) return `${diffDays} days ago`
   if (diffDays < 30) {

app/services/job-posting-site.service.ts

@@ -1,7 +1,4 @@
-import type {
-  JobPostingSite,
-  NewJobPostingSite,
-} from '~/db/schema'
+import type { JobPostingSite, NewJobPostingSite } from '~/db/schema'
 import type { JobPostingSiteRepository } from '~/repositories/job-posting-site.repository'
 
 export class JobPostingSiteService {