fix rendering and storage issues for unit tests.

This commit is contained in:
Jordan 2024-06-28 06:04:50 -07:00
parent ab7a43ef84
commit 3d03f1d9e8
6 changed files with 43 additions and 25 deletions

View File

@ -0,0 +1,11 @@
import { Product } from "@/lib/product";
import { area, length } from "enheter";
export const products = [
// Sheet goods
new Product(35, area("squareFoot", 4 * 8), { name: "Plywood" }),
new Product(45, area("squareFoot", 4 * 8), { name: "OSB" }),
new Product(45, area("squareFoot", 4 * 8), { name: "MDF" }),
// Beams and trim
new Product(45, length("foot", 1), { name: "trim" }),
];

View File

@ -0,0 +1 @@
export * from '@react-native-async-storage/async-storage/jest/async-storage-mock';

View File

@ -1,13 +1,11 @@
import { useAppDispatch, useAppSelector } from "@/app/store" import { useAppDispatch, useAppSelector } from "@/app/store"
import { deleteProduct, selectProducts, updateProduct } from "@/features/product/productSlice" import { deleteProduct, selectProducts, updateProduct } from "@/features/product/productSlice"
import { Product } from "@/lib/product"; import { Product } from "@/lib/product";
import { FlatListComponent, StyleSheet, Text } from "react-native"; import { FlatList, SafeAreaView, StyleSheet, Text } from "react-native";
import { FlatList } from "react-native-reanimated/lib/typescript/Animated";
import { SafeAreaView } from "react-native-safe-area-context";
import { ProductEditorItem } from "./ProductEditorItem"; import { ProductEditorItem } from "./ProductEditorItem";
import React from "react"; import React from "react";
export const ProductEditor = () => { export const ProductEditor = ({}) => {
const products = useAppSelector(selectProducts) as Product []; const products = useAppSelector(selectProducts) as Product [];
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -23,6 +21,7 @@ export const ProductEditor = () => {
return ( return (
<SafeAreaView> <SafeAreaView>
<Text>Hello</Text>
<FlatList <FlatList
data={products} data={products}
renderItem={ renderItem={

View File

@ -0,0 +1,23 @@
import { renderWithProviders } from "@/lib/rendering";
import { ProductEditor } from "@/components/ProductEditor";
import {products as fixtures} from "../../__fixtures__/initialProducts";
import React from "react";
import { useAppSelector } from "@/app/store";
import { selectProducts } from "@/features/product/productSlice";
import { screen } from "@testing-library/react-native";
describe("ProductEditor", () => {
it("renders correctly", async () => {
const {store} = renderWithProviders(<ProductEditor />, {
products: fixtures,
});
const products = store.getState();
// 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();
});
});

View File

@ -1,11 +0,0 @@
import { Price, Product } from "@/lib/product";
import { area, length } from "enheter";
export default [
// Sheet goods
new Product(new Price("USD", 35), area("squareFoot", 4 * 8), {name: "Plywood"}),
new Product(new Price("USD", 45), area("squareFoot", 4 * 8), {name: "OSB"}),
new Product(new Price("USD", 45), area("squareFoot", 4 * 8), {name: "MDF"}),
// Beams and trim
new Product(new Price("USD", 1), length("foot", 1), {name: "trim"}),
]

View File

@ -2,24 +2,19 @@ import { RenderOptions, render } from "@testing-library/react-native";
import { PropsWithChildren, ReactElement } from "react"; import { PropsWithChildren, ReactElement } from "react";
import { Provider } from "react-redux"; import { Provider } from "react-redux";
import { setupStore, RootState } from "@/app/store"; import { setupStore, RootState } from "@/app/store";
import { Price, Product } from "@/lib/product"; import { Product } from "@/lib/product";
import { area, length } from "enheter"; import React from "react";
export interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> { export interface ExtendedRenderOptions extends Omit<RenderOptions, 'queries'> {
preloadedState?: Partial<RootState>; preloadedState?: Partial<RootState>;
store?: any; // TODO store?: any; // TODO
} }
const basicState = {
products: [
new Product(20.00, length("foot", 5), {name: "Track"}),
new Product(20.00, area("squareFoot", 5), {name: "Shelf"}),
]
}
export function renderWithProviders( export function renderWithProviders(
ui: ReactElement, ui: ReactElement,
preloadedState = basicState, preloadedState = {
products: [] as Product []
},
extendedRenderOptions: ExtendedRenderOptions = {}, extendedRenderOptions: ExtendedRenderOptions = {},
) { ) {
const { const {