[RED] test formiumk when connected to backend

src/pages/formiumk.test.js

@@ -6,6 +6,22 @@ import {
 import FormIUMK from './formiumk'
 import {testRender, makeTestStore, fixtureSet} from '../testUtils'
 import userEvent from '@testing-library/user-event'
+import {rest} from 'msw'
+import {setupServer} from 'msw/node'
+import BASE_URL from '../api/config'
+
+const server = setupServer(
+  rest.post(`${BASE_URL.API_BASE_URL}/api/v1/iumk/`, (req, res, ctx) => {
+    return res(
+      ctx.status(200),
+      ctx.json({message: 'Pengajuan Izin UMK berhasil terkirim'}),
+    )
+  }),
+)
+
+beforeEach(() => server.listen())
+afterEach(() => server.resetHandlers())
+afterEach(() => server.close())
 
 test('renders Navbar Element', () => {
   const store = makeTestStore(fixtureSet)
@@ -87,3 +103,61 @@ test('renders submit button at page 3', async () => {
   expect(screen.getByTestId('form-iumk-3')).toBeInTheDocument()
   expect(screen.getByTestId('submit-button')).toBeInTheDocument()
 })
+
+test('show error toast if there is an error from backend', async () => {
+  server.use(
+    rest.post(`${BASE_URL.API_BASE_URL}/api/v1/iumk/`, (req, res, ctx) => {
+      return res(
+        ctx.status(400),
+        ctx.json({non_field_errors: 'Kode KBLI hanya boleh mengandung angka!'}),
+      )
+    }),
+  )
+  const store = makeTestStore()
+  testRender(<FormIUMK />, {store})
+  expect(screen.getByTestId('form-iumk-1')).toBeInTheDocument()
+
+  userEvent.type(screen.getByTestId('form-1-nama-field'), 'pt ABC')
+  userEvent.click(screen.getByTestId('form-1-status-pt'))
+  userEvent.type(
+    screen.getByTestId('form-1-alamat-field'),
+    'Jl. TB Simatupang No. 5 Ragunan, Pasar Minggu Jakarta 12550',
+  )
+  userEvent.type(
+    screen.getByTestId('form-1-barang-jasa-field'),
+    'Travel Agency',
+  )
+
+  expect(screen.getByTestId('form-1-nama-field')).toHaveValue('pt ABC')
+  expect(screen.getByTestId('form-1-status-pt')).toBeChecked()
+  expect(screen.getByTestId('form-1-alamat-field')).toHaveValue(
+    'Jl. TB Simatupang No. 5 Ragunan, Pasar Minggu Jakarta 12550',
+  )
+  expect(screen.getByTestId('form-1-barang-jasa-field')).toHaveValue(
+    'Travel Agency',
+  )
+
+  let lanjutButton = screen.getByTestId('lanjut-button')
+  fireEvent.click(lanjutButton)
+
+  await waitForElementToBeRemoved(() => screen.getByTestId('form-1-nama-field'))
+
+  const formIumk2 = screen.getByTestId('form-iumk-2')
+  expect(formIumk2).toBeInTheDocument()
+
+  userEvent.type(screen.getByTestId('form-iumk-2-kode-kbli'), 'AB123')
+
+  lanjutButton = screen.getByTestId('lanjut-button')
+  fireEvent.click(lanjutButton)
+
+  await waitForElementToBeRemoved(() =>
+    screen.getByTestId('form-iumk-2-kode-kbli'),
+  )
+  expect(screen.getByTestId('form-iumk-3')).toBeInTheDocument()
+
+  const submitButton = screen.getByTestId('submit-button')
+  fireEvent.click(submitButton)
+
+  const toastError = await screen.findByTestId('toast-error')
+  expect(toastError).toBeInTheDocument()
+})