@kitconcept/volto-light-theme 1.0.0-rc.4 → 1.0.0-rc.5

package/.github/workflows/acceptance.yml

@@ -0,0 +1,52 @@
+name: Acceptance tests
+on: [push]
+
+env:
+  ADDON_NAME: "@kitconcept/volto-light-theme"
+  ADDON_PATH: "volto-light-theme"
+  VOLTO_VERSION: "17.0.0-alpha.17"
+
+jobs:
+
+  acceptance:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Install Cypress
+        run: |
+          cd acceptance
+          yarn
+
+      - name: "Cypress: Acceptance tests"
+        uses: cypress-io/github-action@v5
+        env:
+          BABEL_ENV: production
+          CYPRESS_RETRIES: 2
+        with:
+          parallel: false
+          browser: chrome
+          working-directory: acceptance
+          spec: cypress/tests/*.js
+          install: false
+          start: |
+            docker compose -f ci.yml --profile prod up
+          wait-on: 'npx wait-on --httpTimeout 20000 http-get://localhost:55001/plone http://localhost:3000'
+
+      # Upload Cypress screenshots
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-screenshots-acceptance
+          path: acceptance/cypress/screenshots
+
+      # Upload Cypress videos
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-videos-acceptance
+          path: acceptance/cypress/videos

package/.github/workflows/deploy.yml

@@ -1,12 +1,17 @@
 name: Release and deploy
 on:
-  push:
+  workflow_run:
+    workflows: [Acceptance Tests]
+    types:
+      - completed
+    branches:
+      - main
   workflow_dispatch:
 
 env:
   ENVIRONMENT: "light-theme.kitconcept.io"
   IMAGE_NAME: "ghcr.io/kitconcept/voltolighttheme-frontend"
-  VOLTO_VERSION: "17.0.0-alpha.16"
+  VOLTO_VERSION: "17.0.0-alpha.17"
 
 jobs:
   meta:

package/CHANGELOG.md

@@ -8,6 +8,22 @@
 
 <!-- towncrier release notes start -->
 
+## 1.0.0-rc.5 (2023-07-11)
+
+### Breaking
+
+- Move the container query polyfill to an add-on profile, disabled by default @sneridagh [#137](https://github.com/kitconcept/volto-light-theme/pull/137)
+
+### Feature
+
+- Upgrade to Volto 17a17 as baseline @sneridagh [#136](https://github.com/kitconcept/volto-light-theme/pull/136)
+- Add acceptance tests layer, update docker files and Makefile @sneridagh [#137](https://github.com/kitconcept/volto-light-theme/pull/137)
+
+### Bugfix
+
+- Check if the separator is present before enhancing it @sneridagh [#138](https://github.com/kitconcept/volto-light-theme/pull/138)
+
+
 ## 1.0.0-rc.4 (2023-07-11)
 
 ### Bugfix

package/Makefile

@@ -22,7 +22,7 @@ RESET=`tput sgr0`
 YELLOW=`tput setaf 3`
 
 PLONE_VERSION=6
-VOLTO_VERSION=17.0.0-alpha.16
+VOLTO_VERSION=17.0.0-alpha.17
 
 ADDON_NAME='@kitconcept/volto-light-theme'
 ADDON_PATH='volto-light-theme'
@@ -103,20 +103,20 @@ test-ci: ## Run unit tests in CI
 
 ## Acceptance
 .PHONY: install-acceptance
-install-acceptance: ## Install Cypress, build containers
+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
-	${ACCEPTANCE} --profile dev up -d
+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
+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
+test-acceptance: ## Start Cypress (for use it while developing)
 	(cd acceptance && ./node_modules/.bin/cypress open)
 
 .PHONY: test-acceptance-headless
@@ -124,13 +124,18 @@ 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
-	${ACCEPTANCE} down
+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
+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
+debug-frontend:  ## Run bash in the Frontend container (for debug infrastructure purposes)
 	${DEV_COMPOSE} run --entrypoint bash addon-dev
+
+.PHONY: install-local
+install-local:  ## Installs essentials for developing locally (ESlint, prettier...) (for use it while developing)
+	yarn remove -A @plone/volto && yarn add @plone/volto && git co -- package.json yarn.lock
+	mv .eslintrc.local.js .eslintrc.js

package/acceptance/cypress/support/e2e.js

@@ -4,6 +4,10 @@ import './commands';
 import { setup, teardown } from './reset-fixture';
 
 beforeEach(function () {
+  cy.setCookie('confirm_cookies', '1');
+  cy.setCookie('confirm_tracking', '1');
+  cy.setCookie('confirm_facebook', '1');
+  cy.setCookie('confirm_youtube', '1');
   cy.log('Setting up API fixture');
   setup();
 });

package/acceptance/cypress/tests/basic.cy.js

@@ -6,6 +6,9 @@ import {
 context('Basic Acceptance Tests', () => {
   describe('Text Block Tests', () => {
     beforeEach(() => {
+      cy.intercept('GET', `/**/*?expand*`).as('content');
+      cy.intercept('GET', '/**/Document').as('schema');
+
       // given a logged in editor and a page in edit mode
       cy.autologin();
       cy.createContent({
@@ -14,6 +17,7 @@ context('Basic Acceptance Tests', () => {
         contentTitle: 'Document',
       });
       cy.visit('/');
+      cy.wait('@content');
     });
 
     it('As editor I can add a page with a text block', function () {
@@ -32,39 +36,35 @@ context('Basic Acceptance Tests', () => {
 
       getSelectedSlateEditor().contains('This is the text');
       cy.get('#toolbar-save').click();
+      cy.wait('@content');
       cy.url().should('eq', Cypress.config().baseUrl + '/my-page');
     });
 
     it('As editor I can add a link to a text block', function () {
-      cy.intercept('GET', '/**/document').as('content');
-      cy.visit('/document');
-      cy.wait('@content');
-
       cy.navigate('/document/edit');
+      cy.wait('@schema');
 
-      // when I create a link
-      getSlateEditorAndType(
-        '.slate-editor [contenteditable=true]',
-        'Colorless green ideas sleep furiously.',
-      ).setSelection('furiously');
+      cy.get('.block.inner.title .documentFirstHeading');
 
-      cy.clickSlateButton('Add link');
+      cy.log('when I create a link');
 
-      cy.get('.link-form-container input').type('https://google.com{enter}');
-      cy.get('#toolbar-save').click();
-      cy.url().should('eq', Cypress.config().baseUrl + '/document');
-      cy.waitForResourceToLoad('@navigation');
-      cy.waitForResourceToLoad('@breadcrumbs');
-      cy.waitForResourceToLoad('@actions');
-      cy.waitForResourceToLoad('@types');
-      cy.waitForResourceToLoad('document');
-
-      // then the page view should contain a link
-      cy.get('.ui.container p').contains(
+      cy.getSlateEditorAndType(
         'Colorless green ideas sleep furiously.',
+      ).setSlateSelection('furiously');
+      cy.clickSlateButton('Add link');
+      cy.get('.slate-toolbar .link-form-container input').type(
+        'https://google.com{enter}',
       );
-      cy.get('.ui.container p a')
-        .should('have.attr', 'href')
+
+      cy.get('#toolbar-save', { timeout: 10000 }).click();
+      cy.wait('@content');
+
+      cy.log('then the page view should contain a link');
+
+      cy.get('.container p').contains('Colorless green ideas sleep furiously.');
+      cy.get('.container p a')
+        .should('have.text', 'furiously')
+        .and('have.attr', 'href')
         .and('include', 'https://google.com');
     });
   });

package/acceptance/docker-compose.yml

@@ -15,9 +15,11 @@ services:
     environment:
       RAZZLE_INTERNAL_API_PATH: http://backend-acceptance:55001/plone
       RAZZLE_API_PATH: http://localhost:55001/plone
+      HOST: 0.0.0.0
     ports:
       - 3000:3000
       - 3001:3001
+    tty: true
     depends_on:
       - backend-acceptance
     profiles:
@@ -34,6 +36,7 @@ services:
     environment:
       RAZZLE_INTERNAL_API_PATH: http://backend-acceptance:55001/plone
       RAZZLE_API_PATH: http://localhost:55001/plone
+      HOST: 0.0.0.0
     ports:
       - 3000:3000
     depends_on:
@@ -42,14 +45,7 @@ services:
       - prod
 
   backend-acceptance:
-    image: plone/plone-backend:${PLONE_VERSION:-6}
-    command: ./bin/robot-server plone.app.robotframework.testing.VOLTO_ROBOT_TESTING
-    environment:
-      ZSERVER_HOST: 0.0.0.0
-      ZSERVER_PORT: 55001
-      ADDONS: 'plone.app.robotframework==2.0.0'
-      APPLY_PROFILES: plone.app.contenttypes:plone-content,plone.restapi:default,plone.volto:default-homepage
-      CONFIGURE_PACKAGES: plone.app.contenttypes,plone.restapi,plone.volto,plone.volto.cors
+    image: plone/server-acceptance:${PLONE_VERSION:-6}
     ports:
       - 55001:55001
     profiles:

package/dockerfiles/Dockerfile.acceptance

@@ -5,6 +5,12 @@ FROM plone/frontend-dev:${VOLTO_VERSION}
 ARG ADDON_NAME
 ARG ADDON_PATH
 
+# Copy helper.py as /setupAddon
+COPY dockerfiles/helper.py /setupAddon
+
+# Copy volto.config.js
+COPY --chown=node:node volto.config.js* /app/
+
 COPY --chown=node:node package.json /app/src/addons/${ADDON_PATH}/
 
 RUN <<EOT

package/dockerfiles/docker-compose.yml

@@ -9,12 +9,13 @@ services:
       args:
         ADDON_NAME: "${ADDON_NAME}"
         ADDON_PATH: "${ADDON_PATH}"
-        VOLTO_VERSION: "${VOLTO_VERSION:-16}"
+        VOLTO_VERSION: "${VOLTO_VERSION:-17}"
     volumes:
       - ${CURRENT_DIR}:/app/src/addons/${ADDON_PATH}/
     environment:
       RAZZLE_INTERNAL_API_PATH: http://backend:8080/Plone
       RAZZLE_API_PATH: http://localhost:8080/Plone
+      HOST: 0.0.0.0
     ports:
       - 3000:3000
       - 3001:3001
@@ -29,7 +30,7 @@ services:
       args:
         ADDON_NAME: "${ADDON_NAME}"
         ADDON_PATH: "${ADDON_PATH}"
-        VOLTO_VERSION: "${VOLTO_VERSION:-16}"
+        VOLTO_VERSION: "${VOLTO_VERSION:-17}"
     environment:
       RAZZLE_INTERNAL_API_PATH: http://backend:8080/Plone
       RAZZLE_API_PATH: http://localhost:8080/Plone

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.5",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "repository": {
@@ -58,8 +58,8 @@
     "@kitconcept/volto-heading-block": "^2.2.0",
     "@kitconcept/volto-image-block": "^1.0.1",
     "@kitconcept/volto-introduction-block": "^1.0.0",
-    "@kitconcept/volto-separator-block": "^3.2.0",
+    "@kitconcept/volto-separator-block": "^3.2.2",
     "@kitconcept/volto-slider-block": "^4.2.0",
-    "@plone/volto": "^17.0.0-alpha.16"
+    "@plone/volto": "^17.0.0-alpha.17"
   }
 }

package/src/index.js

@@ -126,14 +126,6 @@ const applyConfig = (config) => {
 
   config.settings.slidingSearchAnimation = true;
 
-  config.settings.appExtras = [
-    ...config.settings.appExtras,
-    {
-      match: '',
-      component: ContainerQueriesPolyfill,
-    },
-  ];
-
   config.blocks.blocksConfig.accordion = {
     ...config.blocks.blocksConfig.accordion,
     mostUsed: true,
@@ -233,14 +225,17 @@ const applyConfig = (config) => {
     colors: BG_COLORS,
   };
 
-  config.blocks.blocksConfig.separator = {
-    ...config.blocks.blocksConfig.separator,
-    schemaEnhancer: composeSchema(
-      config.blocks.blocksConfig.separator.schemaEnhancer,
-      defaultStylingSchema,
-    ),
-    colors: BG_COLORS,
-  };
+  // Check if the separator is present before enhancing it
+  if (config.blocks.blocksConfig.separator.id) {
+    config.blocks.blocksConfig.separator = {
+      ...config.blocks.blocksConfig.separator,
+      schemaEnhancer: composeSchema(
+        config.blocks.blocksConfig.separator.schemaEnhancer,
+        defaultStylingSchema,
+      ),
+      colors: BG_COLORS,
+    };
+  }
 
   config.blocks.blocksConfig.listing = {
     ...config.blocks.blocksConfig.listing,
@@ -260,4 +255,16 @@ const applyConfig = (config) => {
   return config;
 };
 
+export const withContainerQueryPolyfill = (config) => {
+  config.settings.appExtras = [
+    ...config.settings.appExtras,
+    {
+      match: '',
+      component: ContainerQueriesPolyfill,
+    },
+  ];
+
+  return config;
+};
+
 export default applyConfig;