From d81c8b17bd6c46f969348f3caf7e9a89d6f8597f Mon Sep 17 00:00:00 2001
From: Fairuz <fairuz.tester@gmail.com>
Date: Sat, 23 Apr 2022 16:14:55 +0800
Subject: [PATCH 1/3] Laravel dusk implementation for testing

---
  phpunit.dusk.xml                             |  4 ++
 composer.json                                 |  3 +-
 .../accounts/forms/LoginFormComponent.vue     |  8 +--
 tests/Browser/CreateBooking.php               | 23 ++++++++
 tests/Browser/ExampleTest.php                 | 28 +++++++++
 tests/Browser/Pages/HomePage.php              | 41 +++++++++++++
 tests/Browser/Pages/Page.php                  | 20 +++++++
 tests/Browser/console/.gitignore              |  2 +
 tests/Browser/screenshots/.gitignore          |  2 +
 tests/Browser/source/.gitignore               |  2 +
 tests/DuskTestCase.php                        | 59 +++++++++++++++++++
 11 files changed, 187 insertions(+), 5 deletions(-)
 create mode 100644  phpunit.dusk.xml
 create mode 100644 tests/Browser/CreateBooking.php
 create mode 100644 tests/Browser/ExampleTest.php
 create mode 100644 tests/Browser/Pages/HomePage.php
 create mode 100644 tests/Browser/Pages/Page.php
 create mode 100644 tests/Browser/console/.gitignore
 create mode 100644 tests/Browser/screenshots/.gitignore
 create mode 100644 tests/Browser/source/.gitignore
 create mode 100644 tests/DuskTestCase.php

