Adopt new testing docker-based

.github/workflows/code.yml

@@ -1,46 +1,15 @@
 name: Code analysis checks
 on: [push]
 jobs:
-  build:
+  codeanalysis:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
-        python-version: [3.9]
-    env:
-      NAMESPACE: '@plone-collective'
-      GIT_NAME: volto-authomatic
-      GIT_USER: 'collective'
-      GIT_BRANCH: ${GITHUB_REF##*/}
+        node-version: [20.x]
+
     steps:
       - name: Main checkout
-        uses: actions/checkout@v2
-
-      # node setup
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
-
-      # node install
-      - name: Install dependencies
-        run: yarn install
-
-      - name: Install yo and @plone/generator-volto
-        run: npm i -g yo @plone/generator-volto
-
-      - name: Setup addon testing environment
-        run: npx -p @plone/scripts addon clone https://github.com/${{env.GIT_USER}}/${{env.GIT_NAME}}.git --branch ${{env.GIT_BRANCH}}
-
-      # ESlint
-      - name: ESlint
-        run: cd addon-testing-project && yarn && yarn lint
-
-      # Stylelint
-      - name: Stylelint
-        run: cd addon-testing-project && yarn && yarn stylelint
+        uses: actions/checkout@v3
 
-      # Prettier
-      - name: Prettier
-        run: cd addon-testing-project && yarn && yarn prettier:ci
+      - name: Linting
+        run: make lint

.github/workflows/storybook.yml

@@ -11,16 +11,13 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2.3.1
 
-      - name: Create a new Volto project
-        run: |
-          make project
-
       - name: Generate Storybook
         run: |
           make storybook
 
-      - name: Deploy to GitHub pages
-        uses: JamesIves/github-pages-deploy-action@v4
-        with:
-          branch: gh-pages
-          folder: addon-testing-project/storybook-static
+      # Come up with a way to extract it from the container
+      # - name: Deploy to GitHub pages
+      #   uses: JamesIves/github-pages-deploy-action@v4
+      #   with:
+      #     branch: gh-pages
+      #     folder: addon-testing-project/storybook-static

.github/workflows/unit.yml

@@ -1,38 +1,15 @@
-name: Unit tests
+name: Unit Tests
 on: [push]
 jobs:
-  build:
+  unit:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
-        python-version: [3.9]
-    env:
-      NAMESPACE: '@plone-collective'
-      GIT_NAME: volto-authomatic
-      GIT_USER: 'collective'
-      GIT_BRANCH: ${GITHUB_REF##*/}
+        node-version: [20.x]
+
     steps:
       - name: Main checkout
-        uses: actions/checkout@v2
-
-      # node setup
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
-
-      # node install
-      - name: Install dependencies
-        run: yarn install
-
-      - name: Install yo and @plone/generator-volto
-        run: npm i -g yo @plone/generator-volto
-
-      - name: Setup addon testing environment
-        run: npx -p @plone/scripts addon clone https://github.com/${{env.GIT_USER}}/${{env.GIT_NAME}}.git --branch ${{env.GIT_BRANCH}}
+        uses: actions/checkout@v3
 
-      # Unit tests
       - name: Unit tests
-        run: cd addon-testing-project && yarn && CI=true yarn test
+        run: make test-ci

Makefile

@@ -4,19 +4,13 @@
 #     https://tech.davis-hansson.com/p/make/
 SHELL:=bash
 .ONESHELL:
-.SHELLFLAGS:=-xeu -o pipefail -O inherit_errexit -c
+.SHELLFLAGS:=-eu -o pipefail -c
 .SILENT:
 .DELETE_ON_ERROR:
 MAKEFLAGS+=--warn-undefined-variables
 MAKEFLAGS+=--no-builtin-rules
 
-# Project settings
-
-DIR=$(shell basename $$(pwd))
-GIT_USER='collective'
-GIT_NAME='volto-authomatic'
-GIT_BRANCH='main'
-ADDON ?= "@plone-collective/volto-authomatic"
+CURRENT_DIR:=$(shell dirname $(realpath $(lastword $(MAKEFILE_LIST))))
 
 # Recipe snippets for reuse
 
@@ -27,69 +21,131 @@ GREEN=`tput setaf 2`
 RESET=`tput sgr0`
 YELLOW=`tput setaf 3`
 
+PLONE_VERSION=6
+VOLTO_VERSION=17.5.0
+
+ADDON_NAME='@plone-collective/volto-authomatic'
+ADDON_PATH='volto-authomatic'
+COMPOSE_FILE=dockerfiles/docker-compose.yml
+ACCEPTANCE_COMPOSE=acceptance/docker-compose.yml
+CMD=CURRENT_DIR=${CURRENT_DIR} ADDON_NAME=${ADDON_NAME} ADDON_PATH=${ADDON_PATH} VOLTO_VERSION=${VOLTO_VERSION} PLONE_VERSION=${PLONE_VERSION} docker compose
+DOCKER_COMPOSE=${CMD} -p ${ADDON_PATH} -f ${COMPOSE_FILE}
+DEV_COMPOSE=COMPOSE_PROFILES=dev ${DOCKER_COMPOSE}
+LIVE_COMPOSE=COMPOSE_PROFILES=dev ${DOCKER_COMPOSE}
+ACCEPTANCE=${CMD} -p ${ADDON_PATH}-acceptance -f ${ACCEPTANCE_COMPOSE}
+
+.PHONY: build-backend
+build-backend: ## Build
+	@echo "$(GREEN)==> Build Backend Container $(RESET)"
+	${DEV_COMPOSE} build backend
+
+.PHONY: start-backend
+start-backend: ## Starts Docker backend
+	@echo "$(GREEN)==> Start Docker-based Plone Backend $(RESET)"
+	${DEV_COMPOSE} up backend -d
+
+.PHONY: stop-backend
+stop-backend: ## Stop Docker backend
+	@echo "$(GREEN)==> Stop Docker-based Plone Backend $(RESET)"
+	${DEV_COMPOSE} stop backend
+
+.PHONY: build-live
+build-live: ## Build Addon live
+	@echo "$(GREEN)==> Build Addon development container $(RESET)"
+	${LIVE_COMPOSE} build addon-live
+
+.PHONY: build-addon
+build-addon: ## Build Addon dev
+	@echo "$(GREEN)==> Build Addon development container $(RESET)"
+	${DEV_COMPOSE} build addon-dev
+
+.PHONY: start-dev
+start-dev: ## Starts Dev container
+	@echo "$(GREEN)==> Start Addon Development container $(RESET)"
+	${DEV_COMPOSE} up addon-dev
+
+.PHONY: dev
+dev: ## Develop the addon
+	@echo "$(GREEN)==> Start Development Environment $(RESET)"
+	make build-backend
+	make start-backend
+	make build-addon
+	make start-dev
 
-# Top-level targets
-addon-testing-project/package.json:
-	npm install -g yo
-	npm install -g @plone/generator-volto
-	npm install -g mrs-developer
-	rm -Rf addon-testing-project
-	npx -p @plone/scripts addon clone https://github.com/${GIT_USER}/${GIT_NAME}.git --branch ${GIT_BRANCH}
-	@echo "-------------------"
-	@echo "$(GREEN)Volto project is ready!$(RESET)"
-
-.PHONY: project
-project: addon-testing-project/package.json
-	@echo "$(RED)Now run: cd addon-testing-project && yarn start$(RESET)"
-
-.PHONY: storybook
-storybook: addon-testing-project/package.json
-	@echo "$(GREEN)Create Storybook$(RESET)"
-	(cd addon-testing-project && yarn build-storybook)
-
-.PHONY: all
-all: project
-
-.PHONY: format-prettier
-format-prettier: ## Format Code with Prettier
-	yarn run prettier:fix
-
-.PHONY: format-stylelint
-format-stylelint: ## Format Code with Stylelint
-	yarn run stylelint:fix
+.PHONY: help
+help:		## Show this help.
+	@echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/\\x1b[36m\1\\x1b[m:\2/' | column -c2 -t -s :)"
 
-.PHONY: format
-format: format-prettier format-stylelint ## Format the codebase according to our standards
+## Setup the local environment
+.PHONY: install
+install: ## Install the local environment, Cypress, build acceptance containers
+	yarn
+	make install-acceptance
 
+# Dev Helpers
 .PHONY: i18n
 i18n: ## Sync i18n
+	@echo "$(YELLOW)==> Do not forget to setup the local environment (make install) $(RESET)"
 	yarn i18n
 
-.PHONY: i18n-ci
-i18n-ci: ## Check if i18n is not synced
-	yarn i18n && git diff -G'^[^\"POT]' --exit-code
-
-.PHONY: start-test-backend
-start-test-backend: ## Start Test Plone Backend
-	@echo "$(GREEN)==> Start Test Plone Backend$(RESET)"
-	docker run -i --rm -e ZSERVER_HOST=0.0.0.0 -e ZSERVER_PORT=55001 -p 55001:55001 -e SITE=plone -e APPLY_PROFILES=plone.app.contenttypes:plone-content,plone.restapi:default,plone.volto:default-homepage -e CONFIGURE_PACKAGES=plone.app.contenttypes,plone.restapi,plone.volto,plone.volto.cors -e ADDONS='plone.app.robotframework plone.app.contenttypes plone.restapi plone.volto' plone ./bin/robot-server plone.app.robotframework.testing.PLONE_ROBOT_TESTING
-
-.PHONY: start-backend-docker
-start-backend-docker:		## Starts a Docker-based backend
-	@echo "$(GREEN)==> Start Docker-based Plone Backend$(RESET)"
-	docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone plone/plone-backend:6.0.0a6
-
-# Release
-.PHONY: dry-release
-dry-release: ## Dry release this package
-	@echo "$(GREEN)==> Dry release the package$(RESET)"
-	@npx release-it --dry-run
+.PHONY: format
+format: ## Format codebase
+	${DEV_COMPOSE} run --rm addon-dev lint:fix
+	${DEV_COMPOSE} run --rm addon-dev prettier:fix
+	${DEV_COMPOSE} run --rm addon-dev stylelint:fix
+
+.PHONY: lint
+lint: ## Lint Codebase
+	${DEV_COMPOSE} run --rm addon-dev lint
+	${DEV_COMPOSE} run --rm addon-dev prettier
+	${DEV_COMPOSE} run --rm addon-dev stylelint --allow-empty-input
+
+.PHONY: test
+test: ## Run unit tests
+	${DEV_COMPOSE} run --rm addon-dev test --watchAll
+
+.PHONY: test-ci
+test-ci: ## Run unit tests in CI
+	${DEV_COMPOSE} run -e CI=1 addon-dev test
+
+## Acceptance
+.PHONY: install-acceptance
+install-acceptance: ## Install Cypress, build acceptance containers
+	(cd acceptance && yarn)
+	${ACCEPTANCE} --profile dev --profile prod build
+
+.PHONY: start-test-acceptance-server
+start-test-acceptance-server: ## Start acceptance server (for use it in while developing)
+	${ACCEPTANCE} --profile dev up
+
+.PHONY: start-test-acceptance-server-prod
+start-test-acceptance-server-prod: ## Start acceptance server in prod (used by CI)
+	${ACCEPTANCE} --profile prod up -d
+
+.PHONY: test-acceptance
+test-acceptance: ## Start Cypress (for use it while developing)
+	(cd acceptance && ./node_modules/.bin/cypress open)
+
+.PHONY: test-acceptance-headless
+test-acceptance-headless: ## Run cypress tests in CI
+	(cd acceptance && ./node_modules/.bin/cypress run)
+
+.PHONY: stop-test-acceptance-server
+stop-test-acceptance-server: ## Stop acceptance server (for use it while finished developing)
+	${ACCEPTANCE} --profile dev down
+
+.PHONY: status-test-acceptance-server
+status-test-acceptance-server: ## Status of Acceptance Server (for use it while developing)
+	${ACCEPTANCE} ps
+
+.PHONY: debug-frontend
+debug-frontend:  ## Run bash in the Frontend container (for debug infrastructure purposes)
+	${DEV_COMPOSE} run --entrypoint bash addon-dev
+
+.PHONY: pull-backend-image
+pull-backend-image:  ## Pulls and updates the backend image (for use it while developing)
+	docker pull ghcr.io/voltosneridagh-dev:latest
 
 .PHONY: release
-release: ## Release this package
-	@echo "$(GREEN)==> Release the package$(RESET)"
-	@npx release-it
-
-.PHONY: help
-help:		## Show this help.
-	@echo -e "$$(grep -hE '^\S+:.*##' $(MAKEFILE_LIST) | sed -e 's/:.*##\s*/:/' -e 's/^\(.\+\):\(.*\)/\\x1b[36m\1\\x1b[m:\2/' | column -c2 -t -s :)"
+release:  ## Release a version of the add-on
+	yarn release

acceptance/ci.yml

@@ -0,0 +1,29 @@
+version: "3"
+
+services:
+
+  addon-acceptance:
+    build:
+      context: ../
+      dockerfile: ./dockerfiles/Dockerfile
+      args:
+        ADDON_NAME: "${ADDON_NAME}"
+        ADDON_PATH: "${ADDON_PATH}"
+        VOLTO_VERSION: ${VOLTO_VERSION:-17}
+    environment:
+      RAZZLE_INTERNAL_API_PATH: http://backend-acceptance:55001/plone
+      RAZZLE_API_PATH: http://localhost:55001/plone
+    ports:
+      - 3000:3000
+    depends_on:
+      - backend-acceptance
+    profiles:
+      - prod
+
+  backend-acceptance:
+    image: plone/server-acceptance:${PLONE_VERSION:-6}
+    ports:
+      - 55001:55001
+    profiles:
+      - dev
+      - prod

acceptance/cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  viewportWidth: 1280,
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    specPattern: 'cypress/tests/*.cy.{js,jsx}',
+  },
+});

acceptance/cypress/fixtures/example.json

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

acceptance/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

acceptance/cypress/support/commands.js

@@ -0,0 +1 @@
+import '@plone/volto-testing/cypress/support/commands';