change product to dump to object before storing in redix. TODO: solve dimensions issue.

components/__tests__/ProductAttributeEditor-test.tsx

@@ -6,10 +6,12 @@ import React from "react";
 import { emitTypingEvents } from "@testing-library/react-native/build/user-event/type/type";
 
 describe("Product editor tests", () => {
+    const productName = "Fun Product";
     it("Product attributes can be deleted", async () => {
         const product = new Product(
             100,
-            area("squareFoot", 4 * 7)
+            {l: 100, u: "foot"},
+            {"name" : productName}
         );
         const onChange = jest.fn();
         const onDelete = jest.fn();
@@ -18,7 +20,7 @@ describe("Product editor tests", () => {
                 attributeKey="name"
                 attributeValue="product"
                 product={product}
-                onChange={onChange}
+                onChangeAttribute={onChange}
                 onDelete={onDelete}
             />);
         expect(screen.getByLabelText("Delete Attribute")).not.toBeNull();
@@ -26,25 +28,28 @@ describe("Product editor tests", () => {
         expect(onDelete).toHaveBeenCalled();
     });
     it("Product attributes can be modified", async () => {
-        const productName = "Fun Product";
         const product = new Product(
             100,
-            area("squareFoot", 4 * 7),
-            { name: productName },
+            {l: 100, u: "foot"},
+            {"name" : productName}
         );
         const onChange = jest.fn();
         const onDelete = jest.fn();
+        const onKeyChange = jest.fn();
         render(
             <ProductAttributeEditor
-                attributeKey="Name"
-                attributeValue="product"
-                product={product}
-                onChange={onChange}
+                attributeKey="old test key"
+                attributeValue="old test value"
+                onChangeAttribute={onChange}
                 onDelete={onDelete}
+                onChangeAttributeKey={onKeyChange}
             />);
-        fireEvent.press(screen.getByText("product")); // Use getByText instead of findByText
+        fireEvent.changeText(screen.getByLabelText("Edit Key"), "new test key");
+        expect(onKeyChange).toHaveBeenCalled();
         fireEvent.changeText(screen.getByLabelText("Edit Value"), "new name");
         expect(onChange).toHaveBeenCalled();
+        fireEvent.press(screen.getByLabelText("Delete Attribute"));
+        expect(onDelete).toHaveBeenCalled();
     })
 
 })

components/__tests__/ProductEditor-test.tsx

@@ -1,25 +1,51 @@
 import { renderWithProviders } from "@/lib/rendering";
 import { ProductEditor } from "@/components/ProductEditor";
-import {products as fixtures} from "@/__fixtures__/initialProducts";
-import { screen } from "@testing-library/react-native";
+import { act, fireEvent, screen } from "@testing-library/react-native";
 import { selectProducts } from "@/features/product/productSlice";
+import { Product } from "@/lib/product";
 
 describe("ProductEditor", () => {
+    const productName = "Flooring"
+    const mockProduct = new Product(
+        25,
+        { l: 4, w: 8, u: "foot" },
+        { name: productName },
+    )
     it("renders correctly", async () => {
-        const {store} = renderWithProviders(<ProductEditor />, {
-            products: fixtures,
+        const { store } = renderWithProviders(<ProductEditor />, {
+            products: [
+                mockProduct.asObject,
+            ],
         });
 
         const state1 = store.getState();
 
-        const products = selectProducts(state1);
+        let products = selectProducts(state1);
 
-        expect(products).toHaveLength(6);
+        expect(products).toHaveLength(1);
 
         // Check if the product names are rendered
         expect(screen.getByText(products[0].attributes.name as string)).toBeTruthy();
-        expect(screen.getByText(products[1].attributes.name as string)).toBeTruthy();
-        expect(screen.getByText(products[2].attributes.name as string)).toBeTruthy();
-        expect(screen.getByText(products[3].attributes.name as string)).toBeTruthy();
+
+        // Start to edit a product
+        fireEvent.press(screen.getByText(productName));
+
+        // Change properties of the product to make sure it's updated in the store
+
+        act(() => {
+            fireEvent.changeText(screen.getByLabelText("length"), "16");
+        })
+        products = selectProducts(store.getState());
+        expect(products[0].dimensions.l).toBe(16);
+        act(() => {
+            fireEvent.changeText(screen.getByLabelText("width"), "32");
+        })
+        products = selectProducts(store.getState());
+
+        expect(products[0].dimensions.w).toBe(32);
+
+        fireEvent.press(screen.getByLabelText("delete product"));
+        products = selectProducts(store.getState());
+        expect(products.length).toBe(0);
     });
 });

components/__tests__/ProductEditorItem-test.tsx

@@ -3,22 +3,36 @@ import { render, fireEvent, screen } from '@testing-library/react-native';
 import { ProductEditorItem } from '../ProductEditorItem';
 import { Product } from '@/lib/product';
 import { area } from 'enheter';
+import { renderWithProviders } from '@/lib/rendering';
 
 describe('ProductEditorItem', () => {
+  const productName = "Product 1";
   const mockProduct = new Product(
     25,
-    area("squareFoot", 4 * 8),
-    {"name": "Product 1"},
+    {l: 4, u: 'feet'},
+    {"name": productName},
   )
 
-  const mockOnProductUpdated = jest.fn();
+  const onAttributeAdded = jest.fn();
   const mockOnProductDeleted = jest.fn();
+  const onAttributeDeleted = jest.fn();
+  const onAttributeKeyChanged = jest.fn();
+  const onAttributeUpdated = jest.fn();
+  const onProductAdded = jest.fn();
+  const onPriceUpdated = jest.fn();
+  const onDimensionUpdated = jest.fn();
 
   it('renders correctly', () => {
     render(
       <ProductEditorItem
         product={mockProduct}
-        onProductUpdated={mockOnProductUpdated}
+        onAttributeAdded={onAttributeAdded}
+        onAttributeDeleted={onAttributeDeleted}
+        onAttributeKeyChanged={onAttributeKeyChanged}
+        onAttributeUpdated={onAttributeUpdated}
+        onProductAdded={onProductAdded}
+        onPriceUpdated={onPriceUpdated}
+        onDimensionsUpdated={onDimensionUpdated}
         onProductDeleted={mockOnProductDeleted}
       />
     );
@@ -26,15 +40,37 @@ describe('ProductEditorItem', () => {
   });
 
   it('calls onProductUpdated when TouchableHighlight is pressed', () => {
-    render(
+    const {store} = renderWithProviders(
       <ProductEditorItem
         product={mockProduct}
-        onProductUpdated={mockOnProductUpdated}
+        onAttributeAdded={onAttributeAdded}
+        onAttributeDeleted={onAttributeDeleted}
+        onAttributeKeyChanged={onAttributeKeyChanged}
+        onAttributeUpdated={onAttributeUpdated}
+        onProductAdded={onProductAdded}
+        onPriceUpdated={onPriceUpdated}
+        onDimensionsUpdated={onDimensionUpdated}
         onProductDeleted={mockOnProductDeleted}
-      />
+      />, {
+        products: [mockProduct],
+      }
     );
     fireEvent.press(screen.getByText("Product 1"));
-    expect(screen.getByText('name')).toBeTruthy();
-    expect(screen.getAllByText('Product 1').length).toEqual(2);
+    expect(screen.getByLabelText("units")).toBeTruthy();
+    expect(screen.getByLabelText("Edit Key")).toBeTruthy();
+    expect(screen.getAllByLabelText("Edit Value").length).toEqual(1);
+
+    // Now start modifying the properties.
+    fireEvent.changeText(screen.getByLabelText("price per unit"), "40.00");
+    expect(onPriceUpdated).toHaveBeenCalled();
+    
+    fireEvent.changeText(screen.getByLabelText("length"), "12");
+    expect(onDimensionUpdated).toHaveBeenCalled();
+    
+    fireEvent.changeText(screen.getByLabelText("width"), "12");
+    expect(onDimensionUpdated).toHaveBeenCalled();
+    
+    fireEvent.press(screen.getByLabelText("delete product"));
+    expect(mockOnProductDeleted).toHaveBeenCalled();
   });
 });