Add empty typescript file, update Volto to 18.2.3 (#30)

- add empty typescript file. The empty file is added to stop the error
  `No inputs were found in config file`.
  TypeScript expects there to be at least one TypeScript file in the
  folder in order to compile.
- update Volto to 18.2.3
- update eslintrc
- remove exportDefaultFrom experimental syntax
- reformat, update i18n, update lockfile
- add dependency to react-portal
- add resolve fallback for buffer in storybook.
- fix CI by removing public/.gitkeep
- add back cypress tests from the older livesearch branch, as they were
  accidentally removed when updating to the previous Volto template.
- add back dockerfile for acceptance, and use it from the Makefile
- move cypress back to the "acceptance" folder. This is a deviation from
  the add-on template, but it's desired, provided we have more files in
  support of the acceptance tests.
- fix ipv6 problem of cypress in the Makefile
- consolidate cypress commands, use what we can from upstream volto, and
  add/override commands as needed for our tests.

.eslintrc.js

@@ -1,16 +1,14 @@
 const fs = require('fs');
 const projectRootPath = __dirname;
-const AddonConfigurationRegistry = require('@plone/registry/src/addon-registry');
+const { AddonRegistry } = require('@plone/registry/addon-registry');
 
 let coreLocation;
 if (fs.existsSync(`${projectRootPath}/core`))
   coreLocation = `${projectRootPath}/core`;
 else if (fs.existsSync(`${projectRootPath}/../../core`))
   coreLocation = `${projectRootPath}/../../core`;
 
-const registry = new AddonConfigurationRegistry(
-  `${coreLocation}/packages/volto`,
-);
+const { registry } = AddonRegistry.init(`${coreLocation}/packages/volto`);
 
 // Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
 const addonAliases = Object.keys(registry.packages).map((o) => [
@@ -30,10 +28,7 @@ module.exports = {
           ['@plone/volto', `${coreLocation}/packages/volto/src`],
           ['@plone/volto-slate', `${coreLocation}/packages/volto-slate/src`],
           ['@plone/registry', `${coreLocation}/packages/registry/src`],
-          [
-            '@kitconcept/volto-solr',
-            './packages/volto-solr/src',
-          ],
+          ['@kitconcept/volto-solr', './packages/volto-solr/src'],
           ...addonAliases,
         ],
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],

.github/workflows/unit.yml

@@ -44,4 +44,4 @@ jobs:
         run: make install
 
       - name: Unit tests
-        run: make test-ci
+        run: make ci-test

.storybook/main.js

@@ -107,9 +107,9 @@ module.exports = {
       [],
       defaultRazzleOptions,
     );
-    const AddonConfigurationRegistry = require('@plone/registry/src/addon-registry');
+    const { AddonRegistry } = require('@plone/registry/addon-registry');
 
-    const registry = new AddonConfigurationRegistry(projectRootPath);
+    const { registry } = AddonRegistry.init(projectRootPath);
 
     config = lessPlugin({ registry }).modifyWebpackConfig({
       env: { target: 'web', dev: 'dev' },
@@ -146,7 +146,7 @@ module.exports = {
       resolve: {
         ...config.resolve,
         alias: { ...config.resolve.alias, ...baseConfig.resolve.alias },
-        fallback: { ...config.resolve.fallback, zlib: false },
+        fallback: { ...config.resolve.fallback, zlib: false, buffer: false },
       },
     };
 

Makefile

@@ -23,10 +23,18 @@ GIT_FOLDER=$(CURRENT_DIR)/.git
 PRE_COMMIT=pipx run --spec 'pre-commit==3.7.1' pre-commit
 
 PLONE_VERSION=6
+VOLTO_VERSION=18.2.3
 DOCKER_IMAGE=plone/server-dev:${PLONE_VERSION}
 DOCKER_IMAGE_ACCEPTANCE=plone/server-acceptance:${PLONE_VERSION}
 
 ADDON_NAME='@kitconcept/volto-solr'
+ADDON_PATH='volto-solr'
+# DEV_COMPOSE=dockerfiles/docker-compose.yml
+ACCEPTANCE_COMPOSE=acceptance/docker-compose.yml
+SOLR_CONTEXT_FOLDER=${CURRENT_DIR}/acceptance/solr
+CMD=CURRENT_DIR=${CURRENT_DIR} ADDON_NAME=${ADDON_NAME} ADDON_PATH=${ADDON_PATH} VOLTO_VERSION=${VOLTO_VERSION} PLONE_VERSION=${PLONE_VERSION} SOLR_CONTEXT_FOLDER=${SOLR_CONTEXT_FOLDER} docker compose
+# DOCKER_COMPOSE=${CMD} -p ${ADDON_PATH} -f ${DEV_COMPOSE}
+ACCEPTANCE=${CMD} -p ${ADDON_PATH}-acceptance -f ${ACCEPTANCE_COMPOSE}
 
 .PHONY: help
 help: ## Show this help
@@ -50,10 +58,10 @@ start: ## Starts Volto, allowing reloading of the add-on during development
 build: ## Build a production bundle for distribution of the project with the add-on
 	pnpm build
 
-core/packages/registry/dist: core/packages/registry/src
+core/packages/registry/dist: $(shell find core/packages/registry/src -type f)
 	pnpm --filter @plone/registry build
 
-core/packages/components/dist: core/packages/components/src
+core/packages/components/dist: $(shell find core/packages/components/src -type f)
 	pnpm --filter @plone/components build
 
 .PHONY: build-deps
@@ -91,7 +99,7 @@ release-dry-run: ## Dry-run the release of the add-on on npmjs.org
 test: ## Run unit tests
 	pnpm test
 
-.PHONY: test-ci
+.PHONY: ci-test
 ci-test: ## Run unit tests in CI
 	# Unit Tests need the i18n to be built
 	VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto i18n
@@ -115,26 +123,40 @@ storybook-build: ## Build Storybook
 	pnpm run storybook-build -o $(CURRENT_DIR)/.storybook-build
 
 ## Acceptance
+.PHONY: acceptance-install
+acceptance-install: ## Install Cypress, build containers
+	# (cd acceptance && pnpm install)
+	# ${ACCEPTANCE} --profile dev --profile prod build
+	${ACCEPTANCE} --profile dev --profile prod build
+
 .PHONY: acceptance-frontend-dev-start
 acceptance-frontend-dev-start: ## Start acceptance frontend in development mode
-	RAZZLE_API_PATH=http://127.0.0.1:55001/plone pnpm start
+    # Note the error is that :3001 gives an empty response from a cypress browser.
+	# Also see https://github.com/cypress-io/cypress/issues/27962
+	RAZZLE_API_PATH=http://127.0.0.1:55001/plone NODE_OPTIONS=--dns-result-order=ipv4first pnpm start
 
 .PHONY: acceptance-frontend-prod-start
 acceptance-frontend-prod-start: ## Start acceptance frontend in production mode
-	RAZZLE_API_PATH=http://127.0.0.1:55001/plone pnpm build && pnpm start:prod
+# Note the error is that :3001 gives an empty response from a cypress browser.
+	# Also see https://github.com/cypress-io/cypress/issues/27962
+	RAZZLE_API_PATH=http://127.0.0.1:55001/plone NODE_OPTIONS=--dns-result-order=ipv4first pnpm build && pnpm start:prod
 
 .PHONY: acceptance-backend-start
 acceptance-backend-start: ## Start backend acceptance server
-	docker run -it --rm -p 55001:55001 $(DOCKER_IMAGE_ACCEPTANCE)
+	${ACCEPTANCE} up -d
+
+.PHONY: acceptance-backend-stop
+acceptance-backend-stop: ## Stop backend acceptance server
+	${ACCEPTANCE} down
 
 .PHONY: ci-acceptance-backend-start
 ci-acceptance-backend-start: ## Start backend acceptance server in headless mode for CI
-	docker run -i --rm -p 55001:55001 $(DOCKER_IMAGE_ACCEPTANCE)
+	${ACCEPTANCE} up -d
 
 .PHONY: acceptance-test
 acceptance-test: ## Start Cypress in interactive mode
-	pnpm --filter @plone/volto exec cypress open --config-file $(CURRENT_DIR)/cypress.config.js --config specPattern=$(CURRENT_DIR)'/cypress/tests/**/*.{js,jsx,ts,tsx}'
+	pnpm --filter @plone/volto exec cypress open --config-file $(CURRENT_DIR)/acceptance/cypress.config.js --config specPattern=$(CURRENT_DIR)'/acceptance/cypress/tests/**/*.{js,jsx,ts,tsx}'
 
 .PHONY: ci-acceptance-test
 ci-acceptance-test: ## Run cypress tests in headless mode for CI
-	pnpm --filter @plone/volto exec cypress run --config-file $(CURRENT_DIR)/cypress.config.js --config specPattern=$(CURRENT_DIR)'/cypress/tests/**/*.{js,jsx,ts,tsx}'
+	pnpm --filter @plone/volto exec cypress run --config-file $(CURRENT_DIR)/acceptance/cypress.config.js --config specPattern=$(CURRENT_DIR)'/acceptance/cypress/tests/**/*.{js,jsx,ts,tsx}'

README.md

@@ -77,7 +77,6 @@ const theme = '@kitconcept/volto-solr';
 
 The configuration is provided by default and can be overwritten from any package.
 
-
 ### Result type templates
 
 The search results are rendered by default components, which are customizable.
@@ -127,21 +126,18 @@ The rest of the options provide the baselines for the package and the `Search` c
 
 ## Test installation
 
-Visit http://localhost:3000/ in a browser, login, and check the awesome new features.
-
+Visit <http://localhost:3000/> in a browser, login, and check the awesome new features.
 
 ## Development
 
 The development of this add-on is done in isolation using a new approach using pnpm workspaces and latest `mrs-developer` and other Volto core improvements.
 For this reason, it only works with pnpm and Volto 18 (currently in alpha).
 
-
 ### Pre-requisites
 
--   [Node.js](https://6.docs.plone.org/install/create-project.html#node-js)
--   [Make](https://6.docs.plone.org/install/create-project.html#make)
--   [Docker](https://6.docs.plone.org/install/create-project.html#docker)
-
+- [Node.js](https://6.docs.plone.org/install/create-project.html#node-js)
+- [Make](https://6.docs.plone.org/install/create-project.html#make)
+- [Docker](https://6.docs.plone.org/install/create-project.html#docker)
 
 ### Make convenience commands
 
@@ -166,6 +162,7 @@ storybook-build                  Build Storybook
 acceptance-frontend-dev-start    Start acceptance frontend in development mode
 acceptance-frontend-prod-start   Start acceptance frontend in production mode
 acceptance-backend-start         Start backend acceptance server
+acceptance-backend-stop          Stop backend acceptance server
 ci-acceptance-backend-start      Start backend acceptance server in headless mode for CI
 acceptance-test                  Start Cypress in interactive mode
 ci-acceptance-test               Run cypress tests in headless mode for CI
@@ -247,6 +244,12 @@ In the third session, start the Cypress interactive test runner.
 make acceptance-test
 ```
 
+There is also a stop command for the backend acceptance server.
+
+```shell
+make acceptance-backend-stop
+```
+
 ## License
 
 The project is licensed under the MIT license.

cypress.config.js → acceptance/cypress.config.js

@@ -7,7 +7,8 @@ module.exports = defineConfig({
     runMode: 3,
   },
   e2e: {
+    supportFile: '../../../acceptance/cypress/support/e2e.js',
     baseUrl: 'http://localhost:3000',
-    specPattern: 'cypress/tests/**/*.cy.{js,jsx,ts,tsx}',
+    specPattern: 'cypress/tests/*.cy.{js,jsx}',
   },
 });

acceptance/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"
+}

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
+};