Merge branch 'intan/12/tambah-required' into 'dev'

BUGFIX-1: Tambah informasi "required" pada field form yang wajib diisi

Closes #12

See merge request !9

package-lock.json

@@ -2209,9 +2209,9 @@
       "dev": true
     },
     "@types/babel__core": {
-      "version": "7.1.12",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.12.tgz",
-      "integrity": "sha512-wMTHiiTiBAAPebqaPiPDLFA4LYPKr6Ph0Xq/6rq1Ur3v66HXyG+clfR9CNETkD7MQS8ZHvpQOtA53DLws5WAEQ==",
+      "version": "7.1.14",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.14.tgz",
+      "integrity": "sha512-zGZJzzBUVDo/eV6KgbE0f0ZI7dInEYvo12Rb70uNQDshC3SkRMb67ja0GgRHZgAX3Za6rhaWlvbDO8rrGyAb1g==",
       "dev": true,
       "requires": {
         "@babel/parser": "^7.1.0",
@@ -2241,9 +2241,9 @@
       }
     },
     "@types/babel__traverse": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.11.0.tgz",
-      "integrity": "sha512-kSjgDMZONiIfSH1Nxcr5JIRMwUetDki63FSQfpTCz8ogF3Ulqm8+mr5f78dUYs6vMiB6gBusQqfQmBvHZj/lwg==",
+      "version": "7.11.1",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.11.1.tgz",
+      "integrity": "sha512-Vs0hm0vPahPMYi9tDjtP66llufgO3ST16WXaSTtDGEl9cewAl3AibmxWw6TINOqHPT9z0uABKAYjT9jNSg4npw==",
       "dev": true,
       "requires": {
         "@babel/types": "^7.3.0"
@@ -2751,6 +2751,12 @@
       "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=",
       "dev": true
     },
+    "astral-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
+      "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
+      "dev": true
+    },
     "async-each": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
@@ -7310,39 +7316,6 @@
         "@jest/core": "^25.5.4",
         "import-local": "^3.0.2",
         "jest-cli": "^25.5.4"
-      }
-    },
-    "jest-changed-files": {
-      "version": "25.5.0",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-25.5.0.tgz",
-      "integrity": "sha512-EOw9QEqapsDT7mKF162m8HFzRPbmP8qJQny6ldVOdOVBz3ACgPm/1nAn5fPQ/NDaYhX/AHkrGwwkCncpAVSXcw==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^25.5.0",
-        "execa": "^3.2.0",
-        "throat": "^5.0.0"
-      }
-    },
-    "jest-cli": {
-      "version": "25.5.4",
-      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-25.5.4.tgz",
-      "integrity": "sha512-rG8uJkIiOUpnREh1768/N3n27Cm+xPFkSNFO91tgg+8o2rXeVLStz+vkXkGr4UtzH6t1SNbjwoiswd7p4AhHTw==",
-      "dev": true,
-      "requires": {
-        "@jest/core": "^25.5.4",
-        "@jest/test-result": "^25.5.0",
-        "@jest/types": "^25.5.0",
-        "chalk": "^3.0.0",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.4",
-        "import-local": "^3.0.2",
-        "is-ci": "^2.0.0",
-        "jest-config": "^25.5.4",
-        "jest-util": "^25.5.0",
-        "jest-validate": "^25.5.0",
-        "prompts": "^2.0.1",
-        "realpath-native": "^2.0.0",
-        "yargs": "^15.3.1"
       },
       "dependencies": {
         "ansi-styles": {
@@ -7385,6 +7358,28 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
+        "jest-cli": {
+          "version": "25.5.4",
+          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-25.5.4.tgz",
+          "integrity": "sha512-rG8uJkIiOUpnREh1768/N3n27Cm+xPFkSNFO91tgg+8o2rXeVLStz+vkXkGr4UtzH6t1SNbjwoiswd7p4AhHTw==",
+          "dev": true,
+          "requires": {
+            "@jest/core": "^25.5.4",
+            "@jest/test-result": "^25.5.0",
+            "@jest/types": "^25.5.0",
+            "chalk": "^3.0.0",
+            "exit": "^0.1.2",
+            "graceful-fs": "^4.2.4",
+            "import-local": "^3.0.2",
+            "is-ci": "^2.0.0",
+            "jest-config": "^25.5.4",
+            "jest-util": "^25.5.0",
+            "jest-validate": "^25.5.0",
+            "prompts": "^2.0.1",
+            "realpath-native": "^2.0.0",
+            "yargs": "^15.3.1"
+          }
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -7396,6 +7391,17 @@
         }
       }
     },
+    "jest-changed-files": {
+      "version": "25.5.0",
+      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-25.5.0.tgz",
+      "integrity": "sha512-EOw9QEqapsDT7mKF162m8HFzRPbmP8qJQny6ldVOdOVBz3ACgPm/1nAn5fPQ/NDaYhX/AHkrGwwkCncpAVSXcw==",
+      "dev": true,
+      "requires": {
+        "@jest/types": "^25.5.0",
+        "execa": "^3.2.0",
+        "throat": "^5.0.0"
+      }
+    },
     "jest-config": {
       "version": "25.5.4",
       "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-25.5.4.tgz",
@@ -14448,14 +14454,6 @@
       "requires": {
         "astral-regex": "^1.0.0",
         "strip-ansi": "^5.2.0"
-      },
-      "dependencies": {
-        "astral-regex": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
-          "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
-          "dev": true
-        }
       }
     },
     "string-width": {

src/__test__/bank/EditBank.test.js

@@ -74,3 +74,27 @@ test("Test edit bank error", async () => {
   expect(bank.textContent).toContain("Error !, Data tidak dapat disimpan");
   expect(fetch.mock.calls.length).toEqual(2);
 });
+
+test("Test edit bank required marks", 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 formBank = getByTestId("form-bank");
+  expect(formBank.textContent).toContain("* Perlu diisi", "Nama bank*", "Nomor rekening*", "Nama pemilik rekening*");
+});
\ No newline at end of file