diff --git a/ phpunit.dusk.xml b/ phpunit.dusk.xml
new file mode 100644
index 00000000..40848a84
--- /dev/null
+++ b/ phpunit.dusk.xml	
@@ -0,0 +1,4 @@
+<php>
+    <ini name="display_errors" value="On" />
+    <ini name="display_startup_errors" value="On" />
+</php>
diff --git a/composer.json b/composer.json
index 32f52d83..32305073 100644
--- a/composer.json
+++ b/composer.json
@@ -10,7 +10,7 @@
     "require": {
         "php": "^7.2.5",
         "ext-fileinfo": "*",
-        "ext-json": "^1.6",
+        "ext-json": "*",
         "ext-zip": "*",
         "barryvdh/laravel-dompdf": "^0.9.0",
         "carlos-meneses/laravel-mpdf": "^2.1",
@@ -31,6 +31,7 @@
     "require-dev": {
         "facade/ignition": "^2.0",
         "fzaninotto/faker": "^1.9.1",
+        "laravel/dusk": "^6.23",
         "mockery/mockery": "^1.3.1",
         "nunomaduro/collision": "^4.1",
         "phpunit/phpunit": "^8.5"
diff --git a/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue b/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue
index ed097c68..5ddfdadb 100644
--- a/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue
+++ b/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue
@@ -7,13 +7,13 @@
                     <validation-wrapper-component class="m-b-15" :validator="$v.parameters.email">
                         <label class="text-primary">Email Address</label>
                         <div class="controls">
-                            <input type="text" class="form-control fs-12" v-model.trim="parameters.email">
+                            <input id="email" name="email" type="text" class="form-control fs-12" v-model.trim="parameters.email">
                         </div>
                     </validation-wrapper-component>
                     <validation-wrapper-component :validator="$v.parameters.password">
                         <label class="text-primary">Password</label>
                         <div class="controls">
-                            <input type="password" class="form-control fs-12" v-model="parameters.password">
+                            <input id="password" name="password" type="password" class="form-control fs-12" v-model="parameters.password">
                         </div>
                     </validation-wrapper-component>
                     <div class="row m-t-15 align-items-center justify-content-center">
@@ -21,7 +21,7 @@
                             <p class="muted fs-11 font-arial m-b-0 pointer" @click="$store.dispatch('toggleSection', {name: 'forgetPassword', status: true})">Forgot password?</p>
                         </div>
                         <div class="col text-right">
-                            <div class="btn btn-sm p-l-30 p-r-30 btn-primary bold v-align-middle b-rad-none all-caps" @click="submitForm">Sign In</div>
+                            <div class="btn btn-sm p-l-30 p-r-30 btn-primary bold v-align-middle b-rad-none all-caps" @click="submitForm" id="sign-in">Sign In</div>
                         </div>
                     </div>
                 </div>
@@ -55,4 +55,4 @@
         mixins: [loginFormValidation]
     }
 
-</script>
\ No newline at end of file
+</script>
diff --git a/tests/Browser/CreateBooking.php b/tests/Browser/CreateBooking.php
new file mode 100644
index 00000000..e7391624
--- /dev/null
+++ b/tests/Browser/CreateBooking.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Tests\Browser;
+
+use Illuminate\Foundation\Testing\DatabaseMigrations;
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+
+class CreateBooking extends DuskTestCase
+{
+    /**
+     * A Dusk test example.
+     *
+     * @test
+     */
+    public function testCreateBooking()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('/')
+                    ->assertSee('Laravel');
+        });
+    }
+}
diff --git a/tests/Browser/ExampleTest.php b/tests/Browser/ExampleTest.php
new file mode 100644
index 00000000..37f076bd
--- /dev/null
+++ b/tests/Browser/ExampleTest.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace Tests\Browser;
+
+use Illuminate\Foundation\Testing\DatabaseMigrations;
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+
+class ExampleTest extends DuskTestCase
+{
+    /**
+     * A basic browser test example.
+     *
+     * @return void
+     */
+    public function testBasicExample()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('http://localhost:86')
+                    ->pause(500)
+                    ->type('email', 'junkit.mah@bioloop.com.my')
+                    ->type('password', '123456abcabc')
+                    ->click('#sign-in')
+                    ->pause(5000)
+                    ->assertPathIs('/dashboard');
+        });
+    }
+}
diff --git a/tests/Browser/Pages/HomePage.php b/tests/Browser/Pages/HomePage.php
new file mode 100644
index 00000000..26bf174f
--- /dev/null
+++ b/tests/Browser/Pages/HomePage.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Tests\Browser\Pages;
+
+use Laravel\Dusk\Browser;
+
+class HomePage extends Page
+{
+    /**
+     * Get the URL for the page.
+     *
+     * @return string
+     */
+    public function url()
+    {
+        return '/';
+    }
+
+    /**
+     * Assert that the browser is on the page.
+     *
+     * @param  \Laravel\Dusk\Browser  $browser
+     * @return void
+     */
+    public function assert(Browser $browser)
+    {
+        //
+    }
+
+    /**
+     * Get the element shortcuts for the page.
+     *
+     * @return array
+     */
+    public function elements()
+    {
+        return [
+            '@element' => '#selector',
+        ];
+    }
+}
diff --git a/tests/Browser/Pages/Page.php b/tests/Browser/Pages/Page.php
new file mode 100644
index 00000000..f8d76222
--- /dev/null
+++ b/tests/Browser/Pages/Page.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace Tests\Browser\Pages;
+
+use Laravel\Dusk\Page as BasePage;
+
+abstract class Page extends BasePage
+{
+    /**
+     * Get the global element shortcuts for the site.
+     *
+     * @return array
+     */
+    public static function siteElements()
+    {
+        return [
+            '@element' => '#selector',
+        ];
+    }
+}
diff --git a/tests/Browser/console/.gitignore b/tests/Browser/console/.gitignore
new file mode 100644
index 00000000..d6b7ef32
--- /dev/null
+++ b/tests/Browser/console/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/tests/Browser/screenshots/.gitignore b/tests/Browser/screenshots/.gitignore
new file mode 100644
index 00000000..d6b7ef32
--- /dev/null
+++ b/tests/Browser/screenshots/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/tests/Browser/source/.gitignore b/tests/Browser/source/.gitignore
new file mode 100644
index 00000000..d6b7ef32
--- /dev/null
+++ b/tests/Browser/source/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
diff --git a/tests/DuskTestCase.php b/tests/DuskTestCase.php
new file mode 100644
index 00000000..2aabaad9
--- /dev/null
+++ b/tests/DuskTestCase.php
@@ -0,0 +1,59 @@
+<?php
+
+namespace Tests;
+
+use Facebook\WebDriver\Chrome\ChromeOptions;
+use Facebook\WebDriver\Remote\DesiredCapabilities;
+use Facebook\WebDriver\Remote\RemoteWebDriver;
+use Laravel\Dusk\TestCase as BaseTestCase;
+
+abstract class DuskTestCase extends BaseTestCase
+{
+    use CreatesApplication;
+
+    /**
+     * Prepare for Dusk test execution.
+     *
+     * @beforeClass
+     * @return void
+     */
+    public static function prepare()
+    {
+        if (! static::runningInSail()) {
+            static::startChromeDriver();
+        }
+    }
+
+    /**
+     * Create the RemoteWebDriver instance.
+     *
+     * @return \Facebook\WebDriver\Remote\RemoteWebDriver
+     */
+    protected function driver()
+    {
+        $options = (new ChromeOptions)->addArguments([
+            '--no-sandbox'
+        ]);
+
+
+        return RemoteWebDriver::create(
+            //'http://localhost:86',
+            'http://localhost:9515',
+            DesiredCapabilities::chrome()->setCapability(
+                ChromeOptions::CAPABILITY, $options
+            )
+        );
+    }
+
+    /**
+     * Determine whether the Dusk command has disabled headless mode.
+     *
+     * @return bool
+     */
+    protected function hasHeadlessDisabled()
+    {
+        return true;
+                //isset($_SERVER['DUSK_HEADLESS_DISABLED']) ||
+                //isset($_ENV['DUSK_HEADLESS_DISABLED']);
+    }
+}

