Fakultas Ilmu Komputer UI

Skip to content
GitLab
Commit 9267d7b8 authored by Shella Gabriella's avatar Shella Gabriella Committed by Azhar Difa Arnanda
Browse files

BUGFIX-1: Ubah format penulisan tanggal menjadi dd/mm/yyyy

parent 1803369e
Expand all Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 9267d7b8
This diff is collapsed.
src/__test__/batch/TambahBatch.test.js
View file @ 9267d7b8
......@@ -2,6 +2,7 @@ import { act, cleanup, fireEvent, render } from "@testing-library/react";
import AuthContext from "../../utils/contex";
import React from "react";
import TambahBatch from "../../page/batch/TambahBatch";
import moment from "moment";
beforeEach(() => {
fetch.resetMocks();
......@@ -10,25 +11,27 @@ afterEach(cleanup);
test("Test tambah batch renders", async () => {
fetch.once(JSON.stringify({}));
const { getByTestId } = render(
const wrapper = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<TambahBatch />
</AuthContext.Provider>
);
const name_batch = getByTestId("name-batch-input");
const start_date = getByTestId("start-date-input");
const end_date = getByTestId("end-date-input");
const startDateMoment = moment("Fri Apr 16 2021 00:00:00 GMT+0700")
const endDateMoment = moment("Sat Apr 17 2021 00:00:00 GMT+0700")
const name_batch = wrapper.getByTestId("name-batch-input");
const start_date = wrapper.getByTitle("start-date-title");
const end_date = wrapper.getByTitle("end-date-title");
await act(async () => {
await fireEvent.input(name_batch, { target: { value: "test" } });
});
await act(async () => {
await fireEvent.input(start_date, { target: { value: "2020-10-08" } });
await fireEvent.input(start_date, { target: { value: startDateMoment } });
});
await act(async () => {
await fireEvent.input(end_date, { target: { value: "2020-10-15" } });
await fireEvent.input(end_date, { target: { value: endDateMoment } });
});
await act(async () => {
await fireEvent.submit(getByTestId("submit-batch"));
await fireEvent.submit(wrapper.getByTestId("submit-batch"));
});
expect(fetch.mock.calls.length).toEqual(1);
});
......@@ -48,27 +51,47 @@ test("Test tambah batch form required", async () => {
test("Test tambah batch error", async () => {
fetch.once(JSON.stringify({}), { status: 400 });
const { getByTestId } = render(
const wrapper = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<TambahBatch />
</AuthContext.Provider>
);
const name_batch = getByTestId("name-batch-input");
const start_date = getByTestId("start-date-input");
const end_date = getByTestId("end-date-input");
const startDateMoment = moment("Fri Apr 16 2021 00:00:00 GMT+0700")
const endDateMoment = moment("Sat Apr 17 2021 00:00:00 GMT+0700")
const name_batch = wrapper.getByTestId("name-batch-input");
const start_date = wrapper.getByTitle("start-date-title");
const end_date = wrapper.getByTitle("end-date-title");
await act(async () => {
await fireEvent.input(name_batch, { target: { value: "test" } });
});
await act(async () => {
await fireEvent.input(start_date, { target: { value: "2020-10-08" } });
await fireEvent.input(start_date, { target: { value: startDateMoment } });
});
await act(async () => {
await fireEvent.input(end_date, { target: { value: "2020-10-15" } });
await fireEvent.input(end_date, { target: { value: endDateMoment } });
});
await act(async () => {
await fireEvent.submit(getByTestId("submit-batch"));
await fireEvent.submit(wrapper.getByTestId("submit-batch"));
});
const batch = getByTestId("tambah-batch");
const batch = wrapper.getByTestId("tambah-batch");
expect(batch.textContent).toContain("Error !, Data tidak dapat disimpan");
expect(fetch.mock.calls.length).toEqual(1);
});
test("Test tanggal form required", async () => {
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<TambahBatch />
</AuthContext.Provider>
);
await act(async () => {
await fireEvent.submit(getByTestId("submit-batch"));
});
const formBatch = getByTestId("form-batch");
expect(formBatch.textContent).toContain(
"Tanggal mulai tidak boleh kosong"
);
expect(formBatch.textContent).toContain(
"Tanggal berakhir tidak boleh kosong"
);
});
\ No newline at end of file
src/__test__/program/TambahProgram.test.js
View file @ 9267d7b8
......@@ -2,6 +2,7 @@ import { act, cleanup, fireEvent, render } from "@testing-library/react";
import AuthContext from "../../utils/contex";
import React from "react";
import TambahProgram from "../../page/program/TambahProgram";
import moment from "moment";
beforeEach(() => {
fetch.resetMocks();
......@@ -36,38 +37,40 @@ test("Test tambah program renders", async () => {
})
);
const { getByTestId } = render(
const startDateMoment = moment("Fri Apr 16 2021 00:00:00 GMT+0700")
const endDateMoment = moment("Sat Apr 17 2021 00:00:00 GMT+0700")
const wrapper = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<TambahProgram />
</AuthContext.Provider>
);
const name_program = getByTestId("name-program-input");
const name_program = wrapper.getByTestId("name-program-input");
await act(async () => {
await fireEvent.input(name_program, { target: { value: "test" } });
});
const desc_program = getByTestId("description-program-input");
const desc_program = wrapper.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");
const start_date_time = wrapper.getByTitle("start-date-time-title");
await act(async () => {
await fireEvent.input(start_date_time, {
target: { value: "2020-05-12T19:30" },
target: { value: startDateMoment },
});
});
const end_date_time = getByTestId("end-date-time-program-input");
const end_date_time = wrapper.getByTitle("end-date-time-title");
await act(async () => {
await fireEvent.input(end_date_time, {
target: { value: "2020-05-15T19:30" },
target: { value: endDateMoment },
});
});
await act(async () => {
await fireEvent.click(getByTestId("is-open-program-input"), {
await fireEvent.click(wrapper.getByTestId("is-open-program-input"), {
target: { value: "true" },
});
});
await act(async () => {
await fireEvent.submit(getByTestId("submit-program"));
await fireEvent.submit(wrapper.getByTestId("submit-program"));
});
expect(fetch.mock.calls.length).toEqual(1);
});
......@@ -78,6 +81,16 @@ test("Test tambah program required marks", async () => {
<TambahProgram />
</AuthContext.Provider>
);
await act(async () => {
await fireEvent.submit(getByTestId("submit-program"));
});
const formBatch = getByTestId("form-program");
expect(formBatch.textContent).toContain(
"Tanggal dan waktu mulai tidak boleh kosong"
);
expect(formBatch.textContent).toContain(
"Tanggal dan waktu akhir tidak boleh kosong"
);
const formProgram = getByTestId("tambah-program");
expect(formProgram.textContent).toContain("* Perlu diisi", "Nama program*", "Deskripsi*", "Donasi*", "Tanggal dan waktu mulai*", "Tanggal dan waktu berakhir");
});
\ No newline at end of file
src/component/FormDownload.jsx
View file @ 9267d7b8
import React from "react";
import { useForm } from "react-hook-form";
import useDownloadFile from "../utils/useDownloadFile";
import { ErrorDiv } from "./html/html";
import { ErrorDiv, HiddenInputForm} from "./html/html";
import Button from "@material-ui/core/Button";
import { css } from "@emotion/core";
import GetAppIcon from "@material-ui/icons/GetApp";
import { useState } from "react";
import moment from "moment";
import DateTime from 'react-datetime';
import "react-datetime/css/react-datetime.css";
const FormDownload = ({ url }) => {
const [download, error] = useDownloadFile(
......@@ -14,6 +18,10 @@ const FormDownload = ({ url }) => {
const onSubmit = (data) => {
download({ ...data });
};
const [after, setAfter] = useState('');
const [before, setBefore] = useState('');
return (
<form
onSubmit={handleSubmit(onSubmit)}
......@@ -36,7 +44,28 @@ const FormDownload = ({ url }) => {
>
Tanggal Mulai{" "}
</label>
<input name="after" type="date" ref={register} />
<HiddenInputForm
type='date'
value={moment(after).format('YYYY-MM-DD')}
name="after"
ref={register}
/>
<DateTime
css={css`
flex-grow: 4;
border: #e0e1e2;
border-radius: 4px;
font-size: 1rem;
width: 175px;
padding-right: 5px;
`}
data-testid="after-input"
name="after_plain"
dateFormat="DD/MM/yyyy"
timeFormat={false}
inputProps={{ placeholder: 'dd/mm/yyyy' }}
onChange={(e) => setAfter(moment(e).toDate())}
/>
</div>
<div>
<label
......@@ -47,7 +76,28 @@ const FormDownload = ({ url }) => {
>
Tanggal Berakhir{" "}
</label>
<input name="before" type="date" ref={register} />
<HiddenInputForm
type='date'
value={moment(before).format('YYYY-MM-DD')}
name="before"
ref={register}
/>
<DateTime
css={css`
flex-grow: 4;
border: #e0e1e2;
border-radius: 4px;
font-size: 1rem;
width: 175px;
padding-right: 5px;
`}
data-testid="before-input"
name="before_plain"
dateFormat="DD/MM/yyyy"
timeFormat={false}
inputProps={{ placeholder: 'dd/mm/yyyy' }}
onChange={(e) => setBefore(moment(e).toDate())}
/>
</div>
<Button
......
src/component/html/html.js
View file @ 9267d7b8
......@@ -56,6 +56,16 @@ export const InputForm = styled.input`
padding-left: 1rem;
`;
export const HiddenInputForm = styled.input`
flex-grow: 4;
border: 1px solid #e0e1e2;
box-sizing: border-box;
border-radius: 4px;
font-size: 1rem;
padding-left: 1rem;
display: none;
`;
export const InputTextArea = styled.textarea`
flex-grow: 4;
border: 1px solid #e0e1e2;
......
src/page/batch/DetailBatch.jsx
View file @ 9267d7b8
import React from "react";
import "moment-timezone";
import Moment from "react-moment";
import useFetchSingleData from "../../utils/useFetchSingleData";
import { css } from "@emotion/core";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";
import { navigate } from "@reach/router";
import { stringToCurrency, stringToDateNoTime } from "../../component/TableUtils";
import { stringToCurrency } from "../../component/TableUtils";
import { ErrorDiv, ButtonDeleteStyled } from "../../component/html/html";
import LinkYellow from "../../component/LinkYellow";
import useDelete from "../../utils/useDelete";
......@@ -91,13 +93,13 @@ const DetailBatch = ({ batchId }) => {
<div css={css`margin-right: 0.5rem;`}>
Tanggal Mulai:{" "}
</div>
<div>{stringToDateNoTime(batch.start_date)}</div>
<div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={batch.start_date} />}</div>
</div>
<div css={css`font-size: 1.2rem;display: flex;`}>
<div css={css`margin-right: 0.5rem;`}>
Tanggal Berakhir:{" "}
</div>
<div>{stringToDateNoTime(batch.end_date)}</div>
<div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={batch.end_date} />}</div>
</div>
<div css={css`font-size: 1.2rem;display: flex;`}>
<div css={css`margin-right: 0.5rem;`}>
......
src/page/batch/FormBatch.jsx
View file @ 9267d7b8
......@@ -4,10 +4,15 @@ import {
ErrorDiv,
RowInput,
InputForm,
HiddenInputForm,
LabelInput,
InputSubmitForm,
} from "../../component/html/html";
import { css } from "@emotion/core";
import { useState } from "react";
import moment from "moment";
import DateTime from 'react-datetime';
import "react-datetime/css/react-datetime.css";
const FormBatch = ({ onSubmit, initialData = null }) => {
const { register, handleSubmit, errors } = useForm({
......@@ -18,6 +23,10 @@ const FormBatch = ({ onSubmit, initialData = null }) => {
shipping_cost: initialData["shipping_cost"],
} : {},
});
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
return (
<form
data-testid="form-batch"
......@@ -46,13 +55,27 @@ const FormBatch = ({ onSubmit, initialData = null }) => {
<LabelInput htmlFor="start_date">Tanggal Dimulai
{initialData === null && <span css={css`color:red`}>*</span>}
</LabelInput>
<InputForm
<HiddenInputForm
type='date'
value={moment(startDate).format('YYYY-MM-DD')}
name="start_date"
ref={register({ required: true })}
readOnly={true}
disabled={initialData !== null}
/>
<DateTime
css={css`
flex-grow: 4;
border: #e0e1e2;
border-radius: 4px;
font-size: 1rem;
`}
data-testid="start-date-input"
type="date"
name="start_date"
ref={register({ required: true })}
readOnly={initialData !== null}
disabled={initialData !== null}
name="start_date_plain"
dateFormat="DD/MM/yyyy"
timeFormat={false}
inputProps={{ placeholder: 'dd/mm/yyyy' }, { title: "start-date-title" }}
onChange={(e) => setStartDate(moment(e).toDate())}
/>
</RowInput>
......@@ -60,13 +83,27 @@ const FormBatch = ({ onSubmit, initialData = null }) => {
<LabelInput htmlFor="end_date">Tanggal Berakhir
{initialData === null && <span css={css`color:red`}>*</span>}
</LabelInput>
<InputForm
data-testid="end-date-input"
type="date"
<HiddenInputForm
type='date'
value={moment(endDate).format('YYYY-MM-DD')}
name="end_date"
ref={register({ required: true })}
readOnly={initialData !== null}
disabled={initialData !== null}
readOnly={true}
disabled={initialData !== null}
/>
<DateTime
css={css`
flex-grow: 4;
border: #e0e1e2;
border-radius: 4px;
font-size: 1rem;
`}
data-testid="end-date-input"
name="end_date_plain"
dateFormat="DD/MM/yyyy"
timeFormat={false}
inputProps={{ placeholder: 'dd/mm/yyyy' }, { title: "end-date-title" }}
onChange={(e) => setEndDate(moment(e).toDate())}
/>
</RowInput>
......
src/page/batch/ListBatch.jsx
View file @ 9267d7b8
......@@ -3,7 +3,7 @@ import TableComponent from "../../component/TableComponent";
import { css } from "@emotion/core";
import LinkYellow from "../../component/LinkYellow";
import useFetchSingleData from "../../utils/useFetchSingleData";
import { stringToCurrency }from "../../component/TableUtils";
import { stringToCurrency, stringToDateNoTime }from "../../component/TableUtils";
const ListBatch = () =>{
let totalCost = "Loading..."
......@@ -26,8 +26,8 @@ const ListBatch = () =>{
keyValuePairs: [
["id", "id"],
["batch_name", "Nama"],
["start_date", "Tanggal Dimulai"],
["end_date", "Tanggal Berakhir"],
["start_date", "Tanggal Dimulai", stringToDateNoTime],
["end_date", "Tanggal Berakhir", stringToDateNoTime],
],
link: "",
};
......
src/page/donasi/DetailDonasiUang.jsx
View file @ 9267d7b8
......@@ -6,7 +6,7 @@ import PhoneIcon from "@material-ui/icons/Phone";
import PhotoIcon from "@material-ui/icons/Photo";
import { Link, navigate } from "@reach/router";
import PersonIcon from "@material-ui/icons/Person";
import { stringToCurrency, stringToDate } from "../../component/TableUtils";
import { stringToCurrency } from "../../component/TableUtils";
import { ErrorDiv } from "../../component/html/html";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
......@@ -15,6 +15,8 @@ import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import FormDonasi from "./FormDonasi";
import StatusDonasi from "../../component/StatusDonasi";
import "moment-timezone";
import Moment from "react-moment";
const DetailDonasiUang = ({ idDonasi }) => {
const url = `${process.env.REACT_APP_BASE_URL}/program-donations/${idDonasi}/`;
......@@ -145,7 +147,7 @@ const DetailDonasiUang = ({ idDonasi }) => {
>
Tanggal dibuat:{" "}
</div>
<div>{stringToDate(donation.created_at)}</div>
<div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={donation.created_at} />}</div>
</div>
<div
css={css`
......@@ -160,7 +162,7 @@ const DetailDonasiUang = ({ idDonasi }) => {
>
Tanggal Update:{" "}
</div>
<div>{stringToDate(donation.updated_at)}</div>
<div>{<Moment format={"DD MMMM YYYY"} tz="Asia/Jakarta" date={donation.updated_at} />}</div>
</div>
<div
css={css`
......
src/page/program/FormProgram.jsx
View file @ 9267d7b8
......@@ -5,11 +5,15 @@ import {
ErrorDiv,
RowInput,
InputForm,
HiddenInputForm,
LabelInput,
InputTextArea,
InputSubmitForm,
} from "../../component/html/html";
import { css } from "@emotion/core";
import { useState } from "react";
import DateTime from 'react-datetime';
import "react-datetime/css/react-datetime.css";
const FormProgram = ({ onSubmit, initialData = null }) => {
const { register, handleSubmit, errors } = useForm({
......@@ -64,6 +68,10 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
formData.append("poster_image", data["poster_image"][0]);
onSubmit(formData);
};
const [startDateTime, setStartDateTime] = useState('');
const [endDateTime, setEndDateTime] = useState('');
return (
<form
data-testid="form-program"
......@@ -73,6 +81,8 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
flex-direction: column;
`}
>
{errors.start_date_time && <ErrorDiv>Tanggal dan waktu mulai tidak boleh kosong</ErrorDiv>}
{errors.end_date_time && <ErrorDiv>Tanggal dan waktu akhir tidak boleh kosong</ErrorDiv>}
<div
css={css`
font-size: 15px;
......@@ -127,11 +137,26 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
Tanggal dan waktu mulai
<span css={css`color:red`}>*</span>
</LabelInput>
<InputForm
type="datetime-local"
data-testid="start-date-time-program-input"
name="start_date_time"
ref={register({ required: false })}
<HiddenInputForm
type='datetime-local'
value={moment(startDateTime).format('YYYY-MM-DDTHH:mm')}
name="start_date_time"
ref={register({ required: true })}
/>
<DateTime
css={css`
flex-grow: 4;
border: #e0e1e2;
border-radius: 4px;
font-size: 1rem;
`}
data-testid="start-date-time-program-input"
name="start_date_time_plain"
dateFormat="DD/MM/yyyy"
timeFormat={true}
utc={false}
inputProps={{ placeholder: 'dd/mm/yyyy --:-- --' }, { title: "start-date-time-title" }}
onChange={(e) => setStartDateTime(moment(e).toDate())}
/>
</RowInput>
<RowInput>
......@@ -139,11 +164,26 @@ const FormProgram = ({ onSubmit, initialData = null }) => {
Tanggal dan waktu berakhir
<span css={css`color:red`}>*</span>
</LabelInput>
<InputForm
type="datetime-local"
data-testid="end-date-time-program-input"
name="end_date_time"
ref={register({ required: false })}
<HiddenInputForm
type='datetime-local'
value={moment(endDateTime).format('YYYY-MM-DDTHH:mm')}
name="end_date_time"
ref={register({ required: true })}
/>
<DateTime
css={css`
flex-grow: 4;
border: #e0e1e2;
border-radius: 4px;
font-size: 1rem;
`}
data-testid="end-date-time-program-input"
name="end_date_time_plain"
dateFormat="DD/MM/yyyy"
timeFormat={true}
utc={false}
inputProps={{ placeholder: 'dd/mm/yyyy --:-- --' }, { title: "end-date-time-title" }}
onChange={(e) => setEndDateTime(moment(e).toDate())}
/>
</RowInput>
<RowInput>
......
src/page/transaksi/DetailTransaksi.jsx
View file @ 9267d7b8
......@@ -15,7 +15,7 @@ import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Status from "../../component/Status";
import { stringToCurrency, stringToDate } from "../../component/TableUtils";
import { stringToCurrency } from "../../component/TableUtils";
import { ErrorDiv } from "../../component/html/html";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
......@@ -23,6 +23,9 @@ import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogTitle from "@material-ui/core/DialogTitle";
import FormStatus from "./FormStatus";
import "moment-timezone";
import Moment from "react-moment";
const DetailTransaksi = ({ idTransaksi }) => {
const url = `${process.env.REACT_APP_BASE_URL}/transactions/${idTransaksi}/`;
const [transaction, error] = useFetchSingleData(url);
......@@ -154,7 +157,7 @@ const DetailTransaksi = ({ idTransaksi }) => {
>
Tanggal Pembuatan:{" "}
</div>
<div>{stringToDate(transaction.created_at)}</div>