editor.js/test/cypress/tests/block-ids.spec.ts
Peter Savchenko ff91466b14
feat(toolbar): toolbar refactored and ui improved (#1815)
* chore(block-tune-toggler): toggler moved to the left (draft)

* toolbox ui updated

* fixd caret jumpling, improved some styles

* toolbar moving by block-hover

- UI module triggers 'block-hovered' event
- Toolbar uses 'block-hovered' for appearing
- `currentBlock` setter added to the BlockManager
- (reactangle-selection): the throttling added to the mousemove and scroll handlers
- `getBlockIndex` method added to the Api
- (api-blocks): toolbar moving logic removed from `blocks.move()` and `blocks.swap()` methods. Instead, MoveUp and MoveDown tunes uses Toolbar API

* the dark-theme to the example-dev.html

* positioning improved

* fix(rectangle-selection): first click after RS does not clears selection state

* toolbox position fixed

* the toolbox module became a standalone class

- Toolbox became a standalone class from the editor module. It can be accessed only via the owner (the Toolbar module)
- (api.blocks) the insert() method now has the `replace` param. Also, it returns inserted Block API now.

* new(api.listeners): `on()` now returns the listener id. The new `offById()` method added

* fix bug with Tab pressing on hovered but not focused block

* mobile version improved

* upd example dev

* small updaets

* add nested-list

* linting

* (api.toolbar): `toggleBlockSettings` now fires toggling event with the same state

* EventDispatcher used instead of callbacks for the Toolbox

* UIApi added

* fix ci

* git submodules removed from the ci flow

* add paragraph submodule to the ci flow

* Update CHANGELOG.md

* Update package.json

* use ubuntu-latest for chrome ci
2021-11-24 21:14:24 +03:00

132 lines
2.7 KiB
TypeScript

/* eslint-disable @typescript-eslint/no-explicit-any */
import Header from '@editorjs/header';
import { nanoid } from 'nanoid';
describe.only('Block ids', () => {
beforeEach(() => {
if (this && this.editorInstance) {
this.editorInstance.destroy();
} else {
cy.createEditor({
tools: {
header: Header,
},
}).as('editorInstance');
}
});
it('Should generate unique block ids for new blocks', () => {
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.click()
.type('First block ')
.type('{enter}')
.get('div.ce-block')
.last()
.type('Second block ')
.type('{enter}');
cy.get('[data-cy=editorjs]')
.get('div.ce-toolbar__plus')
.click();
cy.get('[data-cy=editorjs]')
.get('li.ce-toolbox__button[data-tool=header]')
.click();
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.last()
.click()
.type('Header');
cy.get('@editorInstance')
.then(async (editor: any) => {
const data = await editor.save();
data.blocks.forEach(block => {
expect(typeof block.id).to.eq('string');
});
});
});
it('should preserve passed ids', () => {
const blocks = [
{
id: nanoid(),
type: 'paragraph',
data: {
text: 'First block',
},
},
{
id: nanoid(),
type: 'paragraph',
data: {
text: 'Second block',
},
},
];
cy.get('@editorInstance')
.render({
blocks,
});
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.first()
.click()
.type('{movetoend} Some more text');
cy.get('@editorInstance')
.then(async (editor: any) => {
const data = await editor.save();
data.blocks.forEach((block, index) => {
expect(block.id).to.eq(blocks[index].id);
});
});
});
it('should preserve passed ids if blocks were added', () => {
const blocks = [
{
id: nanoid(),
type: 'paragraph',
data: {
text: 'First block',
},
},
{
id: nanoid(),
type: 'paragraph',
data: {
text: 'Second block',
},
},
];
cy.get('@editorInstance')
.render({
blocks,
});
cy.get('[data-cy=editorjs]')
.get('div.ce-block')
.first()
.click()
.type('{enter}')
.next()
.type('Middle block');
cy.get('@editorInstance')
.then(async (editor: any) => {
const data = await editor.save();
expect(data.blocks[0].id).to.eq(blocks[0].id);
expect(data.blocks[2].id).to.eq(blocks[1].id);
});
});
});