add tests and yaml

.github/workflows/test-webapp.yaml

@@ -0,0 +1,29 @@
+name: NPM Test
+on: [push]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          submodules: recursive
+          fetch-depth: 0
+
+      - uses: DeterminateSystems/nix-installer-action@main
+      - uses: DeterminateSystems/magic-nix-cache-action@main
+
+      - run: nix develop -c '(cd packages/webapp && npm run test)'
+
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          submodules: recursive
+          fetch-depth: 0
+
+      - uses: DeterminateSystems/nix-installer-action@main
+      - uses: DeterminateSystems/magic-nix-cache-action@main
+      - run: nix develop -c '(cd packages/webapp && npm run svelte-lint-format-check)'

packages/webapp/package.json

@@ -4,14 +4,18 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
+		"build": "vite build && npm run package",
 		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
+		"lint": "prettier --list-different . && eslint .",
 		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run"
+		"test": "npm run test:unit -- --run",
+		"format-check": "prettier --list-different src",
+		"svelte-lint-format-check": "npm run lint && npm run check"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.0.0",
@@ -35,6 +39,6 @@
 		"vitest": "^2.0.4"
 	},
 	"dependencies": {
-    "@rainlanguage/ui-components": "*"
-  }
+		"@rainlanguage/ui-components": "*"
+	}
 }

packages/webapp/src/routes/+page.svelte

@@ -2,12 +2,14 @@
 	import { CardProperty } from '@rainlanguage/ui-components';
 </script>
 
-<h1>Welcome to SvelteKit</h1>
-<p>
-	Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation...
-</p>
+<div data-testid="page-container">
+	<h1>Welcome to SvelteKit</h1>
+	<p>
+		Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation...
+	</p>
 
-<CardProperty data-testid="vaultDetailVaultId">
-	<svelte:fragment slot="key">Vault ID</svelte:fragment>
-	<svelte:fragment slot="value">{100000}</svelte:fragment>
-</CardProperty>
+	<CardProperty data-testid="card-property">
+		<svelte:fragment slot="key">Vault ID</svelte:fragment>
+		<svelte:fragment slot="value">{100000}</svelte:fragment>
+	</CardProperty>
+</div>

packages/webapp/src/routes/page.test.ts

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, it, expect } from 'vitest';
+import Page from './+page.svelte';
+
+describe('Page Component', () => {
+	it('should load the page', async () => {
+		render(Page);
+		expect(screen.getByTestId('page-container')).toBeInTheDocument();
+	});
+});

packages/webapp/test-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

packages/webapp/tsconfig.json

@@ -9,11 +9,8 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"moduleResolution": "bundler"
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext",
+		"types": ["vitest/globals", "@testing-library/jest-dom", "vitest/importMeta"]
 	}
-	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
-	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
 }

packages/webapp/vite.config.ts

@@ -1,10 +1,26 @@
 import { defineConfig } from 'vitest/config';
 import { sveltekit } from '@sveltejs/kit/vite';
+import { loadEnv } from 'vite';
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
 	plugins: [sveltekit()],
-
+	resolve: {
+		conditions: mode === 'test' ? ['browser'] : []
+	},
+	define: {
+		'process.env': {},
+		'import.meta.vitest': 'undefined'
+	},
 	test: {
-		include: ['src/**/*.{test,spec}.{js,ts}']
+		// Jest like globals
+		includeSource: ['src/**/*.{js,ts}'],
+		globals: true,
+		environment: 'jsdom',
+		include: ['src/**/*.{test,spec}.ts'],
+		// Extend jest-dom matchers
+		setupFiles: ['./test-setup.ts'],
+		// load env vars
+		env: loadEnv('', process.cwd(), ''),
+		testTimeout: 10000
 	}
-});
+}));