From dc69314eee09d5d6e3bd729b7889a124f5f74077 Mon Sep 17 00:00:00 2001
From: Fairuz <fairuz.tester@gmail.com>
Date: Mon, 25 Apr 2022 05:12:03 +0800
Subject: [PATCH 2/3] Create booking test

---
  phpunit.dusk.xml                             | 12 ++++++++
 .../elements/BookingConfirmationComponent.vue |  6 ++--
 .../bookings/forms/BookingFormComponent.vue   |  4 +--
 .../forms/CurrencyConverterComponent.vue      |  4 +--
 .../forms/PurchaseOrderFormComponent.vue      | 18 ++++++------
 .../forms/PurchaseOrderItemFormComponent.vue  | 14 +++++-----
 .../forms/confirmBookingComponent.vue         |  6 ++--
 tests/Browser/CreateBooking.php               | 23 ---------------
 tests/Browser/ExampleTest.php                 | 28 -------------------
 9 files changed, 38 insertions(+), 77 deletions(-)
 delete mode 100644 tests/Browser/CreateBooking.php
 delete mode 100644 tests/Browser/ExampleTest.php

diff --git a/ phpunit.dusk.xml b/ phpunit.dusk.xml
index 40848a84..db1abe1e 100644
--- a/ phpunit.dusk.xml	
+++ b/ phpunit.dusk.xml	
@@ -1,4 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <php>
     <ini name="display_errors" value="On" />
     <ini name="display_startup_errors" value="On" />
 </php>
+    <phpunit
+            colors="true"
+    >
+        <testsuites>
+            <testsuite name="dryrun">
+               <directory suffix="php">./tests/Browser/DryRun/</directory>
+            </testsuite>
+        </testsuites>
+    </phpunit>
+
+
diff --git a/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue b/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
index f08ea597..26c036b7 100644
--- a/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/BookingConfirmationComponent.vue
@@ -100,7 +100,7 @@
                                             </div>
                                             <div class="row" v-show="!createBank">
                                                 <div class="col-7 p-r-0">
-                                                    <div class="row">
+                                                    <div class="row" id="select-list" name="select-list">
                                                         <div class="col">
                                                             <div class="form-group no-margin form-group-default">
                                                                 <label>{{ data.serviceType.id === 4 ? 'Alipay recipient Email / Phone' : 'Account No.' }}</label>
@@ -115,7 +115,7 @@
                                                                     <div class="row text-left no-margin bg-white">
                                                                         <div class="col no-padding">
                                                                             <div class="row no-margin"  v-for="bank in data.recipientBanks.filter(AccountNumber)" v-bind:key="bank.id" >
-                                                                                <div class="col b-b b-grey p-t-10 p-b-10 pointer  p-t-10 p-b-10" :class="[{'bg-master-lightest': parameters.bankAccount.id === bank.id}, {'text-master': parameters.bankAccount.id === bank.id}, {'hover-primary': parameters.bankAccount.id !== bank.id}, {'pointer': parameters.bankAccount.id !== bank.id}]" @click="selectBank(bank)">
+                                                                                <div id="select-option" name="select-option" class="col b-b b-grey p-t-10 p-b-10 pointer  p-t-10 p-b-10" :class="[{'bg-master-lightest': parameters.bankAccount.id === bank.id}, {'text-master': parameters.bankAccount.id === bank.id}, {'hover-primary': parameters.bankAccount.id !== bank.id}, {'pointer': parameters.bankAccount.id !== bank.id}]" @click="selectBank(bank)">
                                                                                     <div class="row align-items-center justify-content-center">
                                                                                         <div class="col">
                                                                                             <div class="row">
