diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml index e78a750..81cde6b 100644 --- a/.github/workflows/deploy.yaml +++ b/.github/workflows/deploy.yaml @@ -4,6 +4,9 @@ on: push: branches: - main + pull_request: + branches: + - main permissions: contents: read @@ -11,7 +14,50 @@ permissions: id-token: write jobs: + test: + if: github.event_name == 'pull_request' + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: 22 + cache: "npm" + + - name: Install Dependencies + run: npm ci + + - name: Run Tests + run: | + echo "## Test Results" >> $GITHUB_STEP_SUMMARY + echo "" >> $GITHUB_STEP_SUMMARY + npm run test:unit --coverage -- --run --reporter=verbose 2>&1 | tee test-output.txt + + sed 's/\x1b\[[0-9;]*m//g' test-output.txt | \ + grep -E '(^-{3,}|^File|^All files|^ |^[A-Za-z]|Test Files|Tests|Duration|Start)' | \ + grep -v '^$' > filtered-output.txt + echo '```' >> $GITHUB_STEP_SUMMARY + cat filtered-output.txt >> $GITHUB_STEP_SUMMARY + echo '```' >> $GITHUB_STEP_SUMMARY + - name: Get short SHA + id: vars + run: echo "SHORT_SHA=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT + - uses: actions/upload-artifact@v4 + with: + name: coverage-report-${{ steps.vars.outputs.SHORT_SHA }}.zip + path: coverage/index.html + retention-days: 1 build: + needs: test + if: | + always() && + github.ref == 'refs/heads/main' && + (needs.test.result == 'success' || needs.test.result == 'skipped') runs-on: ubuntu-latest steps: - name: Checkout @@ -21,6 +67,7 @@ jobs: uses: actions/setup-node@v4 with: node-version: 22 + cache: "npm" - name: Install Dependencies run: npm ci diff --git a/.gitignore b/.gitignore index a3f7a51..ae7f642 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ +.vscode/ + # Logs logs *.log diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index a06a8c6..0000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "recommendations": [ - "Vue.volar", - "vitest.explorer", - "dbaeumer.vscode-eslint", - "EditorConfig.EditorConfig", - "esbenp.prettier-vscode" - ] -} diff --git a/CNAME b/CNAME deleted file mode 100644 index e69de29..0000000 diff --git a/index.html b/index.html index bb69bdb..4ac1c1d 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + =12" } }, + "node_modules/@istanbuljs/schema": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz", + "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.13", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", @@ -2193,6 +2204,30 @@ "vue": "^3.0.0" } }, + "node_modules/@vitest/coverage-istanbul": { + "version": "4.0.14", + "resolved": "https://registry.npmjs.org/@vitest/coverage-istanbul/-/coverage-istanbul-4.0.14.tgz", + "integrity": "sha512-weQA5DR6/GaHL61WK0mnq9fzEeWxkpEawM4mp2WodMewLHKc1mCITJcmofNSMON2x0O951RjdnFsXsKi8WzSWg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@istanbuljs/schema": "^0.1.3", + "istanbul-lib-coverage": "^3.2.2", + "istanbul-lib-instrument": "^6.0.3", + "istanbul-lib-report": "^3.0.1", + "istanbul-lib-source-maps": "^5.0.6", + "istanbul-reports": "^3.2.0", + "magicast": "^0.5.1", + "obug": "^2.1.1", + "tinyrainbow": "^3.0.3" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "vitest": "4.0.14" + } + }, "node_modules/@vitest/eslint-plugin": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@vitest/eslint-plugin/-/eslint-plugin-1.5.1.tgz", @@ -3985,6 +4020,13 @@ "node": ">=18" } }, + "node_modules/html-escaper": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", + "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", + "dev": true, + "license": "MIT" + }, "node_modules/http-proxy-agent": { "version": "7.0.2", "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz", @@ -4190,6 +4232,90 @@ "dev": true, "license": "ISC" }, + "node_modules/istanbul-lib-coverage": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz", + "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-instrument": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.3.tgz", + "integrity": "sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "@babel/core": "^7.23.9", + "@babel/parser": "^7.23.9", + "@istanbuljs/schema": "^0.1.3", + "istanbul-lib-coverage": "^3.2.0", + "semver": "^7.5.4" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/istanbul-lib-instrument/node_modules/semver": { + "version": "7.7.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz", + "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/istanbul-lib-report": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz", + "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "istanbul-lib-coverage": "^3.0.0", + "make-dir": "^4.0.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/istanbul-lib-source-maps": { + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-5.0.6.tgz", + "integrity": "sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.23", + "debug": "^4.1.1", + "istanbul-lib-coverage": "^3.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/istanbul-reports": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz", + "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "html-escaper": "^2.0.0", + "istanbul-lib-report": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/jackspeak": { "version": "3.4.3", "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", @@ -4474,6 +4600,47 @@ "@jridgewell/sourcemap-codec": "^1.5.5" } }, + "node_modules/magicast": { + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.1.tgz", + "integrity": "sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.28.5", + "@babel/types": "^7.28.5", + "source-map-js": "^1.2.1" + } + }, + "node_modules/make-dir": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz", + "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==", + "dev": true, + "license": "MIT", + "dependencies": { + "semver": "^7.5.3" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/make-dir/node_modules/semver": { + "version": "7.7.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz", + "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/mdn-data": { "version": "2.12.2", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz", diff --git a/package.json b/package.json index 7873c77..10ef4d0 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "dev": "vite", "build": "run-p type-check \"build-only {@}\" --", "preview": "vite preview", - "test:unit": "vitest", + "test:unit": "vitest run --coverage", + "test:dev": "vitest", "build-only": "vite build", "type-check": "vue-tsc --build", "lint": "eslint . --fix --cache", @@ -28,6 +29,7 @@ "@types/node": "^24.10.1", "@vitejs/plugin-vue": "^6.0.2", "@vitejs/plugin-vue-jsx": "^5.1.2", + "@vitest/coverage-istanbul": "^4.0.14", "@vitest/eslint-plugin": "^1.5.0", "@vue/eslint-config-prettier": "^10.2.0", "@vue/eslint-config-typescript": "^14.6.0", @@ -45,4 +47,4 @@ "vitest": "^4.0.14", "vue-tsc": "^3.1.5" } -} +} \ No newline at end of file diff --git a/public/favicon.webp b/public/favicon.webp new file mode 100644 index 0000000..1c57c14 Binary files /dev/null and b/public/favicon.webp differ diff --git a/src/App.vue b/src/App.vue index 1ec19d8..42c6037 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,37 +1,17 @@ diff --git a/src/__tests__/App.spec.ts b/src/__tests__/App.spec.ts index 5b17801..37b92ae 100644 --- a/src/__tests__/App.spec.ts +++ b/src/__tests__/App.spec.ts @@ -1,11 +1,24 @@ -import { describe, it, expect } from 'vitest' - +import { describe, expect, test } from 'vitest' import { mount } from '@vue/test-utils' -import App from '../App.vue' +import App from '@/App.vue' +import { beforeEach } from 'vitest' +import { createPinia, setActivePinia } from 'pinia' +import { useThemeStore } from '@/stores/theme' +beforeEach(() => { + setActivePinia(createPinia()) +}) describe('App', () => { - it('mounts renders properly', () => { + test('should store dark theme to pinia', () => { + const theme = useThemeStore() + expect(theme.theme).toBe('dark') + }) + test('should mount App', () => { + const wrapper = mount(App) + expect(wrapper.exists()).toBe(true) + }) + test('should render router-view', () => { const wrapper = mount(App) - expect(wrapper.text()).toContain('You did it!') + expect(wrapper.find('router-view').exists()).toBe(true) }) }) diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue new file mode 100644 index 0000000..a8f7531 --- /dev/null +++ b/src/components/NavBar.vue @@ -0,0 +1,36 @@ + + + diff --git a/src/components/PageFooter.vue b/src/components/PageFooter.vue new file mode 100644 index 0000000..63d662d --- /dev/null +++ b/src/components/PageFooter.vue @@ -0,0 +1,7 @@ + diff --git a/src/components/__tests__/NavBar.spec.ts b/src/components/__tests__/NavBar.spec.ts new file mode 100644 index 0000000..350ec64 --- /dev/null +++ b/src/components/__tests__/NavBar.spec.ts @@ -0,0 +1,23 @@ +import { describe, test, expect, beforeEach } from 'vitest' +import { mount } from '@vue/test-utils' +import { createPinia, setActivePinia } from 'pinia' +import NavBar from '../NavBar.vue' + +beforeEach(() => { + setActivePinia(createPinia()) +}) + +describe('tests for NavBar component', () => { + test('should mount NavBar', () => { + const wrapper = mount({ + template: ` + + + + `, + components: { NavBar }, + }) + + expect(wrapper.exists()).toBe(true) + }) +}) diff --git a/src/router/index.ts b/src/router/index.ts index b9c5471..5b57c4f 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,4 +1,5 @@ -import HomeComponent from '@/views/HomeComponent.vue' +import AboutView from '@/views/AboutView.vue' +import HomeView from '@/views/HomeView.vue' import { createRouter, createWebHistory } from 'vue-router' const router = createRouter({ @@ -6,9 +7,14 @@ const router = createRouter({ routes: [ { path: '/', - component: HomeComponent, + component: HomeView, name: 'Home', }, + { + path: '/about', + component: AboutView, + name: 'About', + }, ], }) diff --git a/src/stores/theme.ts b/src/stores/theme.ts new file mode 100644 index 0000000..9bb1dfb --- /dev/null +++ b/src/stores/theme.ts @@ -0,0 +1,10 @@ +import { defineStore } from 'pinia' +import { ref } from 'vue' + +export const useThemeStore = defineStore('theme', () => { + const theme = ref<'light' | 'dark'>('dark') + function toggleTheme() { + theme.value = theme.value === 'light' ? 'dark' : 'light' + } + return { theme, toggleTheme } +}) diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue new file mode 100644 index 0000000..57f65e8 --- /dev/null +++ b/src/views/AboutView.vue @@ -0,0 +1,82 @@ + + diff --git a/src/views/HomeComponent.vue b/src/views/HomeComponent.vue deleted file mode 100644 index eea5789..0000000 --- a/src/views/HomeComponent.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue new file mode 100644 index 0000000..8e7f1b5 --- /dev/null +++ b/src/views/HomeView.vue @@ -0,0 +1,35 @@ + + + diff --git a/vite.config.ts b/vite.config.ts index 27b27e7..408e3f1 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -5,7 +5,6 @@ import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import vueDevTools from 'vite-plugin-vue-devtools' -// https://vite.dev/config/ export default defineConfig({ plugins: [vue(), vueJsx(), vueDevTools()], resolve: { @@ -13,4 +12,10 @@ export default defineConfig({ '@': fileURLToPath(new URL('./src', import.meta.url)), }, }, + test: { + setupFiles: ['./vitest.setup.ts'], + coverage: { + provider: 'istanbul', + }, + }, }) diff --git a/vitest.config.ts b/vitest.config.ts index c328717..7c52345 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -9,6 +9,15 @@ export default mergeConfig( environment: 'jsdom', exclude: [...configDefaults.exclude, 'e2e/**'], root: fileURLToPath(new URL('./', import.meta.url)), + coverage: { + provider: 'istanbul', + }, + setupFiles: ['./vitest.setup.ts'], + server: { + deps: { + inline: ['vuetify'], + }, + }, }, }), ) diff --git a/vitest.setup.ts b/vitest.setup.ts new file mode 100644 index 0000000..d084465 --- /dev/null +++ b/vitest.setup.ts @@ -0,0 +1,19 @@ +import { config } from '@vue/test-utils' +import { createVuetify } from 'vuetify' +import * as components from 'vuetify/components' +import * as directives from 'vuetify/directives' + +config.global.config.warnHandler = () => {} + +global.ResizeObserver = class ResizeObserver { + observe() {} + unobserve() {} + disconnect() {} +} + +const vuetify = createVuetify({ + components, + directives, +}) + +config.global.plugins = [vuetify]