Fakultas Ilmu Komputer UI

Commit 980c3fbe authored by WILLIAM GATES's avatar WILLIAM GATES
Browse files

Merge branch 'staging' into 'master'

Complete Admin Site

See merge request ppl-fasilkom-ui/2020/ppl-c/diskominfo-depok-tpu-online/post-rpl-web!78
parents dcf286a3 38240521
Pipeline #53022 passed with stages
in 13 minutes and 48 seconds
...@@ -41,6 +41,7 @@ staging: ...@@ -41,6 +41,7 @@ staging:
script: script:
- npm install - npm install
- CI=false npm run build - CI=false npm run build
- cp _redirects dist
- npm install netlify-cli -g --unsafe-perm - npm install netlify-cli -g --unsafe-perm
- netlify deploy --dir dist --prod - netlify deploy --dir dist --prod
only: only:
......
...@@ -6,27 +6,47 @@ ...@@ -6,27 +6,47 @@
A local e-commerce application created for ease of buying and selling transactions. A local e-commerce application created for ease of buying and selling transactions.
## Table of Contents ## Table of Contents
- [Install](#install) - [Install](#install)
- [Running Development Mode](#running-development-mode) - [Running Development Mode](#running-development-mode)
- [References](#references) - [References](#references)
## Install ## 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. 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 - [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: Verify that Node.js has been successfully installed. Make sure the interpreter can be invoked from the shell. For example:
``` ```
npm --version npm --version
``` ```
Now install the packages required for Node.js: Now install the packages required for Node.js:
``` ```
npm install 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 ## Running Development Mode
To serve the frontend: To serve the frontend:
``` ```
npm run start npm run start
``` ```
...@@ -34,6 +54,6 @@ 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. You can see the app running by going to localhost:1234 via your favourite web browser.
## References ## References
- https://docs.gitlab.com/ee/user/markdown.html#wiki---direct-page-link - https://docs.gitlab.com/ee/user/markdown.html#wiki---direct-page-link
- https://nodejs.org/en/download/package-manager/ - https://nodejs.org/en/download/package-manager/
...@@ -5327,6 +5327,11 @@ ...@@ -5327,6 +5327,11 @@
"integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==", "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
"dev": true "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": { "ecc-jsbn": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
...@@ -5913,9 +5918,9 @@ ...@@ -5913,9 +5918,9 @@
"dev": true "dev": true
}, },
"eventemitter3": { "eventemitter3": {
"version": "4.0.0", "version": "4.0.4",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
"integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==", "integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==",
"dev": true "dev": true
}, },
"events": { "events": {
...@@ -6884,9 +6889,9 @@ ...@@ -6884,9 +6889,9 @@
} }
}, },
"http-proxy": { "http-proxy": {
"version": "1.18.0", "version": "1.18.1",
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz", "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
"integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==", "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"eventemitter3": "^4.0.0", "eventemitter3": "^4.0.0",
...@@ -10911,9 +10916,9 @@ ...@@ -10911,9 +10916,9 @@
"dev": true "dev": true
}, },
"moment": { "moment": {
"version": "2.24.0", "version": "2.26.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", "resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==" "integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw=="
}, },
"moment-timezone": { "moment-timezone": {
"version": "0.5.28", "version": "0.5.28",
...@@ -12716,9 +12721,9 @@ ...@@ -12716,9 +12721,9 @@
} }
}, },
"react-hook-form": { "react-hook-form": {
"version": "5.6.1", "version": "5.7.2",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-5.6.1.tgz", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-5.7.2.tgz",
"integrity": "sha512-pqlAiWyZqngdEVUinxPSmhs9k2L/ETsTf8LU7wfwrE1bXJnslRsb4aKlYiL2z0bgGrCuksN8el5bxFbnR1/qEA==" "integrity": "sha512-bJvY348vayIvEUmSK7Fvea/NgqbT2racA2IbnJz/aPlQ3GBtaTeDITH6rtCa6y++obZzG6E3Q8VuoXPir7QYUg=="
}, },
"react-is": { "react-is": {
"version": "16.13.1", "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 @@ ...@@ -19,7 +19,7 @@
work correctly both with client-side routing and a non-root public URL. 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`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Industri Pilar Admin</title>
</head> </head>
<body style="background-color: #F5F8F9"> <body style="background-color: #F5F8F9">
<noscript>You need to enable JavaScript to run this app.</noscript> <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 () => { ...@@ -23,7 +23,6 @@ test("Test context state", async () => {
await act(async () => { await act(async () => {
await navigate("/pengguna"); await navigate("/pengguna");
}); });
expect(getByTestId("page").textContent).toContain("Pengguna");
await act(async () => { await act(async () => {
await fireEvent.click(getByTestId("logout")); await fireEvent.click(getByTestId("logout"));
......
...@@ -94,7 +94,7 @@ test(" Test List transaksi filter", async () => { ...@@ -94,7 +94,7 @@ test(" Test List transaksi filter", async () => {
}); });
await act(async () => { await act(async () => {
await fireEvent.input( await fireEvent.input(
getByLabelText("Status Donasi:", { target: { value: "001" } }) getByLabelText("Status Donasi", { target: { value: "001" } })
); );
await fireEvent.click(getByTestId("submit-filter")); 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(() => {