@@ -320,4 +320,4 @@
         },
         mixins: [FormHandler]
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
index 57cbe49e..4ce30e7d 100644
--- a/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/BookingFormComponent.vue
@@ -133,7 +133,7 @@
                                     </div>
                                     <div class="row p-b-15" v-if="(summary.calculation.total > 0 && (data.status === 1 || data.status === 2)) || ($store.getters.isAdmin && summary.calculation.total > 0)">
                                         <div class="col">
-                                            <div class="btn btn-sm btn-block btn-success b-rad-none shadow-sm pointer requestModal" data-type="transferSummary" >Transfer Now</div>
+                                            <div class="btn btn-sm btn-block btn-success b-rad-none shadow-sm pointer requestModal" data-type="transferSummary" id="transfer-now" name="transfer-now">Transfer Now</div>
                                         </div>
                                     </div>
                                     <div class="row"  v-if="summary.calculation.total > 0 && data.status === 0">
@@ -152,7 +152,7 @@
                                             </modal-component>
                                         </div>
                                     </div>
-                                    <modal-component v-if="summary.calculation.total > 0" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="transferSummary" size="large">
+                                    <modal-component id="select-account-modal" v-if="summary.calculation.total > 0" class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="transferSummary" size="large">
                                         <booking-confirmation-component :data="summary" :section="section"></booking-confirmation-component>
                                     </modal-component>
                                 </div>
diff --git a/resources/assets/vue/components/bookings/forms/CurrencyConverterComponent.vue b/resources/assets/vue/components/bookings/forms/CurrencyConverterComponent.vue
index a9b0ba80..6e21140f 100644
--- a/resources/assets/vue/components/bookings/forms/CurrencyConverterComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/CurrencyConverterComponent.vue
@@ -17,7 +17,7 @@
                         <div class="col no-padding">
                             <div class="form-group form-group-default m-b-0">
                                 <label>Recipient Gets</label>
-                                <input type="text" placeholder="0.00" value="0" class="form-control" v-model="recipientInput" @keyup="updateAmount($event, 1)" v-money="money">
+                                <input id="cc_get" name="cc_get" type="text" placeholder="0.00" value="0" class="form-control" v-model="recipientInput" @keyup="updateAmount($event, 1)" v-money="money">
                             </div>
                         </div>
                         <div class="col-auto bg-primary text-white">
@@ -111,7 +111,7 @@
                         <div class="col no-padding">
                             <div class="form-group form-group-default m-b-0">
                                 <label>You'r Sending</label>
-                                <input type="text" placeholder="0.00" value="0.00" v-model="senderInput" class="form-control"  @keyup="updateAmount($event, 0)"  v-money="money">
+                                <input id="cc_sending" name="cc_sending" type="text" placeholder="0.00" value="0.00" v-model="senderInput" class="form-control"  @keyup="updateAmount($event, 0)"  v-money="money">
                             </div>
                         </div>
                         <div class="col-auto bg-primary text-white">
diff --git a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
index cde4d84d..0608fcb2 100644
--- a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
@@ -23,13 +23,13 @@
                                         <div class="col-sm-12 col-md-4 pr-md-1">
                                             <div class="form-group form-group-default b-rad-none">
                                                 <label>Stock Code</label>
-                                                <input type="text" class="form-control b-rad-none" v-model="product.stockCode" />
+                                                <input id="stock_code" name="stock_code" type="text" class="form-control b-rad-none" v-model="product.stockCode" />
                                             </div>
                                         </div>
                                         <div class="col-sm-12 col-md pl-md-1">
                                             <div class="form-group form-group-default b-rad-none required">
                                                 <label>description</label>
-                                                <input class="form-control b-rad-none" rows="1" @keyup="onlyEnglish($event)" v-model="product.description">
+                                                <input id="desc" name="desc" class="form-control b-rad-none" rows="1" @keyup="onlyEnglish($event)" v-model="product.description">
                                             </div>
                                         </div>
                                     </div>
