feat: Add vitest

package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
+    "test": "vitest",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
@@ -14,17 +15,18 @@
     "@sveltejs/kit": "^1.5.0",
     "@types/nprogress": "^0.2.0",
     "autoprefixer": "^10.4.14",
+    "jsdom": "^22.1.0",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.24",
-    "rollup-plugin-visualizer": "^5.9.2",
     "svelte": "^3.54.0",
     "svelte-check": "^3.0.1",
     "svelte-hero-icons": "^5.0.0",
     "svelte-markdown": "^0.2.3",
     "tailwindcss": "^3.3.2",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
-    "vite": "^4.3.0"
+    "vite": "^4.3.0",
+    "vitest": "^0.33.0"
   },
   "dependencies": {
     "lemmy-js-client": "^0.18.0-rc.2"

src/lib/components/util/RelativeDate.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   export let date: Date
+  export let relativeTo: Date | undefined
 
   function formatRelativeDate(date: Date) {
-    const now = Date.now()
+    const now = relativeTo?.getTime() ?? Date.now()
 
     const diffInMillis = now - date.getTime()
 

tests/relativedate.test.ts

@@ -0,0 +1,32 @@
+import RelativeDate from '../src/lib/components/util/RelativeDate.svelte'
+import { describe, expect, it } from 'vitest'
+
+describe('RelativeDate.svelte', () => {
+  let host = document.createElement('div')
+  host.setAttribute('id', 'host')
+  document.body.appendChild(host)
+
+  it('mounts', () => {
+    let host = document.createElement('div')
+    const instance = new RelativeDate({
+      target: host,
+      props: {
+        date: new Date(),
+        relativeTo: new Date(),
+      },
+    })
+    expect(instance).toBeTruthy()
+  })
+  it('shows the correct date', () => {
+    const date = new Date('2023-01-01 00:00:00')
+    const relativeTo = new Date('2023-01-01 01:00:00')
+
+    const instance = new RelativeDate({
+      target: host,
+      props: { date: date, relativeTo: relativeTo },
+    })
+
+    expect(instance).toBeTruthy()
+    expect(host.innerHTML).toContain('1 hour ago')
+  })
+})

vite.config.ts

@@ -1,7 +1,6 @@
 import { sveltekit } from '@sveltejs/kit/vite'
-import { visualizer } from 'rollup-plugin-visualizer'
 import { defineConfig, type PluginOption } from 'vite'
 
 export default defineConfig({
-  plugins: [sveltekit(), visualizer() as PluginOption],
+  plugins: [sveltekit()],
 })

vitest.config.ts

@@ -0,0 +1,11 @@
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { defineConfig } from 'vitest/dist/config'
+
+export default defineConfig({
+  // @ts-ignore
+  plugins: [svelte()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+  },
+})