mirror of
https://github.com/codex-team/editor.js
synced 2024-06-11 18:32:36 +02:00
07b1ce2aca
* Add new popover class * Add flipper * confirmation * confirmation * Add confirmation support * Add search * Add toggle group support and update popover tests * Add custom content support * Fix scroll issue * Add mobile version * Integration * Fix animation * Cleanup * Fix popover position for narrow mode * Fix tests * Update version and changelog * Rename css classes * Move files * Stop using PopoverItem from outside of popover context * Fix jsdoc * Move error animation to popover item * Update css variables * Update docs/CHANGELOG.md Co-authored-by: Ilya Maroz <37909603+ilyamore88@users.noreply.github.com> * Update src/components/block-tunes/block-tune-move-down.ts Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Update src/components/block-tunes/block-tune-move-up.ts Co-authored-by: Peter Savchenko <specc.dev@gmail.com> * Fixes * Fix imports * Fix toolbox close event * Move search-input file * Fix comment * Rename method * Cleanup * Remove onFlip callback from popover item * Rename * Fix removing event listener * Move popover animations to popover.css file * Cleanup styles * Fix jsdoc * Fix confirmation chains * Close toolbox oly when it's open * Change activation error animation * Update version and changelog * Fix overlay * Update icon border-radius on mobile * Disable item text select * Update changelog * Update yarn.lock * Add rc postfix to version --------- Co-authored-by: Ilya Maroz <37909603+ilyamore88@users.noreply.github.com> Co-authored-by: Peter Savchenko <specc.dev@gmail.com>
242 lines
5.9 KiB
TypeScript
242 lines
5.9 KiB
TypeScript
import { TunesMenuConfig } from '../../../../types/tools';
|
|
|
|
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
|
|
describe('Editor Tunes Api', () => {
|
|
it('should render a popover entry for block tune if configured', () => {
|
|
/** Test tune that should appear be rendered in block tunes menu */
|
|
class TestTune {
|
|
/** Set Tool is Tune */
|
|
public static readonly isTune = true;
|
|
|
|
/** Tune's appearance in block settings menu */
|
|
public render(): TunesMenuConfig {
|
|
return {
|
|
icon: 'ICON',
|
|
title: 'Test tune',
|
|
name: 'testTune',
|
|
|
|
onActivate: (): void => { },
|
|
};
|
|
}
|
|
|
|
/** Save method stub */
|
|
public save(): void {}
|
|
}
|
|
|
|
cy.createEditor({
|
|
tools: {
|
|
testTune: TestTune,
|
|
},
|
|
tunes: [ 'testTune' ],
|
|
}).as('editorInstance');
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-block')
|
|
.type('some text')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('.ce-toolbar__settings-btn')
|
|
.click();
|
|
|
|
cy.get('[data-item-name=testTune]').should('exist');
|
|
});
|
|
|
|
it('should render several popover entries for block tune if configured', () => {
|
|
/** Test tune that should appear be rendered in block tunes menu */
|
|
class TestTune {
|
|
/** Set Tool is Tune */
|
|
public static readonly isTune = true;
|
|
|
|
/** Tune's appearance in block settings menu */
|
|
public render(): TunesMenuConfig {
|
|
return [
|
|
{
|
|
icon: 'ICON1',
|
|
title: 'Tune entry 1',
|
|
name: 'testTune1',
|
|
|
|
onActivate: (): void => { },
|
|
}, {
|
|
icon: 'ICON2',
|
|
title: 'Tune entry 2',
|
|
name: 'testTune2',
|
|
|
|
onActivate: (): void => { },
|
|
},
|
|
];
|
|
}
|
|
|
|
/** Save method stub */
|
|
public save(): void {}
|
|
}
|
|
|
|
cy.createEditor({
|
|
tools: {
|
|
testTune: TestTune,
|
|
},
|
|
tunes: [ 'testTune' ],
|
|
}).as('editorInstance');
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-block')
|
|
.type('some text')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('.ce-toolbar__settings-btn')
|
|
.click();
|
|
|
|
cy.get('[data-item-name=testTune1]').should('exist');
|
|
cy.get('[data-item-name=testTune2]').should('exist');
|
|
});
|
|
|
|
it('should display custom html returned by tune\'s render() method inside tunes menu', () => {
|
|
const sampleText = 'sample text';
|
|
|
|
/** Test tune that should appear be rendered in block tunes menu */
|
|
class TestTune {
|
|
/** Set Tool is Tune */
|
|
public static readonly isTune = true;
|
|
|
|
/** Tune's appearance in block settings menu */
|
|
public render(): HTMLElement {
|
|
const element = document.createElement('div');
|
|
|
|
element.textContent = sampleText;
|
|
|
|
return element;
|
|
}
|
|
|
|
/** Save method stub */
|
|
public save(): void {}
|
|
}
|
|
|
|
cy.createEditor({
|
|
tools: {
|
|
testTune: TestTune,
|
|
},
|
|
tunes: [ 'testTune' ],
|
|
}).as('editorInstance');
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-block')
|
|
.type('some text')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('.ce-toolbar__settings-btn')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('.ce-popover')
|
|
.should('contain.text', sampleText);
|
|
});
|
|
|
|
it('should support label alias', () => {
|
|
/** Test tune that should appear be rendered in block tunes menu */
|
|
class TestTune {
|
|
/** Set Tool is Tune */
|
|
public static readonly isTune = true;
|
|
|
|
/** Tune's appearance in block settings menu */
|
|
public render(): TunesMenuConfig {
|
|
return [
|
|
{
|
|
icon: 'ICON1',
|
|
name: 'testTune1',
|
|
onActivate: (): void => { },
|
|
|
|
// Set text via title property
|
|
title: 'Tune entry 1',
|
|
}, {
|
|
icon: 'ICON2',
|
|
name: 'testTune2',
|
|
onActivate: (): void => { },
|
|
|
|
// Set text via label property
|
|
label: 'Tune entry 2',
|
|
},
|
|
];
|
|
}
|
|
|
|
/** Save method stub */
|
|
public save(): void {}
|
|
}
|
|
|
|
cy.createEditor({
|
|
tools: {
|
|
testTune: TestTune,
|
|
},
|
|
tunes: [ 'testTune' ],
|
|
}).as('editorInstance');
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-block')
|
|
.type('some text')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('.ce-toolbar__settings-btn')
|
|
.click();
|
|
|
|
|
|
/** Check both tunes have correct text */
|
|
cy.get('[data-item-name=testTune1]').contains('Tune entry 1');
|
|
cy.get('[data-item-name=testTune2]').contains('Tune entry 2');
|
|
});
|
|
|
|
it('should display installed tunes above default tunes', () => {
|
|
/** Test tune that should appear be rendered in block tunes menu */
|
|
class TestTune {
|
|
/** Set Tool is Tune */
|
|
public static readonly isTune = true;
|
|
|
|
/** Tune's appearance in block settings menu */
|
|
public render(): TunesMenuConfig {
|
|
return [
|
|
{
|
|
icon: 'ICON',
|
|
label: 'Tune entry',
|
|
name: 'test-tune',
|
|
|
|
onActivate: (): void => { },
|
|
},
|
|
];
|
|
}
|
|
|
|
/** Save method stub */
|
|
public save(): void {}
|
|
}
|
|
|
|
cy.createEditor({
|
|
tools: {
|
|
testTune: TestTune,
|
|
},
|
|
tunes: [ 'testTune' ],
|
|
}).as('editorInstance');
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('div.ce-block')
|
|
.type('some text')
|
|
.click();
|
|
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('.ce-toolbar__settings-btn')
|
|
.click();
|
|
|
|
/** Check test tune is inserted at index 0 */
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('.ce-settings .ce-popover-item')
|
|
.eq(0)
|
|
.should('have.attr', 'data-item-name', 'test-tune' );
|
|
|
|
/** Check default Move Up tune is inserted below the test tune */
|
|
cy.get('[data-cy=editorjs]')
|
|
.get('.ce-settings .ce-popover-item')
|
|
.eq(1)
|
|
.should('have.attr', 'data-item-name', 'move-up' );
|
|
});
|
|
});
|