Fakultas Ilmu Komputer UI

Commit 4d634be7 authored by Ilma Ainur Rohma's avatar Ilma Ainur Rohma
Browse files

PBI-11: Menambahkan data donasi barang pada program

parent 4b0f0c52
This diff is collapsed.
......@@ -15,7 +15,7 @@
"caniuse-lite": "^1.0.30001161",
"downloadjs": "^1.4.7",
"jquery": "^3.5.0",
"moment": "^2.26.0",
"moment": "^2.29.1",
"moment-timezone": "^0.5.28",
"node-fetch": "^2.6.1",
"popper.js": "^1.16.1",
......@@ -31,7 +31,7 @@
"reactstrap": "^8.9.0"
},
"scripts": {
"start": "cross-env REACT_APP_BASE_URL=$(grep REACT_APP_BASE_URL .env_var | cut -d '=' -f2) parcel public/index.html",
"start": "cross-env REACT_APP_BASE_URL=http://localhost:8000 parcel public/index.html",
"build": "cross-env REACT_APP_BASE_URL=$(grep REACT_APP_BASE_URL .env_var | cut -d '=' -f2) parcel build public/index.html",
"test": "jest",
"test:coverage": "jest --coverage",
......
import { cleanup, render } 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", async () => {
fetch.mockResponseOnce(
JSON.stringify({
id: "282007ff-d0be-4d68-823e-03bde086ee79",
name: "Pilar Belajar",
description: "Pilar Belajar adalah program belajar untuk anak-anak.",
start_date_time: "2020-04-08T10:00:00+07:00",
end_date_time: "2020-04-09T10:00:00+07:00",
location: "Balai Warga Jatinegara Baru",
speaker: "Sherlock Holmes",
poster_image: null,
goods_donation: [
{
id: "282007ff-d0be-4d68-823e-03bde086ee79",
desc: "Roti",
quantity: 10
}
]
})
);
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "tester" } }}>
<DetailProgram idProgram={"282007ff-d0be-4d68-823e-03bde086ee79"} />
</AuthContext.Provider>
);
await waitFor(() => getByTestId("detail-program-page"));
const data = getByTestId("detail-program-page");
expect(data.textContent).toContain("Roti");
})
\ No newline at end of file
......@@ -7,7 +7,10 @@ import PersonIcon from "@material-ui/icons/Person";
import LocationOnIcon from "@material-ui/icons/LocationOn";
import EventIcon from "@material-ui/icons/Event";
import MoneyIcon from "@material-ui/icons/Money";
import CheckBoxIcon from '@material-ui/icons/CheckBox';
import LanguageIcon from "@material-ui/icons/Language";
import InboxIcon from '@material-ui/icons/Inbox';
import ArrowRightIcon from '@material-ui/icons/ArrowRight';
import useFetchSingleData from "../../utils/useFetchSingleData";
import LinkYellow from "../../component/LinkYellow";
import useDelete from "../../utils/useDelete";
......@@ -69,7 +72,7 @@ const DetailProgram = ({ idProgram }) => {
const end_date_time = new Date(program.end_date_time).toLocaleString();
return (
<div
data-testid="page"
data-testid="detail-program-page"
css={css`
width: 100%;
height: 100%;
......@@ -296,7 +299,36 @@ const DetailProgram = ({ idProgram }) => {
margin-top: 1rem;
`}
>
<MoneyIcon style={{ fontSize: 20, color: "FFC80A" }} />
<LanguageIcon style={{ fontSize: 20, color: "FFC80A" }} />
<div
css={css`
display: inline;
margin-left: 2rem;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 22px;
`}
>
{program.link === null || program.link === "" ? (
"Tidak ada tautan"
) : (
<a
href={`${program.link}`}
rel="noopener noreferrer"
target="_blank"
>
{program.link}
</a>
)}
</div>
</div>
<div
css={css`
margin-top: 1rem;
`}
>
<CheckBoxIcon style={{ fontSize: 20, color: "FFC80A" }} />
<div
css={css`
display: inline;
......@@ -310,7 +342,25 @@ const DetailProgram = ({ idProgram }) => {
{program.open_donation
? "Donasi dibuka"
: "Donasi ditutup"}
{" - "}
</div>
</div>
<div
css={css`
margin-top: 1rem;
`}
>
<MoneyIcon style={{ fontSize: 20, color: "FFC80A" }} />
<div
css={css`
display: inline;
margin-left: 2rem;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 22px;
`}
>
{"Total Donasi Uang - "}
{stringToCurrency(program.total_donation_amount)}
</div>
</div>
......@@ -319,7 +369,7 @@ const DetailProgram = ({ idProgram }) => {
margin-top: 1rem;
`}
>
<LanguageIcon style={{ fontSize: 20, color: "FFC80A" }} />
<InboxIcon style={{ fontSize: 20, color: "FFC80A" }} />
<div
css={css`
display: inline;
......@@ -330,17 +380,25 @@ const DetailProgram = ({ idProgram }) => {
line-height: 22px;
`}
>
{program.link === null || program.link === "" ? (
"Tidak ada tautan"
) : (
<a
href={`${program.link}`}
rel="noopener noreferrer"
target="_blank"
>
{program.link}
</a>
)}
{"Donasi Barang - "}
{program.goods_donation ?
program.goods_donation.map(p =>
<div
key={p.key}
css={css`
margin-left: 3rem;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 22px;
`}
>
<ArrowRightIcon style={{ fontSize: 20, color: "FFC80A" }} />
{p.desc} - {p.quantity} buah
</div>):
<div>Tidak ada donasi barang</div>
}
</div>
</div>
<div
......
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