complete more of the unit tests.

components/AreaInput.tsx

@@ -1,27 +1,30 @@
-import { View } from "react-native-reanimated/lib/typescript/Animated";
 import { MeasurementInput } from "./MeasurementInput";
 import { area_t, dimensions_t } from "@/lib/product";
 import { useState } from "react";
+import { View } from "react-native";
 
 export type AreaInputProps = {
-    units: "foot" | "inch",
     onMeasurementSet?: (area : dimensions_t) => any,
+    defaultValue?: area_t,
+    lengthLabel?: string,
+    widthLabel?: string,
 }
 
-export function AreaInput({units, onMeasurementSet} : AreaInputProps) {
+export function AreaInput({onMeasurementSet, lengthLabel, widthLabel, defaultValue} : AreaInputProps) {
 
-    const [area, setArea] = useState({
+    defaultValue = defaultValue || {l: 0, w: 0, u: "foot"}
-        l: 0,
+
-        w: 0,
+    const [area, setArea] = useState(defaultValue)
-        u: "foot",
-    } as area_t)
 
     function doOnLengthSet(measurement : dimensions_t) {
         setArea({
             ...area,
             l: measurement.l
         });
-        onMeasurementSet && onMeasurementSet(area);
+        onMeasurementSet && onMeasurementSet({
+            ...area,
+            l: measurement.l
+        });
     }
 
     function doOnWidthSet(measurement : dimensions_t) {
@@ -29,20 +32,25 @@ export function AreaInput({units, onMeasurementSet} : AreaInputProps) {
             ...area,
             w: measurement.l
         });
-        onMeasurementSet && onMeasurementSet(area);
+        onMeasurementSet && onMeasurementSet({
+            ...area,
+            w: measurement.l
+        });
     }
 
     return (
         <View>
             <MeasurementInput
-                units={units}
+                units={area.u}
                 defaultValue={area.l}
                 onValueSet={doOnLengthSet}
+                label={lengthLabel}
             />
             <MeasurementInput
-                units={units}
+                units={area.u}
                 defaultValue={area.w}
                 onValueSet={doOnWidthSet}
+                label={widthLabel}
             />
         </View>
     )

components/MeasurementInput.tsx

@@ -1,32 +1,38 @@
 import { dimensions_t, length_t } from "@/lib/product";
+import { Length } from "convert";
 import { StyleSheet, Text, TextInput, View } from "react-native";
 
 export type t_length_unit = "foot" | "inch"
 
 export type MeasurementInputProps = {
     onValueSet?: (d: dimensions_t) => any,
-    units: t_length_unit,
+    defaultValue: length_t;
-    defaultValue: number;
+    label?: string,
 }
 
-export function MeasurementInput({onValueSet, units, defaultValue}: MeasurementInputProps) {
+export function MeasurementInput({onValueSet, defaultValue, label}: MeasurementInputProps) {
-
+1
     function doOnValueSet(value : string) {
+        const iVal = parseFloat(value) || parseInt(value);
         onValueSet && onValueSet({
-            l: (parseInt(value) || parseFloat(value)),
+            ...defaultValue,
-            u: units,
+            l: iVal,
         })
     }
 
+    const sDefValue = new String(defaultValue.l).valueOf()
+
     return (
         <View>
             <TextInput
                 clearTextOnFocus={true}
-                defaultValue={new String(defaultValue).valueOf()}
+                defaultValue={sDefValue}
                 onChangeText={doOnValueSet}
                 inputMode='decimal'
-                style={styles.lengthInput} />
+                style={styles.lengthInput}
-            <Text style={styles.unitHints}>{units}</Text>
+                aria-label={label || "Enter measurement"}
+                />
+            <Text style={styles.unitHints}>{defaultValue.u}</Text>
         </View>
     )
 }

components/Price.tsx

@@ -1,5 +1,4 @@
-import { StyleSheet, Text } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
-import { View } from "react-native-reanimated/lib/typescript/Animated";
 
 export type PriceDisplayProps = {
     price: number,
@@ -13,7 +12,7 @@ export default function PriceDisplay({ price }: PriceDisplayProps) {
 
 
     return (
-        <View style={styles.bigPriceWrapper}>
+        <View style={styles.bigPriceWrapper} aria-label="calculated price">
             <Text style={styles.bigPrice}>$ {price.toLocaleString(
                 undefined, {
                     minimumFractionDigits: 2,

components/ProductCalculatorSelector.tsx

@@ -8,6 +8,9 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import PriceDisplay from './Price';
 import { AreaInput } from './AreaInput';
 import { MeasurementInput } from './MeasurementInput';
+import ProductList from './ProductList';
+import UnitChooser from './UnitChooser';
+import { Length } from 'convert';
 
 
 export default function ProductCalculatorSelector() {
@@ -15,7 +18,7 @@ export default function ProductCalculatorSelector() {
     const products = useAppSelector(selectProducts);
     const [activeProduct, setActiveProduct] = useState(null as Product | null);
     const [price, setPrice] = useState(0);
-    const [measurement, setMeasurement] = useState(null as dimensions_t | null);
+    const [measurement, setMeasurement] = useState({l: 0, w: 0, u: "ft"} as dimensions_t);
 
     useEffect(function () {
         const iv = setInterval(function () {
@@ -33,6 +36,13 @@ export default function ProductCalculatorSelector() {
         setMeasurement(dimensions);
     }
 
+    function onUnitChosen(unit : Length) {
+        setMeasurement({
+            ...measurement,
+            u: unit,
+        });
+    }
+
     return (
         <SafeAreaView style={styles.wrapper}>
             <PriceDisplay price={price} />
@@ -42,23 +52,28 @@ export default function ProductCalculatorSelector() {
                         activeProduct ? (
                             "w" in activeProduct.dimensions ?
                                 <AreaInput
-                                    units={units}
+                                    defaultValue={activeProduct.dimensions}
                                     onMeasurementSet={onMeasurementSet}
+                                    widthLabel='enter width'
+                                    lengthLabel='enter length'
                                 />
                                 :
                                 <MeasurementInput
-                                    defaultValue={activeProduct.dimensions.l}
+                                    defaultValue={activeProduct.dimensions}
-                                    units={units}
                                     onValueSet={onMeasurementSet}
+                                    label="enter length"
                                 />
 
                         ) : (
                             <Text>Please select a product</Text>
                         )
                     }
+                    {
+                        activeProduct && <UnitChooser choices={["in", "ft"]} onChoicePressed={onUnitChosen} />
+                    }
                 </View>
             </View>
-
+            <ProductList onProductSelected={setActiveProduct} />
         </SafeAreaView>
     );
 }

components/ProductTile.tsx

@@ -33,10 +33,7 @@ export function ProductTile ({product, onProductSelected, isActive, style} : Pro
         <TouchableHighlight
             style={_style.highlight || styles.highlight}
             onPress={() => onProductSelected && onProductSelected(product)}>
-            <Text style={_style.text || styles.text}>
+            <Text style={_style.text || styles.text}>{product.attributes.name || `Product ${product.id}`} ({product.pricePerUnitDisplay})</Text>
-                {product.attributes.name || `Product ${product.id}`}
-                ({product.pricePerUnitDisplay})
-            </Text>
       </TouchableHighlight>
     );
 }

components/__tests__/AreaInput-test.tsx

@@ -1,23 +1,31 @@
-import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react-native';
-import { render, fireEvent } from '@testing-library/react-native';
 import { AreaInput } from '../AreaInput';
 
 describe('AreaInput', () => {
   it('renders correctly', () => {
-    const { getByPlaceholderText } = render(<AreaInput units="foot" />);
+    render(<AreaInput lengthLabel='length' widthLabel='width' />);
-    const lengthInput = getByPlaceholderText('Length');
+    const lengthInput = screen.getByLabelText('length');
-    const widthInput = getByPlaceholderText('Width');
+    const widthInput = screen.getByLabelText('width');
     expect(lengthInput).toBeTruthy();
     expect(widthInput).toBeTruthy();
   });
 
   it('calls onValueSet when a value is entered', () => {
-    const onValueSetMock = jest.fn();
+    const onMeasurementSetMock = jest.fn();
-    const { getByPlaceholderText } = render(
+    render(<AreaInput onMeasurementSet={onMeasurementSetMock} lengthLabel='length' widthLabel='width' defaultValue={{l: 4, w:4, u: "inch"}}/>);
-      <AreaInput units="foot" onValueSet={onValueSetMock} />
+    const lengthInput = screen.getByLabelText('length');
-    );
+    const widthInput = screen.getByLabelText('width');
-    const lengthInput = getByPlaceholderText('Length');
     fireEvent.changeText(lengthInput, '10');
-    expect(onValueSetMock).toHaveBeenCalledTimes(1);
+    expect(onMeasurementSetMock).toHaveBeenCalledWith({
+      l: 10,
+      w: 4,
+      u: "inch"
+    });
+    fireEvent.changeText(widthInput, '10');
+    expect(onMeasurementSetMock).toHaveBeenCalledWith({
+      l: 10,
+      w: 10,
+      u: "inch"
+    });
   });
 });

components/__tests__/MeasurementInput-test.tsx

@@ -1,17 +1,17 @@
-import { render, fireEvent } from '@testing-library/react-native';
+import { render, fireEvent, screen } from '@testing-library/react-native';
 import { MeasurementInput } from '../MeasurementInput';
 
 describe('MeasurementInput', () => {
   it('renders correctly', () => {
-    const { getByPlaceholderText } = render(<MeasurementInput units="foot" defaultValue={10} />);
+    render(<MeasurementInput units="foot" defaultValue={10} />);
-    const input = getByPlaceholderText('Enter measurement');
+    const input = screen.getByLabelText('Enter measurement');
     expect(input).toBeTruthy();
   });
 
   it('calls onValueSet when value is changed', () => {
     const mockOnValueSet = jest.fn();
-    const { getByPlaceholderText } = render(<MeasurementInput units="foot" defaultValue={10} onValueSet={mockOnValueSet} />);
+    render(<MeasurementInput units="foot" defaultValue={10} onValueSet={mockOnValueSet} />);
-    const input = getByPlaceholderText('Enter measurement');
+    const input = screen.getByLabelText('Enter measurement');
     fireEvent.changeText(input, '20');
     expect(mockOnValueSet).toHaveBeenCalledWith({ l: 20, u: 'foot' });
   });

components/__tests__/ProductCalculatorSelector-test.tsx

@@ -1,42 +1,70 @@
-import React from 'react';
+import { render, fireEvent, screen, act } from '@testing-library/react-native';
-import { render, fireEvent } from '@testing-library/react-native';
 import { Provider } from 'react-redux';
-import { store } from '@/app/store';
 import ProductCalculatorSelector from '@/components/ProductCalculatorSelector';
+import { renderWithProviders } from '@/lib/rendering';
+import { Product } from '@/lib/product';
 
 describe('ProductCalculatorSelector', () => {
-  it('renders correctly', () => {
-    const { getByText } = render(
-      <Provider store={store}>
-        <ProductCalculatorSelector />
-      </Provider>
-    );
 
-    expect(getByText('Please select a product')).toBeTruthy();
+  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,
+        ],
+      }
+    )
+
+    expect(screen.getByText('Please select a product')).toBeTruthy();
+    const label = `${mockAreaProduct.attributes.name} (${mockAreaProduct.pricePerUnitDisplay})`;
+    expect(screen.getByText(label)).toBeTruthy();
   });
 
-  it('updates price when measurement is set', () => {
+  it('a product can be selected', () => {
-    const { getByTestId, getByText } = render(
+    renderWithProviders(
-      <Provider store={store}>
+      (<ProductCalculatorSelector />),
-        <ProductCalculatorSelector />
+      {
-      </Provider>
+        products: [
+          mockLengthProduct.asObject,
+          mockAreaProduct.asObject,
+        ]
+      }
     );
 
-    // Assume there is a product with a priceFor function that returns 100
+    expect(screen.getByText('Please select a product')).toBeTruthy();
-    const product = {
+    const areaLabel = `${mockAreaProduct.attributes.name} (${mockAreaProduct.pricePerUnitDisplay})`;
-      priceFor: jest.fn().mockReturnValue(100),
+    const lengthLabel = `${mockLengthProduct.attributes.name} (${mockLengthProduct.pricePerUnitDisplay})`;
-    };
 
-    // Assume there are units for measurement
+    fireEvent.press(screen.getByText(areaLabel));
-    const units = ['cm', 'in'];
+    const lengthInput = screen.getByLabelText("enter length");
+    const widthInput = screen.getByLabelText("enter length");
+    expect(lengthInput).toBeTruthy();
+    expect(widthInput).toBeTruthy();
 
-    // Assume there is a measurement input
+    fireEvent.press(screen.getByText("in"));
-    const measurementInput = getByTestId('measurement-input');
 
-    // Simulate user input
+    act(() => {
-    fireEvent.changeText(measurementInput, '10');
+      fireEvent.changeText(lengthInput, "2");
+      fireEvent.changeText(widthInput, "4");
+    });
+    
+    jest.advanceTimersByTime(500);
 
-    // Check if the price has been updated
+    const price = mockAreaProduct.priceFor({l: 2, w: 4, u: "ft"});
-    expect(getByText('Price: 100')).toBeTruthy();
+    const sPrice = price.toLocaleString(undefined, {maximumFractionDigits: 2, minimumFractionDigits: 2,});
+    expect(screen.getByLabelText("calculated price").find().toBeTruthy();
   });
 });