add area carpet fixture. Add carpet roll calculator test. refactor carpet roll as own component. add icons.

components/__tests__/AreaRugTag-test.tsx

@@ -1,21 +1,23 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react-native';
 import { AreaRugTag } from '@/components/AreaRugTag';
 import { area_t } from '@/lib/dimensions';
 import dayjs from 'dayjs';
-import { Area } from 'convert';
+
+import initialProducts from '@/__fixtures__/initialProducts';
+import { Product } from '@/lib/product';
 
 describe('AreaRugTag', () => {
   it('renders correctly with dimensions, price per area, date and currency symbol', () => {
-    const dimensions: area_t = { l: 10, w: 20, u: 'foot' };
-    const pricePerArea = { price: 100, per: { n: 1, u: 'square foot' as Area } };
+    const dimensions: area_t = { l: 10, w: 20, u: 'ft' };
     const date = dayjs();
     const currencySymbol = '$';
 
+    const product = initialProducts.find(p => "area_rug" === p.type) as Product;
+
     render(
       <AreaRugTag
         dimensions={dimensions}
-        price_per_area={pricePerArea}
+        product={product}
         date={date}
         currencySymbol={currencySymbol}
       />

components/__tests__/CarpetRollCalculator-test.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { render, fireEvent, screen, within } from "@testing-library/react-native";
+import CarpetRollCalculator from "@/components/CarpetRollCalculator";
+import { renderWithProviders } from "@/lib/rendering";
+
+import allProducts from "@/__fixtures__/initialProducts";
+import { Product, pricePerUnitDisplay } from "@/lib/product";
+import initialProducts from "@/__fixtures__/initialProducts";
+
+const areaRugProducts = allProducts.filter((p) => "area_rug" === p.type);
+
+describe("CarpetRollCalculator", () => {
+  it("should render correctly", () => {
+    renderWithProviders(<CarpetRollCalculator />, {
+      products: initialProducts,
+    });
+
+    const areaRug = initialProducts.find(p => p.type === 'area_rug') as Product;
+    const areaRugLabel = `product ${areaRug.id}`;
+    fireEvent.press(screen.getByLabelText(areaRugLabel));
+
+    // Test the interaction with the width input
+    const widthInput = screen.getByLabelText("width");
+    fireEvent.changeText(widthInput, "10");
+
+    // Test the interaction with the outer diameter input
+    const outerDiameterInput = screen.getByLabelText("outer diameter");
+    fireEvent.changeText(outerDiameterInput, "3");
+
+    // Test the interaction with the inner diameter input
+    const innerDiameterInput = screen.getByLabelText("inner diameter");
+    fireEvent.changeText(innerDiameterInput, "1");
+
+    // Test the interaction with the number of rings input
+    const numRingsInput = screen.getByLabelText("number of rings");
+    fireEvent.changeText(numRingsInput, "5");
+
+    jest.advanceTimersByTime(3000);
+
+    // Test the interaction with the price display
+    const {getByText} = within(screen.getByLabelText("area rug price"));
+    expect(getByText(/\$.*58.*\..*19.*/)).toBeTruthy();
+  });
+});

components/__tests__/ProductCalculatorSelector-test.tsx

@@ -2,34 +2,27 @@ import { render, fireEvent, screen, act, within } from '@testing-library/react-n
 import { Provider } from 'react-redux';
 import ProductCalculatorSelector from '@/components/ProductCalculatorSelector';
 import { renderWithProviders } from '@/lib/rendering';
-import { Product } from '@/lib/product';
+import { Product, pricePerUnitDisplay, productPriceFor } from '@/lib/product';
+
+import initialProducts from '@/__fixtures__/initialProducts';
+
+const mockAreaProduct = initialProducts.find(p => 'w' in p.dimensions ) as Product
+const mockLengthProduct = initialProducts.find(p => (!('w' in p.dimensions)) ) as Product
 
 describe('ProductCalculatorSelector', () => {
-
-  const mockAreaProduct = new Product(
-    100,
-    { l: 4, w: 8, u: "ft" },
-    {"name": "area product"},
-  );
-  const mockLengthProduct = new Product(
-    100,
-    { l: 4, u: "ft" },
-    {"name": "length product"},
-  );
-
   it('renders correctly', () => {
     renderWithProviders(
       (<ProductCalculatorSelector />),
       {
         products: [
-          mockAreaProduct.asObject,
-          mockLengthProduct.asObject,
+          mockAreaProduct,
+          mockLengthProduct,
         ],
       }
     )
 
     expect(screen.getByText('Please select a product')).toBeTruthy();
-    const label = `${mockAreaProduct.attributes.name} (${mockAreaProduct.pricePerUnitDisplay})`;
+    const label = `${mockAreaProduct.attributes?.name} (${pricePerUnitDisplay(mockAreaProduct)})`;
     expect(screen.getByText(label)).toBeTruthy();
   });
 
@@ -38,15 +31,14 @@ describe('ProductCalculatorSelector', () => {
       (<ProductCalculatorSelector />),
       {
         products: [
-          mockLengthProduct.asObject,
-          mockAreaProduct.asObject,
+          mockLengthProduct,
+          mockAreaProduct,
         ]
       }
     );
 
     expect(screen.getByText('Please select a product')).toBeTruthy();
-    const areaLabel = `${mockAreaProduct.attributes.name} (${mockAreaProduct.pricePerUnitDisplay})`;
-    const lengthLabel = `${mockLengthProduct.attributes.name} (${mockLengthProduct.pricePerUnitDisplay})`;
+    const areaLabel = `${mockAreaProduct.attributes?.name} (${pricePerUnitDisplay(mockAreaProduct)})`;
 
     fireEvent.press(screen.getByText(areaLabel));
     const lengthInput = screen.getByLabelText("enter length");
@@ -63,10 +55,10 @@ describe('ProductCalculatorSelector', () => {
     
     jest.advanceTimersByTime(3000);
 
-    const price = mockAreaProduct.priceFor({l: 2, w: 4, u: "ft"});
+    const price = productPriceFor(mockAreaProduct, {l: 2, w: 4, u: "ft"})
     const sPrice = price.toLocaleString(undefined, {maximumFractionDigits: 2, minimumFractionDigits: 2,});
     const element = screen.getByLabelText("calculated price");
     const {getByText} = within(element);
-    expect(getByText(sPrice)).toBeTruthy();
+    expect(getByText(/\$.*0.*\.10/)).toBeTruthy();
   });
 });

components/__tests__/ProductList-test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderWithProviders } from '@/lib/rendering';
-import { Product } from '@/lib/product';
+import { Product, pricePerUnitDisplay } from '@/lib/product';
 import ProductList from '@/components/ProductList';
 import initialProducts from '@/__fixtures__/initialProducts';
 import { screen } from '@testing-library/react-native';
@@ -15,13 +15,24 @@ describe('ProductList', () => {
   });
 
   it('renders products correctly', () => {
-    const mockProduct = initialProducts[0];
+    const mockProduct = initialProducts[0] as Product;
+    const label = `${mockProduct.attributes?.name} (${pricePerUnitDisplay(mockProduct)})`;
 
     const { getByText } = renderWithProviders(<ProductList />, {
       products: [mockProduct],
     });
+    
+    expect(getByText(label)).toBeTruthy();
+  });
 
-    expect(getByText(mockProduct.attributes.name)).toBeTruthy();
-    expect(getByText(`$${mockProduct.pricePerUnit}`)).toBeTruthy();
+  it('renders only area_rug products', () => {
+    const areaRug = initialProducts.find(p => p.type == "area_rug") as Product;
+    const label = `${areaRug?.attributes?.name} (${pricePerUnitDisplay(areaRug)})`;
+
+    renderWithProviders(<ProductList productType='area_rug' />, {
+      products: initialProducts,
+    });
+
+    expect(screen.getByText(label)).toBeTruthy();
   });
 });

components/__tests__/UnitChooser-test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
 import UnitChooser from "../UnitChooser";
-import { Length } from 'safe-units';
+import { Length } from 'convert';
 
 describe('UnitChooser', () => {
   const mockOnChoicePressed = jest.fn();