@@ -37,13 +37,13 @@
                                         <div class="col-sm-12 col-md-6 pr-md-1">
                                             <div class="form-group form-group-default b-rad-none required">
                                                 <label>Unit Price</label>
-                                                <input type="text" class="form-control b-rad-none" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
+                                                <input id="unit_price" name="unit_price" type="text" class="form-control b-rad-none" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
                                             </div>
                                         </div>
                                         <div class="col-sm-12 col-md-6 pl-md-1">
                                             <div class="form-group form-group-default b-rad-none no-padding no-border">
                                                 <div class="row no-margin">
-                                                    <div class="col-auto bg-master-lightest pointer" @mousedown="updateQuantity" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity" @touchend="clearInterval" @touchcancel="clearInterval">
+                                                    <div  id="minus-quantity" name="minus-quantity" class="col-auto bg-master-lightest pointer" @mousedown="updateQuantity" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity" @touchend="clearInterval" @touchcancel="clearInterval">
                                                         <div class="row h-100 align-items-center">
                                                             <div class="col">
                                                                 <i class="fa fa-minus"></i>
@@ -52,9 +52,9 @@
                                                     </div>
                                                     <div class="col no-padding">
                                                         <label class="p-t-5 p-l-5 text-center">Quantity</label>
-                                                        <input type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-mask="'#########'"/>
+                                                        <input  id="quantity" name="quantity" type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-mask="'#########'"/>
                                                     </div>
-                                                    <div class="col-auto bg-master-lightest pointer" @mousedown="updateQuantity('add')" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity('add')" @touchend="clearInterval" @touchcancel="clearInterval">
+                                                    <div id="add-quantity" name="add-quantity" class="col-auto bg-master-lightest pointer" @mousedown="updateQuantity('add')" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity('add')" @touchend="clearInterval" @touchcancel="clearInterval">
                                                         <div class="row h-100 align-items-center">
                                                             <div class="col">
                                                                 <i class="fa fa-plus"></i>
@@ -71,7 +71,7 @@
                                             <h6 class="no-margin bold text-complete">{{data.fixed_currency.short_code}} {{productTotal.toFixed(3)}}</h6>
                                         </div>
                                         <div class="col-sm-12 col-md">
-                                            <button class="btn btn-sm btn-block btn-complete b-rad-none" @click="addProduct()">Add Product</button>
+                                            <button id="add-product" name="add-product" class="btn btn-sm btn-block btn-complete b-rad-none" @click="addProduct()">Add Product</button>
                                         </div>
                                     </div>
                                 </div>
@@ -112,7 +112,7 @@
                         <div class="col">
                             <div class="row m-b-10">
                                 <div class="col">
