mirror of
https://github.com/codex-team/editor.js
synced 2024-05-27 19:12:56 +02:00
Add popover test for mobile screens
This commit is contained in:
parent
3544d4865a
commit
b4bc6fced9
|
@ -259,7 +259,7 @@ describe('Popover', () => {
|
|||
});
|
||||
});
|
||||
|
||||
it('should display nested popover', () => {
|
||||
it('should display nested popover (desktop)', () => {
|
||||
/** Tool class to test how it is displayed inside block tunes popover */
|
||||
class TestTune {
|
||||
public static isTune = true;
|
||||
|
@ -333,4 +333,112 @@ describe('Popover', () => {
|
|||
.get('[data-item-name="nested-test-item"]')
|
||||
.should('be.visible');
|
||||
});
|
||||
|
||||
|
||||
it('should dysplay nested popover (mobile)', () => {
|
||||
/** Tool class to test how it is displayed inside block tunes popover */
|
||||
class TestTune {
|
||||
public static isTune = true;
|
||||
|
||||
/** Tool data displayed in block tunes popover */
|
||||
public render(): TunesMenuConfig {
|
||||
return {
|
||||
icon: 'Icon',
|
||||
title: 'Tune',
|
||||
toggle: 'key',
|
||||
name: 'test-item',
|
||||
children: {
|
||||
items: [
|
||||
{
|
||||
icon: 'Icon',
|
||||
title: 'Title',
|
||||
name: 'nested-test-item',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
cy.viewport('iphone-6+');
|
||||
|
||||
|
||||
/** Create editor instance */
|
||||
cy.createEditor({
|
||||
tools: {
|
||||
testTool: TestTune,
|
||||
},
|
||||
tunes: [ 'testTool' ],
|
||||
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();
|
||||
|
||||
/** Check item with children has arrow icon */
|
||||
cy.get('[data-cy=editorjs]')
|
||||
.get('[data-item-name="test-item"]')
|
||||
.get('.ce-popover-item__icon--chevron-right')
|
||||
.should('be.visible');
|
||||
|
||||
/** Click the item */
|
||||
cy.get('[data-cy=editorjs]')
|
||||
.get('[data-item-name="test-item"]')
|
||||
.click();
|
||||
|
||||
/** Check child item displayed */
|
||||
cy.get('[data-cy=editorjs]')
|
||||
.get('.ce-popover__container')
|
||||
.get('[data-item-name="nested-test-item"]')
|
||||
.should('be.visible');
|
||||
|
||||
/** Check header displayed */
|
||||
cy.get('[data-cy=editorjs]')
|
||||
.get('.ce-popover-header')
|
||||
.should('have.text', 'Tune');
|
||||
|
||||
/** Check back button displayed */
|
||||
cy.get('[data-cy=editorjs]')
|
||||
.get('.ce-popover__container')
|
||||
.get('.ce-popover-header__back-button')
|
||||
.should('be.visible');
|
||||
|
||||
/** Click back button */
|
||||
cy.get('[data-cy=editorjs]')
|
||||
.get('.ce-popover__container')
|
||||
.get('.ce-popover-header__back-button')
|
||||
.click();
|
||||
|
||||
/** Check child item is not displayed */
|
||||
cy.get('[data-cy=editorjs]')
|
||||
.get('.ce-popover__container')
|
||||
.get('[data-item-name="nested-test-item"]')
|
||||
.should('not.exist');
|
||||
|
||||
/** Check back button is not displayed */
|
||||
cy.get('[data-cy=editorjs]')
|
||||
.get('.ce-popover__container')
|
||||
.get('.ce-popover-header__back-button')
|
||||
.should('not.exist');
|
||||
|
||||
/** Check header is not displayed */
|
||||
cy.get('[data-cy=editorjs]')
|
||||
.get('.ce-popover-header')
|
||||
.should('not.exist');
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue