Fakultas Ilmu Komputer UI
Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ppl-fasilkom-ui
PPL Sosial
pilar
pilar-web
Commits
873ef74f
Commit
873ef74f
authored
Jun 07, 2021
by
Intan Fadilla Andyani
Browse files
radio button hampers
parent
61e29659
Changes
6
Expand all
Hide whitespace changes
Inline
Side-by-side
package-lock.json
View file @
873ef74f
This diff is collapsed.
Click to expand it.
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
>