chore: Add dashboard extension test to CI

.github/workflows/build_test_dashboard.yml

@@ -98,6 +98,12 @@ jobs:
                   cd $HOME/install/test-app
                   npm install @vendure/dashboard@ci --registry=http://localhost:4873
                   cp -v $GITHUB_WORKSPACE/.github/workflows/scripts/vite.config.mts ./vite.config.mts
+                  # Create plugins directory and copy test plugin
+                  mkdir -p src/plugins/test-plugin
+                  cp -rv $GITHUB_WORKSPACE/.github/workflows/scripts/test-plugin/* src/plugins/test-plugin/
+                  # Copy and run the setup script
+                  cp -v $GITHUB_WORKSPACE/.github/workflows/scripts/setup-test-plugin.js ./setup-test-plugin.js
+                  node setup-test-plugin.js
             - name: Install Playwright
               run: |
                   cd $GITHUB_WORKSPACE

.github/workflows/scripts/dashboard-tests.js

@@ -148,6 +148,15 @@ async function runDashboardTests() {
             throw new Error('Expected 10 products, but found ' + products.length);
         }
 
+        // Check for the test component from our plugin
+        console.log('Checking for dashboard extensiontest component...');
+        try {
+            await page.waitForSelector('div[data-testid="test-component"]', { timeout: 5000 });
+            console.log('Test component found successfully');
+        } catch (e) {
+            throw new Error('Test component not found - div with data-testid="test-component" is missing');
+        }
+
         console.log('Dashboard tests passed!');
     } catch (error) {
         console.error('Dashboard test failed:', error.message);

.github/workflows/scripts/setup-test-plugin.js

@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+
+// Read the vendure-config.ts file
+const configPath = path.join(process.cwd(), 'src', 'vendure-config.ts');
+let configContent = fs.readFileSync(configPath, 'utf-8');
+
+// Add the import statement at the top of the file
+const importStatement = `import { TestPlugin } from './plugins/test-plugin/test.plugin';\n`;
+configContent = importStatement + configContent;
+
+// Add TestPlugin to the plugins array
+// First, find the plugins array in the config
+const pluginsMatch = configContent.match(/plugins:\s*\[([\s\S]*?)\]/);
+if (pluginsMatch) {
+    const existingPlugins = pluginsMatch[1].trim();
+    // Replace the existing plugins array with the updated one including TestPlugin
+    const updatedPlugins = existingPlugins
+        ? `${existingPlugins.replace(/,\s*$/, '')},\n        TestPlugin`
+        : 'TestPlugin';
+    configContent = configContent.replace(/plugins:\s*\[([\s\S]*?)\]/, `plugins: [${updatedPlugins}]`);
+}
+
+// Write the modified content back to the file
+fs.writeFileSync(configPath, configContent);

.github/workflows/scripts/test-plugin/dashboard/index.tsx

@@ -0,0 +1,9 @@
+import { defineDashboardExtension } from '@vendure/dashboard';
+
+defineDashboardExtension({
+    // Let's add a simple test page to check things are working
+    actionBarItems: [{
+        pageId: 'product-list',
+        component: () => <div data-testid="test-component">test component</div>
+    }]
+});

.github/workflows/scripts/test-plugin/test.plugin.ts

@@ -0,0 +1,12 @@
+import { PluginCommonModule, VendurePlugin } from '@vendure/core';
+
+/**
+ * This plugin is to test that the Dashboard will successfully compile and display a
+ * dashboard extension.
+ */
+@VendurePlugin({
+    imports: [PluginCommonModule],
+    dashboard: './dashboard/index.tsx',
+    compatibility: '>=3.0.0',
+})
+export class TestPlugin {}