diff --git a/.github/workflows/run-tests-example-apps.yml b/.github/workflows/run-tests-example-apps.yml new file mode 100644 index 0000000000..7c324f2cca --- /dev/null +++ b/.github/workflows/run-tests-example-apps.yml @@ -0,0 +1,30 @@ +name: Run tests for example apps + +on: + workflow_call: + # TODO: Enable this when we test this workflow manually + # pull_request: + # branches: + # - develop + +jobs: + run-tests-example-apps: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup node + uses: actions/setup-node@v4 + with: + node-version: 22 + cache: npm + + - name: Install dependencies + run: cd examples/tests && npm ci + + - name: Install Playwright browsers + run: cd examples/tests && npx playwright install --with-deps + + - name: Run tests + run: cd examples/tests && npm test \ No newline at end of file diff --git a/examples/react-example/package-lock.json b/examples/react-example/package-lock.json index 66d621e35b..e7686cbeb0 100644 --- a/examples/react-example/package-lock.json +++ b/examples/react-example/package-lock.json @@ -14,7 +14,7 @@ }, "devDependencies": { "@vitejs/plugin-react": "^4.0.4", - "vite": "^7.0.5" + "vite": "^6.2.0" } }, "node_modules/@ampproject/remapping": { @@ -3899,24 +3899,24 @@ } }, "node_modules/vite": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.5.tgz", - "integrity": "sha512-1mncVwJxy2C9ThLwz0+2GKZyEXuC3MyWtAAlNftlZZXZDP3AJt5FmwcMit/IGGaNZ8ZOB2BNO/HFUB+CpN0NQw==", + "version": "6.3.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz", + "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==", "dev": true, "license": "MIT", "dependencies": { "esbuild": "^0.25.0", - "fdir": "^6.4.6", + "fdir": "^6.4.4", "picomatch": "^4.0.2", - "postcss": "^8.5.6", - "rollup": "^4.40.0", - "tinyglobby": "^0.2.14" + "postcss": "^8.5.3", + "rollup": "^4.34.9", + "tinyglobby": "^0.2.13" }, "bin": { "vite": "bin/vite.js" }, "engines": { - "node": "^20.19.0 || >=22.12.0" + "node": "^18.0.0 || ^20.0.0 || >=22.0.0" }, "funding": { "url": "https://github.com/vitejs/vite?sponsor=1" @@ -3925,14 +3925,14 @@ "fsevents": "~2.3.3" }, "peerDependencies": { - "@types/node": "^20.19.0 || >=22.12.0", + "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", - "less": "^4.0.0", + "less": "*", "lightningcss": "^1.21.0", - "sass": "^1.70.0", - "sass-embedded": "^1.70.0", - "stylus": ">=0.54.8", - "sugarss": "^5.0.0", + "sass": "*", + "sass-embedded": "*", + "stylus": "*", + "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" diff --git a/examples/react-example/package.json b/examples/react-example/package.json index 18365e9c66..a09eb9343d 100644 --- a/examples/react-example/package.json +++ b/examples/react-example/package.json @@ -13,6 +13,6 @@ }, "devDependencies": { "@vitejs/plugin-react": "^4.0.4", - "vite": "^7.0.5" + "vite": "^6.2.0" } } diff --git a/examples/tests/.gitignore b/examples/tests/.gitignore new file mode 100644 index 0000000000..a0c9a3e8e7 --- /dev/null +++ b/examples/tests/.gitignore @@ -0,0 +1 @@ +playwright-report \ No newline at end of file diff --git a/examples/tests/package.json b/examples/tests/package.json new file mode 100644 index 0000000000..ceb4d6e42b --- /dev/null +++ b/examples/tests/package.json @@ -0,0 +1,15 @@ +{ + "name": "demo-gallery-tests", + "version": "1.0.0", + "description": "Automated tests suites for all examples on the demo gallery", + "main": "index.js", + "scripts": { + "test": "npx playwright test" + }, + "author": "", + "license": "ISC", + "devDependencies": { + "@playwright/test": "^1.55.0", + "playwright": "^1.55.0" + } +} diff --git a/examples/tests/playwright.config.js b/examples/tests/playwright.config.js new file mode 100644 index 0000000000..ae3cc34766 --- /dev/null +++ b/examples/tests/playwright.config.js @@ -0,0 +1,48 @@ +import { defineConfig, devices } from '@playwright/test'; +import testConfig from './test-config.js'; + +const foldersToTest = testConfig.include; + +export default defineConfig({ + testMatch: '**/*.spec.js', + + // Run all tests in parallel. + fullyParallel: true, + + // Fail the build on CI if you accidentally left test.only in the source code. + forbidOnly: !!process.env.CI, + + // Retry on CI only. + retries: process.env.CI ? 2 : 0, + + // Opt out of parallel tests on CI. + workers: process.env.CI ? 1 : undefined, + + // Reporter to use + reporter: 'html', + + use: { + // Base URL to use in actions like `await page.goto('/')`. + baseURL: 'http://localhost:5173', + + // Collect trace when retrying the failed test. + trace: 'on-first-retry', + }, + // Configure projects for major browsers. + projects: [ + { + name: 'chromium', + use: { ...devices['Desktop Chrome'] }, + }, + ], + + // Open every example in a separate server + webServer: testConfig.include.map(({name, command}, i) => { + return { + command: `${command} -- --port ${5173 + i}`, + url: `http://localhost:${5173 + i}`, + reuseExistingServer: !process.env.CI, + timeout: 120 * 1000, // 2 minutes timeout for server startup + } + }) +}); \ No newline at end of file diff --git a/examples/tests/test-config.js b/examples/tests/test-config.js new file mode 100644 index 0000000000..9c4cf79ad4 --- /dev/null +++ b/examples/tests/test-config.js @@ -0,0 +1,52 @@ +export default { + include: [ + { + name: "cdn-example", + command: 'cd ../cdn-example && npm run start', + }, + { + name: "external-plugin-dynamic-content", + command: 'cd ../external-plugin-dynamic-content && npm install && npm run dev', + }, + { + name: "next-js-ssr", + command: 'cd ../next-js-ssr && npm install && npm run dev', + }, + { + name: "programmatic-text-selection", + command: 'cd ../programmatic-text-selection && npm install && npm run dev', + }, + { + name: "react-example", + command: 'cd ../react-example && npm install && npm run dev', + }, + { + name: "typescript-example", + command: 'cd ../typescript-example && npm install && npm run dev', + }, + { + name: "vanilla-example", + command: 'cd ../vanilla-example && npm install && npm run dev', + }, + { + name: "vue-custom-mark", + command: 'cd ../vue-custom-mark && npm install && npm run dev', + }, + { + name: "vue-docx-from-html", + command: 'cd ../vue-docx-from-html && npm install && npm run dev', + }, + { + name: "vue-example", + command: 'cd ../vue-example && npm install && npm run dev', + }, + { + name: "vue-fields-example", + command: 'cd ../vue-fields-example && npm install && npm run dev', + }, + { + name: "vue-linked-editor-sections", + command: 'cd ../vue-linked-editor-sections && npm install && npm run dev', + }, + ] +} \ No newline at end of file diff --git a/examples/tests/tests.spec.js b/examples/tests/tests.spec.js new file mode 100644 index 0000000000..6e3d01a3bb --- /dev/null +++ b/examples/tests/tests.spec.js @@ -0,0 +1,22 @@ +import { test, expect } from '@playwright/test'; +import testConfig from './test-config.js'; +const PORT = 5173; +const foldersToTest = testConfig.include; + +foldersToTest.forEach(({name}, i) => { + test.describe(name, () => { + test('should open the main page', async ({ page }) => { + // Should open the main page + await page.goto(`http://localhost:${PORT + i}`); + + await page.waitForSelector('div.super-editor', { + timeout: 5_000, + }); + + // Compare the screenshot with the reference screenshot + await expect(page).toHaveScreenshot({ + fullPage: true, + }); + }); +}); +}); \ No newline at end of file diff --git a/examples/tests/tests.spec.js-snapshots/cdn-example-should-open-the-main-page-1-chromium-darwin.png b/examples/tests/tests.spec.js-snapshots/cdn-example-should-open-the-main-page-1-chromium-darwin.png new file mode 100644 index 0000000000..91db6873a3 Binary files /dev/null and b/examples/tests/tests.spec.js-snapshots/cdn-example-should-open-the-main-page-1-chromium-darwin.png differ diff --git a/examples/tests/tests.spec.js-snapshots/external-plugin-dynamic-content-should-open-the-main-page-1-chromium-darwin.png b/examples/tests/tests.spec.js-snapshots/external-plugin-dynamic-content-should-open-the-main-page-1-chromium-darwin.png new file mode 100644 index 0000000000..8551c124df Binary files /dev/null and b/examples/tests/tests.spec.js-snapshots/external-plugin-dynamic-content-should-open-the-main-page-1-chromium-darwin.png differ diff --git a/examples/tests/tests.spec.js-snapshots/next-js-ssr-should-open-the-main-page-1-chromium-darwin.png b/examples/tests/tests.spec.js-snapshots/next-js-ssr-should-open-the-main-page-1-chromium-darwin.png new file mode 100644 index 0000000000..ed1863a4b1 Binary files /dev/null and b/examples/tests/tests.spec.js-snapshots/next-js-ssr-should-open-the-main-page-1-chromium-darwin.png differ diff --git a/examples/tests/tests.spec.js-snapshots/programmatic-text-selection-should-open-the-main-page-1-chromium-darwin.png b/examples/tests/tests.spec.js-snapshots/programmatic-text-selection-should-open-the-main-page-1-chromium-darwin.png new file mode 100644 index 0000000000..97bc888f18 Binary files /dev/null and b/examples/tests/tests.spec.js-snapshots/programmatic-text-selection-should-open-the-main-page-1-chromium-darwin.png differ diff --git a/examples/tests/tests.spec.js-snapshots/react-example-should-open-the-main-page-1-chromium-darwin.png b/examples/tests/tests.spec.js-snapshots/react-example-should-open-the-main-page-1-chromium-darwin.png new file mode 100644 index 0000000000..2c2fb9d6f7 Binary files /dev/null and b/examples/tests/tests.spec.js-snapshots/react-example-should-open-the-main-page-1-chromium-darwin.png differ diff --git a/examples/tests/tests.spec.js-snapshots/typescript-example-should-open-the-main-page-1-chromium-darwin.png b/examples/tests/tests.spec.js-snapshots/typescript-example-should-open-the-main-page-1-chromium-darwin.png new file mode 100644 index 0000000000..5503d8f7bd Binary files /dev/null and b/examples/tests/tests.spec.js-snapshots/typescript-example-should-open-the-main-page-1-chromium-darwin.png differ diff --git a/examples/tests/tests.spec.js-snapshots/vanilla-example-should-open-the-main-page-1-chromium-darwin.png b/examples/tests/tests.spec.js-snapshots/vanilla-example-should-open-the-main-page-1-chromium-darwin.png new file mode 100644 index 0000000000..5503d8f7bd Binary files /dev/null and b/examples/tests/tests.spec.js-snapshots/vanilla-example-should-open-the-main-page-1-chromium-darwin.png differ diff --git a/examples/tests/tests.spec.js-snapshots/vue-custom-mark-should-open-the-main-page-1-chromium-darwin.png b/examples/tests/tests.spec.js-snapshots/vue-custom-mark-should-open-the-main-page-1-chromium-darwin.png new file mode 100644 index 0000000000..e14141658d Binary files /dev/null and b/examples/tests/tests.spec.js-snapshots/vue-custom-mark-should-open-the-main-page-1-chromium-darwin.png differ diff --git a/examples/tests/tests.spec.js-snapshots/vue-docx-from-html-should-open-the-main-page-1-chromium-darwin.png b/examples/tests/tests.spec.js-snapshots/vue-docx-from-html-should-open-the-main-page-1-chromium-darwin.png new file mode 100644 index 0000000000..51e04289f5 Binary files /dev/null and b/examples/tests/tests.spec.js-snapshots/vue-docx-from-html-should-open-the-main-page-1-chromium-darwin.png differ diff --git a/examples/tests/tests.spec.js-snapshots/vue-example-should-open-the-main-page-1-chromium-darwin.png b/examples/tests/tests.spec.js-snapshots/vue-example-should-open-the-main-page-1-chromium-darwin.png new file mode 100644 index 0000000000..7cee24ad9c Binary files /dev/null and b/examples/tests/tests.spec.js-snapshots/vue-example-should-open-the-main-page-1-chromium-darwin.png differ diff --git a/examples/tests/tests.spec.js-snapshots/vue-fields-example-should-open-the-main-page-1-chromium-darwin.png b/examples/tests/tests.spec.js-snapshots/vue-fields-example-should-open-the-main-page-1-chromium-darwin.png new file mode 100644 index 0000000000..8a0dc81f11 Binary files /dev/null and b/examples/tests/tests.spec.js-snapshots/vue-fields-example-should-open-the-main-page-1-chromium-darwin.png differ diff --git a/examples/tests/tests.spec.js-snapshots/vue-linked-editor-sections-should-open-the-main-page-1-chromium-darwin.png b/examples/tests/tests.spec.js-snapshots/vue-linked-editor-sections-should-open-the-main-page-1-chromium-darwin.png new file mode 100644 index 0000000000..7d79bb4f74 Binary files /dev/null and b/examples/tests/tests.spec.js-snapshots/vue-linked-editor-sections-should-open-the-main-page-1-chromium-darwin.png differ