frontend/package.json

@@ -17,7 +17,10 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/test-utils": "^2.3.2",
+    "jsdom": "^22.0.0",
     "sass": "^1.62.1",
-    "vite": "^4.1.4"
+    "vite": "^4.1.4",
+    "vitest": "^0.31.1"
   }
 }

frontend/src/components/SearchBox.vue

@@ -1,7 +1,7 @@
 <template>
     <form class="d-none d-sm-inline-block">
         <div class="input-group input-group-navbar">
-            <input type="text" class="form-control" placeholder="Search…" aria-label="Search" v-model="query" id="searchText">
+            <input type="text" class="form-control" placeholder="Search…" aria-label="Search" v-model="query" ref="search-text" />
             <button class="btn" type="button" @click.prevent="search">
                 <b-icon-search class="bi-valign-middle"></b-icon-search>
             </button>
@@ -28,7 +28,7 @@ export default {
             if(this.query.length > 0)
                 this.$router.push("/search/" + encodeURIComponent(this.query));
             else
-                document.getElementById("searchText").focus();
+                this.$refs["search-text"].focus();
         }
     },
     mounted() {

frontend/src/tests/SearchBox.js

@@ -0,0 +1,59 @@
+import {mount} from '@vue/test-utils'
+import SearchBox from '../components/SearchBox.vue'
+
+test('SearchBox component', async () => {
+    expect(SearchBox).toBeTruthy()
+
+    const mockRoute = {
+        params: {
+            query: 'urltest',
+        }
+    }
+
+    const mockRouter = {
+        push: vi.fn(),
+    }
+
+    const wrapper = mount(SearchBox, {
+        props: {},
+        global: {
+            mocks: {
+                $route: mockRoute,
+                $router: mockRouter,
+            }
+        },
+        attachTo: document.body,
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(mockRouter.push).toHaveBeenCalledWith('/search/urltest')
+
+    mockRouter.push.mockClear()
+
+    await wrapper.find({ref: 'search-text'}).setValue('test2')
+
+    await wrapper.get('button').trigger('click')
+
+    expect(mockRouter.push).toHaveBeenCalledWith('/search/test2')
+
+    mockRouter.push.mockClear()
+
+    await wrapper.find({ref: 'search-text'}).setValue('äöüß!§$%&/()=?')
+
+    await wrapper.get('button').trigger('click')
+
+    expect(mockRouter.push).toHaveBeenCalledWith('/search/%C3%A4%C3%B6%C3%BC%C3%9F!%C2%A7%24%25%26%2F()%3D%3F')
+
+    mockRouter.push.mockClear()
+
+    await wrapper.find({ref: 'search-text'}).setValue('')
+
+    await wrapper.get('button').trigger('click')
+
+    expect(mockRouter.push).not.toHaveBeenCalled()
+
+    expect(await wrapper.find({ref: 'search-text'}).element).toEqual(document.activeElement)
+
+    expect(wrapper.html()).toMatchSnapshot()
+})

frontend/src/tests/__snapshots__/SearchBox.js.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`SearchBox component 1`] = `
+"<form class=\\"d-none d-sm-inline-block\\">
+  <div class=\\"input-group input-group-navbar\\"><input type=\\"text\\" class=\\"form-control\\" placeholder=\\"Search…\\" aria-label=\\"Search\\"><button class=\\"btn\\" type=\\"button\\"><svg width=\\"1em\\" height=\\"1em\\" viewBox=\\"0 0 16 16\\" fill=\\"currentColor\\" role=\\"img\\" focusable=\\"false\\" class=\\"bi-valign-middle\\">
+        <path d=\\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z\\"></path>
+      </svg></button></div>
+</form>"
+`;

frontend/vite.config.js

@@ -46,5 +46,10 @@ export default defineConfig({
                 target: "http://127.0.0.1:8080/",
             }
         }
+    },
+    test: {
+        include: ['src/tests/**/*.js'],
+        globals: true,
+        environment: "jsdom"
     }
 })