covered product editor test cases.
This commit is contained in:
parent
562cae7f5a
commit
dc9cfad401
@ -5,7 +5,7 @@ import { MeasurementInput } from '@/components/LengthInput';
|
||||
import { setupStore, useAppDispatch } from '../store';
|
||||
import { selectProducts } from '@/features/product/productSlice';
|
||||
import { Product } from '@/lib/product';
|
||||
import { ProductTile } from '@/components/ProductTyle';
|
||||
import { ProductTile } from '@/components/ProductTile';
|
||||
import { Measure, area, length } from 'enheter';
|
||||
|
||||
export default function HomeScreen() {
|
||||
|
@ -1,40 +1,44 @@
|
||||
import { Product } from "@/lib/product";
|
||||
import Ionicons from "@expo/vector-icons/Ionicons";
|
||||
import React from "react";
|
||||
import { ChangeEvent, SetStateAction, useState } from "react";
|
||||
import { NativeSyntheticEvent, StyleSheet, Text, TextInput, TextInputChangeEventData, TextInputProps, TouchableHighlight, View } from "react-native";
|
||||
import { useState } from "react";
|
||||
import { StyleSheet, Text, TextInput, TouchableHighlight, View } from "react-native";
|
||||
|
||||
export type ProductAttributeChangeFunc = (product_id: string, key: string, newValue: string) => any;
|
||||
export type ProductAttributeDeleteFunc = (product_id: string, key: string) => any;
|
||||
|
||||
export type ProductAttributeProps = { product: Product, key: string, value: string, onChange?: ProductAttributeChangeFunc, onDelete?: ProductAttributeChangeFunc, };
|
||||
export type ProductAttributeProps = { product: Product, attributeKey: string, attributeValue: string, onChange?: ProductAttributeChangeFunc, onDelete?: ProductAttributeChangeFunc, };
|
||||
|
||||
export default function ProductAttributeEditor({ product, key, value, onDelete, onChange }: ProductAttributeProps) {
|
||||
export const ProductAttributeEditor = ({ product, attributeKey: key, attributeValue: value, onDelete, onChange } : ProductAttributeProps) => {
|
||||
const [doEdit, setDoEdit] = useState(true);
|
||||
const [newValue, setNewValue] = useState(value);
|
||||
|
||||
const doChange = (e : any) => {
|
||||
setNewValue(e.target.value);
|
||||
const doChange = (e: any) => {
|
||||
setNewValue(e);
|
||||
onChange && onChange(product.id, key, e);
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Text>
|
||||
{key}
|
||||
</Text>
|
||||
<Text>{key}</Text>
|
||||
<View>
|
||||
<TouchableHighlight
|
||||
onPress={() => setDoEdit(!doEdit)}
|
||||
aria-label="Property Value"
|
||||
>
|
||||
{doEdit ?
|
||||
(<Text>{newValue}</Text>) :
|
||||
(<TextInput
|
||||
value={newValue}
|
||||
onChangeText={doChange}
|
||||
aria-label="Edit Value" />)
|
||||
}
|
||||
</TouchableHighlight>
|
||||
<TouchableHighlight
|
||||
onPress={() => onDelete && onDelete(product.id, key, value)}
|
||||
aria-label="Delete Attribute">
|
||||
<Ionicons name="trash-bin-outline" />
|
||||
</TouchableHighlight>
|
||||
{doEdit ?
|
||||
(<Text>
|
||||
{newValue}
|
||||
</Text>) : (
|
||||
<TextInput value={newValue} onChange={doChange} />
|
||||
)
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
@ -5,6 +5,7 @@ import { FlatListComponent, 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 React from "react";
|
||||
|
||||
export const ProductEditor = () => {
|
||||
const products = useAppSelector(selectProducts) as Product [];
|
||||
|
@ -1,21 +1,21 @@
|
||||
import { Product } from "@/lib/product"
|
||||
import { useState } from "react"
|
||||
import { StyleSheet, Text, TouchableHighlight } from "react-native"
|
||||
import { FlatList } from "react-native-reanimated/lib/typescript/Animated";
|
||||
import ProductAttributeEditor from "./ProductAttributeEditor";
|
||||
import { FlatList, StyleSheet, Text, TouchableHighlight, View } from "react-native"
|
||||
import {ProductAttributeEditor} from "./ProductAttributeEditor";
|
||||
import React from "react";
|
||||
|
||||
export type ProductUpdatedFunc = (product_id : string, product : Product) => any;
|
||||
export type ProductDeletedFunc = (product_id : string) => any;
|
||||
export type ProductUpdatedFunc = (product_id: string, product: Product) => any;
|
||||
export type ProductDeletedFunc = (product_id: string) => any;
|
||||
|
||||
export type ProductEditorItemProps = {
|
||||
product : Product,
|
||||
product: Product,
|
||||
onProductUpdated?: ProductUpdatedFunc,
|
||||
onProductDeleted?: ProductDeletedFunc,
|
||||
}
|
||||
|
||||
export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted }: ProductEditorItemProps) => {
|
||||
|
||||
const [showAttributes, setShowAttributes] = useState(true);
|
||||
const [showAttributes, setShowAttributes] = useState(false);
|
||||
|
||||
function onAttributeChanged(product_id: string, key: string, newValue: string) {
|
||||
product.attributes[key] = newValue;
|
||||
@ -25,14 +25,17 @@ export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted
|
||||
|
||||
function onAttributeDelete(product_id: string, key: string) {
|
||||
product.removeAttribute(key);
|
||||
onProductUpdated && onProductUpdated(product_id, product);
|
||||
onProductDeleted && onProductDeleted(product_id);
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<TouchableHighlight
|
||||
onPress={() => setShowAttributes(true)}
|
||||
onPress={() => setShowAttributes(!showAttributes)}
|
||||
aria-label="Product Item"
|
||||
>
|
||||
<Text style={styles.product}>{product.attributes.name || `Product ${product.id}`} </Text>
|
||||
</TouchableHighlight>
|
||||
{showAttributes &&
|
||||
(
|
||||
<FlatList
|
||||
@ -40,16 +43,17 @@ export const ProductEditorItem = ({ product, onProductUpdated, onProductDeleted
|
||||
renderItem={({ item }) => (
|
||||
<ProductAttributeEditor
|
||||
product={product}
|
||||
key={item.key}
|
||||
value={item.value}
|
||||
attributeKey={item.key || "some key"}
|
||||
attributeValue={item.value}
|
||||
onChange={onAttributeChanged}
|
||||
onDelete={onAttributeDelete}
|
||||
/>
|
||||
)}
|
||||
keyExtractor={(item) => `${product.id}-${item.key}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -1,27 +1,50 @@
|
||||
import { Product } from "@/lib/product"
|
||||
import ProductAttributeEditor from "../ProductAttributeEditor"
|
||||
import { renderWithProviders } from "./util"
|
||||
import {ProductAttributeEditor} from "../ProductAttributeEditor"
|
||||
import { area } from "enheter"
|
||||
import {screen} from '@testing-library/react-native';
|
||||
import { fireEvent, render, screen } from '@testing-library/react-native';
|
||||
import React from "react";
|
||||
import { emitTypingEvents } from "@testing-library/react-native/build/user-event/type/type";
|
||||
|
||||
describe("Product editor tests", () => {
|
||||
it("Product attributes render", () => {
|
||||
it("Product attributes can be deleted", async () => {
|
||||
const product = new Product(
|
||||
100,
|
||||
area("squareFoot", 4 * 7)
|
||||
);
|
||||
const onChange = jest.fn();
|
||||
const onDelete = jest.fn();
|
||||
renderWithProviders(
|
||||
render(
|
||||
<ProductAttributeEditor
|
||||
key="Name"
|
||||
value="product"
|
||||
attributeKey="name"
|
||||
attributeValue="product"
|
||||
product={product}
|
||||
onChange={onChange}
|
||||
onDelete={onDelete}
|
||||
/>);
|
||||
expect(screen.findByLabelText("Delete Attribute")).not.toBeNull();
|
||||
|
||||
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 productName = "Fun Product";
|
||||
const product = new Product(
|
||||
100,
|
||||
area("squareFoot", 4 * 7),
|
||||
{ name: productName },
|
||||
);
|
||||
const onChange = jest.fn();
|
||||
const onDelete = jest.fn();
|
||||
render(
|
||||
<ProductAttributeEditor
|
||||
attributeKey="Name"
|
||||
attributeValue="product"
|
||||
product={product}
|
||||
onChange={onChange}
|
||||
onDelete={onDelete}
|
||||
/>);
|
||||
fireEvent.press(screen.getByText("product")); // Use getByText instead of findByText
|
||||
fireEvent.changeText(screen.getByLabelText("Edit Value"), "new name");
|
||||
expect(onChange).toHaveBeenCalled();
|
||||
})
|
||||
|
||||
})
|
@ -3,5 +3,8 @@ module.exports = {
|
||||
preset: 'jest-expo',
|
||||
"transformIgnorePatterns": [
|
||||
"node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
|
||||
],
|
||||
"setupFiles": [
|
||||
"./setup/jest.js"
|
||||
]
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user