Acceptance tests (#3)

* Acceptance tests

* Changelog

* Correct the compose files

* Format

.github/workflows/acceptance.yml

@@ -0,0 +1,52 @@
+name: Acceptance tests
+on: [push]
+
+env:
+  ADDON_NAME: "@kitconcept/volto-highlight-block"
+  ADDON_PATH: "volto-highlight-block"
+  VOLTO_VERSION: "17.0.0-alpha.16"
+
+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

Makefile

@@ -102,10 +102,10 @@ install-acceptance: ## Install Cypress, build containers
 
 .PHONY: start-test-acceptance-server
 start-test-acceptance-server: ## Start acceptance server
-	${ACCEPTANCE} --profile dev up -d
+	${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
 	${ACCEPTANCE} --profile prod up -d
 
 .PHONY: test-acceptance

acceptance/cypress/tests/highlight.cy.js

@@ -0,0 +1,88 @@
+import { getSlateEditorAndType } from '../support/slate';
+
+context('Highlight Block Acceptance Tests', () => {
+  beforeEach(() => {
+    cy.visit('/');
+    cy.viewport('macbook-16');
+    cy.createContent({
+      contentType: 'Document',
+      contentId: 'document',
+      contentTitle: 'Document',
+      path: '/',
+      withImage: true,
+    });
+    cy.autologin();
+  });
+
+  it('As editor I can add a Highlight block', () => {
+    // Adding Image
+    cy.fixture('halfdome2022.jpg').then((encodedImage) => {
+      cy.createContent({
+        contentType: 'Image',
+        contentId: 'my-image',
+        contentTitle: 'My Image',
+        path: '/document',
+        bodyModifier(body) {
+          let imageObject = {
+            encoding: 'base64',
+            filename: 'image.jpg',
+            'content-type': 'image/jpg',
+          };
+          body.image = {
+            ...imageObject,
+            data: encodedImage,
+          };
+          return body;
+        },
+      });
+    });
+
+    cy.visit('/document/edit');
+    cy.get('.block .slate-editor [contenteditable=true]').click();
+    cy.get('.button .block-add-button').click({ force: true });
+    cy.get('.blocks-chooser .mostUsed .button.highlight').click({
+      force: true,
+    });
+    cy.get('#sidebar').findByLabelText('Browse the site').click();
+
+    cy.findByLabelText('Browse Document').click();
+    cy.findByLabelText('Select My Image').dblclick();
+
+    getSlateEditorAndType(
+      '.block.highlight .title [contenteditable=true]',
+      'Highlight - Title',
+    );
+
+    getSlateEditorAndType(
+      '.block.highlight .description [contenteditable=true]',
+      'Description Text',
+    );
+
+    cy.get('.ui.checkbox:last').click({ force: true });
+    cy.get('#field-buttonText').type('read more');
+
+    cy.get(
+      '.block-editor-highlight.has--descriptionColor--highlight-custom-color-1',
+    ).should('be.visible');
+    cy.get('.ui.circular.button.highlight-custom-color-3').click();
+    cy.get(
+      '.block-editor-highlight.has--descriptionColor--highlight-custom-color-3',
+    ).should('be.visible');
+
+    cy.get('.highlight-image-wrapper > img').should('be.visible');
+
+    cy.get('.block.highlight')
+      .contains('Highlight - Title')
+      .should('be.visible');
+    cy.get('.block.highlight')
+      .contains('Description Text')
+      .should('be.visible');
+    cy.get('.block.highlight').contains('read more').should('be.visible');
+
+    cy.get('#toolbar-save').click();
+
+    cy.get(
+      '.block.highlight.has--descriptionColor--highlight-custom-color-3',
+    ).should('be.visible');
+  });
+});

acceptance/docker-compose.yml

@@ -9,12 +9,13 @@ services:
       args:
         ADDON_NAME: "${ADDON_NAME}"
         ADDON_PATH: "${ADDON_PATH}"
-        VOLTO_VERSION: ${VOLTO_VERSION:-17}
+        VOLTO_VERSION: ${VOLTO_VERSION:-17.0.0-alpha.16}
     volumes:
       - ${CURRENT_DIR}:/app/src/addons/${ADDON_PATH}/
     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
@@ -30,7 +31,7 @@ services:
       args:
         ADDON_NAME: "${ADDON_NAME}"
         ADDON_PATH: "${ADDON_PATH}"
-        VOLTO_VERSION: ${VOLTO_VERSION:-17}
+        VOLTO_VERSION: ${VOLTO_VERSION:-17.0.0-alpha.16}
     environment:
       RAZZLE_INTERNAL_API_PATH: http://backend-acceptance:55001/plone
       RAZZLE_API_PATH: http://localhost:55001/plone
@@ -42,7 +43,7 @@ services:
       - prod
 
   backend-acceptance:
-    image: plone/plone-backend:${PLONE_VERSION:-6}
+    image: plone/plone-backend:${PLONE_VERSION:-6.0.6}
     command: ./bin/robot-server plone.app.robotframework.testing.VOLTO_ROBOT_TESTING
     environment:
       ZSERVER_HOST: 0.0.0.0

dockerfiles/docker-compose.yml

@@ -9,7 +9,7 @@ services:
       args:
         ADDON_NAME: "${ADDON_NAME}"
         ADDON_PATH: "${ADDON_PATH}"
-        VOLTO_VERSION: ${VOLTO_VERSION:-17}
+        VOLTO_VERSION: ${VOLTO_VERSION:-17.0.0-alpha.16}
     volumes:
       - ${CURRENT_DIR}:/app/src/addons/${ADDON_PATH}/
     environment:
@@ -26,7 +26,7 @@ services:
       - dev
 
   backend:
-    image: plone/plone-backend:${PLONE_VERSION:-6}
+    image: plone/plone-backend:${PLONE_VERSION:-6.0.6}
     environment:
       SITE: Plone
       CORS_ALLOW_ORIGIN: '*'

news/3.feature

@@ -0,0 +1 @@
+Acceptance tests @sneridagh

src/components/ImageWidget/ImageWidget.jsx

@@ -23,7 +23,6 @@ import navTreeSVG from '@plone/volto/icons/nav.svg';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import uploadSVG from '@plone/volto/icons/upload.svg';
 import openinnewtabSVG from '../../icons/openinnewtab.svg';
-import useTraceUpdate from './useTraceUpdate';
 
 const Dropzone = loadable(() => import('react-dropzone'));
 
@@ -32,6 +31,10 @@ const messages = defineMessages({
     id: 'Browse the site, drop an image, or type an URL',
     defaultMessage: 'Browse the site, drop an image, or type an URL',
   },
+  navigate: {
+    id: 'Browse the site',
+    defaultMessage: 'Browse the site',
+  },
 });
 
 const ImagePreview = ({ src }) => (
@@ -189,8 +192,6 @@ const ImageWidget = (props) => {
     }
   };
 
-  useTraceUpdate(props);
-
   return (
     <div className="image-widget">
       {!inline ? (
@@ -228,7 +229,9 @@ const ImageWidget = (props) => {
                   <img src={imageBlockSVG} alt="" />
                   <div className="toolbar-inner">
                     <Button.Group>
+                      asds
                       <Button
+                        aria-label={intl.formatMessage(messages.navigate)}
                         basic
                         icon
                         onClick={(e) => {