diff --git a/Makefile b/Makefile index 08175a5..62ced47 100644 --- a/Makefile +++ b/Makefile @@ -86,6 +86,7 @@ i18n: ## i18n .PHONY: cypress-run cypress-run: ## Run cypress integration tests + rm -rf .nyc_output NODE_ENV=development $(NODE_MODULES)/cypress/bin/cypress run .PHONY: cypress-open diff --git a/cypress/e2e/01-block-columns.cy.js b/cypress/e2e/01-block-columns.cy.js index 813baef..bd12acb 100644 --- a/cypress/e2e/01-block-columns.cy.js +++ b/cypress/e2e/01-block-columns.cy.js @@ -24,16 +24,23 @@ describe('Blocks Tests', () => { cy.get('.field-wrapper-title #field-title').last().type('Column test'); cy.get('.field-wrapper-data .columns-area button').last().click(); - cy.get('.columns-area .drag.handle.wrapper') - .first() - .trigger('mousedown', { which: 1 }, { force: true }) - .trigger('mousemove', 0, 60, { force: true }) - .trigger('mouseup'); - cy.get('.field-wrapper-gridCols #field-gridCols').click(); cy.get('.react-select__menu').contains('25').click(); + cy.get('.columns-block .columns-header') + .click() + .trigger('keydown', { keyCode: 38, which: 38 }); + + cy.get('.columns-block .columns-header') + .click() + .trigger('keydown', { keyCode: 40, which: 40 }); + + cy.get('.columns-block .columns-header') + .click() + .trigger('keydown', { keyCode: 13, which: 13 }); + cy.get('[contenteditable=true]').first().focus().click(); + cy.get('.columns-block [contenteditable=true]') .eq(0) .focus() @@ -48,16 +55,69 @@ describe('Blocks Tests', () => { .eq(2) .focus() .click() - .type('Third'); + .type('/description{enter}Third'); + cy.get('.block-toolbar button').eq(1).click(); cy.get( '.field-wrapper-grid_vertical_align #field-grid_vertical_align', ).click(); cy.get('.react-select__menu').contains('Middle').click(); + + cy.get('.field-wrapper-backgroundColor .ui.huge.button').click(); + cy.get('.github-picker.color-picker span').eq(3).click(); + cy.get('.field-wrapper-backgroundColor .ui.compact.button').click(); cy.get('.field-wrapper-backgroundColor .ui.huge.button').click(); cy.get('.github-picker.color-picker span').eq(3).click(); + cy.get( + '.inline.field.field-wrapper-padding-slider .slider-widget-wrapper .slider-knob.single', + ).dblclick(); + cy.get( + '.inline.field.field-wrapper-padding-slider .slider-widget-wrapper input', + ).type('3{enter}'); + cy.get( + '.inline.field.field-wrapper-padding-slider .slider-widget-wrapper .slider-knob.single', + ).trigger('mousedown', { which: 1 }); + cy.get( + '.inline.field.field-wrapper-padding-slider .slider-widget-wrapper .semantic_ui_range_inner', + ) + .trigger('mousemove', { clientX: 500 }) + .trigger('mouseup'); + + cy.get( + '.inline.field.field-wrapper-padding-lockSize .wrapper .checkbox label[for="field-padding-lockSize"]', + ).click(); + + cy.get('.slider-widget-wrapper .slider-knob.single').dblclick(); + + cy.get('#field-padding-unit .react-select__control').click(); + cy.get('.react-select__menu-list').contains('percentage').click(); + + cy.get('#field-padding-unit .react-select__control').click(); + cy.get('.react-select__menu-list').contains('em').click(); + + cy.get('#field-padding-unit .react-select__control').click(); + cy.get('.react-select__menu-list').contains('rem').click(); + + cy.get('#field-padding-unit .react-select__control').click(); + cy.get('.react-select__menu-list').contains('No value').click(); + + cy.get('.columns-block [contenteditable=true]').eq(0).focus().click(); + cy.get('.block-toolbar button').eq(1).click(); + + cy.get( + '.field-wrapper-grid_vertical_align #field-grid_vertical_align', + ).click(); + cy.get('.react-select__menu').contains('Middle').click(); + + cy.get('.field-wrapper-backgroundColor .ui.huge.button').click(); + cy.get('.github-picker.color-picker span').eq(3).click(); + + cy.get('.sidebar-container #sidebar-properties .ui.segment button') + .eq(1) + .click(); + // Save cy.get('#toolbar-save').click(); cy.url().should('eq', Cypress.config().baseUrl + '/cypress/my-page'); diff --git a/src/ColumnsBlock/utils.test.js b/src/ColumnsBlock/utils.test.js new file mode 100644 index 0000000..02c5d44 --- /dev/null +++ b/src/ColumnsBlock/utils.test.js @@ -0,0 +1,109 @@ +import config from '@plone/volto/registry'; + +import { + getColumns, + hasColumns, + forEachColumn, + columnIsEmpty, + empty, + defaultNewColumn, +} from './utils'; + +describe('getColumns', () => { + it('should return an array of column IDs and their corresponding data', () => { + const data = { + blocks_layout: { + items: ['1', '2'], + }, + blocks: { + '1': { name: 'First' }, + '2': { name: 'Second' }, + }, + }; + expect(getColumns(data)).toEqual([ + ['1', { name: 'First' }], + ['2', { name: 'Second' }], + ]); + }); + + it('should return an array of column IDs and their corresponding data', () => { + const data = { + blocks_layout: { + items: undefined, + }, + blocks: { + '1': { name: 'First' }, + '2': { name: 'Second' }, + }, + }; + expect(getColumns(data)).toEqual([]); + }); +}); + +describe('hasColumns', () => { + it('should return true if data has columns', () => { + const data = { + blocks_layout: { + items: ['1', '2'], + }, + }; + expect(hasColumns(data)).toBe(true); + }); + + it('should return false if data does not have columns', () => { + const data = {}; + expect(hasColumns(data)).toBe(false); + }); +}); + +describe('forEachColumn', () => { + it('should call callback for each column', () => { + const data = { + blocks_layout: { + items: ['1', '2'], + }, + blocks: { + '1': { name: 'First' }, + '2': { name: 'Second' }, + }, + }; + const callback = jest.fn(); + forEachColumn(data, callback); + expect(callback).toHaveBeenCalledTimes(2); + }); +}); + +describe('columnIsEmpty', () => { + it('should return true if column is empty', () => { + const data = {}; + expect(columnIsEmpty(data)).toBe(true); + }); + + it('should return false if column is not empty', () => { + const data = { + blocks_layout: { + items: ['1'], + }, + }; + expect(columnIsEmpty(data)).toBe(false); + }); +}); + +describe('empty', () => { + it('should return data for specified number of empty columns', () => { + const result = empty(2); + expect(Object.keys(result.blocks)).toHaveLength(2); + expect(result.blocks_layout.items).toHaveLength(2); + }); +}); + +describe('defaultNewColumn', () => { + it('should return data for new column with default block type', () => { + const result = defaultNewColumn(); + const [id] = Object.keys(result.blocks); + expect(result.blocks[id]['@type']).toEqual( + config.settings.defaultBlockType, + ); + expect(result.blocks_layout.items).toEqual([id]); + }); +}); diff --git a/src/utils.test.js b/src/utils.test.js index aa04f17..a090eae 100644 --- a/src/utils.test.js +++ b/src/utils.test.js @@ -23,7 +23,6 @@ describe('cloneColumnsBlockData', () => { }, }, }; - getBlocks.mockReturnValue([['block1', mockBlockData.data.blocks.block1]]); config.blocks.blocksConfig = { test: {},