add cypress integration tests

cypress/fixtures/example.json

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

cypress/helpers/actions/index.js

@@ -0,0 +1,22 @@
+export const save = (path) => {
+  cy.url().then(($url) => {
+    if ($url.includes(path)) {
+      //cy.get('.ui.button.save').click();
+      cy.get('#toolbar-save').click();
+      cy.url().should('eq', Cypress.config().baseUrl + path);
+    } else {
+      cy.log('Wrong path');
+    }
+  });
+};
+
+export const cancel = (path) => {
+  cy.url().then(($url) => {
+    if ($url.includes(path)) {
+      cy.get('.ui.button.cancel').click();
+      cy.url().should('eq', Cypress.config().baseUrl + path);
+    } else {
+      cy.log('Wrong path');
+    }
+  });
+};

cypress/helpers/blocks/index.js

@@ -0,0 +1,40 @@
+import { openSidebar, closeSidebar } from '../index';
+
+export const changePageTitle = (title, delay = 10) => {
+  cy.get('[contenteditable=true]').first().clear();
+
+  cy.get('[contenteditable=true]').first().type(title);
+
+  cy.get('.documentFirstHeading').contains(title);
+
+  cy.get('[contenteditable=true]').first().type('{enter}');
+};
+
+export const addBlock = (groupTitle, groupId, blockId) => {
+  closeSidebar();
+  cy.getIfExists('#page-edit div.block-editor-text', () => {
+    cy.get('#page-edit div.block-editor-text').last().click();
+  });
+  cy.getIfExists('#page-edit div.block-editor-slate', () => {
+    cy.get('#page-edit div.block-editor-slate').last().click();
+  });
+  cy.get('.ui.basic.icon.button.block-add-button').last().click();
+  cy.getIfExists(
+    `.content.active.${groupId}`,
+    () => {
+      cy.get(`.content.active.${groupId} .button.${blockId}`).click();
+      cy.get(`#page-edit div.block-editor-${blockId}`);
+      openSidebar();
+    },
+    () => {
+      cy.get('.blocks-chooser .title').contains(groupTitle).click();
+      cy.get(`.content.active.${groupId} .button.${blockId}`).click();
+      cy.get(`#page-edit div.block-editor-${blockId}`);
+      openSidebar();
+    },
+  );
+};
+
+export const selectBlock = (blockId) => {
+  cy.get(`#page-edit div.block-editor-${blockId}`).click();
+};

cypress/helpers/index.js

@@ -0,0 +1,3 @@
+export * from './actions';
+export * from './blocks';
+export * from './sidebar';

cypress/helpers/sidebar/index.js

@@ -0,0 +1,36 @@
+export const openSidebar = () => {
+  cy.get('#sidebar > div.sidebar-container').then(($sidebar) => {
+    if ($sidebar.hasClass('collapsed')) {
+      cy.get('#sidebar > div.sidebar-container > button.ui.button.trigger')
+        .first()
+        .click();
+    }
+  });
+};
+
+export const closeSidebar = () => {
+  cy.get('#sidebar > div.sidebar-container').then(($sidebar) => {
+    if (!$sidebar.hasClass('collapsed')) {
+      cy.get('#sidebar > div.sidebar-container > button.ui.button.trigger')
+        .first()
+        .click();
+    }
+  });
+};
+
+export const openSidebarTab = (tab) => {
+  openSidebar();
+  cy.get(
+    '#sidebar > div.sidebar-container div.ui.pointing.secondary.attached.tabular.formtabs.menu > a.item',
+  )
+    .contains(tab)
+    .then(($tab) => {
+      if (!$tab.hasClass('active')) {
+        cy.get(
+          '#sidebar > div.sidebar-container div.ui.pointing.secondary.attached.tabular.formtabs.menu > a.item',
+        )
+          .contains(tab)
+          .click();
+      }
+    });
+};

cypress/integration/block-basics.js

@@ -0,0 +1,21 @@
+import { setupBeforeEach, tearDownAfterEach } from '../support';
+import { changePageTitle, addBlock, save } from '../helpers';
+
+describe('Blocks Tests', () => {
+  beforeEach(setupBeforeEach);
+  afterEach(tearDownAfterEach);
+
+  it('Add Block: Empty', () => {
+    // Change page title
+    changePageTitle('My Add-on Page');
+    // Add block
+    addBlock('Common blocks', 'common_blocks', 'image');
+    cy.get('.block.inner.text').type('My Add-on Page');
+
+    // Save
+    save('/cypress/my-page');
+    // then the page view should contain our changes
+    cy.contains('My Add-on Page');
+    cy.get('.block.image');
+  });
+});

cypress/plugins/index.js

@@ -1,3 +1,4 @@
+/// <reference types="cypress" />
 // ***********************************************************
 // This example plugins/index.js can be used to load plugins
 //
@@ -11,7 +12,15 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
+/**
+ * @type {Cypress.PluginConfig}
+ */
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+  /* coverage-start
+  require('@cypress/code-coverage/task')(on, config)
+  on('file:preprocessor', require('@cypress/code-coverage/use-babelrc'))
+  return config
+  coverage-end */
 };

cypress/support/commands.js

