fix: preserve product image on edit when no new image is uploaded (#240)

Author: 3w36zj6

app/routes/staff/products/-helpers/parseProductRegistrationFormData.ts

@@ -5,7 +5,7 @@ export type ParsedProductRegistrationFormData = {
   price: number
   stock: number
   tags: string[]
-  image: { data: string; mimeType: string } | null
+  image: { data: string; mimeType: string } | null | undefined
 }
 
 export const parseProductRegistrationFormData = async (
@@ -56,7 +56,7 @@ const parseCreateImage = async (
   if (value instanceof File && value.size > 0) {
     return await convertFileToImageData(value)
   }
-  return null
+  return undefined
 }
 
 const parseTags = (value: unknown): string[] => {

app/usecases/registerProduct.ts

@@ -48,7 +48,10 @@ const resolveTagNamesToIds = async ({
   return tagIds
 }
 
-type ProductImageInput = Pick<ProductImage, "data" | "mimeType"> | null
+type ProductImageInput =
+  | Pick<ProductImage, "data" | "mimeType">
+  | null
+  | undefined
 
 export type CreateProductPayload = Omit<Product, "tagIds" | "id"> & {
   tags: string[]

tests/integration/staff-products-edit.test.ts

@@ -37,6 +37,37 @@ describe("商品編集", () => {
       )
     })
 
+    test("画像をアップロードせずに商品を編集すると既存の画像が保持される", async () => {
+      const beforeEditRes = await app.request("/images/products/1")
+      expect(beforeEditRes.status).toBe(200)
+      const beforeImageBuffer = await beforeEditRes.arrayBuffer()
+      const beforeImageSize = beforeImageBuffer.byteLength
+      expect(beforeImageSize).toBeGreaterThan(0)
+
+      const form = new URLSearchParams()
+      form.append("name", generateUniqueName("画像なし編集"))
+      form.append("price", "3000")
+      form.append("stock", "8")
+      form.append("tags", "タグA")
+      const editRes = await app.request(endpoint, {
+        method: "POST",
+        body: form,
+        headers: { "content-type": "application/x-www-form-urlencoded" },
+      })
+      expect(editRes.status).toBe(302)
+      expect(editRes.headers.get("set-cookie")).toMatch(/success/)
+      expect(editRes.headers.get("set-cookie")).toMatch(
+        encodeURIComponent("商品を更新しました"),
+      )
+
+      const afterEditRes = await app.request("/images/products/1")
+      expect(afterEditRes.status).toBe(200)
+      const afterImageBuffer = await afterEditRes.arrayBuffer()
+      const afterImageSize = afterImageBuffer.byteLength
+
+      expect(afterImageSize).toBe(beforeImageSize)
+    })
+
     test("商品名が空の場合はエラーを返す", async () => {
       const form = new URLSearchParams()
       form.append("price", "1000")