Added Cypress tests for Plone 7

.github/workflows/acceptance.yml

@@ -691,3 +691,51 @@ jobs:
         with:
           name: cypress-videos
           path: packages/volto/cypress/videos
+
+  plone7:
+    if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.event.pull_request.base.repo.full_name
+    runs-on: ubuntu-latest
+    name: Plone 7
+    timeout-minutes: 45
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: [22.x]
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js environment
+        uses: ./.github/actions/node_env_setup
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Cypress acceptance tests
+        uses: cypress-io/github-action@v6
+        env:
+          BABEL_ENV: production
+          CYPRESS_RETRIES: 2
+          # Recommended: pass the GitHub token lets this action correctly
+          # determine the unique run id necessary to re-run the checks
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          install: false
+          working-directory: packages/voltotng
+          browser: chrome
+          spec: cypress/tests/core/basic/**/*.cy.ts
+          start: |
+            make ci-acceptance-backend-start
+            make acceptance-frontend-prod-start
+          wait-on: 'npx wait-on --httpTimeout 20000 http-get://127.0.0.1:55001/plone http://127.0.0.1:3000'
+
+      # Upload Cypress screenshots
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: packages/voltotng/cypress/screenshots
+      # Upload Cypress videos
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-videos
+          path: packages/voltotng/cypress/videos

package.json

@@ -9,6 +9,10 @@
     "build:all:force": "pnpm --filter @plone/registry --filter @plone/client --filter @plone/components --filter @plone/providers --filter @plone/react-router build:force",
     "build:registry": "pnpm --filter @plone/registry run build",
     "build:components": "pnpm --filter @plone/components run build",
+    "build:client": "pnpm --filter @plone/client run build",
+    "build:providers": "pnpm --filter @plone/providers run build",
+    "build:helpers": "pnpm --filter @plone/helpers run build",
+    "build:react-router": "pnpm --filter @plone/react-router run build",
     "build": "pnpm --filter @plone/volto build",
     "start": "pnpm --filter @plone/volto start",
     "start:project": "pnpm --filter plone run start",

packages/voltotng/cypress.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  viewportWidth: 1280,
+  chromeWebSecurity: false,
+  projectId: 'hvviu4',
+  video: true, // To remove when Test Replay is available in cypress.io
+  e2e: {
+    baseUrl: 'http://127.0.0.1:3000',
+    excludeSpecPattern: ['*~'],
+    specPattern: 'cypress/tests/**/*.cy.{js,jsx,ts,tsx}',
+  },
+});

packages/voltotng/cypress/add-commands.js

@@ -0,0 +1,2 @@
+// This file is here so it's easy to import commands in other files.
+import './support/commands';

packages/voltotng/cypress/docker/seamless-rules.yml

@@ -0,0 +1,27 @@
+http:
+  routers:
+    frontend:
+      rule: "Host(`localhost`)"
+      service: frontend
+    backend:
+      rule: "Host(`localhost`) && PathPrefix(`/++api++`)"
+      service: backend
+      middlewares:
+        - backend
+
+  middlewares:
+    backend:
+      replacePathRegex:
+        regex: "^/\\+\\+api\\+\\+($|/.*)"
+        replacement: "/VirtualHostBase/http/localhost/plone/++api++/VirtualHostRoot$1"
+
+  services:
+    frontend:
+      loadBalancer:
+        servers:
+          - url: "http://host.docker.internal:3000"
+    backend:
+      loadBalancer:
+        servers:
+          - url: "http://host.docker.internal:55001"
+

packages/voltotng/cypress/docker/seamless.yml

@@ -0,0 +1,24 @@
+version: "3.7"
+
+services:
+
+  proxy:
+    image: traefik:v2.8
+    command:
+      - "--api.insecure=true"
+      - "--providers.docker=true"
+      # - "--providers.docker.exposedbydefault=false"
+      - "--providers.file=true"
+      - "--providers.file.filename=/etc/traefik/rules.yml"
+      - "--entrypoints.web.address=:80"
+      - "--api.insecure=true"
+      # - "--accesslog=true"
+      # - "--log.level=DEBUG"
+    ports:
+      - 80:80
+      - "8888:8080"
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - ./seamless-rules.yml:/etc/traefik/rules.yml
+    extra_hosts:
+       - host.docker.internal:host-gateway

packages/voltotng/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

packages/voltotng/cypress/helpers/index.js

@@ -0,0 +1,13 @@
+export function getIfExists(
+  selector,
+  successAction = () => {},
+  failAction = () => {},
+) {
+  cy.get('body').then((body) => {
+    if (body.find(selector).length > 0 && successAction) {
+      successAction();
+    } else if (failAction) {
+      failAction();
+    }
+  });
+}