router

fix test
bmlt-enabled · Jun 14, 2024 · 0193264 · 0193264
1 parent bcdde4f
commit 0193264
Show file tree

Hide file tree

Showing 15 changed files with 115 additions and 69 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/src/package-lock.json b/src/package-lock.json
diff --git a/src/package.json b/src/package.json
@@ -13,7 +13,8 @@
         "test:watch": "vitest",
         "test:ui": "vitest --ui",
         "coverage": "vitest run --coverage",
-        "typecheck": "vitest typecheck"
+        "typecheck": "vitest typecheck",
+        "validate": "prettier --write vite.config.ts resources/js && prettier --check vite.config.ts resources/js && eslint vite.config.ts resources/js && svelte-check --tsconfig ./tsconfig.json && vitest run"
     },
     "devDependencies": {
         "@sveltejs/adapter-static": "^3.0.2",
@@ -22,11 +23,13 @@
         "@testing-library/svelte": "^5.1.0",
         "@testing-library/user-event": "^14.4.3",
         "@trivago/prettier-plugin-sort-imports": "^4.2.1",
+        "@tsconfig/svelte": "^5.0.2",
         "@types/eslint": "8.56.10",
         "@types/google.maps": "^3.55.9",
         "eslint": "^9.0.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.35.1",
+        "globals": "^15.4.0",
         "jest": "^29.3.1",
         "jsdom": "^20.0.3",
         "laravel-vite-plugin": "^1.0.4",
@@ -35,18 +38,18 @@
         "sass": "^1.77.5",
         "svelte": "^4.2.7",
         "svelte-check": "^3.6.0",
+        "svelte-hmr": "^0.16.0",
         "svelte-jester": "^3.0.0",
         "ts-jest": "^29.1.4",
         "tslib": "^2.4.1",
         "typescript": "^5.0.0",
         "typescript-eslint": "^8.0.0-alpha.20",
         "vite": "^5.0.3",
         "vite-tsconfig-paths": "^3.5.2",
-        "vitest": "^0.25.8",
-        "globals": "^15.4.0",
-        "svelte-hmr": "^0.16.0"
+        "vitest": "^0.25.8"
     },
     "dependencies": {
-        "bmlt-root-server-client": "^1.0.7"
+        "bmlt-root-server-client": "^1.0.7",
+        "svelte-spa-router": "^4.0.1"
     }
 }
diff --git a/src/resources/js/App.svelte b/src/resources/js/App.svelte
@@ -1,11 +1,20 @@
-<script>
-  import BmltServer from './lib/BmltServer.svelte';
+<script lang="ts">
   import './css/main.scss';
+  import Router from 'svelte-spa-router';
+  import Home from './routes/Home.svelte';
+  import Login from './routes/Login.svelte';
+
+  const routes = {
+    '/login': Login,
+    '*': Home
+  };
 </script>
 
 <svelte:head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <title>BMLT Root Server</title>
 </svelte:head>
 
-<BmltServer />
+<body>
+  <Router {routes} />
+</body>
diff --git a/src/resources/js/css/main.scss b/src/resources/js/css/main.scss
@@ -244,3 +244,11 @@ $text-color-dark-light: #333;
 .light body {
   background-color: #fff;
 }
+
+.dark .version {
+  color: $text-color-dark;
+}
+
+.light .version {
+  color: $text-color-dark-light;
+}
diff --git a/src/resources/js/globals.d.ts b/src/resources/js/globals.d.ts
@@ -0,0 +1,7 @@
+declare const settings: {
+  apiBaseUrl: string;
+  defaultLanguage: string;
+  isLanguageSelectorEnabled: boolean;
+  languageMapping: Record<string, string>;
+  version: string;
+};
diff --git a/src/resources/js/lib/BmltServer.svelte b/src/resources/js/lib/BmltServer.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
+  /*global settings */
+
   import { theme } from '../stores/themeStore';
   import ThemeSwitcher from '../components/ThemeSwitcher.svelte';
 
