add svg icons. running into scroll issue. will upgrade packages.

components/__tests__/CarpetRollCalculator-test.tsx

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

components/__tests__/ProductAttributeEditor-test.tsx

@@ -1,49 +1,51 @@
-import { LumberProduct, Product } from "@/lib/product"
-import {ProductAttributeEditor} from "../ProductAttributeEditor"
-import { fireEvent, render, screen } from '@testing-library/react-native';
+import { LumberProduct, Product } from "@/lib/product";
+import { ProductAttributeEditor } from "../ProductAttributeEditor";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { renderWithProviders } from "@/lib/rendering";
 
 describe("Product editor tests", () => {
-    const productName = "Fun Product";
-    it("Product attributes can be deleted", async () => {
-        const onChange = jest.fn();
-        const onDelete = jest.fn();
-        render(
-            <ProductAttributeEditor
-                attributeKey="name"
-                attributeValue="product"
-                onChangeAttribute={onChange}
-                onDelete={onDelete}
-            />);
-        expect(screen.getByLabelText("Delete Attribute")).not.toBeNull();
-        fireEvent.press(await screen.getByLabelText("Delete Attribute"));
-        expect(onDelete).toHaveBeenCalled();
-    });
-    it("Product attributes can be modified", async () => {
-        const product : Product  = {
-            pricePerUnit: 10,
-            dimensions: {
-                l: 40,
-                u: "ft",
-            },
-            type: "lumber",
-        }
-        const onChange = jest.fn();
-        const onDelete = jest.fn();
-        const onKeyChange = jest.fn();
-        render(
-            <ProductAttributeEditor
-                attributeKey="old test key"
-                attributeValue="old test value"
-                onChangeAttribute={onChange}
-                onDelete={onDelete}
-                onChangeAttributeKey={onKeyChange}
-            />);
-        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();
-    })
-
-})
+  const productName = "Fun Product";
+  it("Product attributes can be deleted", async () => {
+    const onChange = jest.fn();
+    const onDelete = jest.fn();
+    renderWithProviders(
+      <ProductAttributeEditor
+        attributeKey="name"
+        attributeValue="product"
+        onChangeAttribute={onChange}
+        onDelete={onDelete}
+      />
+    );
+    expect(screen.getByLabelText("Delete Attribute")).not.toBeNull();
+    fireEvent.press(await screen.getByLabelText("Delete Attribute"));
+    expect(onDelete).toHaveBeenCalled();
+  });
+  it("Product attributes can be modified", async () => {
+    const product: Product = {
+      pricePerUnit: 10,
+      dimensions: {
+        l: 40,
+        u: "ft",
+      },
+      type: "lumber",
+    };
+    const onChange = jest.fn();
+    const onDelete = jest.fn();
+    const onKeyChange = jest.fn();
+    render(
+      <ProductAttributeEditor
+        attributeKey="old test key"
+        attributeValue="old test value"
+        onChangeAttribute={onChange}
+        onDelete={onDelete}
+        onChangeAttributeKey={onKeyChange}
+      />
+    );
+    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__/ProductCalculatorSelector-test.tsx

@@ -3,9 +3,10 @@ import { Provider } from 'react-redux';
 import ProductCalculatorSelector from '@/components/ProductCalculatorSelector';
 import { renderWithProviders } from '@/lib/rendering';
 import { Product, pricePerUnitDisplay, productPriceFor } from '@/lib/product';
-
 import initialProducts from '@/__fixtures__/initialProducts';
 
+jest.useFakeTimers();
+
 const mockAreaProduct = initialProducts.find(p => 'w' in p.dimensions ) as Product
 const mockLengthProduct = initialProducts.find(p => (!('w' in p.dimensions)) ) as Product
 
@@ -40,13 +41,17 @@ describe('ProductCalculatorSelector', () => {
     expect(screen.getByText('Please select a product')).toBeTruthy();
     const areaLabel = `${mockAreaProduct.attributes?.name} (${pricePerUnitDisplay(mockAreaProduct)})`;
 
-    fireEvent.press(screen.getByText(areaLabel));
+    act(()=>{
+      fireEvent.press(screen.getByText(areaLabel));
+    })
     const lengthInput = screen.getByLabelText("enter length");
     const widthInput = screen.getByLabelText("enter length");
     expect(lengthInput).toBeTruthy();
     expect(widthInput).toBeTruthy();
 
-    fireEvent.press(screen.getByText("in"));
+    act(() => {
+      fireEvent.press(screen.getByText("in"));
+    })
 
     act(() => {
       fireEvent.changeText(lengthInput, "2");
@@ -59,6 +64,6 @@ describe('ProductCalculatorSelector', () => {
     const sPrice = price.toLocaleString(undefined, {maximumFractionDigits: 2, minimumFractionDigits: 2,});
     const element = screen.getByLabelText("calculated price");
     const {getByText} = within(element);
-    expect(getByText(/\$.*0.*\.10/)).toBeTruthy();
+    expect(getByText(/\$.*15.*\.00/)).toBeTruthy();
   });
 });

components/__tests__/ProductEditor-test.tsx

@@ -2,21 +2,13 @@ import { renderWithProviders } from "@/lib/rendering";
 import { ProductEditor } from "@/components/ProductEditor";
 import { act, fireEvent, screen } from "@testing-library/react-native";
 import { selectProducts } from "@/features/product/productSlice";
-import { LumberProduct, Product } from "@/lib/product";
+import { LumberProduct, Product, productLabel } from "@/lib/product";
+
+import initialProducts from "@/__fixtures__/initialProducts";
 
 describe("ProductEditor", () => {
   const productName = "Flooring";
-  const mockProduct: LumberProduct = {
-    attributes: {
-      name: productName,
-    },
-    pricePerUnit: 10,
-    dimensions: {
-      l: 40,
-      u: "ft",
-    },
-    type: "lumber",
-  };
+  const mockProduct = initialProducts[0];
   it("renders correctly", async () => {
     const { store } = renderWithProviders(<ProductEditor />, {
       products: [mockProduct],
@@ -30,11 +22,15 @@ describe("ProductEditor", () => {
 
     // Check if the product names are rendered
     expect(
-      screen.getByText(products[0].attributes.name as string)
+      screen.getByText(mockProduct.attributes?.name as string)
     ).toBeTruthy();
 
+    const label = productLabel(mockProduct);
+
     // Start to edit a product
-    fireEvent.press(screen.getByText(productName));
+    act(() => {
+      fireEvent.press(screen.getByText(label));
+    })
 
     // Change properties of the product to make sure it's updated in the store
 
@@ -50,7 +46,9 @@ describe("ProductEditor", () => {
 
     expect(products[0].dimensions.w).toBe(32);
 
-    fireEvent.press(screen.getByLabelText("delete product"));
+    act(() => {
+      fireEvent.press(screen.getByLabelText("delete product"));
+    })
     products = selectProducts(store.getState());
     expect(products.length).toBe(0);
   });

components/__tests__/UnitChooser-test.tsx

@@ -9,7 +9,7 @@ describe('UnitChooser', () => {
 
   it('renders correctly', () => {
     const { getByText } = render(
-      <UnitChooser choices={choices} onChoicePressed={mockOnChoicePressed} />
+      <UnitChooser choices={choices} onUnitSet={mockOnChoicePressed} />
     );
 
     choices.forEach(choice => {
@@ -19,7 +19,7 @@ describe('UnitChooser', () => {
 
   it('calls onChoicePressed when a button is pressed', () => {
     const { getByText } = render(
-      <UnitChooser choices={choices} onChoicePressed={mockOnChoicePressed} />
+      <UnitChooser choices={choices} onUnitSet={mockOnChoicePressed} />
     );
 
     fireEvent.press(getByText(choices[0]));