add docs datalayer sanity check to CI...

Author: NiloCK

.github/workflows/docs-deploy.yml

@@ -47,17 +47,37 @@ jobs:
         run: yarn build:lib
       - name: Build with VitePress
         run: yarn docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: docs/.vitepress/dist
-
+   
+  # Test Job
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+       - name: Checkout
+         uses: actions/checkout@v4
+       - name: Setup Node
+         uses: actions/setup-node@v4
+         with:
+           node-version: 22
+           cache: yarn
+       - name: Install dependencies
+         run: yarn install
+       - name: Build skuilder libraries
+         run: yarn build:lib
+       - name: Start dev server and run tests
+         run: |
+           yarn docs:dev &
+           SERVER_PID=$!
+           npx wait-on http://localhost:5173/vue-skuilder
+           yarn docs:test
+           kill $SERVER_PID
+       
   # Deployment job
   deploy:
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
-    needs: build
+    needs: [build, test]
     runs-on: ubuntu-latest
     name: Deploy
     steps:

cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:5173',
+    supportFile: false,
+    specPattern: 'docs/test/**/*.cy.{js,jsx,ts,tsx}',
+    video: false,
+    screenshotOnRunFailure: true,
+  },
+});

docs/test/embedded-course.cy.ts

@@ -0,0 +1,114 @@
+/**
+ * Smoke test for docs site embedded course functionality
+ *
+ * Ensures that:
+ * - The embedded course loads without "not found" errors
+ * - The data layer initializes correctly
+ * - Study sessions can be started
+ * - Cards load successfully
+ */
+
+describe('Docs Site - Embedded Course', () => {
+  beforeEach(() => {
+    // Visit the embedded course test page
+    cy.visit('/vue-skuilder/dbg/embedded-course-test.html');
+  });
+
+  it('should load the embedded course without "not found" errors', () => {
+    // Capture console errors
+    const consoleErrors: string[] = [];
+
+    cy.window().then((win) => {
+      cy.stub(win.console, 'error').callsFake((...args) => {
+        const message = args.join(' ');
+        consoleErrors.push(message);
+      });
+    });
+
+    // Wait for the data layer to initialize
+    cy.contains('Interactive study session', { timeout: 10000 }).should('be.visible');
+
+    // Check for "not found" errors in console
+    cy.window().then(() => {
+      const notFoundErrors = consoleErrors.filter(msg =>
+        msg.toLowerCase().includes('not found')
+      );
+
+      if (notFoundErrors.length > 0) {
+        throw new Error(`Found "not found" errors in console:\n${notFoundErrors.join('\n')}`);
+      }
+    });
+  });
+
+  it('should start a study session and load cards without errors', () => {
+    // Capture console errors
+    const consoleErrors: string[] = [];
+
+    cy.window().then((win) => {
+      cy.stub(win.console, 'error').callsFake((...args) => {
+        const message = args.join(' ');
+        consoleErrors.push(message);
+      });
+    });
+
+    // Wait for initialization
+    cy.contains('Interactive study session', { timeout: 10000 }).should('be.visible');
+
+    // Wait for the "Start Session" button to appear and click it
+    cy.contains('button', 'Start Session', { timeout: 10000 })
+      .should('be.visible')
+      .click();
+
+    // Wait for the init state to disappear (button should be gone)
+    cy.contains('button', 'Start Session').should('not.exist');
+
+    // Verify we're not in loading state
+    cy.contains('Loading course').should('not.exist');
+
+    // Give it a moment for card hydration
+    cy.wait(2000);
+
+    // Check for "not found" errors in console after session start
+    cy.window().then(() => {
+      const notFoundErrors = consoleErrors.filter(msg =>
+        msg.toLowerCase().includes('not found')
+      );
+
+      if (notFoundErrors.length > 0) {
+        throw new Error(`Found "not found" errors in console after session start:\n${notFoundErrors.join('\n')}`);
+      }
+    });
+
+    // Verify no error state is shown
+    cy.contains('Initialization failed').should('not.exist');
+    cy.contains('Error:').should('not.exist');
+  });
+
+  it('should load the remote course test page', () => {
+    // Test the remote course embedding as well
+    cy.visit('/vue-skuilder/dbg/remote-crs-embedding.html');
+
+    const consoleErrors: string[] = [];
+
+    cy.window().then((win) => {
+      cy.stub(win.console, 'error').callsFake((...args) => {
+        const message = args.join(' ');
+        consoleErrors.push(message);
+      });
+    });
+
+    // Wait for initialization
+    cy.contains('Interactive study session', { timeout: 10000 }).should('be.visible');
+
+    // Check for "not found" errors
+    cy.window().then(() => {
+      const notFoundErrors = consoleErrors.filter(msg =>
+        msg.toLowerCase().includes('not found')
+      );
+
+      if (notFoundErrors.length > 0) {
+        throw new Error(`Found "not found" errors in remote course test:\n${notFoundErrors.join('\n')}`);
+      }
+    });
+  });
+});

package.json

@@ -26,7 +26,9 @@
     "vtag": "node scripts/vtag.js",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
+    "docs:preview": "vitepress preview docs",
+    "docs:test": "cypress run",
+    "docs:test:open": "cypress open"
   },
   "private": true,
   "workspaces": [
@@ -39,6 +41,7 @@
     "@typescript-eslint/parser": "^8.25.0",
     "canvas": "^3.2.0",
     "concurrently": "^9.1.2",
+    "cypress": "^15.6.0",
     "eslint": "^9.21.0",
     "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-vue": "^9.32.0",
@@ -49,6 +52,7 @@
     "vitepress": "^2.0.0-alpha.12",
     "vitepress-plugin-llms": "^1.7.5",
     "vue": "^3.5.13",
-    "vuetify": "^3.7.0"
+    "vuetify": "^3.7.0",
+    "wait-on": "^8.0.1"
   }
 }

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "types": ["cypress", "node"],
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "docs/test/**/*.ts",
+    "cypress/**/*.ts"
+  ]
+}