chore: set up authenticated tests and refactor template loading

fix issue with month badge in light theme

Author: simonwep

.env.example

@@ -1,8 +1,12 @@
 # Frontend configuration for during development
 # Backend host, usually /api if hosted locally and used via proxy
-# If omitted the app will be available in demo mode only
+# If omitted and OCULAR_HYBRID_MODE is not set to true, authentication will be required to use the app
 OCULAR_GENESIS_HOST=/api
 
+# If set to true it will be possible to use the app without authentication
+# If left empty authentication will be required
+OCULAR_HYBRID_MODE=
+
 # Optional, pre-filled login credentials for local testing
 OCULAR_TEST_USERNAME=admin
 OCULAR_TEST_PASSWORD=hgEiPCZP

.env.genesis

@@ -3,8 +3,7 @@
 GENESIS_PORT=8080
 GENESIS_BASE_URL=/
 GENESIS_DB_PATH=.data
-GENESIS_CREATE_USERS=admin!:hgEiPCZP,test:EczUR8dn
-GENESIS_AUTHORIZED_URIS=localhost:3000
+GENESIS_CREATE_USERS=admin!:hgEiPCZP
 GENESIS_JWT_SECRET=84d62c48dd30ca7caf6561252c5bd919}
 GENESIS_JWT_TOKEN_EXPIRATION=120000
 GENESIS_USERNAME_PATTERN=^[\w]{0,32}$

.github/workflows/actions/setup-repository/action.yml

@@ -0,0 +1,26 @@
+name: 'Setup Repository'
+description: 'Set up the repository with pnpm and Node.js'
+inputs:
+  pnpm-version:
+    description: 'Version of pnpm to use'
+    default: 10.27.0
+  node-version:
+    description: 'Version of Node.js to use'
+    default: 24.12.0
+runs:
+  using: 'composite'
+  steps:
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v3
+      with:
+        version: ${{ inputs.pnpm-version }}
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+        cache: 'pnpm'
+
+    - name: Install dependencies
+      shell: bash
+      run: pnpm install --frozen-lockfile

.github/workflows/actions/wait-for-health-check/action.yml

@@ -0,0 +1,33 @@
+name: 'Wait for Healthcheck'
+description: 'Wait for a service to be healthy by checking its healthcheck endpoint'
+inputs:
+  host:
+    description: 'The host of the backend'
+    required: true
+  endpoint:
+    description: 'The healthcheck endpoint'
+    required: true
+    default: 'health'
+  expected_code:
+    description: 'The expected HTTP status code'
+    default: '200'
+  timeout:
+    description: 'The timeout in seconds'
+    default: '30'
+runs:
+  using: 'composite'
+  steps:
+    - name: Wait for service to be healthy
+      shell: bash
+      run: |
+        counter=0
+        while [ "$(curl -s -o /dev/null -w '%{http_code}' http://${{ inputs.host }}/${{ inputs.endpoint }})" -ne ${{ inputs.expected_code }} ]; do
+          counter=$((counter+1))
+          if [ $counter -ge ${{ inputs.timeout }} ]; then
+            echo "Service failed to start within ${{ inputs.timeout }} seconds."
+            exit 1
+          fi
+          echo "Waiting for service to start..."
+          sleep 1
+        done
+        echo "Service is healthy"

.github/workflows/main.yml

@@ -14,31 +14,18 @@ permissions:
 env:
   IMAGE_REGISTRY: ghcr.io
   IMAGE_NAME: ${{ github.repository }}
-  PNPM_VERSION: 10.27.0
-  NODE_VERSION: 24.12.0
   HUSKY: 0
 
 jobs:
   test:
-    name: Build apps and run tests
+    name: Run unit, lint and e2e tests
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: ${{ env.PNPM_VERSION }}
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'pnpm'
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
+      - name: Setup repository
+        uses: ./.github/workflows/actions/setup-repository
 
       - name: Setup ESLint cache
         uses: actions/cache@v4
@@ -52,18 +39,53 @@ jobs:
       - name: Run unit tests
         run: pnpm test
 
-      - name: Build app
+      - name: Build testing app
         run: pnpm build
+        env:
+          OCULAR_GENESIS_HOST: /api
+          OCULAR_HYBRID_MODE: true
 
-      - name: Build docs
-        run: pnpm docs:build
+      - name: Start genesis and ocular
+        run: |
+          docker pull ghcr.io/simonwep/genesis:latest
+          docker run -p 8080:8080 -v "./.data:/app/.data" --env-file .env.genesis ghcr.io/simonwep/genesis:latest start &
+          pnpm vite preview &
+
+      - name: Wait for genesis to be healthy
+        uses: ./.github/workflows/actions/wait-for-health-check
+        with:
+          host: localhost:8080
+
+      - name: Wait for ocular to be healthy
+        uses: ./.github/workflows/actions/wait-for-health-check
+        with:
+          host: localhost:3000
+          endpoint: /dashboard
 
       - name: Install playwright browsers
         run: pnpm exec playwright install --with-deps firefox
 
       - name: Run e2e tests
         run: pnpm test:e2e
 
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: ${{ failure() }}
+        with:
+          name: test-results
+          path: test-results/
+          retention-days: 7
+
+  build:
+    name: Run demo and docs build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup repository
+        uses: ./.github/workflows/actions/setup-repository
+
       - name: Set outputs
         id: vars
         run: echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