src/__test__/bank/TambahBank.test.js

@@ -23,3 +23,13 @@ test("Test tambah bank renders", async () => {
   });
   expect(fetch.mock.calls.length).toEqual(0);
 });
+
+test("Test tambah bank required marks", async () => {
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <TambahBank />
+    </AuthContext.Provider>
+  );
+  const formBank = getByTestId("tambah-bank");
+  expect(formBank.textContent).toContain("* Perlu diisi", "Nama bank*", "Nomor rekening*", "Nama pemilik rekening*");
+});
\ No newline at end of file

src/__test__/kategori/EditKategori.test.js

@@ -72,3 +72,26 @@ test("Test Edit kategori error", async () => {
   expect(category.textContent).toContain("Error !, Data tidak dapat disimpan");
   expect(fetch.mock.calls.length).toEqual(2);
 });
+
+test("Test edit kategori required marks", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
+        name: "Baju",
+        image: null,
+      })
+    )
+    .once(JSON.stringify({}));
+
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <EditKategori />
+    </AuthContext.Provider>
+  );
+  const waitKategori = getByTestId("waiting-edit-kategori");
+  expect(waitKategori.textContent).toContain("Fetching data..");
+  await waitFor(() => getByTestId("edit-kategori"));
+  const formKategori = getByTestId("edit-kategori");
+  expect(formKategori.textContent).toContain("* Perlu diisi", "Nama kategori*");
+});
\ No newline at end of file

src/__test__/kategori/TambahKategori.test.js

@@ -58,3 +58,13 @@ test("Test tambah kategori error", async () => {
   expect(category.textContent).toContain("Error !, Data tidak dapat disimpan");
   expect(fetch.mock.calls.length).toEqual(1);
 });
+
+test("Test tambah kategori required marks", async () => {
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <TambahKategori />
+    </AuthContext.Provider>
+  );
+  const formKategori = getByTestId("tambah-kategori");
+  expect(formKategori.textContent).toContain("* Perlu diisi", "Nama kategori*");
+});
\ No newline at end of file

src/__test__/produk/TambahProduk.test.js

@@ -438,4 +438,72 @@ test("Test modal produk required", async () => {
   const formCategory = getByTestId("form-produk");
   expect(formCategory.textContent).toContain("Modal tidak boleh kosong");
   expect(fetch.mock.calls.length).toEqual(3);
+});
+
+test("Test tambah produk required marks", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        count: 4,
+        next: null,
+        previous: null,
+        results: [
+          {
+            id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
+            name: "Baju",
+            image: null,
+          },
+          {
+            id: "0664247c-d9ea-4e56-bb02-4b8463f9e14c",
+            name: "Mainan",
+            image: null,
+          },
+          {
+            id: "8c2c06e6-0ead-4b9a-8de1-37237fc6bdc9",
+            name: "Makanan",
+            image: null,
+          },
+          {
+            id: "b8a9909b-9131-4c2b-bcc5-6bceb18f702c",
+            name: "Minuman",
+            image: null,
+          },
+        ],
+      })
+    )
+    .once(
+      JSON.stringify({
+        count: 7,
+        next: null,
+        previous: null,
+        results: [
+          {
+            id: "626aa022-50a7-4d3a-b658-79cb0f059b03",
+            name: "Baju Tidur hehe",
+            category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
+            category_name: "Baju",
+            image: null,
+          },
+          {
+            id: "ab222bb8-46e4-40bb-bd47-7f546d356de1",
+            name: "joker baru",
+            category: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
+            category_name: "Baju",
+            image: null,
+          },
+        ],
+      })
+    )
+    .once(JSON.stringify({}));
+
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <TambahProduk />
+    </AuthContext.Provider>
+  );
+  await act(async () => {
+    await fireEvent.submit(getByTestId("submit-produk"));
+  });
+  const formProduk = getByTestId("tambah-produk");
+  expect(formProduk.textContent).toContain("* Perlu diisi", "Nama Produk*", "Kategori*", "Subkategori*", "Deskripsi Produk*", "Modal/satuan*", "Harga/satuan*", "Satuan*", "Stok*");
 });
