test: refactor e2e folders

[BioPhoton]

Motivation

Maintaining standardized targets across all projects in this repository is essential for consistency and quality. Currently, the apps folder does not fully align with the high standards established in packages.

By bringing apps up to the same standards, we can lock in a stable, maintainable state and introduce more automation to ensure these standards remain high. This benefits all maintainers and contributors by reducing technical debt and improving overall project health.

Problem

• docs, e2e fixtures and e2e test projects are all in one folder apps
• css and scss apps are duplicates besides the rsbuild.config.ts and rspack.config.ts file

Suggested Solution

To achieve this, we define a set of must-have targets and ensure the repository is standardised and they are passin:

• build - Using ng-rspack executor
• lint - Using @nx/eslint executor
• e2e - Using @nx/playwright executor
• integration - Using @nx/vitest executor

Implementation Details

📌 Legend:

• 📦 RsPack
• 🦀 RsBuild
• 🎭 Playwright (e2e testing)
• 📋 ESLint
• 🧪 Vitest (integration testing)

Current Tree

The current structure has deeply nested directories within apps, making it difficult to maintain consistency across configurations for rsbuild, rspack, eslint, and playwright targets. Each subdirectory contains its own isolated configuration files, leading to duplication and scattered resources.

root
┣━ 📂 apps 
┇  ┣━ 📂 docs 
   ┃  ┣━ 📋 eslint.config.ts
   ┃  ┣━ 🧪 vitest.config.ts
   ┃  ┗━ 🦀 rsbuild.config.ts
   ┣━ 📂 rsbuild 
   ┃  ┣━ 📂 csr
   ┃  ┃  ┣━ 📂 css 
   ┃  ┃  ┃  ┣━ 📋 eslint.config.ts
   ┃  ┃  ┃  ┣━ 🧪 vitest.config.ts
   ┃  ┃  ┃  ┗━ 🦀 rsbuild.config.ts
   ┃  ┃  ┣━ 📂 css-e2e 
   ┃  ┃  ┃  ┣━ 📋 eslint.config.ts
   ┃  ┃  ┃  ┗━ 🎭  playwright.config.ts
   ┃  ┃  ┣━ 📂 scss 
   ┃  ┃  ┃  ┣━ 📋 eslint.config.ts
   ┃  ┃  ┃  ┣━ 🧪 vitest.config.ts
   ┃  ┃  ┃  ┗━ 🦀 rsbuild.config.ts
   ┃  ┃  ┗━ 📂 scss-e2e 
   ┃  ┃     ┣━ 📋 eslint.config.ts
   ┃  ┃     ┗━ 🎭  playwright.config.ts
   ┃  ┗━ 📂 ssr
   ┃     ┣━ 📂 css 
   ┃     ┃  ┣━ 📋 eslint.config.ts
   ┃     ┃  ┣━ 🧪 vitest.config.ts
   ┃     ┃  ┗━ 🦀 rsbuild.config.ts
   ┃     ┗━ 📂 css-e2e 
   ┃          ┣━ 📋 eslint.config.ts
   ┃          ┗━ 🎭  playwright.config.ts
   ┗━ 📂 rspack 
      ┣━ 📂 csr
      ┃  ┗━ 📂 css 
      ┃     ┣━ 📋 eslint.config.ts
      ┃     ┣━ 🧪 vitest.config.ts
      ┃     ┗━ 📦 rspack.config.js
      ┗━ 📂 ssr
         ┗━ 📂 css 
            ┣━ 📋 eslint.config.ts
            ┣━ 🧪 vitest.config.ts
            ┗━ 📦 rspack.config.js

Target Tree

The new structure separated documentation from testing and centralizes configurations into e2e for all end-to-end testing setups. This reorganization reduces redundancy, and maintenance.

The following things are suggsted:

• align all 🦀 and 📦 files to have .ts extension
• move e2e related code into e2e folder
• for each e2e project
  • maintain test applications inside e2e/fixtures and reuse it across the e2e test projects
  • maintain 🦀 and 📦 files inside e2e/<project>/fixtures e.g. e2e/rsbuild-csr-css-e2e/fixtures
  • autogenerate the final test setup under tmp and use it in playwright.config.ts
    • copy e2e/fixtures/css under tmp/e2e/<project>
    • copy e2e/rsbuild-csr-css-e2e/fixtures under tmp/e2e/<project>
    • generate package.json under tmp/e2e/<project>/package.json

root
┣━ 📂 apps 
┃  ┗━ 📂 docs 
┃     ┣━ 📋 eslint.config.ts
┃     ┣━ 🧪 vitest.config.ts
┃     ┗━ 🦀 rsbuild.config.ts
┣━ 📂 e2e 
┇  ┣━ 📂 fixtures
   ┃  ┣━ 📂 css 
   ┃  ┃  ┣━ 📋 eslint.config.ts
   ┃  ┃  ┗━ 🧪 vitest.config.ts
   ┃  ┗━ 📂 scss 
   ┃       ┣━ 📋 eslint.config.ts
   ┃       ┗━ 🧪 vitest.config.ts
   ┣━ 📂 rsbuild-csr-css-e2e 
   ┃  ┣━ 📂 fixtures
   ┃  ┃  ┗━ 🦀 rsbuild.config.ts
   ┃  ┣━ 📋 eslint.config.ts
   ┃  ┗━ 🎭  playwright.config.ts
   ┣━ 📂 rsbuild-csr-css-e2e 
   ┃  ┣━ 📂 fixtures
   ┃  ┃  ┗━ 🦀 rsbuild.config.ts
   ┃  ┣━ 📋 eslint.config.ts
   ┃  ┗━ 🎭  playwright.config.ts
   ┣━ 📂 rspack-csr-css-e2e 
   ┃  ┣━ 📂 fixtures
   ┃  ┃  ┗━ 📦 rspack.config.ts
   ┃  ┣━ 📋 eslint.config.ts
   ┃  ┗━ 🎭  playwright.config.ts
   ┗━ 📂 rspack-csr-css-e2e 
      ┣━ 📂 fixtures
      ┃  ┗━ 📦 rspack.config.ts
      ┣━ 📋 eslint.config.ts
      ┗━ 🎭  playwright.config.ts

Todos:

• move e2e projects from apps into e2e - e2e: move docs out of e2e #101
• move „dummy“ apps used in e2e tests into e2e/fixtures - refactor: intro e2e fixtures #104
• reduce duplicate code by composing the dummy app before e2e - ci: init e2e-fixture-base #114
• setup eslint for fixtures (use 🅰️ Angular eslint) - ci: introduce specific eslint config for package and e2e folder #105
• setup eslint for packages - ci: add lint rules to packages #125
• setup eslint for apps folder (use 🎭 Playwright eslint) - ci: introduce specific eslint config for package and e2e folder #105
• refining dummy code to use more relevant features