diff --git a/test/cypress/tests/utils/popover.cy.ts b/test/cypress/tests/utils/popover.cy.ts index 0d89f3ba..8e744792 100644 --- a/test/cypress/tests/utils/popover.cy.ts +++ b/test/cypress/tests/utils/popover.cy.ts @@ -244,22 +244,149 @@ describe('Popover', () => { }); }); - it('should render custom html content', () => { - const customHtml = document.createElement('div'); + it('should display custom content item', () => { + /** + * Block Tune with html as return type of render() method + */ + class TestTune { + public static isTune = true; - customHtml.setAttribute('data-cy-name', 'customContent'); - customHtml.innerText = 'custom html content'; - const popover = new Popover({ - customContent: customHtml, - items: [], + /** Tune control displayed in block tunes popover */ + public render(): HTMLElement { + const button = document.createElement('button'); + + button.classList.add('ce-settings__button'); + button.innerText = 'Tune'; + + return button; + } + } + + /** Create editor instance */ + cy.createEditor({ + tools: { + testTool: TestTune, + }, + tunes: [ 'testTool' ], + data: { + blocks: [ + { + type: 'paragraph', + data: { + text: 'Hello', + }, + }, + ], + }, }); - cy.document().then(doc => { - doc.body.append(popover.getElement()); + /** Open block tunes menu */ + cy.get('[data-cy=editorjs]') + .get('.cdx-block') + .click(); - /* Check custom content exists in the popover */ - cy.get('[data-cy-name=customContent]'); + cy.get('[data-cy=editorjs]') + .get('.ce-toolbar__settings-btn') + .click(); + + /** Check item with custom html content is displayed */ + cy.get('[data-cy=editorjs]') + .get('.ce-popover .ce-popover-item-custom') + .contains('Tune') + .should('be.visible'); + }); + + it.only('should support flipping between custom content items', () => { + /** + * Block Tune with html as return type of render() method + */ + class TestTune1 { + public static isTune = true; + + /** Tune control displayed in block tunes popover */ + public render(): HTMLElement { + const button = document.createElement('button'); + + button.classList.add('ce-settings__button'); + button.innerText = 'Tune1'; + + return button; + } + } + + /** + * Block Tune with html as return type of render() method + */ + class TestTune2 { + public static isTune = true; + + /** Tune control displayed in block tunes popover */ + public render(): HTMLElement { + const button = document.createElement('button'); + + button.classList.add('ce-settings__button'); + button.innerText = 'Tune2'; + + return button; + } + } + + /** Create editor instance */ + cy.createEditor({ + tools: { + testTool1: TestTune1, + testTool2: TestTune2, + }, + tunes: ['testTool1', 'testTool2'], + data: { + blocks: [ + { + type: 'paragraph', + data: { + text: 'Hello', + }, + }, + ], + }, }); + + /** Open block tunes menu */ + cy.get('[data-cy=editorjs]') + .get('.cdx-block') + .click(); + + cy.get('[data-cy=editorjs]') + .get('.ce-toolbar__settings-btn') + .click(); + + /** Press Tab */ + // eslint-disable-next-line cypress/require-data-selectors -- cy.tab() not working here + cy.get('body').tab(); + + /** Check the first custom html item is focused */ + cy.get('[data-cy=editorjs]') + .get('.ce-popover .ce-popover-item-custom .ce-settings__button') + .contains('Tune1') + .should('have.class', 'ce-popover-item--focused'); + + /** Press Tab */ + // eslint-disable-next-line cypress/require-data-selectors -- cy.tab() not working here + cy.get('body').tab(); + + /** Check the second custom html item is focused */ + cy.get('[data-cy=editorjs]') + .get('.ce-popover .ce-popover-item-custom .ce-settings__button') + .contains('Tune2') + .should('have.class', 'ce-popover-item--focused'); + + /** Press Tab */ + // eslint-disable-next-line cypress/require-data-selectors -- cy.tab() not working here + cy.get('body').tab(); + + /** Check that default popover item got focused */ + cy.get('[data-cy=editorjs]') + .get('[data-item-name=move-up]') + .should('have.class', 'ce-popover-item--focused'); }); it('should display nested popover (desktop)', () => {