\ No newline at end of file

src/__test__/program/TambahProgram.test.js

@@ -71,3 +71,13 @@ test("Test tambah program renders", async () => {
   });
   expect(fetch.mock.calls.length).toEqual(1);
 });
+
+test("Test tambah program required marks", async () => {
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <TambahProgram />
+    </AuthContext.Provider>
+  );
+  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/__test__/subkategori/EditSubCategory.test.js

@@ -147,3 +147,53 @@ test("Test Edit subkategori error", async () => {
   );
   expect(fetch.mock.calls.length).toEqual(3);
 });
+
+test("Test edit subkategori required marks", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        id: "cbc3dcdd-98e2-459f-b244-6f07819dda8a",
+        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({
+        count: 3,
+        next: null,
+        previous: null,
+        results: [
+          {
+            id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
+            name: "Baju",
+            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({}));
+
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <EditSubkategori />
+    </AuthContext.Provider>
+  );
+  const waitSubkategori = getByTestId("waiting-edit-subkategori");
+  expect(waitSubkategori.textContent).toContain("Fetching data..");
+  await waitFor(() => getByTestId("edit-subkategori"));
+  const formSub = getByTestId("edit-subkategori");
+  expect(formSub.textContent).toContain("* Perlu diisi", "Nama subkategori*", "Kategori *");
+});
\ No newline at end of file

src/__test__/subkategori/TambahSubCategory.test.js

@@ -174,3 +174,41 @@ test("Test tambah subkategori form error", async () => {
     "Error loading form !, Please relogin.."
   );
 });