+  let version = settings.version;
+
   if (typeof window !== 'undefined') {
     const savedTheme = window.localStorage.getItem('theme');
     if (savedTheme) {
@@ -12,9 +16,9 @@
 
 <section class={$theme}>
   <div id="export-form">
-    <h1>BMLT Root Server</h1>
+    <h1>BMLT Root Server {version}</h1>
     <div id="footer">
-      <a href="https://github.com/bmlt-enabled/bmlt-root-server/issues/new" class="footer-link" target="_blank">Issues?</a>
+      <a href="#/login" class="footer-link">Login</a>
     </div>
     <ThemeSwitcher />
   </div>

diff --git a/src/resources/js/routes/Home.svelte b/src/resources/js/routes/Home.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  import BmltServer from '../lib/BmltServer.svelte';
+</script>
+
+<BmltServer />
diff --git a/src/resources/js/routes/Login.svelte b/src/resources/js/routes/Login.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { theme } from '../stores/themeStore';
+</script>
+
+<section class={$theme}>
+  <div id="export-form">
+    <h1>Lets Login</h1>
+    <div id="footer">
+      <a href="#/" class="footer-link">Home</a>
+    </div>
+  </div>
+</section>
diff --git a/src/resources/js/tests/App.spec.ts b/src/resources/js/tests/App.spec.ts
@@ -1,12 +1,15 @@
 import { render } from '@testing-library/svelte';
+import '@testing-library/jest-dom';
 import App from '../App.svelte';
 
-test('renders the app component', () => {
-  const { getByText } = render(App);
-
-  // Check for the BmltServer component
-  expect(getByText('BMLT Root Server')).toBeInTheDocument();
-
-  // Check for the presence of the <title> element
+test('renders the app component and sets the title', () => {
+  render(App);
   expect(document.title).toBe('BMLT Root Server');
 });
+
+describe('App.svelte', () => {
+  test('renders the app component and sets the title', () => {
+    render(App);
+    expect(document.title).toBe('BMLT Root Server');
+  });
+});
diff --git a/src/resources/js/tests/setup.ts b/src/resources/js/tests/setup.ts
@@ -1 +1,13 @@
 import '@testing-library/jest-dom';
+
+// @ts-expect-error set from backend
+global.settings = {
+  apiBaseUrl: 'http://localhost',
+  defaultLanguage: 'en',
+  isLanguageSelectorEnabled: true,
+  languageMapping: {
+    en: 'English',
+    fr: 'French'
+  },
+  version: '1.0.0'
+};
diff --git a/src/svelte.config.js b/src/svelte.config.js
@@ -1,37 +1,8 @@
-import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
-  // for more information about preprocessors
   preprocess: vitePreprocess(),
-
-  kit: {
-    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
-    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
-    adapter: adapter({
-      pages: 'build',
-      assets: 'build',
-      fallback: 'index.html',
-      precompress: false
-    }),
-    alias: {
-      $components: 'resources/js/components',
-      $lib: 'resources/js/lib'
-    },
-    files: {
-      appTemplate: 'resources/js/app.html',
-      assets: 'resources/js/static',
-      hooks: {
-        universal: 'resources/js/hooks',
-      },
-      lib: 'resources/js/lib',
-      routes: 'resources/js/routes',
-      serviceWorker: 'resources/js/service-worker'
-    }
-  }
 };
 
 export default config;
diff --git a/src/tsconfig.json b/src/tsconfig.json
@@ -1,4 +1,5 @@
 {
+  "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
       "allowJs": true,
       "checkJs": true,
@@ -12,6 +13,6 @@
       "moduleResolution": "bundler",
       "types": ["vitest/globals"]
   },
-  "include": ["vite.config.ts", "resources/js/**/*.ts", "resources/js/**/*.svelte", "resources/js/**/*.spec.ts", "resources/js/**/*.test.ts"],
+  "include": ["vite.config.ts", "resources/js/*.ts", "resources/js/**/*.ts", "resources/js/**/*.svelte", "resources/js/**/*.spec.ts", "resources/js/**/*.test.ts"],
   "exclude": ["node_modules", "build"]
 }
diff --git a/src/vite.config.ts b/src/vite.config.ts
@@ -1,7 +1,6 @@
+import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import laravel from 'laravel-vite-plugin';
-import { defineConfig } from 'vite';
-import path from 'path';
 
 export default defineConfig({
   plugins: [
@@ -10,16 +9,5 @@ export default defineConfig({
       input: ['resources/js/app.ts'],
       refresh: true
     })
-  ],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src')
-    }
-  },
-  server: {
-    cors: true,
-    fs: {
-      allow: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules'), 'resources/js']
-    }
-  }
+  ]
 });