Fakultas Ilmu Komputer UI

Commit 873ef74f authored by Intan Fadilla Andyani's avatar Intan Fadilla Andyani
Browse files

radio button hampers

parent 61e29659
This diff is collapsed.
import { act, cleanup, fireEvent, render } from "@testing-library/react";
import AuthContext from "../../utils/contex";
import { waitFor } from "@testing-library/dom";
import React from "react";
import EditProduk from "../../page/produk/EditProduk";
import { matchers } from "@emotion/jest";
expect.extend(matchers);
beforeEach(() => {
fetch.resetMocks();
});
afterEach(cleanup);
test("Test edit produk renders", async () => {
fetch
.once(
JSON.stringify({
id: "3d403cd3-e356-4c15-9a86-8843333e2778",
code: "5VK6TY",
name: "a",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
subcategory: "626aa022-50a7-4d3a-b658-79cb0f059b03",
subcategory_name: "Baju Tidur hehe",
description: "celana",
price: "50000.00",
stock: 9,
image: null,
profit: "100000.00",
modal: "10.00",
total_profit: "0.00",
unit: "pcs",
})
)
.once(
JSON.stringify({
count: 4,
next: null,
previous: null,
results: [
{
id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
name: "Baju",
image: null,
},
{
id: "69faa710-fbe2-45f1-98e8-f80d3c4c1bbe",
name: "Celana",
image: null,
},
{
id: "0664247c-d9ea-4e56-bb02-4b8463f9e14c",
name: "Mainan",
image: null,
},
{
id: "8c2c06e6-0ead-4b9a-8de1-37237fc6bdc9",
name: "Makanan",
image: null,
},
],
})
)
.once(
JSON.stringify({
count: 2,
next: null,
previous: null,
results: [
{
id: "1fac049f-592c-4c15-afe6-9e05a2ce1540",
name: "Baju Pergi",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
image: null,
},
{
id: "626aa022-50a7-4d3a-b658-79cb0f059b03",
name: "Baju Tidur",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
image: null,
},
{
id: "e44da96a-44e3-4e69-8346-bd1da7b8e41f",
name: "Kue",
category: "8c2c06e6-0ead-4b9a-8de1-37237fc6bdc9",
category_name: "Makanan",
image: null,
},
],
})
)
.once(
JSON.stringify({
id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
name: "avengers endgame",
category: "0664247c-d9ea-4e56-bb02-4b8463f9e14c",
category_name: "Mainan",
image:
"https://industripilar-api-staging.s3.amazonaws.com/media/uploads/subcategories/1_txtcYocQEGtOFN33ZCTDbw.png",
})
)
.once(
JSON.stringify({
id: "3d403cd3-e356-4c15-9a86-8843333e2778",
code: "5VK6TY",
name: "a",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
subcategory: "626aa022-50a7-4d3a-b658-79cb0f059b03",
subcategory_name: "Baju Tidur hehe",
description: "celana",
price: "50000.00",
stock: 9,
image: null,
profit: "100000.00",
modal: "10.00",
total_profit: "0.00",
unit: "pcs",
}),
{
status: 200,
}
);
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<EditProduk />
</AuthContext.Provider>
);
const waitProduk = getByTestId("waiting-edit-produk");
expect(waitProduk.textContent).toContain("Fetching data..");
await waitFor(() => getByTestId("edit-produk"));
const name_produk = getByTestId("name-produk-input");
expect(name_produk.value).toEqual("a");
const descProduk = getByTestId("desc-produk-input");
expect(descProduk).toHaveAttribute("rows", "4");
const descProdukParent = getByTestId("desc-produk-input-parent");
expect(descProdukParent).toHaveStyleRule("height", "100%");
await act(async () => {
await fireEvent.input(name_produk, { target: { value: "test" } });
});
await act(async () => {
await fireEvent.submit(getByTestId("submit-produk"));
});
expect(fetch.mock.calls.length).toEqual(4);
});
test("Test edit produk renders error", async () => {
fetch
.once(
JSON.stringify({
id: "3d403cd3-e356-4c15-9a86-8843333e2778",
code: "5VK6TY",
name: "a",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
subcategory: "626aa022-50a7-4d3a-b658-79cb0f059b03",
subcategory_name: "Baju Tidur hehe",
description: "celana",
price: "50000.00",
preorder: "false",
stock: 9,
image: null,
profit: "100000.00",
modal: "10.00",
total_profit: "0.00",
unit: "pcs",
})
)
.once(
JSON.stringify({
count: 4,
next: null,
previous: null,
results: [
{
id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
name: "Baju",
image: null,
},
{
id: "69faa710-fbe2-45f1-98e8-f80d3c4c1bbe",
name: "Celana",
image: null,
},
{
id: "0664247c-d9ea-4e56-bb02-4b8463f9e14c",
name: "Mainan",
image: null,
},
{
id: "8c2c06e6-0ead-4b9a-8de1-37237fc6bdc9",
name: "Makanan",
image: null,
},
],
})
)
.once(
JSON.stringify({
count: 2,
next: null,
previous: null,
results: [
{
id: "1fac049f-592c-4c15-afe6-9e05a2ce1540",
name: "Baju Pergi",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
image: null,
},
{
id: "626aa022-50a7-4d3a-b658-79cb0f059b03",
name: "Baju Tidur",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
image: null,
},
{
id: "e44da96a-44e3-4e69-8346-bd1da7b8e41f",
name: "Kue",
category: "8c2c06e6-0ead-4b9a-8de1-37237fc6bdc9",
category_name: "Makanan",
image: null,
},
],
})
)
.once(
JSON.stringify({
id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
name: "avengers endgame",
category: "0664247c-d9ea-4e56-bb02-4b8463f9e14c",
category_name: "Mainan",
image:
"https://industripilar-api-staging.s3.amazonaws.com/media/uploads/subcategories/1_txtcYocQEGtOFN33ZCTDbw.png",
})
)
.once(
JSON.stringify({
id: "3d403cd3-e356-4c15-9a86-8843333e2778",
code: "5VK6TY",
name: "a",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
subcategory: "626aa022-50a7-4d3a-b658-79cb0f059b03",
subcategory_name: "Baju Tidur hehe",
description: "celana",
price: "50000.00",
preorder: "false",
stock: 9,
image: null,
profit: "100000.00",
modal: "10.00",
total_profit: "0.00",
unit: "pcs",
}),
{
status: 500,
}
);
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<EditProduk />
</AuthContext.Provider>
);
const waitProduk = getByTestId("waiting-edit-produk");
expect(waitProduk.textContent).toContain("Fetching data..");
await waitFor(() => getByTestId("edit-produk"));
const name_produk = getByTestId("name-produk-input");
expect(name_produk.value).toEqual("a");
const descProduk = getByTestId("desc-produk-input");
expect(descProduk).toHaveAttribute("rows", "4");
const descProdukParent = getByTestId("desc-produk-input-parent");
expect(descProdukParent).toHaveStyleRule("height", "100%");
await act(async () => {
await fireEvent.submit(getByTestId("submit-produk"));
});
expect(fetch.mock.calls.length).toEqual(4);
});
......@@ -84,6 +84,14 @@ test("Test tambah produk renders", async () => {
await act(async () => {
await fireEvent.input(modal_produk, {target: { value: "1" } });
});
const tipe_hampers = getByTestId("is-hampers-2")
await act(async () => {
await fireEvent.click(tipe_hampers, {target: {value: "true"}})
})
const price_hampers = getByTestId("hampers-price-input")
await act(async () => {
await fireEvent.input(price_hampers, { target: { value: "1" } });
})
const tipe_produk = getByTestId("is-preorder-input-2")
await act(async () => {
await fireEvent.click(tipe_produk, {target: {value: "false"}})
......@@ -250,6 +258,14 @@ test("Test tambah produk error", async () => {
await act(async () => {
await fireEvent.input(modal_produk, {target: { value: "1" } });
});
const tipe_hampers = getByTestId("is-hampers-2")
await act(async () => {
await fireEvent.click(tipe_hampers, {target: {value: "true"}})
})
const price_hampers = getByTestId("hampers-price-input")
await act(async () => {
await fireEvent.input(price_hampers, { target: { value: "1" } });
})
const tipe_produk = getByTestId("is-preorder-input-2")
await act(async () => {
await fireEvent.click(tipe_produk, {target: {value: "false"}})
......@@ -351,6 +367,14 @@ test("Test modal produk required", async () => {
await act(async () => {
await fireEvent.input(modal_produk, {target: { value: "1" } });
});
const tipe_hampers = getByTestId("is-hampers-2")
await act(async () => {
await fireEvent.click(tipe_hampers, {target: {value: "true"}})
})
const price_hampers = getByTestId("hampers-price-input")
await act(async () => {
await fireEvent.input(price_hampers, { target: { value: "1" } });
})
const tipe_produk = getByTestId("is-preorder-input-2")
await act(async () => {
await fireEvent.click(tipe_produk, {target: {value: "false"}})
......@@ -442,6 +466,14 @@ test("Test modal produk required", async () => {
await act(async () => {
await fireEvent.input(price_produk, { target: { value: "1" } });
});
const tipe_hampers = getByTestId("is-hampers-2")
await act(async () => {
await fireEvent.click(tipe_hampers, {target: {value: "true"}})
})
const price_hampers = getByTestId("hampers-price-input")
await act(async () => {
await fireEvent.input(price_hampers, { target: { value: "1" } });
})
const tipe_produk = getByTestId("is-preorder-input-2")
await act(async () => {
await fireEvent.click(tipe_produk, {target: {value: "false"}})
......
......@@ -164,6 +164,32 @@ const DetailProduk = ({ productId }) => {
{product.name}
</span>
</p>
<p>
Tipe (Hampers):
{product.is_hampers ? ( <span
css={css`
vertical-align: middle;
margin-left: 1%;
`}> Hampers</span> ) : (
<span
css={css`
vertical-align: middle;
margin-left: 1%;
`}> Non-Hampers</span>
)}
</p>
{product.is_hampers ? (
<p>
Biaya Layanan Hampers:<span
css={css`
vertical-align: middle;
margin-left: 1%;
`}>{product.hampers_price}</span>
</p> ) : (
<p></p>
)}
<span>
<span
className="icon"
......@@ -243,18 +269,10 @@ const DetailProduk = ({ productId }) => {
>
<LocalShippingIcon style={{ color: "#FFC80A" }} />
</span>
<span
className="text"
css={css`
vertical-align: middle;
margin-left: 1%;
`}
>
{product.preorder ? "Preorder" : product.stock}{" "}
{product.unit}
{console.log(product)}
</span>
{product.preorder ? "Preorder" : (product.stock)}
</span>
{" "}{product.preorder ? ("") : product.unit}
</p>
{product.preorder && (
<p>
......
......@@ -6,6 +6,7 @@ import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
import useFetchSingleData from "../../utils/useFetchSingleData";
import useSendData from "../../utils/useSendData";
import { navigate } from "@reach/router";
import { Fragment } from "react";
const EditProduk = ({ productId }) => {
const url = `${process.env.REACT_APP_BASE_URL}/products/${productId}/`;
......@@ -14,9 +15,9 @@ const EditProduk = ({ productId }) => {
const onSubmit = (data) => {
send(data);
};
if (errorState || Object.keys(initialData).length === 0)
return (
<div
return (
<Fragment>
{errorState || Object.keys(initialData.length === 0) ? (<div
data-testid="waiting-edit-produk"
css={css`
display: flex;
......@@ -26,26 +27,23 @@ const EditProduk = ({ productId }) => {
`}
>
Fetching data..
</div>
);
return (
<div
data-testid="edit-produk"
css={css`
</div>) : (<div
data-testid="edit-produk"
css={css`
display: flex;
margin: 2rem 3rem 3rem 3rem;
flex-direction: column;
`}
>
<div
css={css`
>
<div
css={css`
display: flex;
flex-direction: row;
`}
>
<button
data-testid="back"
css={css`
>
<button
data-testid="back"
css={css`
background-color: Transparent;
background-repeat: no-repeat;
border: none;
......@@ -53,38 +51,39 @@ const EditProduk = ({ productId }) => {
overflow: hidden;
outline: none;
`}
onClick={() => navigate(-1)}
>
<ArrowBackIcon fontSize="large" />
</button>
<div
css={css`
onClick={() => navigate(-1)}
>
<ArrowBackIcon fontSize="large" />
</button>
<div
css={css`
font-size: 36px;
`}
>
Edit {initialData.name}
>
Edit {initialData.name}
</div>
</div>
</div>
<div
css={css`
<div
css={css`
margin-top: 2.5rem;
display: flex;
`}
>
<ErrorOutlineIcon style={{ fontSize: 28, color: "FFC80A" }} />
<div
css={css`
>
<ErrorOutlineIcon style={{ fontSize: 28, color: "FFC80A" }} />
<div
css={css`
font-weight: 600;
font-size: 24px;
line-height: 29px;
`}
>
Informasi Produk
>
Informasi Produk
</div>
</div>
</div>
<FormProduk {...{ onSubmit, initialData, error }} />
</div>
);
<FormProduk {...{ onSubmit, initialData, error }} />
</div>)}
</Fragment>
)
};
export default EditProduk;
......@@ -30,6 +30,7 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => {
...defaultMaskOptions,
})
const [isPreorder, setIsPreorder] = useState("");
const[isHampers, setIsHampers] = useState(false);
const { register, handleSubmit, errors, watch } = useForm({
defaultValues:
initialData !== null
......@@ -42,8 +43,10 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => {
preoder: initialData["preorder"],
preorder_duration: initialData["preorder_duration"],
stock: initialData["stock"],
modal: initialData["modal"],
unit: initialData["unit"],
modal: initialData["modal"].split(".")[0],
is_hampers: initialData["is_hampers"],
hampers_price: initialData["hampers_price"].split(".")[0],
}
: {},
});
......@@ -119,9 +122,9 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => {
}
else if (formCurrency.includes(key)) formData.append(key, formatValue(data[key]))
else formData.append(key, data[key]);
isPreorder === "true" ? formData.set("stock" , null) : formData.set("preorder_duration", null)
isPreorder === "true" ? formData.set("stock" , "") : formData.set("preorder_duration", "")
isHampers === "false" ? formData.set("hampers_price", "") : formData.set("hampers_price", data["hampers_price"])
}
onSubmit(formData);
}, [isPreorder]);
......@@ -317,6 +320,66 @@ const FormProduk = ({ onSubmit, initialData = null, error }) => {
</RowInput>
{/* HARGA SECTION END */}
{/* HAMPERS TYPE SECTION START*/}
<RowInput>
<LabelInput htmlFor="is_hampers">Tipe (Hampers)
<span css={css`color:red`}>*</span></LabelInput>
<div
css={css`
display: flex;
flex-grow: 4;
align-items: baseline;
align-content: flex-start;
`}
>
<input
data-testid="is-hampers-1"
type="radio"
name="is_hampers"
value="false"
id="false_hampers"
onClick = {() => setIsHampers(false)}
ref={register({ required: true })}
/>
<label htmlFor="false_hampers">Non-Hampers</label>
</div>
<div
css={css`
display: flex;
flex-grow: 4;
align-items: baseline;
align-content: flex-start;
`}
>
<input
data-testid="is-hampers-2"
type="radio"
name="is_hampers"
value="true"
id="true_hampers"
onClick = {() => setIsHampers(true)}
ref={register({ required: true })}
/>
<label htmlFor="true_hampers">Hampers</label>