+
+test("Test tambah subkategori required marks", async () => {
+  fetch
+    .once(
+      JSON.stringify({
+        count: 3,
+        next: null,
+        previous: null,
+        results: [
+          {
+            id: "f0c08b4f-7421-4298-89e4-3d4a40ef15b4",
+            name: "Baju",
+            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({}));
+
+  const { getByTestId } = render(
+    <AuthContext.Provider value={{ profile: { token: "BEBAS" } }}>
+      <TambahSubkategori />
+    </AuthContext.Provider>
+  );
+  await waitFor(() => getByTestId("category-subcategory-input"));
+  const formSub = getByTestId("tambah-subkategori");
+  expect(formSub.textContent).toContain("* Perlu diisi", "Nama subkategori*", "Kategori*");
+});
\ No newline at end of file

src/page/bank/FormBank.jsx

-import React from "react";
-import { useForm } from "react-hook-form";
-import {
-  ErrorDiv,
-  RowInput,
-  InputForm,
-  LabelInput,
-  InputSubmitForm,
-} from "../../component/html/html";
-import { css } from "@emotion/core";
-
-const FormBank = ({ onSubmit, initialData = null }) => {
-  const { register, handleSubmit, errors } = useForm({
-    defaultValues:
-      initialData !== null
-        ? {
-            bank_name: initialData["bank_name"],
-            bank_account_number: initialData["bank_account_number"],
-            bank_account_name: initialData["bank_account_name"],
-          }
-        : {},
-  });
-  return (
-    <form
-      data-testid="form-bank"
-      onSubmit={handleSubmit(onSubmit)}
-      css={css`
-        display: flex;
-        flex-direction: column;
-      `}
-    >
-      <RowInput>
-        <LabelInput htmlFor="bank_name">Nama bank</LabelInput>
-        <InputForm
-          data-testid="name-bank-input"
-          name="bank_name"
-          ref={register({ required: true })}
-        />
-        {errors.bank_name && <ErrorDiv>Nama bank tidak boleh kosong</ErrorDiv>}
-      </RowInput>
-      <RowInput>
-        <LabelInput htmlFor="account_number">Nomor rekening</LabelInput>
-        <InputForm
-          data-testid="account-number-input"
-          name="bank_account_number"
-          ref={register({ required: true })}
-        />
-        {errors.bank_account_number && (
-          <ErrorDiv>Nomor rekening tidak boleh kosong</ErrorDiv>
-        )}
-      </RowInput>
-      <RowInput>
-        <LabelInput htmlFor="account_name">Nama pemilik rekening</LabelInput>
-        <InputForm
-          data-testid="account-name-input"
-          name="bank_account_name"
-          ref={register({ required: true })}
-        />
-        {errors.bank_account_name && (
-          <ErrorDiv>Nama pemilik rekening tidak boleh kosong</ErrorDiv>
-        )}
-      </RowInput>
-      <RowInput>
-        <InputSubmitForm
-          type="submit"
-          data-testid="submit-bank"
-          value="SUBMIT"
-          css={css`
-            height: 100%;
-          `}
-        />
-      </RowInput>
-    </form>
-  );
-};
-
-export default FormBank;
+import React from "react";
+import { useForm } from "react-hook-form";
+import {
+  ErrorDiv,
+  RowInput,
+  InputForm,
+  LabelInput,
+  InputSubmitForm,
+} from "../../component/html/html";
+import { css } from "@emotion/core";
+
+const FormBank = ({ onSubmit, initialData = null }) => {
+  const { register, handleSubmit, errors } = useForm({
+    defaultValues:
+      initialData !== null
+        ? {
+            bank_name: initialData["bank_name"],
+            bank_account_number: initialData["bank_account_number"],
+            bank_account_name: initialData["bank_account_name"],
+          }
+        : {},
+  });
+  return (
+    <form
+      data-testid="form-bank"
+      onSubmit={handleSubmit(onSubmit)}
+      css={css`
+        display: flex;
+        flex-direction: column;
+      `}
+    >
+      <div
+      css={css`
+        font-size: 15px;
+        color:red;
+      `}>
+        * Perlu diisi
+      </div>
+      <RowInput>
+        <LabelInput htmlFor="bank_name">Nama bank
+        <span css={css`color:red`}>*</span></LabelInput>
+        <InputForm
+          data-testid="name-bank-input"
+          name="bank_name"
+          ref={register({ required: true })}
+        />
+        {errors.bank_name && <ErrorDiv>Nama bank tidak boleh kosong</ErrorDiv>}
+      </RowInput>
+      <RowInput>
+        <LabelInput htmlFor="account_number">Nomor rekening
+        <span css={css`color:red`}>*</span></LabelInput>
+        <InputForm
+          data-testid="account-number-input"
+          name="bank_account_number"
+          ref={register({ required: true })}
+        />
+        {errors.bank_account_number && (
+          <ErrorDiv>Nomor rekening tidak boleh kosong</ErrorDiv>
+        )}
+      </RowInput>
+      <RowInput>
+        <LabelInput htmlFor="account_name">Nama pemilik rekening
+        <span css={css`color:red`}>*</span></LabelInput>
+        <InputForm
+          data-testid="account-name-input"
+          name="bank_account_name"
+          ref={register({ required: true })}
+        />
+        {errors.bank_account_name && (
+          <ErrorDiv>Nama pemilik rekening tidak boleh kosong</ErrorDiv>
+        )}
+      </RowInput>
+
+      <RowInput>
+        <InputSubmitForm
+          type="submit"
+          data-testid="submit-bank"
+          value="SUBMIT"
+          css={css`
+            height: 100%;
+          `}
+        />
+      </RowInput>
+    </form>
+  );
+};
+
+export default FormBank;

src/page/kategori/FormKategori.jsx

@@ -22,8 +22,16 @@ const FormKategori = ({ onSubmit, initialData = null }) => {
         flex-direction: column;
       `}
     >
+      <div
+      css={css`
+        font-size: 15px;
+        color:red;
+      `}>
+        * Perlu diisi
+      </div>
       <RowInput>
-        <LabelInput htmlFor="name">Nama kategori </LabelInput>
+        <LabelInput htmlFor="name">Nama kategori
+        <span css={css`color:red`}>*</span></LabelInput>
         <InputForm
           data-testid="name-kategori-input"
           name="name"

src/page/produk/FormProduk.jsx

@@ -73,8 +73,16 @@ const FormProduk = ({ onSubmit, initialData = null }) => {
             <ErrorDiv>Error loading form !, Please relogin..</ErrorDiv>
           ))}
       </div>
+      <div
+      css={css`