Fakultas Ilmu Komputer UI

Commit df4acada authored by Azhar Difa Arnanda's avatar Azhar Difa Arnanda 💬
Browse files

Merge branch 'dev' into 'staging'

Dev

See merge request !13
parents 0a756e98 2d6f9660
Pipeline #70229 passed with stages
in 3 minutes and 30 seconds
FROM node:15.11.0
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "start"]
\ No newline at end of file
# Home Industry Admin
[![pipeline status](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/2020/ppl-c/diskominfo-depok-tpu-online/post-rpl-web/badges/master/pipeline.svg)](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/2020/ppl-c/diskominfo-depok-tpu-online/post-rpl-web/commits/master)
[![coverage report](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/2020/ppl-c/diskominfo-depok-tpu-online/post-rpl-web/badges/master/coverage.svg)](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/2020/ppl-c/diskominfo-depok-tpu-online/post-rpl-web/commits/master)
[![pipeline status](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/sosial/pilar/pilar-web/badges/dev/pipeline.svg)](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/sosial/pilar/pilar-web/-/commits/dev)
[![coverage report](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/sosial/pilar/pilar-web/badges/dev/coverage.svg)](https://gitlab.cs.ui.ac.id/ppl-fasilkom-ui/sosial/pilar/pilar-web/-/commits/dev)
A local e-commerce application created for ease of buying and selling transactions.
## Table of Contents
- [Install](#install)
- [Running Development Mode](#running-development-mode)
- [Prepare Environment](#prepare-environment)
- [Running Development Mode With Docker (Recommended)](#running-development-mode-with-docker-recommended)
- [Running Development Mode Without Docker (Optional)](#running-development-mode-without-docker-optional)
- [References](#references)
## Install
## Prepare environment
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.
Before starting development, you need to create a `.env_var` file in the root folder. Inside the `.env_var` file, put
- [Node.js](https://nodejs.org/en/download/releases/) and npm package manager
```
REACT_APP_BASE_URL=https://pilar-be-staging.cs.ui.ac.id
```
Verify that Node.js has been successfully installed. Make sure the interpreter can be invoked from the shell. For example:
## Running Development Mode with Docker (Recommended)
The recommended way of serving the frontend is to utilize Docker. To build and run the container image in Docker:
```
npm --version
docker-compose up -d --build
```
Now install the packages required for Node.js:
If you have an existing image from a previous build you can instead run:
```
npm install
docker start pilar-web
```
## Build
To stop the running container:
```
npm build
docker stop pilar-web
```
## Prepare environment
## Running Development Mode without Docker (Optional)
If your system doesn't support Docker, you can install the required packages and serve the frontend directly without a container. 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
Create a .env file in the root folder. Inside the .env file, put
Verify that Node.js has been successfully installed. Make sure the interpreter can be invoked from the shell. For example:
```
REACT_APP_BASE_URL= https://industripilar-staging.herokuapp.com
npm --version
```
## Running Development Mode
Now install the packages required for Node.js:
To serve the frontend:
```
npm install
```
After the required dependencies are installed you can start the development server with:
```
npm run start
npm start
```
You can see the app running by going to localhost:1234 via your favourite web browser.
If you want to see the production version of the server you can instead run:
```
npm run build
```
When using `start` the server will have hot-reload, this is recommended for development. However, to see the end product the `build` version will have bundled code and will detect any production-breaking code.
## References
- https://docs.gitlab.com/ee/user/markdown.html#wiki---direct-page-link
......
version: '3.9'
services:
web:
container_name: pilar-web
environment:
- CHOKIDAR_USEPOLLING=true
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app'
- '/app/node_modules'
ports:
- 9000:1234
\ No newline at end of file
This diff is collapsed.
......@@ -9,6 +9,7 @@
"@material-ui/core": "^4.9.11",
"@material-ui/icons": "^4.9.1",
"@reach/router": "^1.3.3",
"@testing-library/react-hooks": "^5.1.0",
"@types/react": "^16.14.2",
"bootstrap": "^4.4.1",
"caniuse-lite": "^1.0.30001161",
......@@ -24,7 +25,8 @@
"react-hook-form": "^5.7.2",
"react-moment": "^0.9.7",
"react-number-format": "^4.4.1",
"react-promise-tracker": "^2.1.0"
"react-promise-tracker": "^2.1.0",
"react-toastify": "^7.0.3"
},
"scripts": {
"start": "cross-env REACT_APP_BASE_URL=$(grep REACT_APP_BASE_URL .env_var | cut -d '=' -f2) parcel public/index.html",
......@@ -53,7 +55,9 @@
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"@emotion/jest": "^11.2.1",
"@testing-library/dom": "^7.2.2",
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^10.0.4",
"@types/jest": "^25.2.1",
"babel-eslint": "^10.1.0",
......
......@@ -5,6 +5,8 @@ import AuthContext from "./utils/contex";
import Routes from "./routes";
import Loader from "./component/Loader";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import { ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';
const ApplicationState = () => {
const [stateAuthReducer, dispatchAuthReducer] = useReducer(
......@@ -25,6 +27,7 @@ const ApplicationState = () => {
return (
<ThemeProvider theme={theme}>
<Loader />
<ToastContainer/>
<AuthContext.Provider
value={{
...stateAuthReducer,
......
......@@ -16,7 +16,7 @@ test("Test edit batch renders", async () => {
batch_name: "a",
start_date: "2020-04-28",
end_date: "2020-04-28",
shipping_cost: "10000.00"
shipping_cost: "10000.00",
})
)
.once(
......@@ -30,7 +30,7 @@ test("Test edit batch renders", async () => {
batch_name: "Batch 1",
start_date: "2020-04-28",
end_date: "2020-04-28",
shipping_cost: "10000.00"
shipping_cost: "10000.00",
},
],
})
......@@ -46,7 +46,7 @@ test("Test edit batch renders", async () => {
batch_name: "Batch 1",
start_date: "2020-04-28",
end_date: "2020-04-28",
shipping_cost: "10000.00"
shipping_cost: "10000.00",
},
],
})
......@@ -78,10 +78,10 @@ test("Test edit batch renders error", async () => {
.once(
JSON.stringify({
id: "e9a8f94-cb5c-4b2d-b4f1-81ccfb9f1b0a",
batch_name: "a",
start_date: "2020-04-28",
end_date: "2020-04-28",
shipping_cost: "10000.00"
batch_name: "a",
start_date: "2020-04-28",
end_date: "2020-04-28",
shipping_cost: "10000.00",
})
)
.once(
......@@ -95,7 +95,7 @@ test("Test edit batch renders error", async () => {
batch_name: "a",
start_date: "2020-04-28",
end_date: "2020-04-28",
shipping_cost: "10000.00"
shipping_cost: "10000.00",
},
],
})
......@@ -111,7 +111,7 @@ test("Test edit batch renders error", async () => {
batch_name: "a",
start_date: "2020-04-28",
end_date: "2020-04-28",
shipping_cost: "10000.00"
shipping_cost: "10000.00",
},
],
})
......
......@@ -43,9 +43,7 @@ test("Test tambah batch form required", async () => {
await fireEvent.submit(getByTestId("submit-batch"));
});
const formBatch = getByTestId("form-batch");
expect(formBatch.textContent).toContain(
"Nama batch tidak boleh kosong"
);
expect(formBatch.textContent).toContain("Nama batch tidak boleh kosong");
});
test("Test tambah batch error", async () => {
......
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/produk/EditProduk";
import { matchers } from "@emotion/jest";
expect.extend(matchers);
beforeEach(() => {
fetch.resetMocks();
});
afterEach(cleanup);
test("Test edit produk renders", async () => {
fetch
.once(
JSON.stringify({
id: "3d403cd3-e356-4c15-9a86-8843333e2778",
code: "5VK6TY",
name: "a",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
subcategory: "626aa022-50a7-4d3a-b658-79cb0f059b03",
subcategory_name: "Baju Tidur hehe",
description: "celana",
price: "50000.00",
stock: 9,
image: null,
profit: "100000.00",
modal: "10.00",
total_profit: "0.00",
unit: "pcs",
})
)
.once(
JSON.stringify({
count: 4,
next: null,
previous: null,
results: [
{
id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
name: "Baju",
image: null,
},
{
id: "69faa710-fbe2-45f1-98e8-f80d3c4c1bbe",
name: "Celana",
image: null,
},
{
id: "0664247c-d9ea-4e56-bb02-4b8463f9e14c",
name: "Mainan",
image: null,
},
{
id: "8c2c06e6-0ead-4b9a-8de1-37237fc6bdc9",
name: "Makanan",
image: null,
},
],
})
)
.once(
JSON.stringify({
count: 2,
next: null,
previous: null,
results: [
{
id: "1fac049f-592c-4c15-afe6-9e05a2ce1540",
name: "Baju Pergi",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
image: null,
},
{
id: "626aa022-50a7-4d3a-b658-79cb0f059b03",
name: "Baju Tidur",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
image: null,
},
{
id: "e44da96a-44e3-4e69-8346-bd1da7b8e41f",
name: "Kue",
category: "8c2c06e6-0ead-4b9a-8de1-37237fc6bdc9",
category_name: "Makanan",
image: null,
},
],
})
)
.once(
JSON.stringify({
id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
name: "avengers endgame",
category: "0664247c-d9ea-4e56-bb02-4b8463f9e14c",
category_name: "Mainan",
image:
"https://industripilar-api-staging.s3.amazonaws.com/media/uploads/subcategories/1_txtcYocQEGtOFN33ZCTDbw.png",
})
)
.once(
JSON.stringify({
id: "3d403cd3-e356-4c15-9a86-8843333e2778",
code: "5VK6TY",
name: "a",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
subcategory: "626aa022-50a7-4d3a-b658-79cb0f059b03",
subcategory_name: "Baju Tidur hehe",
description: "celana",
price: "50000.00",
stock: 9,
image: null,
profit: "100000.00",
modal: "10.00",
total_profit: "0.00",
unit: "pcs",
}),
{
status: 200,
}
);
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<EditProduk />
</AuthContext.Provider>
);
const waitProduk = getByTestId("waiting-edit-produk");
expect(waitProduk.textContent).toContain("Fetching data..");
await waitFor(() => getByTestId("edit-produk"));
const name_produk = getByTestId("name-produk-input");
expect(name_produk.value).toEqual("a");
const descProduk = getByTestId("desc-produk-input");
expect(descProduk).toHaveAttribute("rows", "4");
const descProdukParent = getByTestId("desc-produk-input-parent");
expect(descProdukParent).toHaveStyleRule("height", "100%");
await act(async () => {
await fireEvent.input(name_produk, { target: { value: "test" } });
});
await act(async () => {
await fireEvent.submit(getByTestId("submit-produk"));
});
expect(fetch.mock.calls.length).toEqual(5);
});
test("Test edit produk renders error", async () => {
fetch
.once(
JSON.stringify({
id: "3d403cd3-e356-4c15-9a86-8843333e2778",
code: "5VK6TY",
name: "a",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
subcategory: "626aa022-50a7-4d3a-b658-79cb0f059b03",
subcategory_name: "Baju Tidur hehe",
description: "celana",
price: "50000.00",
stock: 9,
image: null,
profit: "100000.00",
modal: "10.00",
total_profit: "0.00",
unit: "pcs",
})
)
.once(
JSON.stringify({
count: 4,
next: null,
previous: null,
results: [
{
id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
name: "Baju",
image: null,
},
{
id: "69faa710-fbe2-45f1-98e8-f80d3c4c1bbe",
name: "Celana",
image: null,
},
{
id: "0664247c-d9ea-4e56-bb02-4b8463f9e14c",
name: "Mainan",
image: null,
},
{
id: "8c2c06e6-0ead-4b9a-8de1-37237fc6bdc9",
name: "Makanan",
image: null,
},
],
})
)
.once(
JSON.stringify({
count: 2,
next: null,
previous: null,
results: [
{
id: "1fac049f-592c-4c15-afe6-9e05a2ce1540",
name: "Baju Pergi",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
image: null,
},
{
id: "626aa022-50a7-4d3a-b658-79cb0f059b03",
name: "Baju Tidur",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
image: null,
},
{
id: "e44da96a-44e3-4e69-8346-bd1da7b8e41f",
name: "Kue",
category: "8c2c06e6-0ead-4b9a-8de1-37237fc6bdc9",
category_name: "Makanan",
image: null,
},
],
})
)
.once(
JSON.stringify({
id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
name: "avengers endgame",
category: "0664247c-d9ea-4e56-bb02-4b8463f9e14c",
category_name: "Mainan",
image:
"https://industripilar-api-staging.s3.amazonaws.com/media/uploads/subcategories/1_txtcYocQEGtOFN33ZCTDbw.png",
})
)
.once(
JSON.stringify({
id: "3d403cd3-e356-4c15-9a86-8843333e2778",
code: "5VK6TY",
name: "a",
category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
category_name: "Baju",
subcategory: "626aa022-50a7-4d3a-b658-79cb0f059b03",
subcategory_name: "Baju Tidur hehe",
description: "celana",
price: "50000.00",
stock: 9,
image: null,
profit: "100000.00",
modal: "10.00",
total_profit: "0.00",
unit: "pcs",
}),
{
status: 500,
}
);
const { getByTestId } = render(
<AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
<EditProduk />
</AuthContext.Provider>
);
const waitProduk = getByTestId("waiting-edit-produk");
expect(waitProduk.textContent).toContain("Fetching data..");
await waitFor(() => getByTestId("edit-produk"));
const name_produk = getByTestId("name-produk-input");
expect(name_produk.value).toEqual("a");
const descProduk = getByTestId("desc-produk-input");
expect(descProduk).toHaveAttribute("rows", "4");
const descProdukParent = getByTestId("desc-produk-input-parent");
expect(descProdukParent).toHaveStyleRule("height", "100%");
await act(async () => {
await fireEvent.submit(getByTestId("submit-produk"));
});
expect(fetch.mock.calls.length).toEqual(5);
const bank = getByTestId("edit-produk");
expect(bank.textContent).toContain("Error !, Data tidak dapat disimpan");
});
......@@ -9,11 +9,11 @@ beforeEach(() => {
});
afterEach(cleanup);
test(" Test List produk", async () => {
test("Test List produk", async () => {
fetch.mockResponseOnce(
JSON.stringify({
count: 23,
next: "https://industripilar-staging.herokuapp.com/products/?page=2",
next: null,
previous: null,
results: [
{
......@@ -27,6 +27,7 @@ test(" Test List produk", async () => {
description: "celana",
price: "50000.00",
stock: 9,
unit: "pcs",
image: null,
profit: "100000.00"
},
......@@ -41,6 +42,7 @@ test(" Test List produk", async () => {
description: "piyama",
price: "50000.00",
stock: 14,
unit: "pcs",
image: null,
profit: "100000.00"
},
......@@ -55,6 +57,7 @@ test(" Test List produk", async () => {
await waitFor(() => getByTestId("tableList"));
const data = getByTestId("tableList");
expect(data.textContent).toContain("Piyama");
expect(data.textContent).toContain("Rp100.000");
expect(data.textContent).toContain("Rp 100.000");
expect(data.textContent).toContain("pcs");
expect(fetch.mock.calls.length).toEqual(1);
});
......@@ -88,6 +88,10 @@ test("Test tambah produk renders", async () => {
await act(async () => {
await fireEvent.input(stock_produk, { target: { value: "1" } });
});
const unit_produk = getByTestId("unit-produk-input");
await act(async () => {
await fireEvent.input(unit_produk, { target: { value: "pcs" } });
});
await act(async () => {
await fireEvent.submit(getByTestId("submit-produk"));
});
......@@ -244,6 +248,10 @@ test("Test tambah produk error", async () => {
await act(async () => {
await fireEvent.input(stock_produk, { target: { value: "1" } });
});
const unit_produk = getByTestId("unit-produk-input");
await act(async () => {
await fireEvent.input(unit_produk, { target: { value: "pcs" } });
});
await act(async () => {
await fireEvent.submit(getByTestId("submit-produk"));
});
......@@ -253,6 +261,7 @@ test("Test tambah produk error", async () => {
);
expect(fetch.mock.calls.length).toEqual(4);
});
test("Test modal produk required", async () => {
fetch
.once(
......@@ -326,6 +335,10 @@ test("Test modal produk required", async () => {
await act(async () => {
await fireEvent.input(price_produk, { target: { value: "1" } });
});
const modal_produk = getByTestId("modal-produk-input");
await act(async () => {
await fireEvent.input(modal_produk, {target: { value: "1" } });
});
const stock_produk = getByTestId("stock-produk-input");