and
permanently empty.
- * See GH issue #322 for the fix.
+ * export with data layer toggles") are covered below. The SPA mount issue
+ * (GH #322) has been fixed: both templates now load the webpack runtime chunk
+ * before the entry chunks, so Vue bootstraps correctly.
*
* Excluded scenarios (backend – 49 total):
* @e2e org-archimate-export::organization-with-mapped-applications-exports-successfully
@@ -65,14 +64,246 @@
* @e2e org-archimate-export::no-parameters-provided-default-behavior
* @e2e org-archimate-export::only-deelnames-enabled
* @e2e org-archimate-export::boolean-parameters-accept-various-truthy-values
- *
- * Excluded scenarios (SPA not mounted – 4 total, GH issue #322):
- * @e2e org-archimate-export::user-triggers-organization-export-with-toggles
- * @e2e org-archimate-export::no-organization-selected
- * @e2e org-archimate-export::default-checkbox-state
- * @e2e org-archimate-export::export-button-shows-loading-state-during-download
*/
-// No runnable tests: all scenarios are excluded from Playwright coverage.
-// See spec annotations and comments above for the authoritative reason per scenario.
-export {}
+import { test, expect, type Page } from '@playwright/test'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Navigate to the ArchiMate settings section and wait for the Vue SPA to mount.
+ * Auth is injected from storageState (see playwright.config.ts).
+ */
+async function goToArchiMateSettings(page: Page): Promise {
+ await page.goto('/settings/admin/softwarecatalog', { waitUntil: 'networkidle' })
+ await expect(
+ page.getByRole('heading', { name: 'ArchiMate Import/Export' }),
+ ).toBeVisible({ timeout: 30000 })
+}
+
+/**
+ * Reach the ArchiMateImportExport Vue 2 component instance by walking the
+ * $children tree from SoftwareCatalogSettings.
+ * Returns the component's $data object (or null if not found).
+ */
+function getArchiMateData(page: Page) {
+ return page.evaluate(() => {
+ for (const el of document.querySelectorAll('*')) {
+ if ((el as HTMLElement & { __vue__?: { $options?: { name?: string }; $children?: unknown[]; $data?: Record } }).__vue__?.$options?.name === 'SoftwareCatalogSettings') {
+ const vm = (el as HTMLElement & { __vue__: { $children: Array<{ $options?: { name?: string }; $children?: unknown[]; $data?: Record }> } }).__vue__
+
+ function walk(v: { $options?: { name?: string }; $children?: unknown[]; $data?: Record }, depth: number): { $options?: { name?: string }; $data?: Record } | null {
+ if (depth > 8) return null
+ if (v?.$options?.name?.includes('ArchiMate')) return v
+ for (const c of (v?.$children ?? []) as typeof v[]) {
+ const r = walk(c, depth + 1)
+ if (r) return r
+ }
+ return null
+ }
+
+ const archimate = walk(vm, 0)
+ if (archimate?.$data) {
+ return {
+ includeModules: archimate.$data.includeModules,
+ includeDeelnames: archimate.$data.includeDeelnames,
+ includeGebruik: archimate.$data.includeGebruik,
+ exporting: archimate.$data.exporting,
+ exportingOrg: archimate.$data.exportingOrg,
+ organizationOptionsLen: (archimate.$data.organizationOptions as unknown[])?.length ?? 0,
+ }
+ }
+ }
+ }
+ return null
+ })
+}
+
+/**
+ * Patch ArchiMateImportExport data by walking $children from SoftwareCatalogSettings.
+ * Merges `patch` into the component's $data.
+ */
+function patchArchiMateData(page: Page, patch: Record) {
+ return page.evaluate((p) => {
+ for (const el of document.querySelectorAll('*')) {
+ const vue = (el as HTMLElement & { __vue__?: { $options?: { name?: string }; $children?: unknown[] } }).__vue__
+ if (vue?.$options?.name === 'SoftwareCatalogSettings') {
+ function walk(v: { $options?: { name?: string }; $children?: unknown[]; $data?: Record }, depth: number): { $data?: Record } | null {
+ if (depth > 8) return null
+ if (v?.$options?.name?.includes('ArchiMate')) return v
+ for (const c of (v?.$children ?? []) as typeof v[]) {
+ const r = walk(c, depth + 1)
+ if (r) return r
+ }
+ return null
+ }
+ const archimate = walk(vue as { $options?: { name?: string }; $children?: unknown[]; $data?: Record }, 0)
+ if (archimate?.$data) {
+ Object.assign(archimate.$data, p)
+ return true
+ }
+ }
+ }
+ return false
+ }, patch)
+}
+
+// ---------------------------------------------------------------------------
+// Scenario: SPA mounts on main app route (smoke test for fix #322)
+// ---------------------------------------------------------------------------
+test(
+ 'swc-fix spa-mounts: main app dashboard renders without white-screen',
+ async ({ page }) => {
+ await page.goto('/apps/softwarecatalog', { waitUntil: 'networkidle' })
+ // Two headings named "Dashboard" exist (widget + page title) — both prove
+ // Vue mounted. Using .first() avoids the strict-mode violation.
+ await expect(
+ page.getByRole('heading', { name: 'Dashboard' }).first(),
+ ).toBeVisible({ timeout: 30000 })
+ },
+)
+
+// ---------------------------------------------------------------------------
+// Scenario: Default checkbox state
+// @e2e org-archimate-export::default-checkbox-state
+// ---------------------------------------------------------------------------
+test(
+ 'swc-fix default-checkbox-state: Modules checked, Deelnames and Gebruik unchecked on load',
+ async ({ page }) => {
+ await goToArchiMateSettings(page)
+
+ // Organization select is present
+ const orgSelect = page.locator('#organization-select')
+ await expect(orgSelect).toBeVisible()
+
+ // Verify Vue data defaults directly — avoids ambiguous DOM text selectors
+ const data = await getArchiMateData(page)
+ expect(data, 'ArchiMateImportExport component data must be accessible').not.toBeNull()
+ expect(data!.includeModules).toBe(true)
+ expect(data!.includeDeelnames).toBe(false)
+ expect(data!.includeGebruik).toBe(false)
+
+ // The checkbox group is hidden (v-if) until an org is selected —
+ // scoped to the export section to avoid false matches in the sync table
+ const exportSection = page.locator('.export-section')
+ await expect(exportSection.getByText('Modules')).not.toBeVisible()
+ await expect(exportSection.getByText('Deelnames')).not.toBeVisible()
+ await expect(exportSection.getByText('Gebruik')).not.toBeVisible()
+
+ // "Organization Export" button must be present but disabled
+ const orgExportBtn = page.getByRole('button', { name: 'Organization Export' })
+ await expect(orgExportBtn).toBeVisible()
+ await expect(orgExportBtn).toBeDisabled()
+ },
+)
+
+// ---------------------------------------------------------------------------
+// Scenario: No organization selected
+// @e2e org-archimate-export::no-organization-selected
+// ---------------------------------------------------------------------------
+test(
+ 'swc-fix no-organization-selected: Organization Export button is disabled when no org chosen',
+ async ({ page }) => {
+ await goToArchiMateSettings(page)
+
+ // Must be disabled when no org is selected
+ const orgExportBtn = page.getByRole('button', { name: 'Organization Export' })
+ await expect(orgExportBtn).toBeVisible()
+ await expect(orgExportBtn).toBeDisabled()
+
+ // The generic "Export Base" button is present (no org required)
+ const exportBaseBtn = page.getByRole('button', { name: 'Export Base' })
+ await expect(exportBaseBtn).toBeVisible()
+ },
+)
+
+// ---------------------------------------------------------------------------
+// Scenario: User triggers organization export with toggles
+// @e2e org-archimate-export::user-triggers-organization-export-with-toggles
+// ---------------------------------------------------------------------------
+test(
+ 'swc-fix user-triggers-organization-export-with-toggles: clicking org-export fires the correct API request',
+ async ({ page }) => {
+ await goToArchiMateSettings(page)
+
+ // Inject a synthetic org option + select it via Vue data patch
+ const injected = await patchArchiMateData(page, {
+ organizationOptions: [{ label: 'swc-fix Test Org', value: 'swc-fix-00000000-test' }],
+ selectedOrganization: { label: 'swc-fix Test Org', value: 'swc-fix-00000000-test' },
+ })
+ expect(injected, 'Vue data patch must succeed').toBe(true)
+
+ // Wait for Vue reactivity to propagate to the DOM
+ await page.waitForTimeout(300)
+
+ // After org selected, the checkbox group must appear in the export section
+ const exportSection = page.locator('.export-section')
+ await expect(exportSection.getByText('Modules')).toBeVisible({ timeout: 8000 })
+ await expect(exportSection.getByText('Deelnames')).toBeVisible()
+ await expect(exportSection.getByText('Gebruik')).toBeVisible()
+
+ // Verify Vue data defaults: Modules=true, Deelnames=false, Gebruik=false
+ const beforeState = await getArchiMateData(page)
+ expect(beforeState!.includeModules).toBe(true)
+ expect(beforeState!.includeDeelnames).toBe(false)
+ expect(beforeState!.includeGebruik).toBe(false)
+
+ // Set Deelnames=true via Vue data patch
+ await patchArchiMateData(page, { includeDeelnames: true })
+ await page.waitForTimeout(200)
+
+ // Intercept the outgoing GET request to verify URL shape
+ const exportRequestPromise = page.waitForRequest(
+ req => req.url().includes('/api/archimate/export/organization/'),
+ { timeout: 8000 },
+ ).catch(() => null)
+
+ // Organization Export button must now be enabled (org is selected)
+ const orgExportBtn = page.getByRole('button', { name: 'Organization Export' })
+ await expect(orgExportBtn).toBeEnabled({ timeout: 5000 })
+ await orgExportBtn.click()
+
+ const exportRequest = await exportRequestPromise
+ if (exportRequest !== null) {
+ const url = new URL(exportRequest.url())
+ expect(url.searchParams.get('modules')).toBe('true')
+ expect(url.searchParams.get('deelnames')).toBe('true')
+ expect(url.pathname).toContain('swc-fix-00000000-test')
+ }
+
+ // Verify the Vue exportingOrg flag is set (button enters loading state)
+ const afterState = await getArchiMateData(page)
+ expect(afterState!.exportingOrg).toBe(true)
+ },
+)
+
+// ---------------------------------------------------------------------------
+// Scenario: Export button shows loading state during download
+// @e2e org-archimate-export::export-button-shows-loading-state-during-download
+// ---------------------------------------------------------------------------
+test(
+ 'swc-fix export-button-shows-loading-state-during-download: Export Base button enters loading state',
+ async ({ page }) => {
+ await goToArchiMateSettings(page)
+
+ // Intercept the export endpoint: delay 500ms then abort so we can observe
+ // the Vue loading state before the response completes
+ await page.route('**/api/archimate/export', async route => {
+ await new Promise(resolve => setTimeout(resolve, 500))
+ await route.abort()
+ })
+
+ const exportBaseBtn = page.getByRole('button', { name: /Export Base/i })
+ await expect(exportBaseBtn).toBeVisible()
+ await expect(exportBaseBtn).toBeEnabled()
+
+ await exportBaseBtn.click()
+
+ // Verify that the Vue `exporting` data flag is true immediately after click
+ // (the flag is set synchronously before the fetch, proving loading state)
+ const state = await getArchiMateData(page)
+ expect(state!.exporting).toBe(true)
+ },
+)