test: try tests from volto addon

cypress/e2e/01-blocks-accordion.cy.js

@@ -0,0 +1,129 @@
+import { slateBeforeEach, slateAfterEach } from '../support/e2e';
+
+describe('Blocks Tests', () => {
+  beforeEach(slateBeforeEach);
+  afterEach(slateAfterEach);
+
+  it('Accordion Block: Empty', () => {
+    // Change page title
+    cy.clearSlateTitle();
+    cy.getSlateTitle().type('My Add-on Page');
+
+    cy.get('.documentFirstHeading').contains('My Add-on Page');
+
+    cy.getSlate().click();
+
+    // Add metadata block
+    cy.get('.ui.basic.icon.button.block-add-button').first().click();
+    cy.get('.blocks-chooser .title').contains('Common').click();
+    cy.get('.content.active.common .button.accordion')
+      .contains('Accordion')
+      .click({ force: true });
+
+    // Save
+    cy.get('#toolbar-save').click();
+    cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
+
+    // then the page view should contain our changes
+    cy.contains('My Add-on Page');
+  });
+
+  it('Accordion Block: Change Title', () => {
+    cy.clearSlateTitle();
+    cy.getSlateTitle().type('My Add-on Page');
+
+    cy.get('.documentFirstHeading').contains('My Add-on Page');
+
+    cy.getSlate().click();
+
+    // Add accordion block
+    cy.get('.ui.basic.icon.button.block-add-button').first().click();
+    cy.get('.blocks-chooser .title').contains('Common').click();
+    cy.get('.content.active.common .button.accordion')
+      .contains('Accordion')
+      .click({ force: true });
+
+    // By default all should be collapsed (no active class on first)
+    cy.get('.accordion:nth-child(2)').should('not.have.class', 'active');
+
+    cy.get('.accordion:nth-child(2) > .title input')
+      .click()
+      .type('Accordion panel 1')
+      .should('have.value', 'Accordion panel 1');
+
+    cy.get('[id="field-title_size"] .react-select__value-container')
+      .click()
+      .type('h2{enter}');
+
+    // Save
+    cy.get('#toolbar-save').click();
+    cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page');
+
+    // then the page view should contain our changes
+    cy.contains('My Add-on Page');
+    cy.get('h2.accordion-title').contains('Accordion panel 1');
+  });
+
+  it('Accordion Block: add accordion content', () => {
+    // Change page title
+    cy.clearSlateTitle();
+    cy.getSlateTitle().type('My Add-on Page');
+
+    cy.get('.documentFirstHeading').contains('My Add-on Page');
+
+    cy.getSlate().click();
+
+    // Add block
+    cy.get('.ui.basic.icon.button.block-add-button').first().click();
+    cy.get('.blocks-chooser .title').contains('Common').click();
+    cy.get('.content.active.common .button.accordion')
+      .contains('Accordion')
+      .click({ force: true });
+
+    // enter title for first item in accordion (it is first of the accordion but second as child)
+    cy.get('.accordion:nth-child(2) > .title input')
+      .click()
+      .type('panel 1')
+      .should('have.value', 'panel 1');
+
+    // enter title for third item in accordion
+    // enter content
+    cy.get('.accordion:nth-child(3) > .title input').click();
+    cy.get('.accordion:nth-child(3) > .title input').type('panel 2');
+    cy.get('.accordion:nth-child(3) > .title > .icon').click();
+    cy.wait(500);
+
+    // the cypress test runs with both slate and draftjs.
+    cy.getIfExists(
+      '.accordion:nth-child(3) .content .public-DraftStyleDefault-block:nth-child(1)',
+      () => {
+        cy.get(
+          '.accordion:nth-child(3) .content .public-DraftStyleDefault-block:nth-child(1)',
+        )
+          .should('have.value', '')
+          .invoke('attr', 'tabindex', 1)
+          .type('children', { delay: 50 });
+      },
+      () => {
+        cy.get('.accordion:nth-child(3) .content div.text-slate-editor-inner')
+          .should('have.value', '')
+          .invoke('attr', 'tabindex', 1)
+          .click()
+          .type('children', { delay: 50 });
+      },
+    );
+
+    cy.get('#toolbar-save path').click({ force: true });
+    cy.wait(1000);
+
+    //after saving
+    cy.get('div.accordion-title > span').contains('panel 2');
+    // after save, the 3 child becomes second
+    cy.get('.accordion:nth-child(2) > .title > .icon').click();
+    cy.get('div.content')
+      .should('have.class', 'active')
+      .within(() => {
+        cy.get('p').contains('children');
+      });
+  });
+});

cypress/e2e/02-dexterity-controlpanel-layout.cy.js

