Fakultas Ilmu Komputer UI

Commit 4470502c authored by Edrick Lainardi's avatar Edrick Lainardi
Browse files

Merge branch 'Task-2-PBI-15-form_bank' into 'PBI-15-kelola_bank'

Task 2 pbi 15 form bank

See merge request !70
parents 8c5ca875 bb367b5b
Pipeline #47783 passed with stages
in 7 minutes and 9 seconds
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 EditBank from "../../page/bank/EditBank";
beforeEach(() => {
fetch.resetMocks();
});
afterEach(cleanup);
test("Test edit bank renders", async () => {
fetch
.once(
JSON.stringify({
id: "e1827709-82a3-4a6f-b55c-bb1a229b7036",
bank_name: "bca",
bank_account_number: "1234456",
bank_account_name: "test bca",
})
)
.once(JSON.stringify({}));
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<EditBank />
</AuthContext.Provider>
);
const waitBank = getByTestId("waiting-edit-bank");
expect(waitBank.textContent).toContain("Fetching data..");
await waitFor(() => getByTestId("edit-bank"));
const name_bank = getByTestId("name-bank-input");
expect(name_bank.value).toEqual("bca");
expect(fetch.mock.calls.length).toEqual(1);
await act(async () => {
await fireEvent.input(name_bank, { target: { value: "test" } });
});
await act(async () => {
await fireEvent.submit(getByTestId("submit-bank"));
});
expect(fetch.mock.calls.length).toEqual(2);
});
test("Test edit bank error", async () => {
fetch
.once(
JSON.stringify({
id: "e1827709-82a3-4a6f-b55c-bb1a229b7036",
bank_name: "bca",
bank_account_number: "1234456",
bank_account_name: "test bca",
})
)
.once(JSON.stringify({}), { status: 400 });
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<EditBank />
</AuthContext.Provider>
);
const waitBank = getByTestId("waiting-edit-bank");
expect(waitBank.textContent).toContain("Fetching data..");
await waitFor(() => getByTestId("edit-bank"));
const name_bank = getByTestId("name-bank-input");
expect(name_bank.value).toEqual("bca");
expect(fetch.mock.calls.length).toEqual(1);
await act(async () => {
await fireEvent.input(name_bank, { target: { value: "test" } });
});
await act(async () => {
await fireEvent.submit(getByTestId("submit-bank"));
});
const bank = getByTestId("edit-bank");
expect(bank.textContent).toContain("Error !, Data tidak dapat disimpan");
expect(fetch.mock.calls.length).toEqual(2);
});
import { act, cleanup, fireEvent, render } from "@testing-library/react";
import AuthContext from "../../utils/contex";
import React from "react";
import TambahBank from "../../page/bank/TambahBank";
beforeEach(() => {
fetch.resetMocks();
});
afterEach(cleanup);
test("Test tambah bank renders", async () => {
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<TambahBank />
</AuthContext.Provider>
);
const name_bank = getByTestId("name-bank-input");
await act(async () => {
await fireEvent.input(name_bank, { target: { value: "test" } });
});
await act(async () => {
await fireEvent.submit(getByTestId("submit-bank"));
});
expect(fetch.mock.calls.length).toEqual(0);
});
import React, { useState } from "react";
import useFetchSingleData from "../../utils/useFetchSingleData";
import { css } from "@emotion/core";
import { ButtonDeleteStyled, ErrorDiv } from "../../component/html/html";
import FormBank from "./FormBank";
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 useDelete from "../../utils/useDelete";
import {
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Button,
} from "@material-ui/core";
const EditBank = ({ idBank }) => {
const url = `${process.env.REACT_APP_BASE_URL}/bank-account-transfer-destinations/${idBank}/`;
const [initialData, errorState] = useFetchSingleData(url);
const [send, error] = useSendData({ url, method: "PATCH", redirect: -1 });
const [deleteBank, errorDelete] = useDelete(url);
const [openModal, setOpenModal] = useState(false);
const onSubmit = (data) => {
const formData = new FormData();
formData.append("bank_name", data["bank_name"]);
formData.append("bank_account_number", data["bank_account_number"]);
formData.append("bank_account_name", data["bank_account_name"]);
send(formData);
};
const handleClose = () => setOpenModal(false);
if (errorState || Object.keys(initialData).length === 0)
return (
<div
data-testid="waiting-edit-bank"
css={css`
display: flex;
margin: 2rem 3rem 3rem 3rem;
flex-direction: column;
font-size: 25px;
`}
>
Fetching data..
</div>
);
return (
<div
data-testid="edit-bank"
css={css`
display: flex;
margin: 2rem 3rem 3rem 3rem;
flex-direction: column;
`}
>
<Dialog open={openModal} onClose={handleClose}>
<DialogTitle>{`Hapus bank ${initialData.bank_name}`}</DialogTitle>
<DialogContent>
<DialogContentText>
Apakah yakin untuk menghapus kategori {initialData.bank_name}?
</DialogContentText>
<DialogActions>
<Button onClick={handleClose} color="primary">
TIDAK
</Button>
<Button
data-testid="button-delete-bank"
color="secondary"
onClick={() => {
deleteBank();
handleClose();
}}
>
HAPUS
</Button>
</DialogActions>
</DialogContent>
</Dialog>
{error && <ErrorDiv>Error !, Data tidak dapat disimpan</ErrorDiv>}
{errorDelete && <ErrorDiv>Tidak dapat menghapus bank.</ErrorDiv>}
<div
css={css`
display: flex;
flex-direction: row;
`}
>
<button
css={css`
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
`}
onClick={() => navigate(-1)}
>
<ArrowBackIcon fontSize="large" />
</button>
<div
css={css`
font-size: 36px;
`}
>
Edit bank {initialData.bank_name}
</div>
</div>
<div
css={css`
margin-top: 2.5rem;
display: flex;
`}
>
<ErrorOutlineIcon style={{ fontSize: 28, color: "FFC80A" }} />
<div
css={css`
font-weight: 600;
font-size: 24px;
line-height: 29px;
`}
>
Informasi Bank
</div>
</div>
<FormBank {...{ onSubmit, initialData }} />
<div
css={css`
margin-right: 1.5%;
`}
>
<ButtonDeleteStyled
data-testid="button-delete-bank-modal"
onClick={() => setOpenModal(true)}
>
Hapus
</ButtonDeleteStyled>
</div>
</div>
);
};
export default EditBank;
import React from "react";
import { useForm } from "react-hook-form";
import {
ErrorDiv,
RowInput,
InputForm,
LabelInput,
InputSubmitForm,
} from "../../component/html/html";
import { css } from "@emotion/core";
const FormBank = ({ onSubmit, initialData = null }) => {
const { register, handleSubmit, errors } = useForm({
defaultValues:
initialData !== null
? {
bank_name: initialData["bank_name"],
bank_account_number: initialData["bank_account_number"],
bank_account_name: initialData["bank_account_name"],
}
: {},
});
return (
<form
data-testid="form-bank"
onSubmit={handleSubmit(onSubmit)}
css={css`
display: flex;
flex-direction: column;
`}
>
<RowInput>
<LabelInput htmlFor="bank_name">Nama bank</LabelInput>
<InputForm
data-testid="name-bank-input"
name="bank_name"
ref={register({ required: true })}
/>
{errors.name && <ErrorDiv>Nama bank tidak boleh kosong</ErrorDiv>}
</RowInput>
<RowInput>
<LabelInput htmlFor="account_number">Nomor rekening</LabelInput>
<InputForm
data-testid="account-number-input"
name="bank_account_number"
ref={register({ required: true })}
/>
{errors.bank_account_number && (
<ErrorDiv>Nomor rekening tidak boleh kosong</ErrorDiv>
)}
</RowInput>
<RowInput>
<LabelInput htmlFor="account_name">Nama pemilik rekening</LabelInput>
<InputForm
data-testid="account-name-input"
name="bank_account_name"
ref={register({ required: true })}
/>
{errors.bank_account_name && (
<ErrorDiv>Nama pemilik rekening tidak boleh kosong</ErrorDiv>
)}
</RowInput>
<RowInput>
<InputSubmitForm type="submit" data-testid="submit-bank" />
</RowInput>
</form>
);
};
export default FormBank;
import React from "react";
import TableComponent from "../../component/TableComponent";
import { css } from "@emotion/core";
import LinkYellow from "../../component/LinkYellow";
const ListBank = () => {
const data = {
......@@ -13,7 +14,7 @@ const ListBank = () => {
["bank_account_number", "Nomor Rekening"],
["bank_account_name", "Nama Pemilik Rekening"],
],
link: "/bank-account-transfer-destinations/",
link: "/bank/",
};
return (
<div
......@@ -30,6 +31,18 @@ const ListBank = () => {
>
KELOLA BANK
</div>
<div
css={css`
width: 35%;
display: flex;
flex-direction: row;
margin-bottom: 2rem;
margin-top: 1rem;
`}
>
<LinkYellow to="/bank/tambah">TAMBAH</LinkYellow>
<LinkYellow to="/bank">LIHAT</LinkYellow>
</div>
<TableComponent {...data} />
</div>
);
......
import React from "react";
import { css } from "@emotion/core";
import { ErrorDiv } from "../../component/html/html";
import FormBank from "./FormBank";
import LinkYellow from "../../component/LinkYellow";
import useSendData from "../../utils/useSendData";
const TambahBank = () => {
const url = `${process.env.REACT_APP_BASE_URL}/bank-account-transfer-destinations/`;
const [send, error] = useSendData({
url,
method: "POST",
redirect: "/bank",
});
const onSubmit = (data) => {
const formData = new FormData();
formData.append("bank_name", data["bank_name"]);
formData.append("bank_account_number", data["bank_account_number"]);
formData.append("bank_account_name", data["bank_account_name"]);
send(formData);
};
return (
<div
data-testid="tambah-bank"
css={css`
display: flex;
margin: 2rem 3rem 3rem 3rem;
flex-direction: column;
`}
>
<div>
{error && <ErrorDiv>Error !, Data tidak dapat disimpan</ErrorDiv>}
</div>
<div
css={css`
font-size: 35px;
`}
>
TAMBAH BANK
</div>
<div
css={css`
width: 35%;
display: flex;
flex-direction: row;
margin-bottom: 2rem;
margin-top: 1rem;
`}
>
<LinkYellow to="/bank/tambah">TAMBAH</LinkYellow>
<LinkYellow to="/bank">LIHAT</LinkYellow>
</div>
<FormBank {...{ onSubmit }} />
</div>
);
};
export default TambahBank;
......@@ -29,6 +29,8 @@ import DetailTransaksi from "./page/transaksi/DetailTransaksi";
import ListDonasi from "./page/donasi/ListDonasi";
import DetailDonasi from "./page/donasi/DetailDonasi";
import ListBank from "./page/bank/ListBank";
import TambahBank from "./page/bank/TambahBank";
import EditBank from "./page/bank/EditBank";
import Pengaturan from "./page/pengaturan/Pengaturan";
const Placeholder = ({ children }) => children;
......@@ -84,6 +86,8 @@ const Routes = () => {
<Placeholder path="bank">
<ProtectedRoute path="/" component={ListBank} />
<ProtectedRoute path="/tambah" component={TambahBank} />
<ProtectedRoute path=":idBank" component={EditBank} />
</Placeholder>
<Placeholder path="pengaturan">
......
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