diff --git a/src/page/Keranjang/Keranjang.js b/src/page/Keranjang/Keranjang.js index 8d062f94b3acdb9e1fe747c673979db5453c2934..72d559d54c7dddc3c0a6df53d5e2ff9b3f28ad79 100644 --- a/src/page/Keranjang/Keranjang.js +++ b/src/page/Keranjang/Keranjang.js @@ -38,6 +38,29 @@ const Keranjang = ({ isAuthenticated, userData }) => { fetchKeranjang(); }, []); + function getListItemChecked() { + var listItemId = []; + let checkboxes = document.getElementsByTagName("input"); + for(var checkbox of checkboxes) { + if (checkbox.checked) { + if (checkbox.getAttribute("id-item") !== null) { + var itemId = parseInt(checkbox.getAttribute("id-item")); + listItemId.push(itemId); + } + } + } + return listItemId; + } + + const handleBuatPesanan = () => { + var listItemId = getListItemChecked(); + if (listItemId.length === 0) { + alert('Belum ada item yang Anda pilih') + } else { + console.log(listItemId); + } + } + function groupBy(items) { return items.reduce((acc, curr) => { const { id } = curr.produk.supplier; @@ -184,7 +207,7 @@ const Keranjang = ({ isAuthenticated, userData }) => { <h5>Total harga: <span className="mi-red"><b>Rp {totalHarga.toLocaleString()}</b></span></h5> </div> <div className="col-4 keranjang-btn"> - <button className="wkd-nav-button wkd-tosca-button">Buat Pesanan</button> + <button className="wkd-nav-button wkd-tosca-button" data-testid="buat-pesanan" onClick={() => handleBuatPesanan()}>Buat Pesanan</button> </div> </div> </div> diff --git a/src/page/Keranjang/Keranjang.test.js b/src/page/Keranjang/Keranjang.test.js index 016ffea338b75e5f5a502f8244db5f151fb6b650..78782d7aca5d7ced60af52ca72ec6a116464d34b 100644 --- a/src/page/Keranjang/Keranjang.test.js +++ b/src/page/Keranjang/Keranjang.test.js @@ -177,6 +177,39 @@ describe('<Keranjang />', () => { }); }, 20000); + test('button buat pesanan works', async () => { + const mockUser = jest.fn() + + const initialState = { + auth: { + isAuthenticated: true, + user: { + id: 1, + role: "Mitra" + } + } + } + localStorage.setItem('access', 'token') + + mock.onGet(`${process.env.REACT_APP_BACKEND_API_URL}/api/keranjang`, config).reply(200, keranjangData); + + const store = mockStore(initialState) + + const { getByTestId } = render( + <Provider store={store}> + <BrowserRouter> + <Keranjang user={mockUser} /> + </BrowserRouter> + </Provider>); + + await waitFor(() => { + const semuaCheckbox = getByTestId('semua'); + userEvent.click(semuaCheckbox); + const btnBuatPesanan = getByTestId('buat-pesanan'); + userEvent.click(btnBuatPesanan); + }); + }, 20000); + it('renders and fetches keranjang empty', async () => { const mockUser = jest.fn() @@ -245,6 +278,42 @@ describe('<Keranjang />', () => { }); }, 20000); + it('display alert when no item is checked button buat pesanan', async () => { + const mockUser = jest.fn() + + const initialState = { + auth: { + isAuthenticated: true, + user: { + id: 1, + role: "Mitra" + } + } + } + localStorage.setItem('access', 'token') + + const alert = jest.spyOn(window, 'alert'); + alert.mockImplementation(() => {}); + + mock.onGet(`${process.env.REACT_APP_BACKEND_API_URL}/api/keranjang`, config).reply(200, keranjangData); + + const store = mockStore(initialState) + + const { getByTestId } = render( + <Provider store={store}> + <BrowserRouter> + <Keranjang user={mockUser} /> + </BrowserRouter> + </Provider>); + + await waitFor(() => { + const btnBuatPesanan = getByTestId('buat-pesanan'); + userEvent.click(btnBuatPesanan); + expect(alert).toHaveBeenCalled(); + alert.mockRestore(); + }); + }, 20000); + test('kembali button work correctly', () => { const mockUser = jest.fn() const mockAuthenticate = jest.fn()