Add popover test for mobile screens

This commit is contained in:
Tanya Fomina 2024-03-23 18:50:02 +03:00
parent 3544d4865a
commit b4bc6fced9

View file

@ -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');
});
});