PliWould/components/__tests__/ProductEditor-test.tsx

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 { 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: [
                mockProduct.asObject,
            ],
        });

        const state1 = store.getState();

        let products = selectProducts(state1);

        expect(products).toHaveLength(1);

        // Check if the product names are rendered
        expect(screen.getByText(products[0].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);
    });
});