button for expand tree panel tested

package.json

@@ -8,7 +8,7 @@
         "hot": "mix watch --hot",
         "prod": "npm run production",
         "production": "mix --production",
-        "test": "jest --watch"
+        "test": "jest"
     },
     "devDependencies": {
         "@vue/compiler-sfc": "^3.0.5",

resources/ts/admin-area/components/App.vue

@@ -5,7 +5,7 @@ app-navbar
 </template>
 
 <script lang="ts">
-import AppNavbar from './AppNavbar'
+import AppNavbar from './AppNavbar.vue'
 
 export default {
     name: "App",

resources/ts/admin-area/components/AppNavbar.vue

@@ -3,12 +3,17 @@ nav.navbar.navbar-dark.bg-light-blue
     .container-fluid
         ul.navbar-nav
             li.nav-item
-                a.btn.btn-outline-success
-                    img(src='/img/admin-area/icons/folding.svg')
+                app-navbar-tree-toggle-btn
 </template>
 
 <script lang="ts">
+import AppNavbarTreeToggleBtn from './AppNavbarTreeToggleBtn.vue'
+
 export default {
     name: "AppNavbar",
+
+    components: {
+        AppNavbarTreeToggleBtn,
+    }
 }
 </script>

resources/ts/admin-area/components/AppNavbarTreeToggleBtn.vue

@@ -0,0 +1,45 @@
+<template lang="pug">
+a.btn.btn-outline-success(@click="clickHandler")
+    img(src='/img/admin-area/icons/folding.svg')
+    img.toggle(:src="imageUrl")
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: "AppNavbarTreeToggleBtn",
+
+    data () {
+        return {
+            open: false
+        }
+    },
+
+    computed: {
+        imageUrl (): string {
+            let imageName = this.open ? 'minus' : 'plus'
+            return `/img/admin-area/icons/${imageName}.svg`
+        }
+    },
+
+    methods: {
+        clickHandler (): void {
+            this.open = !this.open
+        }
+    },
+})
+
+</script>
+
+<style lang="sass" scoped>
+
+.btn-outline-success
+    background-color: #fff
+    border-color: #a5e3e2
+    &:hover
+        background-color: #9cfffa
+.toggle
+    margin-left: .4em
+
+</style>

resources/ts/admin-area/components/__tests__/AppNavbarTreeToggleBtn.spec.ts

@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils'
+import AppNavbarTreeToggleBtn from '../AppNavbarTreeToggleBtn.vue'
+
+describe('AppNavbarTreeToggleBtn.vue', () => {
+    it('test img src plus/minus', async () => {
+        const wrapper = shallowMount(AppNavbarTreeToggleBtn)
+        const button = wrapper.find('.btn-outline-success')
+
+        let image = wrapper.find('img.toggle')
+        let src = image.attributes('src')
+        let file = src.substring(src.lastIndexOf('/')+1)
+
+        expect(file).toMatch(/plus/);
+
+        await button.trigger('click')
+
+        src = image.attributes('src')
+        file = src.substring(src.lastIndexOf('/')+1)
+
+        expect(file).toMatch(/minus/);
+
+    })
+})

resources/ts/admin-area/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}

tsconfig.json

@@ -7,6 +7,7 @@
         "strict": true,
         "jsx": "preserve",
         "moduleResolution": "node",
+        // additional
         "esModuleInterop": true
     },
     "include": [