Fakultas Ilmu Komputer UI

Commit 38240521 authored by WILLIAM GATES's avatar WILLIAM GATES
Browse files

Complete Admin Site

parent dcf286a3
......@@ -41,6 +41,7 @@ staging:
script:
- npm install
- CI=false npm run build
- cp _redirects dist
- npm install netlify-cli -g --unsafe-perm
- netlify deploy --dir dist --prod
only:
......
......@@ -6,27 +6,47 @@
A local e-commerce application created for ease of buying and selling transactions.
## Table of Contents
- [Install](#install)
- [Running Development Mode](#running-development-mode)
- [References](#references)
## Install
The Admin Website's frontend uses Node.js and is developed using React. You need to install the required dependencies prior to building and contributing to the project.
- [Node.js](https://nodejs.org/en/download/releases/) and npm package manager
Verify that Node.js has been successfully installed. Make sure the interpreter can be invoked from the shell. For example:
```
npm --version
```
Now install the packages required for Node.js:
```
npm install
```
## Build
```
npm build
```
## Prepare environment
Create a .env file in the root folder. Inside the .env file, put
```
REACT_APP_BASE_URL= https://industripilar-staging.herokuapp.com
```
## Running Development Mode
To serve the frontend:
```
npm run start
```
......@@ -34,6 +54,6 @@ npm run start
You can see the app running by going to localhost:1234 via your favourite web browser.
## References
- https://docs.gitlab.com/ee/user/markdown.html#wiki---direct-page-link
- https://nodejs.org/en/download/package-manager/
......@@ -5327,6 +5327,11 @@
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
"dev": true
},
"downloadjs": {
"version": "1.4.7",
"resolved": "https://registry.npmjs.org/downloadjs/-/downloadjs-1.4.7.tgz",
"integrity": "sha1-9p+W+UDg0FU9rCkROYZaPNAQHjw="
},
"ecc-jsbn": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
......@@ -5913,9 +5918,9 @@
"dev": true
},
"eventemitter3": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz",
"integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==",
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
"integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==",
"dev": true
},
"events": {
......@@ -6884,9 +6889,9 @@
}
},
"http-proxy": {
"version": "1.18.0",
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz",
"integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==",
"version": "1.18.1",
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
"integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
"dev": true,
"requires": {
"eventemitter3": "^4.0.0",
......@@ -10911,9 +10916,9 @@
"dev": true
},
"moment": {
"version": "2.24.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
"version": "2.26.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
"integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw=="
},
"moment-timezone": {
"version": "0.5.28",
......@@ -12716,9 +12721,9 @@
}
},
"react-hook-form": {
"version": "5.6.1",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-5.6.1.tgz",
"integrity": "sha512-pqlAiWyZqngdEVUinxPSmhs9k2L/ETsTf8LU7wfwrE1bXJnslRsb4aKlYiL2z0bgGrCuksN8el5bxFbnR1/qEA=="
"version": "5.7.2",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-5.7.2.tgz",
"integrity": "sha512-bJvY348vayIvEUmSK7Fvea/NgqbT2racA2IbnJz/aPlQ3GBtaTeDITH6rtCa6y++obZzG6E3Q8VuoXPir7QYUg=="
},
"react-is": {
"version": "16.13.1",
......
public/favicon.ico

3.08 KB | W: | H:

public/favicon.ico

1.12 KB | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
......@@ -19,7 +19,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Industri Pilar Admin</title>
</head>
<body style="background-color: #F5F8F9">
<noscript>You need to enable JavaScript to run this app.</noscript>
......
import { act, cleanup, fireEvent, render } from "@testing-library/react";
import AuthContext from "../utils/contex";
import React from "react";
import Pengaturan from "../page/pengaturan/Pengaturan";
import { waitFor } from "@testing-library/dom";
beforeEach(() => {
fetch.resetMocks();
});
afterEach(cleanup);
test("Config update email", async () => {
fetch
.once(
JSON.stringify({
email: "pilar@gmail.com",
})
)
.once(
JSON.stringify({
hamlet: "016",
urban_village: "Penggilingan",
sub_district: "Cakung",
same_hamlet_costs: "6000.00",
same_urban_village_different_hamlet_costs: "12000.00",
same_sub_district_different_urban_village_costs: "15000.00",
})
)
.once(JSON.stringify({}), { statusCode: 200 });
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<Pengaturan />
</AuthContext.Provider>
);
const waitConfig = getByTestId("waiting-config");
expect(waitConfig.textContent).toContain("Fetching data..");
await waitFor(() => getByTestId("form-config"));
const email = getByTestId("email-admin");
expect(email.value).toEqual("pilar@gmail.com");
await act(async () => {
await fireEvent.input(email, { target: { value: "test@gmail.com" } });
await fireEvent.submit(getByTestId("submit-email"));
});
expect(fetch.mock.calls.length).toEqual(3);
});
test("Config update email empty", async () => {
fetch
.once(
JSON.stringify({
email: "pilar@gmail.com",
})
)
.once(
JSON.stringify({
hamlet: "016",
urban_village: "Penggilingan",
sub_district: "Cakung",
same_hamlet_costs: "6000.00",
same_urban_village_different_hamlet_costs: "12000.00",
same_sub_district_different_urban_village_costs: "15000.00",
})
)
.once(JSON.stringify({}), { statusCode: 200 });
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<Pengaturan />
</AuthContext.Provider>
);
const waitConfig = getByTestId("waiting-config");
expect(waitConfig.textContent).toContain("Fetching data..");
await waitFor(() => getByTestId("form-config"));
const email = getByTestId("email-admin");
expect(email.value).toEqual("pilar@gmail.com");
await act(async () => {
await fireEvent.input(email, { target: { value: "" } });
await fireEvent.submit(getByTestId("submit-email"));
});
expect(fetch.mock.calls.length).toEqual(2);
});
test("Config update shipping", async () => {
fetch
.once(
JSON.stringify({
email: "pilar@gmail.com",
})
)
.once(
JSON.stringify({
hamlet: "016",
urban_village: "Penggilingan",
sub_district: "Cakung",
same_hamlet_costs: "6000.00",
same_urban_village_different_hamlet_costs: "12000.00",
same_sub_district_different_urban_village_costs: "15000.00",
})
)
.once(JSON.stringify({}), { statusCode: 200 });
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<Pengaturan />
</AuthContext.Provider>
);
const waitConfig = getByTestId("waiting-config");
expect(waitConfig.textContent).toContain("Fetching data..");
await waitFor(() => getByTestId("form-config"));
const rw = getByTestId("rw");
expect(rw.value).toEqual("016");
const kelurahan = getByTestId("kelurahan");
expect(kelurahan.value).toEqual("Penggilingan");
const kecamatan = getByTestId("kecamatan");
expect(kecamatan.value).toEqual("Cakung");
const rwCost = getByTestId("rw-cost");
expect(rwCost.value).toEqual("6000.00");
const kelurahanCost = getByTestId("kelurahan-cost");
expect(kelurahanCost.value).toEqual("12000.00");
const kecamatanCost = getByTestId("kecamatan-cost");
expect(kecamatanCost.value).toEqual("15000.00");
expect(fetch.mock.calls.length).toEqual(2);
await act(async () => {
await fireEvent.input(rw, { target: { value: "001" } });
await fireEvent.input(kelurahan, { target: { value: "ada" } });
await fireEvent.input(kecamatan, { target: { value: "deh" } });
await fireEvent.input(rwCost, { target: { value: "5000" } });
await fireEvent.input(kelurahanCost, { target: { value: "10000" } });
await fireEvent.input(kecamatanCost, { target: { value: "12000" } });
await fireEvent.submit(getByTestId("submit-shipping"));
});
expect(fetch.mock.calls.length).toEqual(3);
});
test("Config update shipping empty", async () => {
fetch
.once(
JSON.stringify({
email: "pilar@gmail.com",
})
)
.once(
JSON.stringify({
hamlet: "016",
urban_village: "Penggilingan",
sub_district: "Cakung",
same_hamlet_costs: "6000.00",
same_urban_village_different_hamlet_costs: "12000.00",
same_sub_district_different_urban_village_costs: "15000.00",
})
)
.once(JSON.stringify({}), { statusCode: 200 });
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<Pengaturan />
</AuthContext.Provider>
);
const waitConfig = getByTestId("waiting-config");
expect(waitConfig.textContent).toContain("Fetching data..");
await waitFor(() => getByTestId("form-config"));
const rw = getByTestId("rw");
expect(rw.value).toEqual("016");
const kelurahan = getByTestId("kelurahan");
expect(kelurahan.value).toEqual("Penggilingan");
const kecamatan = getByTestId("kecamatan");
expect(kecamatan.value).toEqual("Cakung");
const rwCost = getByTestId("rw-cost");
expect(rwCost.value).toEqual("6000.00");
const kelurahanCost = getByTestId("kelurahan-cost");
expect(kelurahanCost.value).toEqual("12000.00");
const kecamatanCost = getByTestId("kecamatan-cost");
expect(kecamatanCost.value).toEqual("15000.00");
expect(fetch.mock.calls.length).toEqual(2);
await act(async () => {
await fireEvent.input(rw, { target: { value: "" } });
await fireEvent.input(kelurahan, { target: { value: "" } });
await fireEvent.input(kecamatan, { target: { value: "" } });
await fireEvent.input(rwCost, { target: { value: "" } });
await fireEvent.input(kelurahanCost, { target: { value: "" } });
await fireEvent.input(kecamatanCost, { target: { value: "" } });
await fireEvent.submit(getByTestId("submit-shipping"));
});
expect(fetch.mock.calls.length).toEqual(2);
});
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 { cleanup, render } from "@testing-library/react";
import AuthContext from "../../utils/contex";
import React from "react";
import ListBank from "../../page/bank/ListBank";
import { waitFor } from "@testing-library/dom";
beforeEach(() => {
fetch.resetMocks();
});
afterEach(cleanup);
test("Test List Bank", async () => {
fetch.mockResponseOnce(
JSON.stringify({
count: 11,
next:
"https://industripilar-staging.herokuapp.com/bank-account-transfer-destinations/?page=2",
previous: null,
results: [
{
id: "e1827709-82a3-4a6f-b55c-bb1a229b7036",
bank_name: "bca",
bank_account_number: "1234456",
bank_account_name: "test bca",
},
{
id: "3e7974da-47fb-47ed-a83c-525e237a8c41",
bank_name: "bca1",
bank_account_number: "1234456",
bank_account_name: "test bca",
},
],
})
);
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "tester" } }}>
<ListBank />
</AuthContext.Provider>
);
await waitFor(() => getByTestId("tableList"));
const data = getByTestId("tableList");
expect(data.textContent).toContain("bca");
expect(fetch.mock.calls.length).toEqual(1);
});
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);
});
......@@ -23,7 +23,6 @@ test("Test context state", async () => {
await act(async () => {
await navigate("/pengguna");
});
expect(getByTestId("page").textContent).toContain("Pengguna");
await act(async () => {
await fireEvent.click(getByTestId("logout"));
......
......@@ -94,7 +94,7 @@ test(" Test List transaksi filter", async () => {
});
await act(async () => {
await fireEvent.input(
getByLabelText("Status Donasi:", { target: { value: "001" } })
getByLabelText("Status Donasi", { target: { value: "001" } })
);
await fireEvent.click(getByTestId("submit-filter"));
});
......
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 EditProduk from "../../page/program/EditProgram";
beforeEach(() => {
fetch.resetMocks();
});
afterEach(cleanup);
test("Test edit program renders", async () => {
fetch.once(
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",
open_donation: true,
program_minutes: null,
poster_image:
"https://industripilar-api-staging.s3.amazonaws.com/media/uploads/programs/1_txtcYocQEGtOFN33ZCTDbw.png",
link: null,
total_donation_amount: "2263691.00",
})
);
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<EditProduk />
</AuthContext.Provider>
);
const waitProgram = getByTestId("waiting-edit-program");
expect(waitProgram.textContent).toContain("Fetching data..");
await waitFor(() => getByTestId("edit-program"));
const name_program = getByTestId("name-program-input");
expect(name_program.value).toEqual("dummy 2");
await act(async () => {
await fireEvent.input(name_program, { target: { value: "test" } });
});
await act(async () => {
await fireEvent.submit(getByTestId("submit-program"));
});
expect(fetch.mock.calls.length).toEqual(2);
});
test("Test edit program renders error", async () => {
fetch
.once(
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",
open_donation: true,
program_minutes: null,
poster_image:
"https://industripilar-api-staging.s3.amazonaws.com/media/uploads/programs/1_txtcYocQEGtOFN33ZCTDbw.png",
link: null,
total_donation_amount: "2263691.00",
})
)
.once(JSON.stringify({}), { status: 400 });
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<EditProduk />
</AuthContext.Provider>
);
const waitProgram = getByTestId("waiting-edit-program");
expect(waitProgram.textContent).toContain("Fetching data..");
await waitFor(() => getByTestId("edit-program"));