add test and add test step to pipeline

.drone.yml

@@ -12,8 +12,17 @@ steps:
 - name: pull
   commands:
   - cd /home/marco/containers/data/sensor-web-v2
-  - git reset --hard origin/master
+  - git fetch
-  - git pull origin master
+  - git reset --hard origin/master 
+
+- name: build
+  commands:
+  - make build
+
+- name: test
+  commands:
+  - make test
+
 - name: deploy
   commands:
   - cd /home/marco/containers

Makefile

@@ -0,0 +1,6 @@
+build: 
+	docker build -t sensor-web-v2 .
+run: build
+	docker run --rm -d -p 8080:8080 sensor-web-v2
+test: build
+	docker run --rm -d sensor-web-v2 npm run test:ci

package.json

@@ -9,7 +9,9 @@
     "type-check": "vue-tsc --noEmit",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "server": "node --no-warnings --loader ts-node/esm server/index.ts",
-    "server:dev": "nodemon --watch \"server/**\" --ext \"ts\" --exec \"npm run server\""
+    "server:dev": "nodemon --watch \"server/**\" --ext \"ts\" --exec \"npm run server\"",
+    "test": "vitest",
+    "test:ci": "vitest run"
   },
   "dependencies": {
     "@vueuse/core": "^10.5.0",
@@ -30,15 +32,18 @@
     "@vitejs/plugin-vue": "^4.4.1",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/test-utils": "^2.4.3",
     "@vue/tsconfig": "^0.4.0",
     "eslint": "^8.53.0",
     "eslint-plugin-vue": "^9.18.1",
+    "jsdom": "^23.0.1",
     "nodemon": "^3.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.3",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
+    "vitest": "^1.0.1",
     "vue-tsc": "^1.8.22"
   },
   "type": "module"

tests/components/TimeWindows.test.ts

@@ -0,0 +1,31 @@
+import { expect, test, describe } from 'vitest'
+import { shallowMount } from '@vue/test-utils'
+import TimeWindows from '@/components/TimeWindows.vue'
+import type { Window } from '@/utils/types'
+import { windows } from '@/utils/helpers'
+
+const getWrapper = () => {
+  return shallowMount(TimeWindows, {
+    props: {
+      activeWindow: windows[1],
+      windows
+    }
+  })
+}
+
+describe('TimeWindows', () => {
+  test('renders time windows correctly', () => {
+    const wrapper = getWrapper()
+    const listItems = wrapper.findAll('li')
+    expect(listItems.at(0)?.text()).toContain(windows[0].label)
+    expect(listItems.at(1)?.classes('is-active')).toBe(true)
+  })
+
+  test('emits an event when a time window is clicked', async () => {
+    const wrapper = getWrapper()
+    const listItems = wrapper.findAll('li')
+    await listItems.at(0)?.trigger('click')
+    const event = (wrapper.emitted('set-window') || [])[0][0] as Window
+    expect(event.label).toEqual('afgelopen uur')
+  })
+})

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "tests/**/*"],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {

vitest.config.ts

@@ -0,0 +1,14 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/*'],
+      root: fileURLToPath(new URL('./', import.meta.url))
+    }
+  })
+)