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
IT Project 2020
Group B
pilar-web
Commits
48bb538d
Commit
48bb538d
authored
Nov 09, 2020
by
Tsamara Esperanti Erwin
🦄
Browse files
Merge branch 'PBI-6-Progress_Program' into 'staging'
progress program See merge request
!89
parents
0846d17a
0c7295a1
Pipeline
#60358
passed with stages
in 16 minutes and 4 seconds
Changes
7
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/__test__/program/DetailProgram.test.js
View file @
48bb538d
...
...
@@ -33,7 +33,7 @@ test("Test detail program renders", async () => {
await
waitFor
(()
=>
getByTestId
(
"
program
"
));
const
program
=
getByTestId
(
"
program
"
);
expect
(
program
.
textContent
).
toContain
(
"
Eddrick
"
);
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
1
);
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
2
);
});
test
(
"
Test mock detail program return error
"
,
async
()
=>
{
...
...
@@ -72,7 +72,7 @@ test("Test detail program delete", async () => {
await
waitFor
(()
=>
getByTestId
(
"
page
"
));
const
produk
=
getByTestId
(
"
page
"
);
expect
(
produk
.
textContent
).
toContain
(
"
dummy 2
"
);
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
1
);
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
2
);
const
btnDeleteModal
=
getByTestId
(
"
button-delete-program-modal
"
);
await
act
(
async
()
=>
{
await
fireEvent
.
click
(
btnDeleteModal
);
...
...
@@ -81,7 +81,7 @@ test("Test detail program delete", async () => {
await
act
(
async
()
=>
{
await
fireEvent
.
click
(
btnDelete
);
});
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
2
);
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
3
);
});
test
(
"
Test detail produk delete error
"
,
async
()
=>
{
...
...
@@ -110,7 +110,7 @@ test("Test detail produk delete error", async () => {
await
waitFor
(()
=>
getByTestId
(
"
page
"
));
const
produk
=
getByTestId
(
"
page
"
);
expect
(
produk
.
textContent
).
toContain
(
"
Eddrick
"
);
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
1
);
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
2
);
const
btnDeleteModal
=
getByTestId
(
"
button-delete-program-modal
"
);
await
act
(
async
()
=>
{
await
fireEvent
.
click
(
btnDeleteModal
);
...
...
@@ -119,8 +119,68 @@ test("Test detail produk delete error", async () => {
await
act
(
async
()
=>
{
await
fireEvent
.
click
(
btnDelete
);
});
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
2
);
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
3
);
expect
(
produk
.
textContent
).
toContain
(
"
Tidak dapat menghapus program, mohon periksa apakah ada program ini.
"
);
});
test
(
"
Test progress program renders
"
,
async
()
=>
{
fetch
.
once
(
JSON
.
stringify
({
id
:
"
6d7462da-6a85-4e2b-9930-69567090a5d5
"
,
code
:
"
3MXZ9T
"
,
name
:
"
dummy 2
"
,
description
:
"
yeyyy
"
,
start_date_time
:
null
,
end_date_time
:
null
,
location
:
"
Depok
"
,
speaker
:
"
Eddrick
"
,
poster_image
:
"
https://industripilar-api-staging.s3.amazonaws.com/media/uploads/programs/1_txtcYocQEGtOFN33ZCTDbw.png
"
,
})
)
.
once
(
JSON
.
stringify
([{
description
:
"
ada progress guys
"
,
date
:
"
2020-04-28
"
,
image
:
"
https://industripilar-api-staging.s3.amazonaws.com/media/uploads/programs/1_txtcYocQEGtOFN33ZCTDbw.png
"
,
}])
)
.
once
(
JSON
.
stringify
({}),
{
statusCode
:
200
});
;
const
{
getByTestId
}
=
render
(
<
AuthContext
.
Provider
value
=
{{
profile
:
{
token
:
"
BEBAS
"
}
}}
>
<
DetailProgram
/>
<
/AuthContext.Provider
>
);
await
waitFor
(()
=>
getByTestId
(
"
program
"
));
const
program
=
getByTestId
(
"
program
"
);
expect
(
program
.
textContent
).
toContain
(
"
Eddrick
"
);
await
waitFor
(()
=>
getByTestId
(
"
progress-date
"
));
const
progressDate
=
getByTestId
(
"
progress-date
"
);
expect
(
progressDate
.
textContent
).
toContain
(
"
2020-04-28
"
);
await
act
(
async
()
=>
{
await
fireEvent
.
click
(
getByTestId
(
"
button-see-proof
"
));
});
const
close
=
getByTestId
(
"
button-close-proof
"
);
expect
(
close
.
textContent
).
toContain
(
"
Close
"
);
await
act
(
async
()
=>
{
await
fireEvent
.
click
(
close
);
});
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
2
);
});
test
(
"
Test mock progress program fail
"
,
async
()
=>
{
fetch
.
mockReject
(
new
Error
(
"
error message
"
));
const
{
getByTestId
}
=
render
(
<
AuthContext
.
Provider
value
=
{{
profile
:
{
token
:
"
BEBAS
"
}
}}
>
<
DetailProgram
/>
<
/AuthContext.Provider
>
);
await
waitFor
(()
=>
getByTestId
(
"
progress
"
));
const
progress
=
getByTestId
(
"
progress
"
);
expect
(
progress
.
textContent
).
toContain
(
"
Error, progress not found
"
);
});
src/__test__/program/EditProgram.test.js
View file @
48bb538d
...
...
@@ -2,7 +2,8 @@ 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/program/EditProgram
"
;
import
EditProgram
from
"
../../page/program/EditProgram
"
;
import
FormProgress
from
"
../../page/program/FormProgress
"
;
beforeEach
(()
=>
{
fetch
.
resetMocks
();
...
...
@@ -30,7 +31,7 @@ test("Test edit program renders", async () => {
const
{
getByTestId
}
=
render
(
<
AuthContext
.
Provider
value
=
{{
profile
:
{
token
:
"
BEBAS
"
}
}}
>
<
EditPro
duk
/>
<
EditPro
gram
/>
<
/AuthContext.Provider
>
);
const
waitProgram
=
getByTestId
(
"
waiting-edit-program
"
);
...
...
@@ -44,8 +45,7 @@ test("Test edit program renders", async () => {
await
act
(
async
()
=>
{
await
fireEvent
.
submit
(
getByTestId
(
"
submit-program
"
));
});
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
2
);
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
3
);
});
test
(
"
Test edit program renders error
"
,
async
()
=>
{
...
...
@@ -72,7 +72,7 @@ test("Test edit program renders error", async () => {
const
{
getByTestId
}
=
render
(
<
AuthContext
.
Provider
value
=
{{
profile
:
{
token
:
"
BEBAS
"
}
}}
>
<
EditPro
duk
/>
<
EditPro
gram
/>
<
/AuthContext.Provider
>
);
const
waitProgram
=
getByTestId
(
"
waiting-edit-program
"
);
...
...
@@ -90,8 +90,99 @@ test("Test edit program renders error", async () => {
await
act
(
async
()
=>
{
await
fireEvent
.
submit
(
getByTestId
(
"
submit-program
"
));
});
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
3
);
});
const
produk
=
getByTestId
(
"
edit-program
"
);
expect
(
produk
.
textContent
).
toContain
(
"
Error !, Data tidak dapat disimpan
"
);
test
(
"
Test progress program modal
"
,
async
()
=>
{
fetch
.
once
(
JSON
.
stringify
({
id
:
"
6d7462da-6a85-4e2b-9930-69567090a5d5
"
,
code
:
"
3MXZ9T
"
,
name
:
"
dummy 2
"
,
description
:
"
yeyyy
"
,
start_date_time
:
null
,
end_date_time
:
null
,
location
:
"
Depok
"
,
speaker
:
"
Eddrick
"
,
open_donation
:
true
,
program_minutes
:
null
,
poster_image
:
"
https://industripilar-api-staging.s3.amazonaws.com/media/uploads/programs/1_txtcYocQEGtOFN33ZCTDbw.png
"
,
link
:
null
,
total_donation_amount
:
"
2263691.00
"
,
})
);
const
{
getByTestId
}
=
render
(
<
AuthContext
.
Provider
value
=
{{
profile
:
{
token
:
"
BEBAS
"
}
}}
>
<
EditProgram
/>
<
/AuthContext.Provider
>
);
const
waitProgram
=
getByTestId
(
"
waiting-edit-program
"
);
expect
(
waitProgram
.
textContent
).
toContain
(
"
Fetching data..
"
);
await
waitFor
(()
=>
getByTestId
(
"
edit-program
"
));
const
name_program
=
getByTestId
(
"
name-program-input
"
);
expect
(
name_program
.
value
).
toEqual
(
"
dummy 2
"
);
const
modalButton
=
getByTestId
(
"
button-progress
"
)
await
act
(
async
()
=>
{
await
fireEvent
.
click
(
modalButton
);
});
const
modal
=
getByTestId
(
"
modal-progress
"
);
expect
(
modal
.
textContent
).
toContain
(
"
Tambah Progress
"
);
expect
(
modal
.
textContent
).
toContain
(
"
Tanggal
"
);
expect
(
modal
.
textContent
).
toContain
(
"
Berita
"
);
expect
(
modal
.
textContent
).
toContain
(
"
Gambar
"
);
const
close
=
getByTestId
(
"
close-button
"
);
await
act
(
async
()
=>
{
await
fireEvent
.
click
(
close
);
});
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
2
);
});
test
(
"
Test progress program modal submit
"
,
async
()
=>
{
fetch
.
once
(
JSON
.
stringify
({
id
:
"
6d7462da-6a85-4e2b-9930-69567090a5d5
"
,
code
:
"
3MXZ9T
"
,
name
:
"
dummy 2
"
,
description
:
"
yeyyy
"
,
start_date_time
:
null
,
end_date_time
:
null
,
location
:
"
Depok
"
,
speaker
:
"
Eddrick
"
,
open_donation
:
true
,
program_minutes
:
null
,
poster_image
:
"
https://industripilar-api-staging.s3.amazonaws.com/media/uploads/programs/1_txtcYocQEGtOFN33ZCTDbw.png
"
,
link
:
null
,
total_donation_amount
:
"
2263691.00
"
,
})
);
const
{
getByTestId
}
=
render
(
<
AuthContext
.
Provider
value
=
{{
profile
:
{
token
:
"
BEBAS
"
}
}}
>
<
FormProgress
/>
<
/AuthContext.Provider
>
);
const
tanggal_progress
=
getByTestId
(
"
tanggal-progress
"
);
await
act
(
async
()
=>
{
await
fireEvent
.
input
(
tanggal_progress
,
{
target
:
{
value
:
"
2020-05-12T19:30
"
}
});
});
const
berita_progress
=
getByTestId
(
"
berita-progress
"
);
await
act
(
async
()
=>
{
await
fireEvent
.
input
(
berita_progress
,
{
target
:
{
value
:
"
ini berita
"
}
});
});
const
gambar_progress
=
getByTestId
(
"
gambar-progress
"
);
await
act
(
async
()
=>
{
await
fireEvent
.
input
(
gambar_progress
,
{
target
:
{
value
:
""
},
});
});
await
act
(
async
()
=>
{
await
fireEvent
.
submit
(
getByTestId
(
"
save-button
"
));
});
expect
(
fetch
.
mock
.
calls
.
length
).
toEqual
(
0
);
});
src/page/donasi-barang/DetailDonasiBarang.jsx
View file @
48bb538d
...
...
@@ -150,7 +150,7 @@ const DetailDonasiBarang = ({ idDonasi }) => {
>
<
div
>
{
donation
.
delivery_address
===
null
?
(
<
div
>
Diantar ke
m
asjid Al-Jabar
</
div
>
<
div
>
Diantar ke
M
asjid Al-Jabar
</
div
>
)
:
(
<
div
>
Dijemput di
{
donation
.
delivery_address
}
</
div
>
)
}
...
...
src/page/program/DetailProgram.jsx
View file @
48bb538d
...
...
@@ -23,12 +23,27 @@ import {
const
DetailProgram
=
({
idProgram
})
=>
{
const
url
=
`
${
process
.
env
.
REACT_APP_BASE_URL
}
/programs/
${
idProgram
}
/`
;
const
progressUrl
=
url
+
"
progress
"
;
const
[
program
,
error
]
=
useFetchSingleData
(
url
);
const
[
progress
,
progressError
]
=
useFetchSingleData
(
progressUrl
);
const
[
deleteProgram
,
errorDelete
]
=
useDelete
(
url
);
const
[
openModal
,
setOpenModal
]
=
useState
(
false
);
const
handleClose
=
()
=>
setOpenModal
(
false
);
const
[
dialogOpen
,
setDialogOpen
]
=
useState
(
false
);
let
image
;
const
handleClickOpen
=
(
img
)
=>
{
image
=
img
;
setDialogOpen
(
true
);
};
const
handleClickClose
=
()
=>
{
setDialogOpen
(
false
);
};
const
start_date_time
=
new
Date
(
program
.
start_date_time
).
toLocaleString
();
const
end_date_time
=
new
Date
(
program
.
end_date_time
).
toLocaleString
();
return
(
<
div
data-testid
=
"page"
...
...
@@ -352,11 +367,90 @@ const DetailProgram = ({ idProgram }) => {
</
div
>
</
div
>
</
div
>
<
div
css
=
{
css
`
margin-top: 1rem;
margin-bottom: 1rem;
`
}
>
<
div
>
<
div
css
=
{
css
`
margin-top: 1rem;
`
}
>
<
div
css
=
{
css
`
margin-top: 2rem;
margin-bottom: 1rem;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 22px;
`
}
data-testid
=
"progress"
>
Progress Program
{
progressError
&&
<
ErrorDiv
>
Error, progress not found.
</
ErrorDiv
>
}
{
progress
.
length
>
0
?
<
div
>
{
progress
.
map
(
p
=>
<
div
key
=
{
p
.
id
}
css
=
{
css
`margin-top: 1rem; font-size: 18px`
}
>
<
p
data-testid
=
"progress-date"
>
{
p
.
date
}
</
p
>
<
p
>
{
p
.
description
}
</
p
>
{
p
.
image
!==
null
&&
<
Button
onClick
=
{
()
=>
handleClickOpen
(
p
.
image
)
}
variant
=
"contained"
color
=
"primary"
size
=
"medium"
data-testid
=
"button-see-proof"
>
Gambar
</
Button
>
}
</
div
>
)
}
</
div
>
:<
div
css
=
{
css
`margin-top: 1rem ; font-size: 18px`
}
>
Belum ada progress
</
div
>
}
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
Dialog
maxWidth
=
"xl"
open
=
{
dialogOpen
}
onClose
=
{
handleClickClose
}
aria-labelledby
=
"max-width-dialog-title"
>
<
DialogTitle
id
=
"max-width-dialog-title"
>
Bukti Transfer
</
DialogTitle
>
<
DialogContent
>
<
img
css
=
{
css
`
height: 80vh;
width: 80vw;
object-fit: contain;
`
}
src
=
{
image
}
alt
=
"Foto Progress"
/>
</
DialogContent
>
<
DialogActions
>
<
Button
data-testid
=
"button-close-proof"
onClick
=
{
handleClickClose
}
color
=
"primary"
>
Close
</
Button
>
</
DialogActions
>
</
Dialog
>
</
div
>
);
};
...
...
src/page/program/EditProgram.jsx
View file @
48bb538d
import
React
from
"
react
"
;
import
React
,
{
useState
}
from
"
react
"
;
import
useFetchSingleData
from
"
../../utils/useFetchSingleData
"
;
import
{
css
}
from
"
@emotion/core
"
;
import
{
ErrorDiv
}
from
"
../../component/html/html
"
;
import
{
ErrorDiv
,
RowInput
}
from
"
../../component/html/html
"
;
import
FormProgram
from
"
./FormProgram
"
;
import
ArrowBackIcon
from
"
@material-ui/icons/ArrowBack
"
;
import
ErrorOutlineIcon
from
"
@material-ui/icons/ErrorOutline
"
;
import
{
navigate
}
from
"
@reach/router
"
;
import
useSendData
from
"
../../utils/useSendData
"
;
import
Button
from
"
@material-ui/core/Button
"
;
import
Dialog
from
"
@material-ui/core/Dialog
"
;
import
DialogActions
from
"
@material-ui/core/DialogActions
"
;
import
DialogContent
from
"
@material-ui/core/DialogContent
"
;
import
DialogTitle
from
"
@material-ui/core/DialogTitle
"
;
import
FormProgress
from
"
./FormProgress
"
;
const
EditProgram
=
({
idProgram
})
=>
{
const
url
=
`
${
process
.
env
.
REACT_APP_BASE_URL
}
/programs/
${
idProgram
}
/`
;
const
[
initialData
,
errorState
]
=
useFetchSingleData
(
url
);
const
[
send
,
error
]
=
useSendData
({
url
,
method
:
"
PATCH
"
,
redirect
:
-
1
});
const
[
dialogOpen
,
setDialogOpen
]
=
useState
(
false
);
const
onSubmit
=
(
data
)
=>
{
send
(
data
);
};
const
urlProgress
=
`
${
process
.
env
.
REACT_APP_BASE_URL
}
/programs/
${
idProgram
}
/progress`
;
const
[
initialProgressData
]
=
useFetchSingleData
(
urlProgress
);
const
[
sendProgress
]
=
useSendData
({
url
:
urlProgress
,
method
:
"
POST
"
,
redirect
:
"
/program
"
,
});
const
onSubmitProgress
=
(
data
)
=>
{
const
formData
=
new
FormData
();
formData
.
append
(
"
date
"
,
data
[
"
tanggal_progress
"
]);
formData
.
append
(
"
description
"
,
data
[
"
berita_progress
"
]);
if
(
data
[
"
gambar_progress
"
].
length
!==
0
)
formData
.
append
(
"
image
"
,
data
[
"
gambar_progress
"
][
0
]);
sendProgress
(
formData
);
};
if
(
errorState
||
Object
.
keys
(
initialData
).
length
===
0
)
return
(
<
div
...
...
@@ -29,6 +53,13 @@ const EditProgram = ({ idProgram }) => {
Fetching data..
</
div
>
);
const
handleClickOpen
=
()
=>
{
setDialogOpen
(
true
);
};
const
handleClose
=
()
=>
{
setDialogOpen
(
false
);
};
return
(
<
div
data-testid
=
"edit-program"
...
...
@@ -84,6 +115,51 @@ const EditProgram = ({ idProgram }) => {
</
div
>
</
div
>
<
FormProgram
{
...{
onSubmit
,
initialData
}
}
/>
<
RowInput
>
<
Button
onClick
=
{
handleClickOpen
}
variant
=
"contained"
size
=
"medium"
data-testid
=
"button-progress"
css
=
{
css
`
text-transform: none;
width: 100%;
background: #FFFFFF;
border: 1px solid #3c8dbc;
box-sizing: border-box;
border-radius: 50px;
font-size: 14px;
line-height: 17px;
text-align: center;
letter-spacing: 0.2em;
color: #3c8dbc;
height: 2.3rem;
`
}
>
Tambah Progress
</
Button
>
</
RowInput
>
<
Dialog
maxWidth
=
"xl"
open
=
{
dialogOpen
}
onClose
=
{
handleClose
}
aria-labelledby
=
"max-width-dialog-title"
data-testid
=
"modal-progress"
>
<
DialogTitle
id
=
"max-width-dialog-title"
>
Tambah Progress
</
DialogTitle
>
<
DialogContent
>
<
FormProgress
{
...{
onSubmitProgress
,
initialProgressData
}
}
/>
</
DialogContent
>
<
DialogActions
>
<
Button
data-testid
=
"close-button"
onClick
=
{
handleClose
}
color
=
"primary"
>
Close
</
Button
>
</
DialogActions
>
</
Dialog
>
</
div
>
);
};
...
...
src/page/program/FormProgram.jsx
View file @
48bb538d
...
...
@@ -226,4 +226,4 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
);
};
export
default
FormProgram
;
export
default
FormProgram
;
\ No newline at end of file
src/page/program/FormProgress.jsx
0 → 100644
View file @
48bb538d
import
React
from
"
react
"
;
import
{
ErrorDiv
,
RowInput
,
InputForm
,
LabelInput
,
InputSubmitForm
,
}
from
"
../../component/html/html
"
;
import
{
useForm
}
from
"
react-hook-form
"
;
import
{
css
}
from
"
@emotion/core
"
;
function
FormProgress
({
onSubmitProgress
,
initialProgressData
=
null
})
{
const
{
register
,
handleSubmit
,
errors
}
=
useForm
({
defaultValues
:
initialProgressData
!==
null
?
{
tanggal_progress
:
initialProgressData
[
"
tanggal_progress
"
],
berita_progress
:
initialProgressData
[
"
berita_progress
"
],
gambar_progress
:
initialProgressData
[
"
gambar_progress
"
]
}
:
{}
});
return
(
<
form
onSubmit
=
{
handleSubmit
(
onSubmitProgress
)
}
css
=
{
css
`
display: flex;
flex-direction: column;
`
}
>
<
RowInput
>
<
LabelInput
htmlFor
=
"tanggal_progress"
>
Tanggal
</
LabelInput
>
<
InputForm
data-testid
=
"tanggal-progress"
type
=
"date"
name
=
"tanggal_progress"
ref
=
{
register
({
required
:
true
})
}
/>
{
errors
.
tanggal_progress
&&
<
ErrorDiv
>
Mohon isi tanggal progress
</
ErrorDiv
>
}
</
RowInput
>
<
RowInput
>
<
LabelInput
htmlFor
=
"berita_progress"
>
Berita
</
LabelInput
>
<
InputForm
data-testid
=
"berita-progress"
name
=
"berita_progress"
ref
=
{
register
({
required
:
true
})
}
/>
{
errors
.
berita_progress
&&
<
ErrorDiv
>
Mohon isi berita progress
</
ErrorDiv
>
}
</
RowInput
>
<
RowInput
>
<
LabelInput
htmlFor
=
"gambar_progress"
>
Gambar
</
LabelInput
>
<
InputForm
data-testid
=
"gambar-progress"
type
=
"file"
name
=
"gambar_progress"
ref
=
{
register
({
required
:
false
})
}
/>
</
RowInput
>
<
RowInput
data-testid
=
"save-button"
>
<
InputSubmitForm
type
=
"submit"
value
=
"SIMPAN"
/>
</
RowInput
>
</
form
>
)
}
export
default
FormProgress
;
\ No newline at end of file
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment