Fakultas Ilmu Komputer UI

Commit e3680725 authored by Wan Muhammad Rayhan Arwindra's avatar Wan Muhammad Rayhan Arwindra 🤸🏽
Browse files

Merge branch 'pbi-9' into 'staging'

Pbi 9

See merge request !96
parents f85bb8cf 981669b1
Pipeline #61104 passed with stages
in 19 minutes and 12 seconds
import React from "react";
import { render, cleanup } from "@testing-library/react";
import { render, cleanup, act, fireEvent } from "@testing-library/react";
import ListPengguna from "../page/pengguna/ListPengguna";
import AuthContext from "../utils/contex";
import { waitFor } from "@testing-library/dom";
......@@ -53,3 +53,58 @@ test("test fetching API", async () => {
const data = getByText("Dummy User");
expect(data.textContent).toContain("Dummy User");
});
test("test sort users", async () => {
fetch.mockResponseOnce(
JSON.stringify({
count: 2,
next: null,
previous: null,
results: [
{
id: "45897cc5-968c-44cf-931d-e646b095fcaf",
username: "admin-staging",
full_name: "",
phone_number: "",
address: "",
neighborhood: "",
hamlet: "",
urban_village: "",
sub_district: "",
profile_picture: null,
},
{
id: "663392ac-1dd6-462b-9301-a19c1287cefd",
username: "dummyuser",
full_name: "Dummy User",
phone_number: "+6285212345678",
address: "Jl. Dummy No.1",
neighborhood: "000",
hamlet: "000",
urban_village: "Dummy Urban Village",
sub_district: "Dummy Sub-District",
profile_picture: null,
},
],
})
);
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<ListPengguna />
</AuthContext.Provider>
);
await waitFor(() => getByTestId("sort-button"));
const sortButton = getByTestId("sort-button");
expect(sortButton.textContent).toContain("Urutkan");
await act(async () => {
await fireEvent.click(sortButton);
});
const transactionRadio = getByTestId("transaksi-radio");
await act(async () => {
await fireEvent.click(transactionRadio);
});
const saveButton = getByTestId("save-button");
await act(async () => {
await fireEvent.click(saveButton);
});
});
\ No newline at end of file
import React from "react";
import React, {useState} from "react";
import { css } from "@emotion/core";
import TableComponent from "../../component/TableComponent";
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 Button from "@material-ui/core/Button";
import {
RowInput,
InputSubmitForm,
} from "../../component/html/html";
const ListPengguna = () => {
const [dialogOpen, setDialogOpen] = useState(false);
const [choice, setChoice] = useState("");
const [sortBy, setSortBy] = useState("");
const data = {
url: `${process.env.REACT_APP_BASE_URL}/users/`,
pageDefault: 1,
......@@ -16,6 +28,15 @@ const ListPengguna = () => {
["total_program_donations", "Jumlah Donasi"],
],
link: "",
sort: sortBy
};
const handleClickOpen = () => {
setDialogOpen(true);
};
const handleClose = () => {
setDialogOpen(false);
};
return (
<div
......@@ -32,7 +53,106 @@ const ListPengguna = () => {
>
KELOLA PENGGUNA
</div>
<div css={css`
margin-top: 20px;
padding-left: 50px;
`}>
<Button
onClick={handleClickOpen}
variant="contained"
size="medium"
data-testid="sort-button"
css={css`
text-transform: none;
width: 25%;
background: #FFFFFF;
border: 1px solid #3c8dbc;
box-sizing: border-box;
font-size: 14px;
line-height: 17px;
text-align: center;
letter-spacing: 0.2em;
color: #3c8dbc;
height: 2.3rem;
`}
>
Urutkan
</Button>
</div>
<TableComponent {...data} />
<Dialog
maxWidth="xl"
open={dialogOpen}
onClose={handleClose}
aria-labelledby="max-width-dialog-title"
>
<DialogTitle id="max-width-dialog-title">Urutkan Berdasarkan</DialogTitle>
<DialogContent>
<form onSubmit={() => setSortBy(choice)}>
<RowInput>
<input
data-testid="transaksi-radio"
type="radio"
name="transaksi"
value="transaksi"
id="transaksi"
checked={choice === "transaksi"}
onClick={() => setChoice("transaksi")}
/>
<label htmlFor="preorder" css={css`
margin-left:20px
`}>Terbanyak transaksi</label>
</RowInput>
<RowInput>
<input
type="radio"
name="donasi-uang"
value="donasi-uang"
id="donasi-uang"
checked={choice === "donasi-uang"}
onClick={() => setChoice("donasi-uang")}
/>
<label htmlFor="preorder" css={css`
margin-left:20px
`}>Terbanyak donasi uang</label>
</RowInput>
<RowInput>
<input
type="radio"
name="donasi-barang"
value="donasi-barang"
id="donasi-barang"
checked={choice === "donasi-barang"}
onClick={() => setChoice("donasi-barang")}
/>
<label htmlFor="preorder" css={css`
margin-left:20px
`}>Terbanyak donasi barang</label>
</RowInput>
<RowInput>
<InputSubmitForm
value="SIMPAN"
type="submit"
data-testid="save-button"
css={css`
width:50%;
margin-top:10px;
margin-left:110px;
`}/>
</RowInput>
</form>
</DialogContent>
<DialogActions>
<Button
data-testid="button-close-proof"
onClick={handleClose}
color="primary"
>
Close
</Button>
</DialogActions>
</Dialog>
</div>
);
};
......
......@@ -400,7 +400,7 @@ const DetailProgram = ({ idProgram }) => {
{progress.length > 0 ?
<div>
{progress.map ( p =>
<div key={p.id} css={css `margin-top: 1rem; margin-bottom: 2rem; font-size: 18px`}>
<div key={p.id} css={css `margin-top: 1rem; font-size: 18px`}>
<p data-testid="progress-date">{p.date}</p>
<p>{p.description}</p>
{p.image !== null &&
......
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