Merge pull request #587 from matematikk-mooc/stage

Stage

.babelrc

@@ -1,3 +1,3 @@
 {
-    "presets": ["@babel/preset-env"]
+  "presets": ["@babel/preset-env"]
 }

.github/playwright/markdown-reporter.js

@@ -0,0 +1,95 @@
+const fs = require('fs');
+const path = require('path');
+
+const jsonFilePath = path.join(
+  __dirname,
+  '../../playwright-report/results.json',
+);
+
+function removeAnsiCodes(str) {
+  if (!str) return str;
+  return str.replace(/\u001b\[[0-9;]*m/g, '');
+}
+
+function extractErrorMessage(error) {
+  if (!error || !error.message) return 'None';
+  const cleanMessage = removeAnsiCodes(error.message);
+  const match = cleanMessage.match(/Error: (.+?)(\n|$)/);
+  return match ? match[1].trim() : 'Unknown Error';
+}
+
+function extractLog(logArray) {
+  if (!Array.isArray(logArray) || logArray.length === 0)
+    return 'No detailed log available.';
+  return logArray.map((log) => `       ${removeAnsiCodes(log)}`).join('\n');
+}
+
+function generateMarkdownReport(data) {
+  let markdown = `# 🎭 Playwright Test Results\n\n`;
+
+  const stats = data.stats;
+  const runnerCount = data.config.metadata.actualWorkers || 1;
+  const formattedDuration = Math.round(stats.duration);
+  markdown += `## 📊 Summary\n`;
+  markdown += `| Metric         | Value              |\n`;
+  markdown += `|----------------|--------------------|\n`;
+  markdown += `| **Total Tests** | ${stats.expected + stats.unexpected} 🧪         |\n`;
+  markdown += `| **Passed**      | ${stats.expected} ✅             |\n`;
+  markdown += `| **Failed**      | ${stats.unexpected} ❌           |\n`;
+  markdown += `| **Duration**    | ${formattedDuration}ms ⏱️ |\n`;
+  markdown += `| **Runners**     | ${runnerCount} 🏃‍♂️          |\n\n`;
+
+  markdown += `## 📝 Test Results\n`;
+
+  data.suites.forEach((suite) => {
+    markdown += `### 🗂️ Suite: ${suite.title}\n\n`;
+    markdown += `| Runner  | Test Title           | Status       | Duration | Message                          |\n`;
+    markdown += `|---------|----------------------|--------------|----------|----------------------------------|\n`;
+
+    let errorLogs = '';
+    suite.specs.forEach((spec) => {
+      spec.tests.forEach((test) => {
+        const statusIcon =
+          test.status === 'expected' ? '✅ Passed' : '❌ Failed';
+        const duration = `${test.results[0].duration}ms`;
+        const runnerId = `#${test.results[0].workerIndex + 1}`;
+        const message = extractErrorMessage(test.results[0].error);
+
+        markdown += `| ${runnerId} | ${spec.title} | ${statusIcon} | ${duration} | ${message} |\n`;
+
+        if (test.status !== 'expected') {
+          const log = extractLog(test.results[0].error?.matcherResult?.log);
+          errorLogs += `##### ❌ ${spec.title}\n\`\`\`\n${log}\n\`\`\`\n\n`;
+        }
+      });
+    });
+
+    if (errorLogs) {
+      markdown += `\n#### Error Logs\n\n${errorLogs}`;
+    }
+
+    markdown += `\n`;
+  });
+
+  return markdown;
+}
+
+fs.readFile(jsonFilePath, 'utf8', (err, jsonString) => {
+  if (err) {
+    console.error('Error reading JSON file:', err);
+    return;
+  }
+  try {
+    const jsonData = JSON.parse(jsonString);
+    const markdownReport = generateMarkdownReport(jsonData);
+
+    const outputFilePath = path.join(
+      __dirname,
+      '../../playwright-report/report.md',
+    );
+    fs.writeFileSync(outputFilePath, markdownReport);
+    console.log('Markdown report generated:', outputFilePath);
+  } catch (parseErr) {
+    console.error('Error parsing JSON data:', parseErr);
+  }
+});

.github/workflows/branch-default.yml

@@ -0,0 +1,35 @@
+name: Branch - Default
+
+on:
+    push:
+        branches-ignore:
+            - stage
+            - main
+
+jobs:
+    build-node:
+        uses: ./.github/workflows/build-node.yml
+
+        with:
+            node_version: "20"
+            app_env: "stage"
+            app_version: "ci_${{ github.sha }}"
+            azure_storage_account_name: ${{ vars.STAGE_AZURE_STORAGE_ACCOUNT_NAME }}
+            azure_storage_container_name: ${{ vars.STAGE_AZURE_STORAGE_CONTAINER_NAME }}
+
+        secrets:
+            azure_storage_account_key: ${{ secrets.STAGE_AZURE_STORAGE_ACCOUNT_KEY }}
+
+    build-canvas:
+        needs: [build-node]
+        uses: ./.github/workflows/build-canvas.yml
+        with:
+            node_version: "20"
+            app_env: "stage"
+            app_version: "ci_${{ github.sha }}"
+            canvas_theme_js_file: "https://st09417311stage-fybvhtameff0aney.z01.azurefd.net/themes/ci_${{ github.sha }}/theme-udirdesign.js"
+            canvas_theme_css_file: "https://st09417311stage-fybvhtameff0aney.z01.azurefd.net/themes/ci_${{ github.sha }}/theme-udirdesign.css"
+            canvas_username: ${{ vars.STAGE_CANVAS_USERNAME }}
+
+        secrets:
+            canvas_password: ${{ secrets.STAGE_CANVAS_PASSWORD }}

.github/workflows/branch-production.yml

@@ -0,0 +1,46 @@
+name: Branch - Production V1
+
+on:
+    push:
+        branches:
+            - main
+
+jobs:
+    build-node:
+        uses: ./.github/workflows/build-node.yml
+
+        with:
+            node_version: "20"
+            app_env: "production"
+            app_version: "ci_${{ github.sha }}"
+            azure_storage_account_name: ${{ vars.PROD_AZURE_STORAGE_ACCOUNT_NAME }}
+            azure_storage_container_name: ${{ vars.PROD_AZURE_STORAGE_CONTAINER_NAME }}
+
+        secrets:
+            azure_storage_account_key: ${{ secrets.PROD_AZURE_STORAGE_ACCOUNT_KEY }}
+
+    build-canvas:
+        needs: [build-node]
+        uses: ./.github/workflows/build-canvas.yml
+        with:
+            node_version: "20"
+            app_env: "production"
+            app_version: "ci_${{ github.sha }}"
+            canvas_theme_js_file: "https://st09417311prod-ahfvbhg8cbh4frf9.z01.azurefd.net/themes/ci_${{ github.sha }}/theme-udirdesign.js"
+            canvas_theme_css_file: "https://st09417311prod-ahfvbhg8cbh4frf9.z01.azurefd.net/themes/ci_${{ github.sha }}/theme-udirdesign.css"
+            canvas_username: ${{ vars.PROD_CANVAS_USERNAME }}
+
+        secrets:
+            canvas_password: ${{ secrets.PROD_CANVAS_PASSWORD }}
+
+    deploy-canvas:
+        needs: [build-canvas]
+        uses: ./.github/workflows/deploy-canvas.yml
+        with:
+            node_version: "20"
+            app_env: "production"
+            app_version: "ci_${{ github.sha }}"
+            canvas_username: ${{ vars.PROD_CANVAS_USERNAME }}
+
+        secrets:
+            canvas_password: ${{ secrets.PROD_CANVAS_PASSWORD }}

.github/workflows/branch-stage.yml

@@ -0,0 +1,46 @@
+name: Branch - Stage V1
+
+on:
+    push:
+        branches:
+            - stage
+
+jobs:
+    build-node:
+        uses: ./.github/workflows/build-node.yml
+
+        with:
+            node_version: "20"
+            app_env: "stage"
+            app_version: "ci_${{ github.sha }}"
+            azure_storage_account_name: ${{ vars.STAGE_AZURE_STORAGE_ACCOUNT_NAME }}
+            azure_storage_container_name: ${{ vars.STAGE_AZURE_STORAGE_CONTAINER_NAME }}
+
+        secrets:
+            azure_storage_account_key: ${{ secrets.STAGE_AZURE_STORAGE_ACCOUNT_KEY }}
+
+    build-canvas:
+        needs: [build-node]
+        uses: ./.github/workflows/build-canvas.yml
+        with:
+            node_version: "20"
+            app_env: "stage"
+            app_version: "ci_${{ github.sha }}"
+            canvas_theme_js_file: "https://st09417311stage-fybvhtameff0aney.z01.azurefd.net/themes/ci_${{ github.sha }}/theme-udirdesign.js"
+            canvas_theme_css_file: "https://st09417311stage-fybvhtameff0aney.z01.azurefd.net/themes/ci_${{ github.sha }}/theme-udirdesign.css"
+            canvas_username: ${{ vars.STAGE_CANVAS_USERNAME }}
+
+        secrets:
+            canvas_password: ${{ secrets.STAGE_CANVAS_PASSWORD }}
+
+    deploy-canvas:
+        needs: [build-canvas]
+        uses: ./.github/workflows/deploy-canvas.yml
+        with:
+            node_version: "20"
+            app_env: "stage"
+            app_version: "ci_${{ github.sha }}"
+            canvas_username: ${{ vars.STAGE_CANVAS_USERNAME }}
+
+        secrets:
+            canvas_password: ${{ secrets.STAGE_CANVAS_PASSWORD }}

.github/workflows/build-canvas.yml

@@ -0,0 +1,91 @@
+on:
+    workflow_call:
+        inputs:
+            node_version:
+                type: string
+                description: 'Node.js version'
+                required: true
+            app_env:
+                type: string
+                description: 'Application environment'
+                required: true
+            app_version:
+                type: string
+                description: 'Application version'
+                required: true
+
+            canvas_theme_js_file:
+                type: string
+                description: 'Canvas theme JS file'
+                required: true
+            canvas_theme_css_file:
+                type: string
+                description: 'Canvas theme CSS file'
+                required: true
+            canvas_username:
+                type: string
+                description: 'Canvas username'
+                required: true
+
+        secrets:
+            canvas_password:
+                description: 'Canvas password'
+                required: true
+
+jobs:
+    build-canvas:
+        name: Build - Canvas
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: ${{ inputs.node_version }}
+
+            - name: Cache pnpm packages
+              uses: actions/cache@v4
+              with:
+                  path: ~/.pnpm-store
+                  key: pnpm-cache
+                  restore-keys: |
+                      pnpm-
+
+            - name: Install PNPM and Dependencies
+              run: |
+                  npm install -g pnpm
+                  pnpm install --frozen-lockfile
+ 
+            - name: Cache Playwright dependencies
+              id: playwright-cache
+              uses: actions/cache@v4
+              with:
+                  path: ~/.cache/ms-playwright
+                  key: playwright-cache
+                  restore-keys: |
+                      playwright-
+
+            - name: Install Playwright dependencies
+              if: steps.playwright-cache.outputs.cache-hit != 'true'
+              run: pnpm exec playwright install --with-deps
+
+            - name: Run Playwright Tests
+              run: pnpm exec playwright test ./tests/canvas/build-theme.spec.js
+              env:
+                APP_ENV: ${{ inputs.app_env }}
+                APP_VERSION: ${{ inputs.app_version }}
+                THEME_JS_FILE: ${{ inputs.canvas_theme_js_file }}
+                THEME_CSS_FILE: ${{ inputs.canvas_theme_css_file }}
+                BASIC_AUTH_USERNAME: ${{ inputs.canvas_username }}
+                BASIC_AUTH_PASSWORD: ${{ secrets.canvas_password }}
+                CI: true
+
+            - name: Generate Markdown Report
+              id: generate-markdown
+              run: node .github/playwright/markdown-reporter.js
+
+            - name: Upload Markdown Report to GitHub Summary
+              run: |
+                cat ./playwright-report/report.md >> $GITHUB_STEP_SUMMARY