fix(deps): upgrade Remix and resolve npm audit vulnerabilities (#213)

wheeljackz · wheeljackz · commit e191ae8bc004 · 2026-03-27T12:45:20.000+07:00
- Upgrade @remix-run/* from 2.17.2 to 2.17.4
- Upgrade MSW from 0.36 to 2.x (update handler syntax to http/HttpResponse)
- Upgrade validator from 13.7.0 to 13.15.26
- Replace Faker.js email generation with nanoid-based mock data
- Use relative import for nanoid in mock-data (esbuild-register compat)
- Use non-burner email domain (@rumahberbagi.test) in mock data
- Write magic link fixture directly in RUNNING_E2E mode (bypass MSW
  bundling issues with Remix/esbuild)
- Resolve npm audit vulnerabilities
diff --git a/app/components/__tests__/footer.test.tsx b/app/components/__tests__/footer.test.tsx
@@ -1,11 +1,14 @@
 import { render, screen } from '@testing-library/react'
-import { build, fake } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import type { FooterProps } from '~/components/footer'
 import { Footer } from '~/components/footer'
+import { mockSlug } from '~/models/__mocks__/mock-data'
 
 const footerBuilder = build<FooterProps>('Footer', {
   fields: {
-    instagramUrl: fake((f) => f.internet.url()),
+    instagramUrl: perBuild(
+      () => `https://instagram.com/${mockSlug('rumah-berbagi')}`
+    ),
   },
 })
 
diff --git a/app/components/__tests__/transaction-item.test.tsx b/app/components/__tests__/transaction-item.test.tsx
@@ -1,25 +1,36 @@
-import { build, fake, oneOf, perBuild } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { screen } from '@testing-library/react'
 import { TransactionItem, TransactionItemProps } from '../transaction-item'
 import { render } from '#test/test-utils'
 import { printLocaleDateTimeString } from '~/utils/format'
 import { TRANSACTION_STATUS } from '~/models/enum'
 import { generateId } from '~/utils/nanoid'
+import {
+  mockBankAccountNumber,
+  mockName,
+  mockPastDate,
+  mockSentence,
+  pick,
+  randomInt,
+} from '~/models/__mocks__/mock-data'
+
+const transactionStatuses = Object.values(TRANSACTION_STATUS)
 
 const transactionItemBuilder = build<TransactionItemProps>('TransactionItem', {
   fields: {
     to: perBuild(
       () =>
-        `${generateId()}?status=${oneOf(TRANSACTION_STATUS)}&page=${Math.floor(
-          Math.random() * 100
+        `${generateId()}?status=${pick(transactionStatuses)}&page=${randomInt(
+          1,
+          100
         )}`
     ),
-    bankAccountName: fake((f) => f.finance.accountName()),
-    bankAccountNumber: fake((f) => f.finance.account()),
-    bankName: fake((f) => f.company.companyName()),
-    updatedAt: fake((f) => f.date.past()),
-    status: oneOf(TRANSACTION_STATUS),
-    notes: fake((f) => f.lorem.sentence()),
+    bankAccountName: perBuild(() => mockName('Account Holder')),
+    bankAccountNumber: perBuild(mockBankAccountNumber),
+    bankName: perBuild(() => mockName('Bank')),
+    updatedAt: perBuild(mockPastDate),
+    status: perBuild(() => pick(transactionStatuses)),
+    notes: perBuild(() => mockSentence('Note')),
   },
 })
 describe('TransactionItem', () => {
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -2,12 +2,9 @@ import type { EntryContext } from '@remix-run/node'
 import { RemixServer } from '@remix-run/react'
 import { renderToString } from 'react-dom/server'
 
-// Start MSW mock server in E2E mode to intercept external API calls
-if (process.env.RUNNING_E2E === 'true') {
-  // Dynamic import to avoid bundling MSW in production
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  require('../mocks/server').startMockServer()
-}
+// MSW mock server for E2E tests is loaded via --require preload (mocks/setup.cjs)
+// to ensure interceptors are installed before the Remix server boots.
+// See start:e2e script in package.json.
 
 export default function handleRequest(
   request: Request,
diff --git a/app/models/__mocks__/attachment.ts b/app/models/__mocks__/attachment.ts
@@ -1,14 +1,13 @@
-import { build, fake } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { Attachment } from '@prisma/client'
+import { mockFileUrl, mockSentence } from './mock-data'
 
 export const attachmentBuilder = build<
   Omit<Attachment, 'id' | 'createdAt' | 'updatedAt' | 'lessonId'>
 >({
   fields: {
-    name: fake((f) => `${f.lorem.sentence()}.pdf`),
-    url: fake(
-      (f) => `https://${f.internet.domainName()}/files/${f.lorem.slug()}.pdf`
-    ),
+    name: perBuild(() => `${mockSentence('Attachment')}.pdf`),
+    url: perBuild(() => mockFileUrl('pdf')),
   },
   traits: {
     actual: {
diff --git a/app/models/__mocks__/chapter.ts b/app/models/__mocks__/chapter.ts
@@ -1,11 +1,12 @@
-import { build, fake } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { Chapter } from '@prisma/client'
+import { mockSentence, randomInt } from './mock-data'
 
 export const chapterBuilder = build<
   Omit<Chapter, 'id' | 'createdAt' | 'updatedAt' | 'courseId'>
 >({
   fields: {
-    name: fake((f) => f.commerce.productName()),
-    order: fake((f) => f.datatype.number()),
+    name: perBuild(() => mockSentence('Chapter')),
+    order: perBuild(() => randomInt(1, 20)),
   },
 })
diff --git a/app/models/__mocks__/content.ts b/app/models/__mocks__/content.ts
@@ -1,17 +1,18 @@
-import { build, fake, perBuild } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { Content } from '@prisma/client'
 import { CONTENT_TYPES } from '../enum'
+import { mockParagraph, mockSentence, mockSlug, randomInt } from './mock-data'
 
 export const contentBuilder = build<
   Omit<Content, 'id' | 'createdAt' | 'updatedAt' | 'authorId' | 'courseId'>
 >({
   fields: {
-    slug: fake((f) => f.lorem.slug()),
-    name: fake((f) => f.lorem.sentence()),
-    description: fake((f) => f.lorem.paragraphs()),
+    slug: perBuild(() => mockSlug('content')),
+    name: perBuild(() => mockSentence('Content')),
+    description: perBuild(() => mockParagraph('Content description')),
     type: perBuild(() => CONTENT_TYPES.VIDEO),
     content: 'G3ZS8x86588', // YouTube video ID
-    order: fake((f) => f.datatype.number({ min: 0, max: 100 })),
+    order: perBuild(() => randomInt(0, 100)),
   },
   traits: {
     video: {
diff --git a/app/models/__mocks__/course.ts b/app/models/__mocks__/course.ts
@@ -1,15 +1,21 @@
-import { build, fake, perBuild } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { Course } from '@prisma/client'
 import { CATEGORIES } from '../enum'
+import {
+  mockImageUrl,
+  mockParagraph,
+  mockSentence,
+  randomInt,
+} from './mock-data'
 
 export const courseBuilder = build<
   Omit<Course, 'id' | 'userId' | 'authorId' | 'createdAt' | 'updatedAt'>
 >({
   fields: {
-    name: fake((f) => f.commerce.productName()),
-    description: fake((f) => f.commerce.productDescription()),
-    price: fake((f) => f.datatype.number({ min: 10000, max: 100000 })),
-    image: fake((f) => f.image.imageUrl()),
+    name: perBuild(() => mockSentence('Course')),
+    description: perBuild(() => mockParagraph('Course description')),
+    price: perBuild(() => randomInt(10_000, 100_000)),
+    image: perBuild(mockImageUrl),
     category: perBuild(() => CATEGORIES.PARENTING),
   },
 })
diff --git a/app/models/__mocks__/lesson.ts b/app/models/__mocks__/lesson.ts
@@ -1,13 +1,14 @@
-import { build, fake } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { Lesson } from '@prisma/client'
+import { mockParagraph, mockSentence, randomInt } from './mock-data'
 
 export const lessonBuilder = build<
   Omit<Lesson, 'id' | 'createdAt' | 'updatedAt' | 'chapterId'>
 >({
   fields: {
-    name: fake((f) => f.lorem.sentence()),
-    description: fake((f) => f.lorem.paragraphs()),
+    name: perBuild(() => mockSentence('Lesson')),
+    description: perBuild(() => mockParagraph('Lesson description')),
     videoId: 'G3ZS8x86588', // https://www.youtube.com/watch?v=G3ZS8x86588
-    order: fake((f) => f.datatype.number()),
+    order: perBuild(() => randomInt(1, 20)),
   },
 })
diff --git a/app/models/__mocks__/mock-data.ts b/app/models/__mocks__/mock-data.ts
@@ -0,0 +1,45 @@
+import { generateId } from '../../utils/nanoid'
+
+export function randomInt(min = 0, max = 100) {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+export function pick<T>(values: readonly T[]) {
+  return values[randomInt(0, values.length - 1)]
+}
+
+export function mockEmail() {
+  return `user-${generateId()}@rumahberbagi.test`
+}
+
+export function mockName(prefix = 'Item') {
+  return `${prefix} ${generateId()}`
+}
+
+export function mockSentence(prefix = 'Item') {
+  return `${prefix} ${generateId()}`
+}
+
+export function mockParagraph(prefix = 'Description') {
+  return `${prefix} ${generateId()} body copy.`
+}
+
+export function mockSlug(prefix = 'item') {
+  return `${prefix}-${generateId().toLowerCase()}`
+}
+
+export function mockFileUrl(extension: string, folder = 'files') {
+  return `https://example.com/${folder}/${mockSlug(folder)}.${extension}`
+}
+
+export function mockImageUrl() {
+  return `https://images.example.com/${mockSlug('image')}.jpg`
+}
+
+export function mockPastDate() {
+  return new Date(Date.now() - randomInt(1, 30) * 24 * 60 * 60 * 1000)
+}
+
+export function mockBankAccountNumber() {
+  return `${randomInt(10_000_000, 99_999_999)}`
+}
diff --git a/app/models/__mocks__/subscription.ts b/app/models/__mocks__/subscription.ts
@@ -1,4 +1,4 @@
-import { build, oneOf, perBuild } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { Subscription } from '@prisma/client'
 import { SUBSCRIPTION_STATUS } from '../enum'
 
@@ -9,7 +9,7 @@ export const subscriptionBuilder = build<
   >
 >({
   fields: {
-    status: oneOf(SUBSCRIPTION_STATUS.ACTIVE),
+    status: perBuild(() => SUBSCRIPTION_STATUS.ACTIVE),
   },
   traits: {
     active: {
diff --git a/app/models/__mocks__/transaction.ts b/app/models/__mocks__/transaction.ts
@@ -1,6 +1,7 @@
-import { build, fake, perBuild } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { Transaction } from '@prisma/client'
 import { TRANSACTION_STATUS } from '../enum'
+import { mockBankAccountNumber, mockName, randomInt } from './mock-data'
 
 export const transactionBuilder = build<
   Omit<
@@ -16,10 +17,10 @@ export const transactionBuilder = build<
   >
 >({
   fields: {
-    bankName: fake((f) => f.company.companyName()),
-    bankAccountName: fake((f) => f.name.findName()),
-    bankAccountNumber: fake((f) => f.phone.phoneNumber()),
-    amount: fake((f) => f.datatype.number({ min: 10000, max: 100000 })),
+    bankName: perBuild(() => mockName('Bank')),
+    bankAccountName: perBuild(() => mockName('Account Holder')),
+    bankAccountNumber: perBuild(mockBankAccountNumber),
+    amount: perBuild(() => randomInt(10_000, 100_000)),
     status: perBuild(() => TRANSACTION_STATUS.SUBMITTED),
   },
   traits: {
diff --git a/app/models/__mocks__/user.ts b/app/models/__mocks__/user.ts
@@ -1,18 +1,18 @@
-import { build, fake, perBuild } from '@jackfranklin/test-data-bot'
+import { build, perBuild } from '@jackfranklin/test-data-bot'
 import { User } from '@prisma/client'
 import { ROLES } from '../enum'
+import { mockEmail, mockName } from './mock-data'
 
 type OmittedUser = Omit<User, 'id' | 'createdAt' | 'updatedAt'>
 
-export interface BuiltUser extends OmittedUser {
+export type BuiltUser = OmittedUser & {
   name: NonNullable<User['name']>
-  phoneNumber: NonNullable<User['phoneNumber']>
 }
 
 export const userBuilder = build<BuiltUser>({
   fields: {
-    email: fake((f) => f.internet.email()),
-    name: fake((f) => f.name.findName()),
+    email: perBuild(mockEmail),
+    name: perBuild(() => mockName('User')),
     role: perBuild(() => ROLES.MEMBER),
     phoneNumber: perBuild(() => '+6512345678'),
     telegram: null,
diff --git a/app/services/email.server.tsx b/app/services/email.server.tsx
@@ -1,3 +1,5 @@
+import * as fs from 'fs'
+import * as path from 'path'
 import { User } from '@prisma/client'
 import { renderToString } from 'react-dom/server'
 import type { SendEmailFunction } from 'remix-auth-email-link'
@@ -33,13 +35,27 @@ export const sendEmail: SendEmailFunction<User> = async (options) => {
     </main>
   )
 
-  // In E2E mode, MSW intercepts the Mailgun API call and captures the magic link.
-  // In development, we log the magic link for convenience.
+  // In development, log the magic link for convenience.
   if (process.env.NODE_ENV === 'development') {
     console.info(`\n🔗 Magic link: ${options.magicLink}\n`)
   }
 
-  // Send email via Mailgun API - MSW will intercept in E2E mode
+  // In E2E mode, write the magic link fixture directly for Playwright to read.
+  // This replaces MSW interception which breaks when bundled by Remix's esbuild.
+  if (process.env.RUNNING_E2E === 'true') {
+    const fixturePath = path.join(
+      process.cwd(),
+      'e2e/fixtures/magic.local.json'
+    )
+    fs.writeFileSync(
+      fixturePath,
+      JSON.stringify({ magicLink: options.magicLink }, null, 2)
+    )
+    console.info('🔶 E2E: Captured magic link:', options.magicLink)
+    return
+  }
+
+  // Send email via Mailgun API
   await emailProvider.sendEmail({
     to: options.emailAddress,
     from: emailFrom,
diff --git a/mocks/handlers.ts b/mocks/handlers.ts
@@ -1,6 +1,6 @@
 import * as fs from 'fs'
 import * as path from 'path'
-import { rest } from 'msw'
+import { http, HttpResponse } from 'msw'
 
 // Path to store the magic link for E2E tests to read
 const MAGIC_LINK_FIXTURE_PATH = path.join(
@@ -18,10 +18,10 @@ function extractMagicLink(html: string): string | null {
 }
 
 export const mailgunHandlers = [
-  rest.post(
+  http.post(
     'https://api.mailgun.net/v3/:domain/messages',
-    async (req, res, ctx) => {
-      const body = Object.fromEntries(new URLSearchParams(req.body?.toString()))
+    async ({ request, params }) => {
+      const body = Object.fromEntries(new URLSearchParams(await request.text()))
       console.info('🔶 MSW intercepted email request:', {
         to: body.to,
         subject: body.subject,
@@ -40,8 +40,8 @@ export const mailgunHandlers = [
       }
 
       const randomId = '20210321210543.1.E01B8B612C44B41B'
-      const id = `<${randomId}>@${req.params.domain}`
-      return res(ctx.json({ id, message: 'Queued. Thank you.' }))
+      const id = `<${randomId}>@${String(params.domain)}`
+      return HttpResponse.json({ id, message: 'Queued. Thank you.' })
     }
   ),
 ]
diff --git a/mocks/setup.cjs b/mocks/setup.cjs
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