@@ -1,19 +1,11 @@
-import '@testing-library/cypress/add-commands';
+/* eslint no-console: ["error", { allow: ["log"] }] */
 
 // --- AUTOLOGIN -------------------------------------------------------------
 Cypress.Commands.add('autologin', () => {
   let api_url, user, password;
-  if (Cypress.env('API') === 'guillotina') {
-    api_url = 'http://localhost:8081/db/web';
-    user = 'admin';
-    password = 'admin';
-  } else {
-    api_url = `http://${
-      Cypress.env('BACKEND_HOST') || 'localhost'
-    }:55001/plone`;
-    user = 'admin';
-    password = 'secret';
-  }
+  api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+  user = 'admin';
+  password = 'admin';
 
   return cy
     .request({
@@ -36,21 +28,11 @@ Cypress.Commands.add(
     allow_discussion = false,
   }) => {
     let api_url, auth;
-    if (Cypress.env('API') === 'guillotina') {
-      api_url = 'http://localhost:8081/db/web';
-      auth = {
-        user: 'root',
-        pass: 'root',
-      };
-    } else {
-      api_url = `http://${
-        Cypress.env('BACKEND_HOST') || 'localhost'
-      }:55001/plone`;
-      auth = {
-        user: 'admin',
-        pass: 'secret',
-      };
-    }
+    api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+    auth = {
+      user: 'admin',
+      pass: 'admin',
+    };
     if (contentType === 'File') {
       return cy.request({
         method: 'POST',
@@ -143,6 +125,27 @@ Cypress.Commands.add(
   },
 );
 
+// --- REMOVE CONTENT --------------------------------------------------------
+Cypress.Commands.add('removeContent', (path) => {
+  let api_url, auth;
+  api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+  auth = {
+    user: 'admin',
+    pass: 'admin',
+  };
+  return cy
+    .request({
+      method: 'DELETE',
+      url: `${api_url}/${path}`,
+      headers: {
+        Accept: 'application/json',
+      },
+      auth: auth,
+      body: {},
+    })
+    .then(() => console.log(`${path} removed`));
+});
+
 // --- SET WORKFLOW ----------------------------------------------------------
 Cypress.Commands.add(
   'setWorkflow',
@@ -158,12 +161,10 @@ Cypress.Commands.add(
     include_children = true,
   }) => {
     let api_url, auth;
-    api_url = `http://${
-      Cypress.env('BACKEND_HOST') || 'localhost'
-    }:55001/plone`;
+    api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
     auth = {
       user: 'admin',
-      pass: 'secret',
+      pass: 'admin',
     };
     return cy.request({
       method: 'POST',
@@ -186,10 +187,9 @@ Cypress.Commands.add(
   },
 );
 
+// --- waitForResourceToLoad ----------------------------------------------------------
 Cypress.Commands.add('waitForResourceToLoad', (fileName, type) => {
   const resourceCheckInterval = 40;
-  const maxChecks = 50;
-  const count = [0];
 
   return new Cypress.Promise((resolve) => {
     const checkIfResourceHasBeenLoaded = () => {
@@ -205,42 +205,13 @@ Cypress.Commands.add('waitForResourceToLoad', (fileName, type) => {
         return;
       }
 
-      count[0] += 1;
       setTimeout(checkIfResourceHasBeenLoaded, resourceCheckInterval);
-
-      if (count[0] > maxChecks) {
-        throw new Error(
-          `Timeout resolving resource: ${fileName} (type ${type})`,
-        );
-      }
     };
 
     checkIfResourceHasBeenLoaded();
   });
 });
 
-// --- CREATE CONTENT --------------------------------------------------------
-Cypress.Commands.add('setRegistry', (record, value) => {
-  let api_url, auth;
-  api_url = `http://${Cypress.env('BACKEND_HOST') || 'localhost'}:55001/plone`;
-  auth = {
-    user: 'admin',
-    pass: 'secret',
-  };
-
-  return cy.request({
-    method: 'PATCH',
-    url: `${api_url}/@registry/`,
-    headers: {
-      Accept: 'application/json',
-    },
-    auth: auth,
-    body: {
-      [record]: value,
-    },
-  });
-});
-
 // Low level command reused by `setSelection` and low level command `setCursor`
 Cypress.Commands.add('selection', { prevSubject: true }, (subject, fn) => {
   cy.wrap(subject).trigger('mousedown').then(fn).trigger('mouseup');
@@ -317,7 +288,6 @@ function getTextNode(el, match) {
     return walk.nextNode();
   }
 
-  const nodes = [];
   let node;
   while ((node = walk.nextNode())) {
     if (node.wholeText.includes(match)) {
@@ -332,6 +302,20 @@ function setBaseAndExtent(...args) {
   document.getSelection().setBaseAndExtent(...args);
 }
 
+function getIfExists(
+  selector,
+  successAction = () => {},
+  failAction = () => {},
+) {
+  cy.get('body').then((body) => {
+    if (body.find(selector).length > 0 && successAction) {
+      successAction();
+    } else if (failAction) {
+      failAction();
+    }
+  });
+}
+
 Cypress.Commands.add('navigate', (route = '') => {
   return cy.window().its('appHistory').invoke('push', route);
 });
@@ -343,3 +327,5 @@ Cypress.Commands.add('store', () => {
 Cypress.Commands.add('settings', (key, value) => {
   return cy.window().its('settings');
 });
+
+Cypress.Commands.add('getIfExists', getIfExists);