refactor: move webform-export code to a dedicated package

Because e2e tests will be deleted from the cloned projects.

apps/cms/package.json

@@ -14,7 +14,7 @@
     "drush": "SB_ENVIRONMENT=1 SIMPLETEST_DB=sqlite://localhost/sites/default/files/.sqlite DRUSH_OPTIONS_URI=http://127.0.0.1:8888 vendor/bin/drush",
     "silverback": "SB_ENVIRONMENT=1 SIMPLETEST_DB=sqlite://localhost/sites/default/files/.sqlite SB_ADMIN_USER=admin SB_ADMIN_PASS=admin vendor/bin/silverback",
     "drupal-install": "SB_SETUP=1 pnpm silverback setup --profile minimal && pnpm content:import && pnpm drush php-eval 'node_access_rebuild();' && rm -rf install-cache.zip && pnpm fix-premissions",
-    "export-webforms": "pnpm --filter '@custom-tests/e2e' webform-snapshots",
+    "export-webforms": "pnpm --filter '@custom/webform-export' webform-snapshots",
     "start": "cd web; SB_ENVIRONMENT=1 SIMPLETEST_DB=sqlite://localhost/sites/default/files/.sqlite DRUSH_OPTIONS_URI=http://127.0.0.1:8888 php -S 0.0.0.0:8888 .ht.router.php # no drush to avoid the drush server timeout",
     "dev": "pnpm start",
     "clear": "pnpm drush cr",

apps/cms/turbo.json

@@ -8,7 +8,11 @@
       "dependsOn": ["prep:database"]
     },
     "prep:database": {
-      "dependsOn": ["prep:composer", "^prep"],
+      "dependsOn": [
+        "prep:composer",
+        "^prep",
+        "@custom/webform-export#test:static"
+      ],
       "inputs": [
         "turbo-seed.txt",
         "prep-database.sh",

packages/webform-export/.gitignore

@@ -0,0 +1,2 @@
+/test-results
+/playwright-report

packages/webform-export/README.md

@@ -0,0 +1 @@
+Exports Drupal webforms to UI package for styling.

packages/webform-export/eslint.config.mjs

@@ -0,0 +1,8 @@
+import { base, defineConfig } from '@custom/eslint-config';
+
+export default defineConfig([
+  ...base,
+  {
+    ignores: ['playwright-report/**', 'test-results/**'],
+  },
+]);

packages/webform-export/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@custom/webform-export",
+  "type": "module",
+  "scripts": {
+    "test:static": "tsc --noEmit && eslint . --quiet",
+    "webform-snapshots": "playwright install chromium && playwright test",
+    "webform-snapshots:headed": "playwright install chromium && playwright test --headed"
+  },
+  "devDependencies": {
+    "@amazeelabs/save-webpage": "^1.1.1",
+    "@custom/eslint-config": "workspace:*",
+    "@playwright/test": "^1.44.1",
+    "@types/node": "^18",
+    "typescript": "^5.3.3"
+  }
+}

tests/e2e/playwright.config.webforms.ts → packages/webform-export/playwright.config.ts

@@ -1,10 +1,15 @@
 import { defineConfig, devices } from '@playwright/test';
 
-import defaults from './playwright.config.default';
-
 export default defineConfig({
-  ...defaults,
-  testDir: './webform-snapshots',
+  fullyParallel: true,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'html',
+  use: {
+    trace: process.env.CI ? 'retain-on-failure' : 'on',
+    actionTimeout: 10_000,
+  },
+  testDir: './specs',
   webServer: [
     {
       command: 'pnpm run --filter "@custom/cms" start >> /tmp/cms.log 2>&1',

tests/e2e/webform-snapshots/webforms.spec.ts → packages/webform-export/specs/webforms.spec.ts

@@ -2,18 +2,16 @@ import { saveWebpage } from '@amazeelabs/save-webpage';
 import { expect, Page, test } from '@playwright/test';
 import { execSync } from 'child_process';
 
-import { cmsUrl } from '../helpers/url';
-
-const baseDir = '../../packages/ui/static/stories/webforms';
+const baseDir = '../ui/static/stories/webforms';
 const iframeResizerSelector =
   'script[src*="silverback_iframe/js/iframeResizer.contentWindow.min.js"]';
 
 test('Export webforms for styling', async ({ page }) => {
   execSync(`rm -rf ${baseDir}`);
 
-  const baseUrl = cmsUrl('/en/form/styling?iframe=true&no_css=true');
-
-  page.setViewportSize({
+  const baseUrl =
+    'http://127.0.0.1:8888/en/form/styling?iframe=true&no_css=true';
+  await page.setViewportSize({
     // In the frontend the form is wrapped into a div with max-w-3xl class,
     // which translates to 48 rem, which is 768 px. Roughly.
     // We try to match the width because the modal is centered dynamically by

packages/webform-export/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "skipLibCheck": true
+  }
+}

packages/webform-export/turbo.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "test:static": {
+      "inputs": ["specs/**", "playwright.config.ts"]
+    }
+  }
+}

tests/e2e/package.json

@@ -13,12 +13,9 @@
     "test:headed:drupal": "playwright install chromium && playwright test --headed --config playwright.config.drupal.ts",
     "test:headed:decap": "playwright install chromium && playwright test --headed --config playwright.config.decap.ts",
     "dev:decap": "playwright install chromium && playwright test --ui --config playwright.config.decap.ts",
-    "dev:drupal": "playwright install chromium && playwright test --ui --config playwright.config.drupal.ts",
-    "webform-snapshots": "playwright install chromium && playwright test --config playwright.config.webforms.ts",
-    "webform-snapshots:headed": "playwright install chromium && playwright test --config playwright.config.webforms.ts --headed"
+    "dev:drupal": "playwright install chromium && playwright test --ui --config playwright.config.drupal.ts"
   },
   "devDependencies": {
-    "@amazeelabs/save-webpage": "^1.1.1",
     "@custom/eslint-config": "workspace:*",
     "@playwright/test": "^1.44.1",
     "@types/node": "^18",