[GREEN] fix testing in kode klbi validation

src/components/Dropdown/EmployeeDropdown.js

@@ -4,7 +4,7 @@ import DropdownArrow from '../../assets/dropdown.svg'
 import {dataEmployee} from '../../data/employee'
 import PropTypes from 'prop-types'
 
-const EmployeeDropdown = ({setEmployeeData, defaultValue}) => {
+const EmployeeDropdown = ({setEmployeeData, defaultValue, dataTestId}) => {
   const [selectedValue, setSelectedValue] = useState(defaultValue)
   const [showDropdown, setShowDropdown] = useState(false)
 
@@ -19,6 +19,7 @@ const EmployeeDropdown = ({setEmployeeData, defaultValue}) => {
       <div
         className="flex flex-row items-center justify-between py-1.5 px-2 bg-white md:mr-64 lg:mr-64 xl:mr-64 2xl:mr-64 px-4 mr-24 py-2.5 border-2 border-grey rounded-lg"
         onClick={() => setShowDropdown(!showDropdown)}
+        data-testid={dataTestId}
       >
         <div className="flex flex-row items-center">
           <img src={DropdownIcon} className="mr-3" />
@@ -53,6 +54,7 @@ const EmployeeDropdown = ({setEmployeeData, defaultValue}) => {
 EmployeeDropdown.propTypes = {
   setEmployeeData: PropTypes.func,
   defaultValue: PropTypes.string,
+  dataTestId: PropTypes.string,
 }
 
 export default EmployeeDropdown

src/components/FormIUMK/FormIUMK2.js

@@ -44,34 +44,33 @@ const FormIUMK2 = ({
           <EmployeeDropdown
             setEmployeeData={setEmployeeData}
             defaultValue={data.karyawan}
-            data-testid="form-iumk-2-dropdown"
+            dataTestId="form-iumk-2-dropdown"
           />
         </div>
         <div className="flex flex-col pb-6" data-testid="form-iumk-2-kode-kbli">
-          <label className="mb-2 heading-3 text-black">
+          <label className="mb-2 heading-3 text-black" htmlFor="kode-klbi">
             Kode KBLI
             <span className="medium-text text-black ml-1">(opsional)</span>
           </label>
           <input
             className="md:mr-64 lg:mr-64 xl:mr-64 2xl:mr-64 px-4 mr-24 py-2.5 border-2 border-grey rounded"
             placeholder="Tulis Kode KBLI disini"
+            id="kode-klbi"
             name="kbli"
             ref={register({
               required: false,
               minLength: {
                 value: 5,
-                message:
-                  'Kode KBLI harus terdiri dari 5 angka',
+                message: 'Kode KBLI harus terdiri dari 5 angka',
               },
               maxLength: {
                 value: 5,
-                message:
-                  'Kode KBLI harus terdiri dari 5 angka',
+                message: 'Kode KBLI harus terdiri dari 5 angka',
               },
               pattern: {
                 value: /^\d+$/,
                 message: 'Kode KBLI hanya boleh mengandung angka',
-              },              
+              },
             })}
             defaultValue={data.kbli}
           />

src/components/FormIUMK/FormIUMK2.test.js

@@ -41,21 +41,37 @@ test('kode KBLI error if length is not five', async () => {
 
   testRender(<FormIUMK />, {store})
 
-  userEvent.selectOptions(screen.getByTestId('form-iumk-2-dropdown'), '1-10')
-  expect(screen.getByTestId('form-iumk-2-dropdown')).toHaveValue('1-10')
+  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',
+  )
+
+  let lanjutButton = screen.getByTestId('lanjut-button')
+  fireEvent.click(lanjutButton)
+
+  await waitForElementToBeRemoved(() => screen.getByTestId('form-1-nama-field'))
+
+  userEvent.click(screen.getByTestId('form-iumk-2-dropdown'))
 
   const kodeKbliInput = screen.getByLabelText(/Kode KBLI/i)
   fireEvent.change(kodeKbliInput, {
     target: {value: '111044'},
   })
 
-  const lanjutButton = screen.getByTestId('lanjut-button')
+  lanjutButton = screen.getByTestId('lanjut-button')
   fireEvent.click(lanjutButton)
 
   await waitFor(() => {
-    expect(screen.getByText(/Kode KBLI harus terdiri dari 5 angka/i)).toBeInTheDocument()
+    expect(
+      screen.getByText(/Kode KBLI harus terdiri dari 5 angka/i),
+    ).toBeInTheDocument()
   })
-
 })
 
 test('kode KBLI error if contains character other than number', async () => {
@@ -63,19 +79,36 @@ test('kode KBLI error if contains character other than number', async () => {
 
   testRender(<FormIUMK />, {store})
 
-  userEvent.selectOptions(screen.getByTestId('form-iumk-2-dropdown'), '1-10')
-  expect(screen.getByTestId('form-iumk-2-dropdown')).toHaveValue('1-10')
+  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',
+  )
+
+  let lanjutButton = screen.getByTestId('lanjut-button')
+  fireEvent.click(lanjutButton)
+
+  await waitForElementToBeRemoved(() => screen.getByTestId('form-1-nama-field'))
+
+  userEvent.click(screen.getByTestId('form-iumk-2-dropdown'))
+  userEvent.click(screen.getByText(/Individual/i))
 
   const kodeKbliInput = screen.getByLabelText(/Kode KBLI/i)
   fireEvent.change(kodeKbliInput, {
     target: {value: '111ab'},
   })
 
-  const lanjutButton = screen.getByTestId('lanjut-button')
+  lanjutButton = screen.getByTestId('lanjut-button')
   fireEvent.click(lanjutButton)
 
   await waitFor(() => {
-    expect(screen.getByText(/Kode KBLI hanya boleh mengandung angka/i)).toBeInTheDocument()
+    expect(
+      screen.getByText(/Kode KBLI hanya boleh mengandung angka/i),
+    ).toBeInTheDocument()
   })
-
 })