mirror of
https://github.com/codex-team/editor.js
synced 2024-06-16 20:55:05 +02:00
Tests
This commit is contained in:
parent
0d506c2941
commit
bf3bffbd09
|
@ -244,22 +244,149 @@ describe('Popover', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render custom html content', () => {
|
it('should display custom content item', () => {
|
||||||
const customHtml = document.createElement('div');
|
/**
|
||||||
|
* Block Tune with html as return type of render() method
|
||||||
|
*/
|
||||||
|
class TestTune {
|
||||||
|
public static isTune = true;
|
||||||
|
|
||||||
customHtml.setAttribute('data-cy-name', 'customContent');
|
/** Tune control displayed in block tunes popover */
|
||||||
customHtml.innerText = 'custom html content';
|
public render(): HTMLElement {
|
||||||
const popover = new Popover({
|
const button = document.createElement('button');
|
||||||
customContent: customHtml,
|
|
||||||
items: [],
|
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 => {
|
/** Open block tunes menu */
|
||||||
doc.body.append(popover.getElement());
|
cy.get('[data-cy=editorjs]')
|
||||||
|
.get('.cdx-block')
|
||||||
|
.click();
|
||||||
|
|
||||||
/* Check custom content exists in the popover */
|
cy.get('[data-cy=editorjs]')
|
||||||
cy.get('[data-cy-name=customContent]');
|
.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)', () => {
|
it('should display nested popover (desktop)', () => {
|
||||||
|
|
Loading…
Reference in a new issue