Fakultas Ilmu Komputer UI

Skip to content
GitLab
Commit 873ef74f authored by Intan Fadilla Andyani's avatar Intan Fadilla Andyani
Browse files

radio button hampers

parent 61e29659
Expand all Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 873ef74f
This diff is collapsed.
src/__test__/produk/EditProduk.test.js deleted 100644 → 0
View file @ 61e29659
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);
});
src/__test__/produk/TambahProduk.test.js
View file @ 873ef74f
......@@ -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"}})
......
src/page/produk/DetailProduk.jsx
View file @ 873ef74f
......@@ -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>
......
src/page/produk/EditProduk.jsx
View file @ 873ef74f
......@@ -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;
src/page/produk/FormProduk.jsx
View file @ 873ef74f
......@@ -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>
</div>