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
2021
Kelas D
Justika - Pengembangan Platform untuk UMKM
Justika UMKM Legal - Frontend
Commits
dc7a62df
Commit
dc7a62df
authored
Apr 26, 2021
by
Lia Yuliana
Browse files
Merge branch 'PBI-4-IUMK' into 'staging'
Pbi 4 iumk connect to backend See merge request
!9
parents
e44e73c2
1378d845
Pipeline
#72931
passed with stages
in 12 minutes and 45 seconds
Changes
5
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/components/FormIUMK/FormIUMK3.js
View file @
dc7a62df
...
...
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import
{
getEmail
,
getPhoneNumber
}
from
'
../../store/auth/authSlice
'
import
{
useSelector
}
from
'
react-redux
'
const
FormIUMK3
=
({
data
})
=>
{
const
FormIUMK3
=
({
data
,
onSubmit
,
handleSubmit
})
=>
{
const
email
=
useSelector
(
getEmail
)
const
phoneNumber
=
useSelector
(
getPhoneNumber
)
const
urutan
=
[
...
...
@@ -45,54 +45,67 @@ const FormIUMK3 = ({data}) => {
data
=
{...
data
,
...
konstan
}
return
(
<
form
className
=
"
px-4
"
data
-
testid
=
"
form-iumk-3
"
>
{
urutan
.
map
((
value
,
index
)
=>
(
<
div
className
=
"
grid lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3
"
key
=
{
index
}
>
<
div
className
=
"
flex justify-start grid lg:col-span-2 xl:col-span-2 2xl:col-span-2 lg:pb-3 xl:pb-3 2xl:pb-3
"
>
<
p
className
=
"
md
\
:font-Lato
"
>
{
label
[
index
]}
<
/p
>
<
div
>
<
form
className
=
"
px-4
"
data
-
testid
=
"
form-iumk-3
"
onSubmit
=
{
handleSubmit
(
onSubmit
)}
>
{
urutan
.
map
((
value
,
index
)
=>
(
<
div
className
=
"
grid lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3
"
key
=
{
index
}
>
<
div
className
=
"
flex justify-start grid lg:col-span-2 xl:col-span-2 2xl:col-span-2 lg:pb-3 xl:pb-3 2xl:pb-3
"
>
<
p
className
=
"
md
\
:font-Lato
"
>
{
label
[
index
]}
<
/p
>
{
urutan
[
index
]
==
'
catatan
'
?
(
<
p
className
=
"
md
\
:font-Lato
"
data
-
testid
=
{
`form-iumk-3-input-
${
value
}
`
}
>
{
data
[
value
]
&&
data
[
value
]
!=
null
?
data
[
value
]
:
'
-
'
}
<
/p
>
)
:
(
''
)}
<
/div
>
{
urutan
[
index
]
==
'
catatan
'
?
(
<
p
className
=
"
md
\
:font-Lato
"
data
-
testid
=
{
`form-iumk-3-input-
${
value
}
`
}
>
{
data
[
value
]
&&
data
[
value
]
!=
null
?
data
[
value
]
:
'
-
'
}
<
/p
>
)
:
(
''
)
:
(
<
div
className
=
"
flex justify-start lg:justify-end xl:justify-end 2xl:justify-end text-left lg:text-right xl:text-right 2xl:text-right pb-3
"
>
<
p
className
=
"
heading-3
"
data
-
testid
=
{
`form-iumk-3-input-
${
value
}
`
}
>
{
data
[
value
]
&&
data
[
value
]
!=
null
&&
urutan
[
index
]
==
'
no_telepon
'
?
'
+62
'
+
data
[
value
]
:
data
[
value
]}
{
data
[
value
]
&&
data
[
value
]
!=
null
?
''
:
'
-
'
}
<
/p
>
<
/div
>
)}
<
/div
>
{
urutan
[
index
]
==
'
catatan
'
?
(
''
)
:
(
<
div
className
=
"
flex justify-start lg:justify-end xl:justify-end 2xl:justify-end text-left lg:text-right xl:text-right 2xl:text-right pb-3
"
>
<
p
className
=
"
heading-3
"
data
-
testid
=
{
`form-iumk-3-input-
${
value
}
`
}
>
{
data
[
value
]
&&
data
[
value
]
!=
null
?
data
[
value
]
:
'
-
'
}
<
/p
>
<
/div
>
)}
))}
<
div
className
=
"
pt-4
"
>
<
button
className
=
"
bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit
"
data
-
testid
=
"
submit-button
"
>
Submit
<
/button
>
<
/div
>
))}
<
div
className
=
"
pt-4
"
>
<
button
className
=
"
bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit
"
data
-
testid
=
"
submit-button
"
>
Submit
<
/button
>
<
/div
>
<
/form
>
<
/form
>
<
/div
>
)
}
FormIUMK3
.
propTypes
=
{
data
:
PropTypes
.
object
,
handleSubmit
:
PropTypes
.
func
,
onSubmit
:
PropTypes
.
func
,
}
export
default
FormIUMK3
src/components/FormIUMK/FormIUMK3.test.js
View file @
dc7a62df
...
...
@@ -3,6 +3,9 @@ import FormIUMK3 from './FormIUMK3'
import
{
testRender
,
makeTestStore
}
from
'
../../testUtils
'
test
(
'
renders FormIUMK3 Element
'
,
()
=>
{
const
handleSubmit
=
jest
.
fn
()
const
onSubmit
=
jest
.
fn
()
const
data
=
{
nama
:
'
PT UUN
'
,
alamat
:
'
Jakarta
'
,
...
...
@@ -13,7 +16,10 @@ test('renders FormIUMK3 Element', () => {
catatan
:
null
,
}
const
store
=
makeTestStore
()
testRender
(
<
FormIUMK3
data
=
{
data
}
/>, {store}
)
testRender
(
<
FormIUMK3
data
=
{
data
}
handleSubmit
=
{
handleSubmit
}
onSubmit
=
{
onSubmit
}
/>
,
{
store
},
)
expect
(
screen
.
getByTestId
(
'
form-iumk-3
'
)).
toBeInTheDocument
()
// Test label
...
...
@@ -48,6 +54,9 @@ test('renders FormIUMK3 Element', () => {
})
test
(
'
renders FormIUMK3 Element with catatan
'
,
()
=>
{
const
handleSubmit
=
jest
.
fn
()
const
onSubmit
=
jest
.
fn
()
const
data
=
{
nama
:
'
PT UUN
'
,
alamat
:
'
Jakarta
'
,
...
...
@@ -58,7 +67,10 @@ test('renders FormIUMK3 Element with catatan', () => {
catatan
:
'
Contoh catatan
'
,
}
const
store
=
makeTestStore
()
testRender
(
<
FormIUMK3
data
=
{
data
}
/>, {store}
)
testRender
(
<
FormIUMK3
data
=
{
data
}
handleSubmit
=
{
handleSubmit
}
onSubmit
=
{
onSubmit
}
/>
,
{
store
},
)
expect
(
screen
.
getByTestId
(
'
form-iumk-3
'
)).
toBeInTheDocument
()
expect
(
screen
.
getByTestId
(
'
form-iumk-3-input-catatan
'
)).
toBeInTheDocument
()
...
...
src/pages/formiumk.js
View file @
dc7a62df
...
...
@@ -5,9 +5,14 @@ import FormIUMK2 from '../components/FormIUMK/FormIUMK2'
import
FormIUMK3
from
'
../components/FormIUMK/FormIUMK3
'
import
Stepper
from
'
../components/Stepper/Stepper
'
import
{
useSelector
}
from
'
react-redux
'
import
{
getEmail
,
isLoggedIn
}
from
'
../store/auth/authSlice
'
import
{
getEmail
,
isLoggedIn
,
getToken
}
from
'
../store/auth/authSlice
'
import
{
useState
}
from
'
react
'
import
{
useForm
}
from
'
react-hook-form
'
import
axios
from
'
axios
'
import
BASE_URL
from
'
../api/config
'
import
{
navigate
}
from
'
@reach/router
'
import
toast
,
{
Toaster
}
from
'
react-hot-toast
'
const
FormIUMK
=
()
=>
{
const
{
register
,
handleSubmit
,
errors
,
setValue
}
=
useForm
({
...
...
@@ -16,6 +21,7 @@ const FormIUMK = () => {
})
const
name
=
useSelector
(
getEmail
)
const
loggedIn
=
useSelector
(
isLoggedIn
)
const
token
=
useSelector
(
getToken
)
const
[
pageNumber
,
setPageNumber
]
=
useState
(
1
)
const
[
data
,
setData
]
=
useState
({})
const
[
employeeData
,
setEmployeeData
]
=
useState
(
null
)
...
...
@@ -28,6 +34,43 @@ const FormIUMK = () => {
}
else
{
setData
({...
data
,
...
input
,
...{
karyawan
:
employeeData
}})
}
}
else
{
axios
.
post
(
`
${
BASE_URL
.
API_BASE_URL
}
/api/v1/iumk/`
,
{
nama_usaha
:
data
.
nama
,
alamat
:
data
.
alamat
,
barang_jasa
:
data
.
barangJasa
,
status_entitas
:
data
.
status
,
jumlah_karyawan
:
data
.
karyawan
,
kode_kbli
:
data
.
kbli
,
catatan
:
data
.
catatan
,
},
{
headers
:
{
Authorization
:
`Token
${
token
}
`
,
},
},
)
.
then
(()
=>
{
navigate
(
'
/
'
,
{
state
:
{
message
:
'
Pengajuan Izin UMK berhasil terkirim
'
,
showToast
:
true
,
},
replace
:
false
,
})
})
.
catch
((
error
)
=>
{
if
(
error
.
response
.
data
.
non_field_errors
)
{
toast
.
error
(
<
span
data
-
testid
=
"
toast-error
"
>
{
error
.
response
.
data
.
non_field_errors
}
<
/span>
,
)
}
})
}
}
...
...
@@ -68,9 +111,16 @@ const FormIUMK = () => {
/
>
)}
{
pageNumber
==
3
&&
<
FormIUMK3
data
=
{
data
}
/>
}
{
pageNumber
==
3
&&
(
<
FormIUMK3
data
=
{
data
}
onSubmit
=
{
onSubmit
}
handleSubmit
=
{
handleSubmit
}
/
>
)}
<
/div
>
<
/div
>
<
Toaster
/>
<
/div
>
)
}
...
...
src/pages/formiumk.test.js
View file @
dc7a62df
...
...
@@ -6,6 +6,22 @@ import {
import
FormIUMK
from
'
./formiumk
'
import
{
testRender
,
makeTestStore
,
fixtureSet
}
from
'
../testUtils
'
import
userEvent
from
'
@testing-library/user-event
'
import
{
rest
}
from
'
msw
'
import
{
setupServer
}
from
'
msw/node
'
import
BASE_URL
from
'
../api/config
'
const
server
=
setupServer
(
rest
.
post
(
`
${
BASE_URL
.
API_BASE_URL
}
/api/v1/iumk/`
,
(
req
,
res
,
ctx
)
=>
{
return
res
(
ctx
.
status
(
200
),
ctx
.
json
({
message
:
'
Pengajuan Izin UMK berhasil terkirim
'
}),
)
}),
)
beforeEach
(()
=>
server
.
listen
())
afterEach
(()
=>
server
.
resetHandlers
())
afterEach
(()
=>
server
.
close
())
test
(
'
renders Navbar Element
'
,
()
=>
{
const
store
=
makeTestStore
(
fixtureSet
)
...
...
@@ -87,3 +103,61 @@ test('renders submit button at page 3', async () => {
expect
(
screen
.
getByTestId
(
'
form-iumk-3
'
)).
toBeInTheDocument
()
expect
(
screen
.
getByTestId
(
'
submit-button
'
)).
toBeInTheDocument
()
})
test
(
'
show error toast if there is an error from backend
'
,
async
()
=>
{
server
.
use
(
rest
.
post
(
`
${
BASE_URL
.
API_BASE_URL
}
/api/v1/iumk/`
,
(
req
,
res
,
ctx
)
=>
{
return
res
(
ctx
.
status
(
400
),
ctx
.
json
({
non_field_errors
:
'
Kode KBLI hanya boleh mengandung angka!
'
}),
)
}),
)
const
store
=
makeTestStore
()
testRender
(
<
FormIUMK
/>
,
{
store
})
expect
(
screen
.
getByTestId
(
'
form-iumk-1
'
)).
toBeInTheDocument
()
userEvent
.
type
(
screen
.
getByTestId
(
'
form-1-nama-field
'
),
'
pt ABC
'
)
userEvent
.
click
(
screen
.
getByTestId
(
'
form-1-status-pt
'
))
userEvent
.
type
(
screen
.
getByTestId
(
'
form-1-alamat-field
'
),
'
Jl. TB Simatupang No. 5 Ragunan, Pasar Minggu Jakarta 12550
'
,
)
userEvent
.
type
(
screen
.
getByTestId
(
'
form-1-barang-jasa-field
'
),
'
Travel Agency
'
,
)
expect
(
screen
.
getByTestId
(
'
form-1-nama-field
'
)).
toHaveValue
(
'
pt ABC
'
)
expect
(
screen
.
getByTestId
(
'
form-1-status-pt
'
)).
toBeChecked
()
expect
(
screen
.
getByTestId
(
'
form-1-alamat-field
'
)).
toHaveValue
(
'
Jl. TB Simatupang No. 5 Ragunan, Pasar Minggu Jakarta 12550
'
,
)
expect
(
screen
.
getByTestId
(
'
form-1-barang-jasa-field
'
)).
toHaveValue
(
'
Travel Agency
'
,
)
let
lanjutButton
=
screen
.
getByTestId
(
'
lanjut-button
'
)
fireEvent
.
click
(
lanjutButton
)
await
waitForElementToBeRemoved
(()
=>
screen
.
getByTestId
(
'
form-1-nama-field
'
))
const
formIumk2
=
screen
.
getByTestId
(
'
form-iumk-2
'
)
expect
(
formIumk2
).
toBeInTheDocument
()
userEvent
.
type
(
screen
.
getByTestId
(
'
form-iumk-2-kode-kbli
'
),
'
AB123
'
)
lanjutButton
=
screen
.
getByTestId
(
'
lanjut-button
'
)
fireEvent
.
click
(
lanjutButton
)
await
waitForElementToBeRemoved
(()
=>
screen
.
getByTestId
(
'
form-iumk-2-kode-kbli
'
),
)
expect
(
screen
.
getByTestId
(
'
form-iumk-3
'
)).
toBeInTheDocument
()
const
submitButton
=
screen
.
getByTestId
(
'
submit-button
'
)
fireEvent
.
click
(
submitButton
)
const
toastError
=
await
screen
.
findByTestId
(
'
toast-error
'
)
expect
(
toastError
).
toBeInTheDocument
()
})
src/store/auth/authSlice.js
View file @
dc7a62df
...
...
@@ -25,6 +25,7 @@ export const {login, logout} = authSlice.actions
export
const
getEmail
=
(
state
)
=>
state
.
auth
.
email
export
const
getPhoneNumber
=
(
state
)
=>
state
.
auth
.
phone_number
export
const
getToken
=
(
state
)
=>
state
.
auth
.
token
export
const
isLoggedIn
=
(
state
)
=>
{
if
(
state
.
auth
.
token
)
{
return
true
...
...
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