Fakultas Ilmu Komputer UI

Commit c41034dc authored by Edrick Lainardi's avatar Edrick Lainardi
Browse files

Merge branch 'PBI-11-kelola_donasi' into 'staging'

Pbi 11 kelola donasi

See merge request !49
parents ad2c38e8 f652299a
Pipeline #44317 passed with stages
in 9 minutes and 40 seconds
import { act, cleanup, fireEvent, render } from "@testing-library/react";
import AuthContext from "../../utils/contex";
import React from "react";
import DetailDonasi from "../../page/donasi/DetailDonasi";
import { waitFor } from "@testing-library/dom";
beforeEach(() => {
fetch.resetMocks();
});
afterEach(cleanup);
test("Test detail loaded donasi", async () => {
fetch.mockResponseOnce(
JSON.stringify({
id: "8e9a8f94-cb5c-4b2d-b4f1-81ccfb9f1b0a",
donation_number: "7NGVBN",
user: "45897cc5-968c-44cf-931d-e646b095fcaf",
user_username: "admin-staging",
program: "6d7462da-6a85-4e2b-9930-69567090a5d5",
program_code: "3MXZ9T",
user_full_name: "Hello",
user_phone_number: "012345",
program_name: "dummy 2",
amount: "10000.00",
donation_status: "001",
readable_donation_status: "Menunggu konfirmasi admin",
proof_of_bank_transfer: "a",
user_bank_account_name: "Jeffrey",
user_bank_account_number: "12345678",
created_at: "2020-04-28T21:34:15.565614+07:00",
updated_at: "2020-04-28T21:34:15.565651+07:00",
})
);
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "tester" } }}>
<DetailDonasi idDonasi={"8e9a8f94-cb5c-4b2d-b4f1-81ccfb9f1b0a"} />
</AuthContext.Provider>
);
const wait = getByTestId("waiting-detail-donasi");
expect(wait.textContent).toContain("Fetching data..");
await waitFor(() => getByTestId("page-detail-donasi"));
const data = getByTestId("page-detail-donasi");
expect(data.textContent).toContain("DONASI");
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);
});
const dropdown = getByTestId("dropdown-status");
expect(dropdown.children.length).toEqual(4);
});
import { act, cleanup, fireEvent, render } from "@testing-library/react";
import AuthContext from "../../utils/contex";
import React from "react";
import ListDonasi from "../../page/donasi/ListDonasi";
import { waitFor } from "@testing-library/dom";
beforeEach(() => {
fetch.resetMocks();
});
afterEach(cleanup);
test("Test List donasi", async () => {
fetch.mockResponseOnce(
JSON.stringify({
count: 1,
next: null,
previous: null,
results: [
{
id: "8e9a8f94-cb5c-4b2d-b4f1-81ccfb9f1b0a",
donation_number: "7NGVBN",
user: "45897cc5-968c-44cf-931d-e646b095fcaf",
program: "6d7462da-6a85-4e2b-9930-69567090a5d5",
program_code: "3MXZ9T",
user_username: "admin-staging",
user_full_name: "",
user_phone_number: "",
program_name: "dummy 2",
amount: "10000.00",
donation_status: "001",
readable_donation_status: "Menunggu konfirmasi admin",
proof_of_bank_transfer: null,
user_bank_account_name: "Jeffrey",
user_bank_account_number: "12345678",
created_at: "2020-04-28T21:34:15.565614+07:00",
updated_at: "2020-04-28T21:34:15.565651+07:00",
},
],
})
);
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "tester" } }}>
<ListDonasi />
</AuthContext.Provider>
);
await waitFor(() => getByTestId("tableList"));
const data = getByTestId("tableList");
expect(data.textContent).toContain("admin-staging");
expect(data.textContent).toContain("Menunggu konfirmasi admin");
expect(fetch.mock.calls.length).toEqual(1);
});
test(" Test List transaksi filter", async () => {
fetch.once(
JSON.stringify({
count: 1,
next: null,
previous: null,
results: [
{
id: "8e9a8f94-cb5c-4b2d-b4f1-81ccfb9f1b0a",
donation_number: "7NGVBN",
user: "45897cc5-968c-44cf-931d-e646b095fcaf",
program: "6d7462da-6a85-4e2b-9930-69567090a5d5",
program_code: "3MXZ9T",
user_username: "admin-staging",
user_full_name: "",
user_phone_number: "",
program_name: "dummy 2",
amount: "10000.00",
donation_status: "001",
readable_donation_status: "Menunggu konfirmasi admin",
proof_of_bank_transfer: null,
user_bank_account_name: "Jeffrey",
user_bank_account_number: "12345678",
created_at: "2020-04-28T21:34:15.565614+07:00",
updated_at: "2020-04-28T21:34:15.565651+07:00",
},
],
})
);
const { getByTestId, getByLabelText } = render(
<AuthContext.Provider value={{ profile: { token: "tester" } }}>
<ListDonasi />
</AuthContext.Provider>
);
await waitFor(() => getByTestId("tableList"));
const data = getByTestId("tableList");
expect(data.textContent).toContain("admin-staging");
expect(data.textContent).toContain("Menunggu konfirmasi admin");
expect(fetch.mock.calls.length).toEqual(1);
await act(async () => {
await fireEvent.click(getByTestId("filter-button"));
});
await act(async () => {
await fireEvent.input(
getByLabelText("Status Donasi:", { target: { value: "001" } })
);
await fireEvent.click(getByTestId("submit-filter"));
});
expect(data.textContent).toContain("admin-staging");
expect(fetch.mock.calls.length).toEqual(2);
});
import { act, cleanup, render, fireEvent } from "@testing-library/react";
import AuthContext from "../../utils/contex";
import React from "react";
import DetailProgram from "../../page/program/DetailProgram";
import { waitFor } from "@testing-library/dom";
beforeEach(() => {
fetch.resetMocks();
});
afterEach(cleanup);
test("Test detail program renders", async () => {
fetch.mockResponseOnce(
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",
})
);
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");
expect(fetch.mock.calls.length).toEqual(1);
});
test("Test mock detail program return error", async () => {
fetch.mockReject(new Error("fake error message"));
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<DetailProgram />
</AuthContext.Provider>
);
await waitFor(() => getByTestId("page"));
const page = getByTestId("page");
expect(page.textContent).toContain("Error !, Please relogin..");
});
test("Test detail program delete", async () => {
fetch.mockResponseOnce(
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",
})
);
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<DetailProgram />
</AuthContext.Provider>
);
await waitFor(() => getByTestId("page"));
const produk = getByTestId("page");
expect(produk.textContent).toContain("dummy 2");
expect(fetch.mock.calls.length).toEqual(1);
const btnDeleteModal = getByTestId("button-delete-program-modal");
await act(async () => {
await fireEvent.click(btnDeleteModal);
});
const btnDelete = getByTestId("button-delete-program");
await act(async () => {
await fireEvent.click(btnDelete);
});
expect(fetch.mock.calls.length).toEqual(2);
});
test("Test detail produk delete error", async () => {
fetch
.mockResponseOnce(
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",
})
)
.mockReject(new Error("fake error message"));
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<DetailProgram />
</AuthContext.Provider>
);
await waitFor(() => getByTestId("page"));
const produk = getByTestId("page");
expect(produk.textContent).toContain("Eddrick");
expect(fetch.mock.calls.length).toEqual(1);
const btnDeleteModal = getByTestId("button-delete-program-modal");
await act(async () => {
await fireEvent.click(btnDeleteModal);
});
const btnDelete = getByTestId("button-delete-program");
await act(async () => {
await fireEvent.click(btnDelete);
});
expect(fetch.mock.calls.length).toEqual(2);
expect(produk.textContent).toContain(
"Tidak dapat menghapus program, mohon periksa apakah ada program ini."
);
});
import { act, cleanup, fireEvent, render } from "@testing-library/react";
import AuthContext from "../../utils/contex";
import React from "react";
import TambahProgram from "../../page/program/TambahProgram";
beforeEach(() => {
fetch.resetMocks();
});
afterEach(cleanup);
test("Test tambah program renders", async () => {
fetch.once(
JSON.stringify({
count: 5,
next: null,
previous: null,
results: [
{
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",
},
{
id: "282007ff-d0be-4d68-823e-03bde086ee79",
code: "89Z6GX",
name: "Sample",
description: "Sample",
start_date_time: null,
end_date_time: null,
location: "Sample",
speaker: "Sample",
poster_image:
"https://industripilar-api-staging.s3.amazonaws.com/media/uploads/programs/output_0.jpg",
},
],
})
);
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<TambahProgram />
</AuthContext.Provider>
);
const name_program = getByTestId("name-program-input");
await act(async () => {
await fireEvent.input(name_program, { target: { value: "test" } });
});
const desc_program = getByTestId("description-program-input");
await act(async () => {
await fireEvent.input(desc_program, { target: { value: "test" } });
});
const start_date_time = getByTestId("start-date-time-program-input");
await act(async () => {
await fireEvent.input(start_date_time, {
target: { value: "2020-05-12T19:30" },
});
});
const end_date_time = getByTestId("end-date-time-program-input");
await act(async () => {
await fireEvent.input(end_date_time, {
target: { value: "2020-05-15T19:30" },
});
});
await act(async () => {
await fireEvent.submit(getByTestId("submit-program"));
});
expect(fetch.mock.calls.length).toEqual(1);
});
......@@ -28,3 +28,10 @@ export const transactionToColoredStatus = (transaction) => (
label={transaction.readable_transaction_status}
/>
);
export const donationToColoredStatus = (donation) => (
<Status
status={donation.donation_status}
label={donation.readable_donation_status}
/>
);
import React, { useState } from "react";
import useFetchSingleData from "../../utils/useFetchSingleData";
import { css } from "@emotion/core";
import { ArrowBack, Phone, Photo } from "@material-ui/icons";
import { Link, navigate } from "@reach/router";
import PersonIcon from "@material-ui/icons/Person";
import Status from "../../component/Status";
import { stringToDate } from "../../component/TableUtils";
import { ErrorDiv } from "../../component/html/html";
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 FormDonasi from "./FormDonasi";
const DetailDonasi = ({ idDonasi }) => {
const url = `${process.env.REACT_APP_BASE_URL}/program-donations/${idDonasi}`;
const [donation, error] = useFetchSingleData(url);
const [dialogOpen, setDialogOpen] = useState(false);
const handleClickOpen = () => {
setDialogOpen(true);
};
const handleClose = () => {
setDialogOpen(false);
};
if (Object.keys(donation).length === 0)
return (
<div
data-testid="waiting-detail-donasi"
css={css`
display: flex;
margin: 2rem 3rem 3rem 3rem;
flex-direction: column;
font-size: 25px;
`}
>
{error && <ErrorDiv>Something error</ErrorDiv>}
Fetching data..
</div>
);
return (
<div
data-testid="page-detail-donasi"
css={css`
display: flex;
margin: 2rem 3rem 3rem 3rem;
flex-direction: column;
justify-content: space-around;
height: 125vh;
`}
>
{error && <ErrorDiv>Something error</ErrorDiv>}
<button
css={css`
align-self: start;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
`}
onClick={() => navigate(-1)}
>
<ArrowBack fontSize="large" />
</button>
<div
css={css`
font-size: 1rem;
`}
>
ADMIN - DETAIL DONASI
</div>
<div
css={css`
font-size: 1.5rem;
display: flex;
align-content: space-between;
`}
>
<div
css={css`
display: flex;
`}
>
<div
css={css`
margin-right: 1rem;
`}
>
Donation code:
</div>
<div>{donation.donation_number}</div>
</div>
<FormDonasi
{...{
idDonasi,
defaultStatus: donation.donation_status,
}}
/>
</div>
<div
css={css`
font-size: 1.5rem;
display: flex;
`}
>
<div
css={css`
margin-right: 1rem;
`}
>
Status:{" "}
</div>
<Status
label={donation.readable_donation_status}
status={donation.donation_status}
/>
</div>
<div
css={css`
font-size: 1.2rem;
display: flex;
`}
>
<div
css={css`
margin-right: 0.5rem;
`}
>
Date created:{" "}
</div>
<div>{stringToDate(donation.created_at)}</div>
</div>
<div
css={css`
font-size: 1.2rem;
display: flex;
`}
>
<div
css={css`
margin-right: 0.5rem;
`}
>
Date updated:{" "}
</div>
<div>{stringToDate(donation.updated_at)}</div>
</div>
<div
css={css`
display: flex;
font-size: 1.2rem;
align-items: baseline;
`}
>
<PersonIcon />
<Link to={`/pengguna/${donation.user}`}>
{donation.user_full_name} / {donation.user_username}
</Link>
</div>
<div
css={css`
display: flex;
font-size: 1.2rem;
align-items: baseline;
`}
>
<Phone />
<div>{donation.user_phone_number}</div>
</div>
<div
css={css`
display: flex;
flex-direction: column;
`}
>
{" "}
<div
css={css`
font-size: 1.3rem;
`}
>
<div>
{donation.proof_of_bank_transfer === null ? (
<div>User belum mengirimkan bukti transfer</div>
) : (
<div
css={css`
display: flex;
flex-direction: column;
`}
>
<div
css={css`
display: flex;
font-size: 1.2rem;
align-items: baseline;
`}
>
<div
css={css`
margin-right: 1rem;
`}
>
Sender name:{" "}
</div>
<div>{donation.user_bank_account_name}</div>
</div>
<div