Merge branch 'PBI-6-riwayat-transaksi' into 'staging'

fix internal UT bugs

See merge request !15

src/components/Autentikasi/Login.js

@@ -32,7 +32,7 @@ const Login = () => {
     if (loggedIn) {
       navigate('/')
     } else {
-      navigate('/login')
+      navigate('/login', {replace: true})
     }
     // eslint-disable-next-line
   }, [])
@@ -141,7 +141,7 @@ const Login = () => {
               <div className="flex flex-row">
                 <div className="pt-4">
                   <button
-                    className="bg-poporange text-white heading-3 py-2.5 shadow rounded-lg submit w-80 text-center"
+                    className="bg-poporange text-white heading-3 py-2.5 shadow rounded-lg submit w-80 text-center hover:bg-poporange-hover"
                     data-testid="next-button"
                   >
                     Selanjutnya
@@ -212,7 +212,7 @@ const Login = () => {
 
                 <div className="flex flex-col">
                   <div className="pt-4">
-                    <button className="bg-poporange text-white heading-3 py-2.5 shadow rounded-lg submit w-80 text-center">
+                    <button className="bg-poporange text-white heading-3 py-2.5 shadow rounded-lg submit w-80 text-center hover:bg-poporange-hover">
                       Masuk
                     </button>
                   </div>

src/components/Autentikasi/Login.test.js

@@ -30,7 +30,7 @@ test('renders login page if not login', () => {
 
   testRender(<Login />, {store})
   expect(navigate).toHaveBeenCalledTimes(1)
-  expect(navigate).toHaveBeenCalledWith('/login')
+  expect(navigate).toHaveBeenCalledWith('/login', {replace: true})
   expect(screen.getByTestId('daftar-url-link')).toBeInTheDocument()
 })
 

src/components/Card/Card.js

@@ -21,7 +21,7 @@ const Card = ({index, image, title, text, url}) => {
       <div>
         <p className="medium-text mb-3.5">{text}</p>
         <Link to={url} data-testid={`card-url-link-${index}`}>
-          <button className="text-lg text-white bg-popblue font-Lato py-2 w-full rounded-lg">
+          <button className="text-lg text-white bg-popblue font-Lato py-2 w-full rounded-lg hover:bg-popblue-hover">
             Mulai
           </button>
         </Link>

src/components/Card/CardPesanan.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 const CardPesanan = ({kode, type, nama, harga, waktu, status, index}) => {
   return (
     <div
-      className="flex flex-col justify-between bg-white shadow-lg mt-6 px-4 lg:px-6 py-3 rounded-lg mr-4 w-96"
+      className="flex flex-col justify-between bg-white shadow-lg mt-6 px-4 lg:px-6 py-3 rounded-lg w-72 sm:w-80 lg:w-96"
       data-testid={`card-riwayat-${index}`}
     >
       <div>

src/components/Card/CardProyekBaru.js

@@ -13,7 +13,7 @@ const CardProyekBaru = () => {
 
   return (
     <div
-      className="bg-grey flex flex-col justify-between items-center mt-6 px-4 lg:px-6 py-3 rounded-lg mr-4 w-96"
+      className="bg-grey flex flex-col justify-between items-center mt-6 px-4 lg:px-6 py-3 rounded-lg w-72 sm:w-80 lg:w-96"
       data-testid="cardpb"
     >
       <ModalCreatePB show={show} handleClose={hideModal} />

src/components/FormIUMK/FormIUMK1.js

@@ -194,7 +194,7 @@ const FormIUMK1 = ({
       </div>
       <div className="pt-4">
         <button
-          className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit"
+          className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit hover:bg-poporange-hover"
           data-testid="lanjut-button"
           onClick={() => setValue('page', '2')}
         >

src/components/FormIUMK/FormIUMK2.js

@@ -104,7 +104,7 @@ const FormIUMK2 = ({
       </div>
       <div className="pt-4">
         <button
-          className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit"
+          className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit hover:bg-poporange-hover"
           data-testid="lanjut-button"
           onClick={() => setValue('page', '3')}
         >

src/components/FormIUMK/FormIUMK3.js

@@ -80,7 +80,7 @@ const FormIUMK3 = ({data, onSubmit, handleSubmit, konstan, setValue}) => {
         ))}
         <div className="pt-4">
           <button
-            className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit"
+            className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit hover:bg-poporange-hover"
             data-testid="submit-button"
             onClick={() => setValue('page', 'end')}
           >

src/components/Modal/ModalCreatePB.js

@@ -32,7 +32,7 @@ const ModalCreatePB = ({handleClose, show, children}) => {
           <div className="flex flex-row pt-5">
             <Link to="/form-iumk">
               <button
-                className="bg-white px-12 rounded-lg mr-5 border"
+                className="bg-white px-12 rounded-lg mr-5 border hover:bg-blue-50"
                 data-testid="modalpb-umkm"
               >
                 <div className="flex flex-col text-center items-center justify-center">
@@ -43,7 +43,7 @@ const ModalCreatePB = ({handleClose, show, children}) => {
             </Link>
             <Link to="/form-pt">
               <button
-                className="bg-white px-12 rounded-lg border"
+                className="bg-white px-12 rounded-lg border hover:bg-blue-50"
                 data-testid="modalpb-pt"
               >
                 <div className="flex flex-col text-center items-center justify-center">

src/components/Navbar/Navbar.js

@@ -11,6 +11,7 @@ import ServiceDropdown from '../Dropdown/ServiceDropdown'
 
 const Navbar = ({isLoggedIn, name}) => {
   const [dropdown, setDropdown] = useState(false)
+  const [showJasaMobile, setShowJasaMobile] = useState(false)
   const [serviceDropdown, setServiceDropdown] = useState(false)
   const [click, setClick] = useState(false)
   const handleClick = () => {
@@ -35,13 +36,13 @@ const Navbar = ({isLoggedIn, name}) => {
                 <Link to="/register">
                   <button
                     data-testid="daftar-url-link"
-                    className="hidden sm:flex heading-3 text-white bg-poporange py-2 px-12 rounded-lg shadow mr-8 whitespace-nowrap"
+                    className="hidden sm:flex heading-3 text-white bg-poporange py-2 px-12 rounded-lg shadow mr-8 whitespace-nowrap hover:bg-poporange-hover"
                   >
                     Daftarkan Usahamu!
                   </button>
                 </Link>
                 <Link to="/register">
-                  <button className="sm:hidden heading-3 text-white bg-poporange py-2 px-6 rounded-lg shadow mr-8">
+                  <button className="sm:hidden heading-3 text-white bg-poporange py-2 px-6 rounded-lg shadow mr-8 hover:bg-poporange-hover">
                     Daftar
                   </button>
                 </Link>
@@ -129,12 +130,35 @@ const Navbar = ({isLoggedIn, name}) => {
           data-testid="navbar-mobile"
         >
           <li
-            className="py-2 heading-3 flex justify-between"
+            className="py-2 heading-3 flex justify-between cursor-pointer"
             data-testid="jasa-dropdown-mobile"
+            onClick={() => setShowJasaMobile(!showJasaMobile)}
           >
-            <a href="">Jasa</a>
+            Jasa
             <img src={Arrow} />
           </li>
+          {showJasaMobile && (
+            <>
+              <li
+                className="py-2 flex justify-between reguler-text"
+                data-testid="konsultasi-dropdown-mobile"
+              >
+                <Link to="/">Konsultasi</Link>
+              </li>
+              <li
+                className="py-2 flex justify-between reguler-text"
+                data-testid="iumk-dropdown-mobile"
+              >
+                <Link to="/form-iumk">Izin IUMK</Link>
+              </li>
+              <li
+                className="py-2 flex justify-between reguler-text"
+                data-testid="pt-dropdown-mobile"
+              >
+                <Link to="/form-pt">Pendirian PT</Link>
+              </li>
+            </>
+          )}
           <li>
             <a
               href=""
@@ -145,13 +169,13 @@ const Navbar = ({isLoggedIn, name}) => {
             </a>
           </li>
           <li>
-            <a
-              href=""
+            <Link
+              to="/riwayat"
               className="flex py-2 heading-3"
               data-testid="riwayat-url-link"
             >
               Riwayat
-            </a>
+            </Link>
           </li>
           <li
             onClick={toggleDropdown}

src/components/Navbar/Navbar.test.js

@@ -75,3 +75,15 @@ test('can click service dropdown', () => {
 
   fireEvent.click(screen.getByTestId('jasa-dropdown'))
 })
+
+test('can click show jasa mobile dropdown and show jasa elements', () => {
+  const store = makeTestStore()
+
+  testRender(<Navbar isLoggedIn name="a@gmail.com" />, {store})
+
+  fireEvent.click(screen.getByTestId('hamburger'))
+
+  fireEvent.click(screen.getByTestId('jasa-dropdown-mobile'))
+
+  expect(screen.getByTestId('pt-dropdown-mobile')).toBeInTheDocument()
+})

src/components/Registrasi/Register.js

@@ -298,7 +298,7 @@ const Register = () => {
               </p>
               <div className="pt-4 flex flex-col">
                 <button
-                  className="bg-poporange text-white heading-3 px-4 py-2.5 shadow rounded-lg submit"
+                  className="bg-poporange text-white heading-3 px-4 py-2.5 shadow rounded-lg submit hover:bg-poporange-hover"
                   data-testid="daftar"
                 >
                   Daftar

src/pages/FormPendirianPT.js

@@ -16,7 +16,7 @@ import {useForm} from 'react-hook-form'
 import axios from 'axios'
 import BASE_URL from '../api/config'
 
-import {navigate, Link} from '@reach/router'
+import {navigate} from '@reach/router'
 import toast, {Toaster} from 'react-hot-toast'
 
 const FormPendirianPT = () => {
@@ -93,23 +93,29 @@ const FormPendirianPT = () => {
 
   useEffect(() => {
     if (loggedIn) {
-      navigate('/form-pt')
+      navigate('/form-pt', {replace: true})
     } else {
-      navigate('/login')
+      navigate('/login', {replace: true})
     }
     // eslint-disable-next-line
   }, [])
 
+  const navigateToPrevious = () => {
+    navigate(-1)
+  }
+
   return (
     <div>
       <Navbar isLoggedIn={loggedIn} name={name} />
       <div className="bg-lightgrey px-4 lg:px-2 xl:px-2 2xl:px-2 py-2 md:py-6">
         <div className="flex flex-row items-center mt-24 sm:ml-2 lg:ml-40">
-          <Link to="/">
-            <button className="text-lg text-black bg-gray-300 font-Lato py-0 h-9 w-9 md:h-12 md:w-12 md:py-2 rounded-full">
-              &larr;
-            </button>
-          </Link>
+          <button
+            className="text-lg text-black bg-gray-300 font-Lato py-0 h-9 w-9 md:h-12 md:w-12 md:py-2 rounded-full hover:bg-gray-400"
+            onClick={navigateToPrevious}
+            data-testid="navigate-previous-pt"
+          >
+            &larr;
+          </button>
           <p className="heading-3 sm:heading-2 px-4">Pendirian PT</p>
         </div>
         <Stepper

src/pages/FormPendirianPT.test.js

@@ -36,7 +36,7 @@ test('renders form Element', () => {
   testRender(<FormPendirianPT />, {store})
 
   expect(navigate).toHaveBeenCalledTimes(1)
-  expect(navigate).toHaveBeenCalledWith('/form-pt')
+  expect(navigate).toHaveBeenCalledWith('/form-pt', {replace: true})
 })
 
 test('renders lanjut button changes form page', async () => {
@@ -227,3 +227,13 @@ test('show error toast if there is an error from backend', async () => {
   const toastError = await screen.findByTestId('toast-error')
   expect(toastError).toBeInTheDocument()
 })
+
+test('can click navigate for previous page in back button', () => {
+  const store = makeTestStore()
+  store.dispatch(login(fixtureSet))
+  testRender(<FormPendirianPT />, {store})
+
+  expect(screen.getByTestId('navigate-previous-pt')).toBeInTheDocument()
+  userEvent.click(screen.getByTestId('navigate-previous-pt'))
+  expect(navigate).toHaveBeenCalledTimes(2)
+})

src/pages/formPTRedirect.test.js

@@ -13,5 +13,5 @@ test('redirects to login if not login', () => {
 
   testRender(<FormPendirianPT />, {store})
   expect(navigate).toHaveBeenCalledTimes(1)
-  expect(navigate).toHaveBeenCalledWith('/login')
+  expect(navigate).toHaveBeenCalledWith('/login', {replace: true})
 })

src/pages/formiumk.js

@@ -16,7 +16,7 @@ import {useForm} from 'react-hook-form'
 import axios from 'axios'
 import BASE_URL from '../api/config'
 
-import {navigate, Link} from '@reach/router'
+import {navigate} from '@reach/router'
 import toast, {Toaster} from 'react-hot-toast'
 
 const FormIUMK = () => {
@@ -91,23 +91,29 @@ const FormIUMK = () => {
 
   useEffect(() => {
     if (loggedIn) {
-      navigate('/form-iumk')
+      navigate('/form-iumk', {replace: true})
     } else {
-      navigate('/login')
+      navigate('/login', {replace: true})
     }
     // eslint-disable-next-line
   }, [])
 
+  const navigateToPrevious = () => {
+    navigate(-1)
+  }
+
   return (
     <div>
       <Navbar isLoggedIn={loggedIn} name={email} />
       <div className="bg-lightgrey px-4 lg:px-2 xl:px-2 2xl:px-2 py-2 md:py-6">
         <div className="flex flex-row items-center mt-24 sm:ml-2 lg:ml-40">
-          <Link to="/">
-            <button className="text-lg text-black bg-gray-300 font-Lato py-0 h-9 w-9 md:h-12 md:w-12 md:py-2 rounded-full">
-              &larr;
-            </button>
-          </Link>
+          <button
+            className="text-lg text-black bg-gray-300 font-Lato py-0 h-9 w-9 md:h-12 md:w-12 md:py-2 rounded-full hover:bg-gray-400"
+            onClick={navigateToPrevious}
+            data-testid="navigate-previous-iumk"
+          >
+            &larr;
+          </button>
           <p className="heading-3 sm:heading-2 px-4">Izin UMK</p>
         </div>
         <Stepper

src/pages/formiumk.test.js

@@ -36,7 +36,7 @@ test('renders form Element', () => {
   testRender(<FormIUMK />, {store})
 
   expect(navigate).toHaveBeenCalledTimes(1)
-  expect(navigate).toHaveBeenCalledWith('/form-iumk')
+  expect(navigate).toHaveBeenCalledWith('/form-iumk', {replace: true})
 })
 
 test('renders lanjut button changes form page', async () => {
@@ -225,3 +225,13 @@ test('show error toast if there is an error from backend', async () => {
   const toastError = await screen.findByTestId('toast-error')
   expect(toastError).toBeInTheDocument()
 })
+
+test('can click navigate for previous page in back button', () => {
+  const store = makeTestStore()
+  store.dispatch(login(fixtureSet))
+  testRender(<FormIUMK />, {store})
+
+  expect(screen.getByTestId('navigate-previous-iumk')).toBeInTheDocument()
+  userEvent.click(screen.getByTestId('navigate-previous-iumk'))
+  expect(navigate).toHaveBeenCalledTimes(2)
+})

src/pages/formiumkRedirect.test.js

@@ -13,5 +13,5 @@ test('redirects to login if not login', () => {
 
   testRender(<FormIUMK />, {store})
   expect(navigate).toHaveBeenCalledTimes(1)
-  expect(navigate).toHaveBeenCalledWith('/login')
+  expect(navigate).toHaveBeenCalledWith('/login', {replace: true})
 })

src/pages/riwayat.js

@@ -64,14 +64,14 @@ const Riwayat = () => {
   return (
     <div>
       <Navbar isLoggedIn={loggedIn} name={name} />
-      <div className="App bg-lightgrey min-h-screen pt-16 px-6 xl:px-60">
-        <div className="mx-auto w-max">
+      <div className="App bg-lightgrey min-h-screen pt-16 px-6 xl:px-60 justify-items-center">
+        <div className="mx-auto w-auto sm:w-max">
           <p className="heading-1 pt-14 pb-8">Riwayat</p>
           <Tab tabs={tabs} page={currentPage} setPage={setCurrentPage} />
 
-          <div className="grid grid-cols-1 lg:grid-cols-2 lg:gap-4 py-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 py-6 justify-items-center">
             <CardProyekBaru />
-            {data?.length >= 0 ? (
+            {data?.length ? (
               data.map((value, index) => (
                 <CardPesanan
                   index={index}
@@ -79,7 +79,7 @@ const Riwayat = () => {
                   kode={value.id}
                   type={value.type}
                   nama={value.nama_usaha}
-                  harga="8.000.000"
+                  harga="8.500.000"
                   waktu="19"
                   status={value.status}
                 />