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
fd9e7d20
Commit
fd9e7d20
authored
Apr 25, 2021
by
Shafiya Adzhani
Browse files
add pbi 4 iumk (not yet connected to backend)
parent
804675a8
Changes
16
Hide whitespace changes
Inline
Side-by-side
src/App.js
View file @
fd9e7d20
import
Homepage
from
'
./pages/homepage
'
import
Register
from
'
./components/Registrasi/Register
'
import
Login
from
'
./components/Autentikasi/Login
'
import
FormIUMK
from
'
./pages/formiumk
'
import
{
Router
}
from
'
@reach/router
'
function
App
()
{
...
...
@@ -10,6 +11,7 @@ function App() {
<
Homepage
path
=
"
/
"
/>
<
Register
path
=
"
/register
"
/>
<
Login
path
=
"
/login
"
/>
<
FormIUMK
path
=
"
/form-iumk
"
/>
<
/Router
>
<
/div
>
)
...
...
src/assets/dropdown-icon.svg
0 → 100644
View file @
fd9e7d20
<svg
width=
"26"
height=
"26"
viewBox=
"0 0 26 26"
fill=
"none"
xmlns=
"http://www.w3.org/2000/svg"
>
<path
opacity=
"0.8"
d=
"M17.8752 14.0833C16.5752 14.0833 14.5493 14.4517 13.0002 15.1667C11.451 14.4408 9.42516 14.0833 8.12516 14.0833C5.77433 14.0833 1.0835 15.2533 1.0835 17.6042V20.5833H24.9168V17.6042C24.9168 15.2533 20.226 14.0833 17.8752 14.0833ZM13.5418 18.9583H2.7085V17.6042C2.7085 17.0192 5.48183 15.7083 8.12516 15.7083C10.7685 15.7083 13.5418 17.0192 13.5418 17.6042V18.9583ZM23.2918 18.9583H15.1668V17.6042C15.1668 17.1058 14.9502 16.6725 14.6035 16.2825C15.5568 15.9575 16.7268 15.7083 17.8752 15.7083C20.5185 15.7083 23.2918 17.0192 23.2918 17.6042V18.9583ZM8.12516 13C10.216 13 11.9168 11.2992 11.9168 9.20832C11.9168 7.11749 10.216 5.41666 8.12516 5.41666C6.03433 5.41666 4.3335 7.11749 4.3335 9.20832C4.3335 11.2992 6.03433 13 8.12516 13ZM8.12516 7.04166C9.31683 7.04166 10.2918 8.01666 10.2918 9.20832C10.2918 10.4 9.31683 11.375 8.12516 11.375C6.9335 11.375 5.9585 10.4 5.9585 9.20832C5.9585 8.01666 6.9335 7.04166 8.12516 7.04166ZM17.8752 13C19.966 13 21.6668 11.2992 21.6668 9.20832C21.6668 7.11749 19.966 5.41666 17.8752 5.41666C15.7843 5.41666 14.0835 7.11749 14.0835 9.20832C14.0835 11.2992 15.7843 13 17.8752 13ZM17.8752 7.04166C19.0668 7.04166 20.0418 8.01666 20.0418 9.20832C20.0418 10.4 19.0668 11.375 17.8752 11.375C16.6835 11.375 15.7085 10.4 15.7085 9.20832C15.7085 8.01666 16.6835 7.04166 17.8752 7.04166Z"
fill=
"black"
/>
</svg>
src/components/Dropdown/EmployeeDropdown.js
0 → 100644
View file @
fd9e7d20
import
{
useState
}
from
'
react
'
import
DropdownIcon
from
'
../../assets/dropdown-icon.svg
'
import
DropdownArrow
from
'
../../assets/dropdown.svg
'
import
{
dataEmployee
}
from
'
../../data/employee
'
import
PropTypes
from
'
prop-types
'
const
EmployeeDropdown
=
({
setEmployeeData
,
defaultValue
,
dataTestId
})
=>
{
const
[
selectedValue
,
setSelectedValue
]
=
useState
(
defaultValue
)
const
[
showDropdown
,
setShowDropdown
]
=
useState
(
false
)
const
selectValue
=
(
value
)
=>
{
setEmployeeData
(
value
)
setSelectedValue
(
value
)
setShowDropdown
(
false
)
}
return
(
<
div
className
=
""
>
<
div
className
=
"
flex flex-row items-center justify-between py-1.5 px-2 bg-white md:mr-64 lg:mr-64 xl:mr-64 2xl:mr-64 px-4 mr-24 py-2.5 border-2 border-grey rounded-lg
"
onClick
=
{()
=>
setShowDropdown
(
!
showDropdown
)}
data
-
testid
=
{
dataTestId
}
>
<
div
className
=
"
flex flex-row items-center
"
>
<
img
src
=
{
DropdownIcon
}
className
=
"
mr-3
"
/>
<
p
className
=
"
reguler-text
"
data
-
testid
=
"
selected-value
"
>
{
selectedValue
?
selectedValue
:
'
Pilih salah satu
'
}
<
/p
>
<
/div
>
<
img
src
=
{
DropdownArrow
}
/
>
<
/div
>
<
div
className
=
"
flex flex-col relative
"
>
{
showDropdown
&&
(
<
div
className
=
"
bg-white rounded absolute lg:w-96 xl:w-96 2xl:w-96 lg:right-64 xl:right-64 2xl:right-64
"
data
-
testid
=
"
options-dropdown
"
>
{
dataEmployee
.
map
((
value
,
index
)
=>
(
<
div
className
=
"
py-2.5 px-6 border-grey border-b-2 cursor-pointer
"
onClick
=
{()
=>
selectValue
(
value
)}
key
=
{
index
}
>
<
p
className
=
"
heading-3
"
>
{
value
}
<
/p
>
<
/div
>
))}
<
/div
>
)}
<
/div
>
<
/div
>
)
}
EmployeeDropdown
.
propTypes
=
{
setEmployeeData
:
PropTypes
.
func
,
defaultValue
:
PropTypes
.
string
,
dataTestId
:
PropTypes
.
string
,
}
export
default
EmployeeDropdown
src/components/Dropdown/EmployeeDropdown.test.js
0 → 100644
View file @
fd9e7d20
import
{
fireEvent
,
screen
,
render
}
from
'
@testing-library/react
'
import
EmployeeDropdown
from
'
./EmployeeDropdown
'
test
(
'
renders Employee Dropdown
'
,
()
=>
{
const
setEmployeeData
=
jest
.
fn
()
render
(
<
EmployeeDropdown
setEmployeeData
=
{
setEmployeeData
}
/>
)
expect
(
screen
.
getByTestId
(
'
selected-value
'
)).
toBeInTheDocument
()
})
test
(
'
can open employee dropdown and show options
'
,
()
=>
{
const
setEmployeeData
=
jest
.
fn
()
render
(
<
EmployeeDropdown
setEmployeeData
=
{
setEmployeeData
}
/>
)
const
openDropdown
=
screen
.
getByText
(
/Pilih salah satu/i
)
fireEvent
.
click
(
openDropdown
)
expect
(
screen
.
getByTestId
(
'
options-dropdown
'
)).
toBeInTheDocument
()
})
test
(
'
can open employee dropdown and click options
'
,
()
=>
{
const
setEmployeeData
=
jest
.
fn
()
render
(
<
EmployeeDropdown
setEmployeeData
=
{
setEmployeeData
}
/>
)
const
openDropdown
=
screen
.
getByText
(
/Pilih salah satu/i
)
fireEvent
.
click
(
openDropdown
)
const
individualOption
=
screen
.
getByText
(
/Individual/i
)
fireEvent
.
click
(
individualOption
)
expect
(
screen
.
getByText
(
/Individual/i
)).
toBeInTheDocument
()
})
src/components/FormIUMK/FormIUMK1.js
0 → 100644
View file @
fd9e7d20
import
React
from
'
react
'
import
PropTypes
from
'
prop-types
'
const
FormIUMK1
=
({
register
,
errors
,
handleSubmit
,
onSubmit
,
data
,
setValue
,
})
=>
{
return
(
<
form
className
=
"
px-4
"
data
-
testid
=
"
form-iumk-1
"
onSubmit
=
{
handleSubmit
(
onSubmit
)}
>
<
div
className
=
"
flex flex-col justify-center items-center
"
>
<
h1
className
=
"
flex text-center heading-2 mb-4 pt-9
"
data
-
testid
=
"
form-iumk-1-judul
"
>
Jelaskan
Industri
Anda
<
/h1
>
<
p
className
=
"
reguler-text text-center mb-10
"
data
-
testid
=
"
form-iumk-1-deskripsi
"
>
Mengetahui
Industri
Anda
membantu
partner
kami
memahami
tipe
dokumen
{
'
'
}
<
br
><
/br
>
yang
dibutuhkan
dan
lisensi
apa
yang
perlu
didapatkan
usaha
Anda
.
<
/p
>
<
/div
>
<
div
className
=
"
flex flex-col py-3
"
data
-
testid
=
"
form-iumk-1-nama
"
>
<
label
className
=
"
heading-3 mb-2
"
>
Nama
atau
Calon
Nama
Usaha
<
span
className
=
"
text-popred
"
>*<
/span
>
<
/label
>
<
input
className
=
"
px-2 py-2.5 w-full border-2 border-gray-200 rounded
"
type
=
"
text
"
id
=
"
nama
"
data
-
testid
=
"
form-1-nama-field
"
required
name
=
"
nama
"
placeholder
=
"
e.g PT ABC
"
ref
=
{
register
({
required
:
'
Wajib diisi
'
,
})}
defaultValue
=
{
data
.
nama
}
/
>
{
errors
.
nama
&&
(
<
span
role
=
"
alert
"
className
=
"
text-popred
"
>
{
errors
.
nama
.
message
}
<
/span
>
)}
<
/div
>
<
div
className
=
"
flex flex-col py-3
"
data
-
testid
=
"
form-iumk-1-status
"
>
<
label
className
=
"
heading-3 mb-2
"
>
Status
Entitas
<
span
className
=
"
text-popred
"
>*<
/span
>
<
/label
>
<
div
className
=
"
flex flex-col lg:flex-row xl:flex-row 2xl:flex-row justify-between
"
>
<
div
>
<
input
className
=
"
mr-2
"
name
=
"
status
"
data
-
testid
=
"
form-1-status-pt
"
ref
=
{
register
({
required
:
'
Wajib diisi
'
})}
type
=
"
radio
"
value
=
"
PT
"
defaultChecked
=
{
data
.
status
==
'
PT
'
}
/
>
<
label
className
=
"
heading-3 text-charchoal
"
>
PT
<
/label
>
<
/div
>
<
div
>
<
input
className
=
"
mr-2
"
name
=
"
status
"
data
-
testid
=
"
form-1-status-cv
"
ref
=
{
register
({
required
:
'
Wajib diisi
'
})}
type
=
"
radio
"
value
=
"
CV
"
defaultChecked
=
{
data
.
status
==
'
CV
'
}
/
>
<
label
className
=
"
heading-3 text-charchoal
"
>
CV
<
/label
>
<
/div
>
<
div
>
<
input
className
=
"
mr-2
"
name
=
"
status
"
data
-
testid
=
"
form-1-status-firma
"
ref
=
{
register
({
required
:
'
Wajib diisi
'
})}
type
=
"
radio
"
value
=
"
Firma
"
defaultChecked
=
{
data
.
status
==
'
Firma
'
}
/
>
<
label
className
=
"
heading-3 text-charchoal
"
>
Firma
<
/label
>
<
/div
>
<
div
>
<
input
className
=
"
mr-2
"
name
=
"
status
"
data
-
testid
=
"
form-1-status-yayasan
"
ref
=
{
register
({
required
:
'
Wajib diisi
'
})}
type
=
"
radio
"
value
=
"
Yayasan
"
defaultChecked
=
{
data
.
status
==
'
Yayasan
'
}
/
>
<
label
className
=
"
heading-3 text-charchoal
"
>
Yayasan
<
/label
>
<
/div
>
<
div
>
<
input
className
=
"
mr-2
"
name
=
"
status
"
data
-
testid
=
"
form-1-status-koperasi
"
ref
=
{
register
({
required
:
'
Wajib diisi
'
})}
type
=
"
radio
"
value
=
"
Koperasi
"
defaultChecked
=
{
data
.
status
==
'
Koperasi
'
}
/
>
<
label
className
=
"
heading-3 text-charchoal
"
>
Koperasi
<
/label
>
<
/div
>
<
div
>
<
input
className
=
"
mr-2
"
name
=
"
status
"
data
-
testid
=
"
form-1-status-other
"
ref
=
{
register
({
required
:
'
Wajib diisi
'
})}
type
=
"
radio
"
value
=
"
Other
"
defaultChecked
=
{
data
.
status
==
'
Other
'
}
/
>
<
label
className
=
"
heading-3 text-charchoal
"
>
Other
<
/label
>
<
/div
>
<
/div
>
{
errors
.
status
&&
(
<
span
role
=
"
alert
"
className
=
"
text-popred
"
>
{
errors
.
status
.
message
}
<
/span
>
)}
<
/div
>
<
div
className
=
"
flex flex-col py-3
"
data
-
testid
=
"
form-iumk-1-alamat
"
>
<
label
className
=
"
heading-3 mb-2
"
>
Alamat
<
span
className
=
"
text-popred
"
>*<
/span
>
<
/label
>
<
input
className
=
"
px-2 py-2.5 w-full border-2 border-gray-200 rounded
"
type
=
"
text
"
id
=
"
alamat
"
data
-
testid
=
"
form-1-alamat-field
"
required
name
=
"
alamat
"
placeholder
=
"
JL. TB Simatupang No. 5 Ragunan, Pasar Minggu Jakarta 12550
"
ref
=
{
register
({
required
:
'
Wajib diisi
'
,
})}
defaultValue
=
{
data
.
alamat
}
/
>
{
errors
.
alamat
&&
(
<
span
role
=
"
alert
"
className
=
"
text-popred
"
>
{
errors
.
alamat
.
message
}
<
/span
>
)}
<
/div
>
<
div
className
=
"
flex flex-col py-3
"
data
-
testid
=
"
form-iumk-1-barang-jasa
"
>
<
label
className
=
"
heading-3 mb-2
"
>
Barang
yang
dijual
/
Jasa
yang
ditawarkan
<
span
className
=
"
text-popred
"
>*<
/span
>
<
/label
>
<
input
className
=
"
px-2 py-2.5 w-full border-2 border-gray-200 rounded
"
type
=
"
text
"
id
=
"
barang-jasa
"
data
-
testid
=
"
form-1-barang-jasa-field
"
required
name
=
"
barangJasa
"
placeholder
=
"
Tipe barang/jasa
"
ref
=
{
register
({
required
:
'
Wajib diisi
'
,
})}
defaultValue
=
{
data
.
barangJasa
}
/
>
{
errors
.
barangJasa
&&
(
<
span
role
=
"
alert
"
className
=
"
text-popred
"
>
{
errors
.
barangJasa
.
message
}
<
/span
>
)}
<
/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
=
"
lanjut-button
"
onClick
=
{()
=>
setValue
(
'
page
'
,
'
2
'
)}
>
Lanjut
<
/button
>
<
/div
>
<
/form
>
)
}
FormIUMK1
.
propTypes
=
{
register
:
PropTypes
.
func
,
errors
:
PropTypes
.
object
,
handleSubmit
:
PropTypes
.
func
,
onSubmit
:
PropTypes
.
func
,
data
:
PropTypes
.
object
,
setValue
:
PropTypes
.
func
,
}
export
default
FormIUMK1
src/components/FormIUMK/FormIUMK1.test.js
0 → 100644
View file @
fd9e7d20
import
{
screen
,
waitFor
,
fireEvent
}
from
'
@testing-library/react
'
import
FormIUMK
from
'
../../pages/formiumk
'
import
{
testRender
,
makeTestStore
,
fixtureSet
}
from
'
../../testUtils
'
import
userEvent
from
'
@testing-library/user-event
'
test
(
'
renders FormIUMK1 Element
'
,
()
=>
{
const
store
=
makeTestStore
(
fixtureSet
)
testRender
(
<
FormIUMK
/>
,
{
store
})
expect
(
screen
.
getByTestId
(
'
form-iumk-1
'
)).
toBeInTheDocument
()
expect
(
screen
.
getByTestId
(
'
form-iumk-1-judul
'
)).
toBeInTheDocument
()
expect
(
screen
.
getByTestId
(
'
form-iumk-1-deskripsi
'
)).
toBeInTheDocument
()
expect
(
screen
.
getByTestId
(
'
form-iumk-1-nama
'
)).
toBeInTheDocument
()
expect
(
screen
.
getByTestId
(
'
form-iumk-1-status
'
)).
toBeInTheDocument
()
expect
(
screen
.
getByTestId
(
'
form-iumk-1-alamat
'
)).
toBeInTheDocument
()
expect
(
screen
.
getByTestId
(
'
form-iumk-1-barang-jasa
'
)).
toBeInTheDocument
()
})
test
(
'
error message for empty name displayed
'
,
async
()
=>
{
const
store
=
makeTestStore
(
fixtureSet
)
testRender
(
<
FormIUMK
/>
,
{
store
})
userEvent
.
type
(
screen
.
getByTestId
(
'
form-1-nama-field
'
),
'
pt ABC
'
)
expect
(
screen
.
getByTestId
(
'
form-1-nama-field
'
)).
toHaveValue
(
'
pt ABC
'
)
userEvent
.
clear
(
screen
.
getByTestId
(
'
form-1-nama-field
'
))
expect
(
screen
.
getByTestId
(
'
form-1-nama-field
'
)).
toHaveValue
(
''
)
await
waitFor
(()
=>
{
expect
(
screen
.
getByText
(
/Wajib diisi/i
)).
toBeInTheDocument
()
})
})
test
(
'
error message for empty status entitas
'
,
async
()
=>
{
const
store
=
makeTestStore
(
fixtureSet
)
testRender
(
<
FormIUMK
/>
,
{
store
})
userEvent
.
type
(
screen
.
getByTestId
(
'
form-1-nama-field
'
),
'
pt ABC
'
)
expect
(
screen
.
getByTestId
(
'
form-1-nama-field
'
)).
toHaveValue
(
'
pt ABC
'
)
userEvent
.
type
(
screen
.
getByTestId
(
'
form-1-alamat-field
'
),
'
my alamat
'
)
expect
(
screen
.
getByTestId
(
'
form-1-alamat-field
'
)).
toHaveValue
(
'
my alamat
'
)
userEvent
.
type
(
screen
.
getByTestId
(
'
form-1-barang-jasa-field
'
),
'
tukang bubur
'
)
expect
(
screen
.
getByTestId
(
'
form-1-barang-jasa-field
'
)).
toHaveValue
(
'
tukang bubur
'
,
)
let
lanjutButton
=
screen
.
getByTestId
(
'
lanjut-button
'
)
fireEvent
.
click
(
lanjutButton
)
await
waitFor
(()
=>
{
expect
(
screen
.
getByText
(
/Wajib diisi/i
)).
toBeInTheDocument
()
})
})
test
(
'
error message for empty alamat displayed
'
,
async
()
=>
{
const
store
=
makeTestStore
(
fixtureSet
)
testRender
(
<
FormIUMK
/>
,
{
store
})
userEvent
.
type
(
screen
.
getByTestId
(
'
form-1-alamat-field
'
),
'
my alamat
'
)
expect
(
screen
.
getByTestId
(
'
form-1-alamat-field
'
)).
toHaveValue
(
'
my alamat
'
)
userEvent
.
clear
(
screen
.
getByTestId
(
'
form-1-alamat-field
'
))
expect
(
screen
.
getByTestId
(
'
form-1-alamat-field
'
)).
toHaveValue
(
''
)
await
waitFor
(()
=>
{
expect
(
screen
.
getByText
(
/Wajib diisi/i
)).
toBeInTheDocument
()
})
})
test
(
'
error message for empty barang-jasa displayed
'
,
async
()
=>
{
const
store
=
makeTestStore
(
fixtureSet
)
testRender
(
<
FormIUMK
/>
,
{
store
})
userEvent
.
type
(
screen
.
getByTestId
(
'
form-1-barang-jasa-field
'
),
'
tukang bubur
'
)
expect
(
screen
.
getByTestId
(
'
form-1-barang-jasa-field
'
)).
toHaveValue
(
'
tukang bubur
'
,
)
userEvent
.
clear
(
screen
.
getByTestId
(
'
form-1-barang-jasa-field
'
))
expect
(
screen
.
getByTestId
(
'
form-1-barang-jasa-field
'
)).
toHaveValue
(
''
)
await
waitFor
(()
=>
{
expect
(
screen
.
getByText
(
/Wajib diisi/i
)).
toBeInTheDocument
()
})
})
src/components/FormIUMK/FormIUMK2.js
0 → 100644
View file @
fd9e7d20
import
EmployeeDropdown
from
'
../Dropdown/EmployeeDropdown
'
import
PropTypes
from
'
prop-types
'
const
FormIUMK2
=
({
register
,
errors
,
handleSubmit
,
onSubmit
,
setEmployeeData
,
setValue
,
data
,
})
=>
{
return
(
<
form
className
=
"
bg-white flex flex-col px-4
"
data
-
testid
=
"
form-iumk-2
"
onSubmit
=
{
handleSubmit
(
onSubmit
)}
>
<
div
>
<
h1
className
=
"
flex flex-col heading-2 text-black justify-center items-center pb-4 pt-9 text-center
"
data
-
testid
=
"
form-iumk-2-judul
"
>
Ada
Informasi
Tambahan
?
<
/h1
>
<
p
className
=
"
reguler-text text-center mb-10
"
data
-
testid
=
"
form-iumk-2-deskripsi
"
>
Beri
tahu
kami
informasi
apapun
yang
dapat
membantu
partner
kami
{
'
'
}
<
br
><
/br
>
memberikan
penawaran
yang
sesuai
dengan
keadaan
Anda
<
/p
>
<
/div
>
<
div
>
<
div
className
=
"
flex flex-col pb-6
"
data
-
testid
=
"
form-iumk-2-jumlah-karyawan
"
>
<
label
className
=
"
mb-2 heading-3 text-black
"
>
Jumlah
Karyawan
<
span
className
=
"
medium-text text-black ml-1
"
>
(
opsional
)
<
/span
>
<
/label
>
<
EmployeeDropdown
setEmployeeData
=
{
setEmployeeData
}
defaultValue
=
{
data
.
karyawan
}
dataTestId
=
"
form-iumk-2-dropdown
"
/>
<
/div
>
<
div
className
=
"
flex flex-col pb-6
"
data
-
testid
=
"
form-iumk-2-kode-kbli
"
>
<
label
className
=
"
mb-2 heading-3 text-black
"
htmlFor
=
"
kode-klbi
"
>
Kode
KBLI
<
span
className
=
"
medium-text text-black ml-1
"
>
(
opsional
)
<
/span
>
<
/label
>
<
input
className
=
"
md:mr-64 lg:mr-64 xl:mr-64 2xl:mr-64 px-4 mr-24 py-2.5 border-2 border-grey rounded
"
placeholder
=
"
Tulis Kode KBLI disini
"
id
=
"
kode-klbi
"
name
=
"
kbli
"
ref
=
{
register
({
required
:
false
,
minLength
:
{
value
:
5
,
message
:
'
Kode KBLI harus terdiri dari 5 angka
'
,
},
maxLength
:
{
value
:
5
,
message
:
'
Kode KBLI harus terdiri dari 5 angka
'
,
},
pattern
:
{
value
:
/^
\d
+$/
,
message
:
'
Kode KBLI hanya boleh mengandung angka
'
,
},
})}
defaultValue
=
{
data
.
kbli
}
/
>
<
div
>
{
errors
.
kbli
&&
(
<
span
role
=
"
alert
"
className
=
"
text-popred
"
>
{
errors
.
kbli
.
message
}
<
/span
>
)}
<
/div
>
<
br
><
/br
>
<
/div
>
<
div
className
=
"
flex flex-col pb-8
"
data
-
testid
=
"
form-iumk-2-catatan
"
>
<
label
className
=
"
mb-2 heading-3 text-black
"
>
Catatan
{
'
'
}
<
span
className
=
"
medium-text text-black ml-1
"
>
(
opsional
)
<
/span
>
<
/label
>
<
textarea
className
=
"
w-full px-4 pb-32 pt-2.5 mr-6 resize-none border-2 border-grey rounded items-start
"
placeholder
=
"
e.g.untuk pendirian PT ABC saya sudah mempunyai dokumen A, B,C ...
"
name
=
"
catatan
"
ref
=
{
register
({
required
:
false
,
})}
defaultValue
=
{
data
.
catatan
}
/
>
<
/div
>
<
/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
=
"
lanjut-button
"
onClick
=
{()
=>
setValue
(
'
page
'
,
'
3
'
)}
>
Lanjut
<
/button
>
<
/div
>
<
/form
>
)
}
FormIUMK2
.
propTypes
=
{
register
:
PropTypes
.
func
,
errors
:
PropTypes
.
object
,
handleSubmit
:
PropTypes
.
func
,
onSubmit
:
PropTypes
.
func
,
setEmployeeData
:
PropTypes
.
func
,
setValue
:
PropTypes
.
func
,
data
:
PropTypes
.
object
,
}
export
default
FormIUMK2
src/components/FormIUMK/FormIUMK2.test.js
0 → 100644
View file @
fd9e7d20
import
{
screen
,
waitFor
,
fireEvent
,
waitForElementToBeRemoved
,
}
from
'
@testing-library/react
'
import
FormIUMK
from
'
../../pages/formiumk
'
import
{
testRender
,
makeTestStore
,
fixtureSet
}
from
'
../../testUtils
'
import
userEvent
from
'
@testing-library/user-event
'
test
(
'
renders FormIUMK2 element
'
,
async
()
=>
{
const
store
=
makeTestStore
(
fixtureSet
)
testRender
(
<
FormIUMK
/>
,
{
store
})
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
'
,
)
let
lanjutButton
=
screen
.
getByTestId
(
'
lanjut-button
'
)
fireEvent
.
click
(
lanjutButton
)
await
waitForElementToBeRemoved
(()
=>
screen
.
getByTestId
(
'
form-1-nama-field
'
))
expect
(
screen
.
getByTestId
(
'
form-iumk-2
'
)).
toBeInTheDocument
()
expect
(
screen
.
getByTestId
(
'
form-iumk-2-judul
'
)).
toBeInTheDocument
()
expect
(
screen
.
getByTestId
(
'
form-iumk-2-deskripsi
'
)).
toBeInTheDocument
()
expect
(
screen
.
getByTestId
(
'
form-iumk-2-jumlah-karyawan
'
)).
toBeInTheDocument
()
expect
(
screen
.
getByTestId
(
'
form-iumk-2-kode-kbli
'
)).
toBeInTheDocument
()
expect
(
screen
.
getByTestId
(
'
form-iumk-2-catatan
'
)).
toBeInTheDocument
()
})
test
(
'
kode KBLI error if length is not five
'
,
async
()
=>
{
const
store
=
makeTestStore
()