@@ -0,0 +1,159 @@
+import { slateLayoutBeforeEach, slateLayoutAfterEach } from '../support/e2e';
+
+describe('ControlPanel: Dexterity Content-Types Layout', () => {
+  beforeEach(slateLayoutBeforeEach);
+  afterEach(slateLayoutAfterEach);
+
+  it('Edit Blocks Layout for Book', () => {
+    cy.visit('/controlpanel/dexterity-types');
+    cy.waitForResourceToLoad('@navigation');
+    cy.waitForResourceToLoad('@breadcrumbs');
+    cy.waitForResourceToLoad('@actions');
+    cy.waitForResourceToLoad('@types');
+
+    cy.get('a[href="/controlpanel/dexterity-types/book"]').should(
+      'have.text',
+      'book',
+    );
+
+    cy.visit('/controlpanel/dexterity-types/book/layout');
+    cy.get('#page-controlpanel-layout').contains(
+      'Can not edit Layout for book',
+    );
+    cy.get('#page-controlpanel-layout button').click();
+
+    // Wait a bit for draftjs to load, without this the title block
+    // custom placeholder is missing and cypress gives a timeout error
+    cy.wait(1000);
+    cy.get('input[id="field-placeholder"]').type('Book title');
+    cy.get('label[for="field-required"]').click();
+    cy.get('label[for="field-fixed"]').click();
+
+    cy.getSlate().click();
+
+    cy.get('.ui.basic.icon.button.block-add-button:visible').click();
+    cy.get('.blocks-chooser .title').contains('Common').click();
+    cy.get('.content.active.common .button.accordion')
+      .contains('Accordion')
+      .click();
+
+    cy.get('#field-allowedBlocks.react-select-container')
+      .click()
+      .type('Image{enter}');
+    cy.get('#field-allowedBlocks.react-select-container')
+      .click()
+      .type('Text{enter}');
+
+    // By default all should be collapsed (no active class on first)
+    cy.get('.accordion:nth-child(2)').should('not.have.class', 'active');
+
+    cy.get('.accordion:nth-child(2) > .title input')
+      .click()
+      .type('Chapter 1')
+      .should('have.value', 'Chapter 1');
+
+    cy.get('.accordion:nth-child(2) > .title > .icon').click();
+    cy.wait(500);
+
+    cy.get(
+      '.accordion:nth-child(2) .content .slate-editor [contenteditable=true]',
+    )
+      .last()
+      .focus()
+      .click()
+      .type('Once upon a time...{enter}');
+
+    cy.get(
+      '.accordion:nth-child(2) .content .slate-editor [contenteditable=true]',
+    )
+      .last()
+      .focus()
+      .click()
+      .type('/');
+    cy.wait(500);
+    cy.get('.power-user-menu a.item').should('have.length', 1);
+
+    cy.get('.accordion:nth-child(3) > .title input')
+      .click()
+      .type('Chapter 2')
+      .should('have.value', 'Chapter 2');
+
+    cy.get('#toolbar-save').click();
+
+    cy.visit('/cypress');
+    cy.waitForResourceToLoad('@navigation');
+    cy.waitForResourceToLoad('@breadcrumbs');
+    cy.waitForResourceToLoad('@actions');
+    cy.waitForResourceToLoad('@types');
+
+    cy.get('button[class="add"]').click();
+    cy.get('#toolbar-add-book').click();
+    cy.get('.block.title').contains('Book title');
+
+    // Change book title
+    cy.clearSlateTitle();
+    cy.getSlateTitle().type('My First Book');
+    cy.get('.documentFirstHeading').contains('My First Book');
+
+    cy.get('.accordion:nth-child(3) > .title > .icon').click();
+    cy.wait(500);
+    cy.get(
+      '.accordion:nth-child(3) .content .slate-editor [contenteditable=true]',
+    )
+      .last()
+      .focus()
+      .click()
+      .type('The quick brown fox jumps over the lazy dog{enter}');
+
+    cy.get(
+      '.accordion:nth-child(3) .content .slate-editor [contenteditable=true]',
+    )
+      .last()
+      .focus()
+      .click()
+      .type('/');
+    cy.wait(500);
+    cy.get('.power-user-menu a.item').should('have.length', 1);
+    cy.get(
+      '.accordion:nth-child(3) .content .slate-editor [contenteditable=true]',
+    )
+      .last()
+      .focus()
+      .click()
+      .type('Image{enter}');
+    cy.get('.accordion:nth-child(3) .content .block.image input[type="text"]')
+      .click()
+      .type(
+        'https://eea.github.io/volto-eea-design-system/img/eea_icon.png{enter}',
+      );
+
+    cy.get('.accordion:nth-child(4) > .title input')
+      .click()
+      .type('Chapter 3')
+      .should('have.value', 'Chapter 3');
+
+    cy.get('.accordion-block legend').click();
+    cy.get('[id="field-title_size"] .react-select__value-container')
+      .click()
+      .type('h2{enter}');
+
+    cy.get('#toolbar-save').click();
+    cy.get('.documentFirstHeading').contains('My First Book');
+    cy.get('.accordion:nth-child(1) > h2.title').contains('Chapter 1');
+    cy.get('.accordion:nth-child(2) > h2.title').contains('Chapter 2');
+    cy.get('.accordion:nth-child(3) > h2.title').contains('Chapter 3');
+
+    cy.get('.accordion:nth-child(1) > h2.title').click();
+    cy.get('.accordion:nth-child(1) .content').contains('Once upon a time...');
+
+    cy.get('.accordion:nth-child(2) > h2.title').click();
+    cy.get('.accordion:nth-child(2) .content').contains(
+      'The quick brown fox jumps over the lazy dog',
+    );
+    cy.get('.accordion:nth-child(2) .content img').should(
+      'have.attr',
+      'src',
+      'https://eea.github.io/volto-eea-design-system/img/eea_icon.png',
+    );
+  });
+});

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/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 */
 };