-                                    <button class="btn btn-xs all-caps b-rad-none btn-primary btn-block" @click="submitForm()">{{(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== (Math.round((data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3) ? 'Save Purchase Order' : 'Save & Confirm'}}</button>
+                                    <button id="save-purchase-order" name="save-purchase-order" class="btn btn-xs all-caps b-rad-none btn-primary btn-block" @click="submitForm()">{{(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== (Math.round((data.amount + Number.EPSILON) * 1000) / 1000).toFixed(3) ? 'Save Purchase Order' : 'Save & Confirm'}}</button>
                                 </div>
                             </div>
                             <div class="row" v-if="(Math.round((poTotal + Number.EPSILON) * 1000) / 1000).toFixed(3) !== data.amount">
@@ -262,4 +262,4 @@
         },
         mixins: [formHandler]
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue b/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue
index 80e28394..d91d2661 100644
--- a/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/PurchaseOrderItemFormComponent.vue
@@ -58,13 +58,13 @@
                         <div class="col-4 p-r-5">
                             <div class="form-group form-group-default b-rad-none">
                                 <label>Stock Code</label>
-                                <input type="text" class="form-control b-rad-none" v-model="product.stockCode" />
+                                <input id="stock_code" name="stock_code"  type="text" class="form-control b-rad-none" v-model="product.stockCode" />
                             </div>
                         </div>
                         <div class="col p-l-5">
                             <div class="form-group form-group-default b-rad-none required">
                                 <label>description</label>
-                                <input class="form-control b-rad-none" rows="1" @keyup="onlyEnglish($event)" v-model="product.description">
+                                <input id="desc" name="desc" class="form-control b-rad-none" rows="1" @keyup="onlyEnglish($event)" v-model="product.description">
                             </div>
                         </div>
                     </div>
@@ -72,13 +72,13 @@
                         <div class="col-6 p-r-5">
                             <div class="form-group form-group-default b-rad-none required">
                                 <label>Unit Price</label>
-                                <input type="text" class="form-control b-rad-none" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
+                                <input id="unit_price" name="unit_price" type="text" class="form-control b-rad-none" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
                             </div>
                         </div>
                         <div class="col-6 p-l-5">
                             <div class="form-group form-group-default b-rad-none no-padding no-border">
                                 <div class="row no-margin">
-                                    <div class="col-auto bg-master-lighter pointer" @mousedown="updateQuantity" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity" @touchend="clearInterval" @touchcancel="clearInterval">
+                                    <div id="minus-quantity" name="minus-quantity" class="col-auto bg-master-lighter pointer" @mousedown="updateQuantity" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity" @touchend="clearInterval" @touchcancel="clearInterval">
                                         <div class="row h-100 align-items-center">
                                             <div class="col">
                                                 <i class="fa fa-minus"></i>
@@ -87,9 +87,9 @@
                                     </div>
                                     <div class="col no-padding">
                                         <label class="p-t-5 p-l-5 text-center">Quantity</label>
-                                        <input type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-mask="'#########'"/>
+                                        <input id="quantity" name="quantity" type="text" class="form-control m-b-5 b-rad-none no-border text-center" v-model.lazy="product.quantity" v-mask="'#########'"/>
                                     </div>
-                                    <div class="col-auto bg-master-lighter pointer" @mousedown="updateQuantity('add')" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity('add')" @touchend="clearInterval" @touchcancel="clearInterval">
+                                    <div id="add-quantity" name="add-quantity" class="col-auto bg-master-lighter pointer" @mousedown="updateQuantity('add')" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity('add')" @touchend="clearInterval" @touchcancel="clearInterval">
                                         <div class="row h-100 align-items-center">
                                             <div class="col">
                                                 <i class="fa fa-plus"></i>
@@ -185,4 +185,4 @@
         },
         mixins: [formHandler]
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue b/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue
index 5897646c..2cb67ca0 100644
--- a/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/confirmBookingComponent.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="row">
         <div class="col-auto">
-            <button class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal">Cancel</button>
+            <button id="cancel-new-booking" name="cancel-new-booking" class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal">Cancel</button>
         </div>
         <div class="col text-right">
-            <button class="btn btn-lg btn-success b-rad-none all-caps fs-12" v-if="Object.keys(data.bankAccount).length" @click="submitForm()">Confirm & Proceed</button>
+            <button id="confirm-new-booking" name="confirm-new-booking" class="btn btn-lg btn-success b-rad-none all-caps fs-12" v-if="Object.keys(data.bankAccount).length" @click="submitForm()">Confirm & Proceed</button>
         </div>
     </div>
 </template>
@@ -37,4 +37,4 @@
         },
         mixins: [ModalFormHandler]
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/tests/Browser/CreateBooking.php b/tests/Browser/CreateBooking.php
deleted file mode 100644
index e7391624..00000000
--- a/tests/Browser/CreateBooking.php
+++ /dev/null
@@ -1,23 +0,0 @@
-<?php
-
-namespace Tests\Browser;
-
-use Illuminate\Foundation\Testing\DatabaseMigrations;
-use Laravel\Dusk\Browser;
-use Tests\DuskTestCase;
-
-class CreateBooking extends DuskTestCase
-{
-    /**
-     * A Dusk test example.
-     *
-     * @test
-     */
-    public function testCreateBooking()
-    {
-        $this->browse(function (Browser $browser) {
-            $browser->visit('/')
-                    ->assertSee('Laravel');
-        });
-    }
-}
diff --git a/tests/Browser/ExampleTest.php b/tests/Browser/ExampleTest.php
deleted file mode 100644
index 37f076bd..00000000
--- a/tests/Browser/ExampleTest.php
+++ /dev/null
@@ -1,28 +0,0 @@
-<?php
-
-namespace Tests\Browser;
-
-use Illuminate\Foundation\Testing\DatabaseMigrations;
-use Laravel\Dusk\Browser;
-use Tests\DuskTestCase;
-
-class ExampleTest extends DuskTestCase
-{
-    /**
-     * A basic browser test example.
-     *
-     * @return void
-     */
-    public function testBasicExample()
-    {
-        $this->browse(function (Browser $browser) {
-            $browser->visit('http://localhost:86')
-                    ->pause(500)
-                    ->type('email', 'junkit.mah@bioloop.com.my')
-                    ->type('password', '123456abcabc')
-                    ->click('#sign-in')
-                    ->pause(5000)
-                    ->assertPathIs('/dashboard');
-        });
-    }
-}

From 9f59f9110aa6abc0554732d8e29f493e4ff89916 Mon Sep 17 00:00:00 2001
From: Fairuz <fairuz.tester@gmail.com>
Date: Mon, 25 Apr 2022 05:12:16 +0800
Subject: [PATCH 3/3] Create booking test

---
 tests/Browser/DryRun/CreateBookingTest.php | 68 ++++++++++++++++++++++
 tests/Browser/DryRun/LoginTe.php           | 26 +++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 tests/Browser/DryRun/CreateBookingTest.php
 create mode 100644 tests/Browser/DryRun/LoginTe.php

diff --git a/tests/Browser/DryRun/CreateBookingTest.php b/tests/Browser/DryRun/CreateBookingTest.php
new file mode 100644
index 00000000..98a47da7
--- /dev/null
+++ b/tests/Browser/DryRun/CreateBookingTest.php
@@ -0,0 +1,68 @@
+<?php
+
+namespace Tests\Browser\DryRun;
+
+use Illuminate\Foundation\Testing\DatabaseMigrations;
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+use App\Classes\Modules\Transactions\Services\FetchesTransaction;
+
+
+class CreateBookingTest extends DuskTestCase
+{
+     public function testLogin()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('http://localhost:86')
+                    ->pause(500)
+                    ->typeSlowly('email', 'junkit.mah@bioloop.com.my')
+                    ->typeSlowly('password', '123456abcabc')
+                    ->click('#sign-in')
+                    ->pause(5000)
+                    ->assertPathIs('/dashboard');
+        });
+    }
+
+    /**
+    * @test
+    * @depends testLogin
+    */
+    public function testCreateBooking()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->waitForLocation('/dashboard')
+                    ->waitForText('X1 Service')
+                    ->typeSlowly('cc_sending', '10000')
+                    ->pause(5000)
+                    ->waitForText('Transfer Now',5000)
+                    ->click('#transfer-now')
+                    ->whenAvailable('#select-account-modal', function ($modal) {
+                        $modal->pause(1000)
+                            ->press('#select-list')
+                            ->press('#select-option')
+                            ->pause(5000)
+                            ->click('#confirm-new-booking');
+                            #->click('#cancel-new-booking');
+                    })
+                    ->pause(7000)
+                    ->typeSlowly('stock_code', '123')
+                    ->typeSlowly('desc', 'Product A')
+                    ->typeSlowly('unit_price', '100')
+                    ->pause(7000)
+                    ->click('#add-quantity')
+                    ->click('#add-quantity')
+                    ->pause(7000)
+                    ->click('#minus-quantity')
+                    ->click('#minus-quantity')
+                    ->pause(7000)
+                    ->typeSlowly('quantity', '5')
+                    ->pause(7000)
+                    ->click('#add-product')
+                    ->pause(7000)
+                    ->click('#save-purchase-order')
+                    ->pause(10000);
+                    //Assert if booking created successfully
+
+        });
+    }
+}
diff --git a/tests/Browser/DryRun/LoginTe.php b/tests/Browser/DryRun/LoginTe.php
new file mode 100644
index 00000000..13ebc523
--- /dev/null
+++ b/tests/Browser/DryRun/LoginTe.php
@@ -0,0 +1,26 @@
+<?php
+
+namespace Tests\Browser\DryRun;
+
+use Illuminate\Foundation\Testing\DatabaseMigrations;
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+
+class LoginTest extends DuskTestCase
+{
+    /**
+    * @test
+    */
+    public function testLogin()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('http://localhost:86')
+                    ->pause(500)
+                    ->type('email', 'junkit.mah@bioloop.com.my')
+                    ->type('password', '123456abcabc')
+                    ->click('#sign-in')
+                    ->pause(5000)
+                    ->assertPathIs('/dashboard');
+        });
+    }
+}