Fakultas Ilmu Komputer UI

Skip to content
GitLab
Commit dc7a62df authored by Lia Yuliana's avatar 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
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
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Excellence In Teamwork