From d4f184f69c97dacf0d53695fba1eebc9e4d6e7f0 Mon Sep 17 00:00:00 2001
From: beatz174-bit <beatz174@gmail.com>
Date: Mon, 24 Nov 2025 07:37:31 +1000
Subject: [PATCH] Add test for ProductRow read-only display

---
 src/components/ProductRow.test.tsx | 35 ++++++++++++++++++++++++++++++
 src/components/ProductRow.tsx      |  4 ++--
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ProductRow.test.tsx

diff --git a/src/components/ProductRow.test.tsx b/src/components/ProductRow.test.tsx
new file mode 100644
index 0000000..c0bee20
--- /dev/null
+++ b/src/components/ProductRow.test.tsx
@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ProductRow } from './ProductRow';
+import { Product } from '../models/Product';
+
+const product: Product = {
+  id: 'prod-1',
+  name: 'Sparkling Water',
+  category: 'Drinks',
+  unit_type: 'bottle',
+  barcode: '123456',
+  archived: false,
+  created_at: 0,
+  updated_at: 0,
+};
+
+const categories = ['Drinks', 'Snacks'];
+
+describe('ProductRow', () => {
+  it('shows name, category, and barcode without unit text in read-only mode', () => {
+    render(
+      <ProductRow
+        product={product}
+        categories={categories}
+        onSave={vi.fn()}
+        onDelete={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByText('Sparkling Water')).toBeInTheDocument();
+    expect(screen.getByText('Drinks')).toBeInTheDocument();
+    expect(screen.getByText(/Barcode: 123456/)).toBeInTheDocument();
+    expect(screen.queryByText(/bottle/i)).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/ProductRow.tsx b/src/components/ProductRow.tsx
index 38df5ba..97510fb 100644
--- a/src/components/ProductRow.tsx
+++ b/src/components/ProductRow.tsx
@@ -17,7 +17,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 import { ChangeEvent, useEffect, useState } from 'react';
-import { DEFAULT_UNIT_TYPE, Product } from '../models/Product';
+import { Product } from '../models/Product';
 import { BarcodeScannerView } from './BarcodeScannerView';
 
 interface ProductRowProps {
@@ -139,7 +139,7 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
             <div>
               <Typography variant="subtitle1">{product.name}</Typography>
               <Typography variant="caption" color="text.secondary">
-                {product.category} • {product.unit_type || DEFAULT_UNIT_TYPE}
+                {product.category}
               </Typography>
             </div>
             {product.barcode ? (