@@ -75,6 +97,9 @@ jobs:
           OCULAR_BUILD_SHA: ${{ steps.vars.outputs.sha_short }}
           OCULAR_BASE_URL: /ocular/demo/
 
+      - name: Build docs
+        run: pnpm docs:build
+
       - name: Upload app build
         uses: actions/upload-artifact@v4
         if: github.ref == 'refs/heads/main'
@@ -91,18 +116,10 @@ jobs:
           path: docs/.vitepress/dist
           retention-days: 1
 
-      - name: Upload test results
-        uses: actions/upload-artifact@v4
-        if: ${{ failure() }}
-        with:
-          name: test-results
-          path: test-results/
-          retention-days: 7
-
   publish_docs:
     if: github.ref == 'refs/heads/main'
     name: Publish docs
-    needs: test
+    needs: [build, test]
     runs-on: ubuntu-latest
     permissions:
       pages: write
@@ -142,7 +159,7 @@ jobs:
   publish_docker:
     if: startsWith(github.event.ref, 'refs/tags/v')
     name: Build and publish docker image
-    needs: test
+    needs: [build, test]
     runs-on: ubuntu-latest
     permissions:
       contents: read

playwright.config.ts

@@ -22,8 +22,8 @@ export default defineConfig({
   webServer: {
     command: 'pnpm preview',
     url: 'http://localhost:3000',
-    timeout: 120 * 1000,
-    reuseExistingServer: !process.env.CI
+    timeout: 30 * 1000,
+    reuseExistingServer: true
   },
   use: {
     baseURL: 'http://localhost:3000',

src/app/App.vue

@@ -31,17 +31,19 @@ import LoadingScreen from '@components/misc/loading-screen/LoadingScreen.vue';
 import { useAppElement } from '@composables/app-element/useAppElement.ts';
 import { useAppSize } from '@composables/app-size/useAppSize.ts';
 import { useShowWinterFeatures } from '@composables/winter-features/useShowWinterFeatures.ts';
-import { useStorage } from '@storage/index';
 import { useSettingsStore } from '@store/settings';
-import { useTemplateData } from '@store/state/template/useTemplateData.ts';
+import { useDemoData } from '@store/state/template/useDemoData.ts';
+import { useStorage } from '@store/storage/useStorage.ts';
 import { useLocalStorage, usePreferredReducedMotion } from '@vueuse/core';
 import { nextTick, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
+const { OCULAR_GENESIS_HOST, OCULAR_HYBRID_MODE } = import.meta.env;
+
 const { status } = useStorage();
 const { state: settings } = useSettingsStore();
-const { loadTemplateData } = useTemplateData();
+const { loadDemoData } = useDemoData();
 const { t } = useI18n();
 const showWinterFeatures = useShowWinterFeatures();
 const router = useRouter();
@@ -92,10 +94,8 @@ watch(router.currentRoute, (route) => {
 });
 
 onMounted(() => {
-  if (!import.meta.env.OCULAR_GENESIS_HOST && location.hash === '#demo') {
-    loadTemplateData('demo');
-  } else {
-    loadTemplateData('template');
+  if ((!OCULAR_GENESIS_HOST || OCULAR_HYBRID_MODE) && location.hash === '#demo') {
+    loadDemoData();
   }
 });
 </script>

src/app/components/base/alert/Alert.vue

@@ -1,5 +1,5 @@
 <template>
-  <p :class="[$style.alert, classes]">
+  <p :data-testid="props.testId" :class="[$style.alert, classes]">
     <component :is="mapping[type][1]" :class="$style.icon" />
     <span>{{ text }}</span>
   </p>
@@ -15,6 +15,7 @@ import type { Component } from 'vue';
 
 const props = defineProps<{
   class?: ClassNames;
+  testId?: string;
   text: string;
   type: AlertType;
 }>();

src/app/components/base/button/Button.vue

@@ -4,6 +4,7 @@
     :class="classes"
     :data-testid="testId"
     :disabled="disabled"
+    v-bind="dataAttributes"
     :type="type"
     @click="emit('click', $event)"
   >
@@ -38,6 +39,7 @@ const props = withDefaults(
     rounded?: boolean;
     disabled?: boolean;
     testId?: string;
+    data?: Record<string, string>;
   }>(),
   {
     color: 'primary',
@@ -51,6 +53,11 @@ const props = withDefaults(
 
 const styles = useCssModule();
 const theme = useThemeStyles(() => props.color);
+
+const dataAttributes = computed(() =>
+  props.data ? Object.fromEntries(Object.entries(props.data).map(([key, value]) => [`data-${key}`, value])) : {}
+);
+
 const classes = computed(() => [
   styles.button,
   styles[props.size],

src/app/components/base/cell-menu/CellMenu.types.ts

@@ -1,4 +1,5 @@
 export interface CellMenuAction {
+  id?: string;
   label: string;
   handle: () => void | false; // Return false to prevent menu from closing
 }